戻る

落葉の作成資料

準備

下記基本の形をコピーしてテラパッド(メモ帳)に貼り付ける。

名前を付けて保存　main.html

準備

Otiba.jsともみじ他画像を一括ダウンロード

準備

画像2枚　01.Jpg、02.jpg

準備

homu.gif, bgmを挿入する時***.mid, ***.js

フォルダの中

準備したものすべて入れる

main.html、otiba.js,もみじ他画像、01.jpg,02.jpg,

homu.gif,***.js,***.mid

１）基本の形

<html>
<head>
<title>タイトル名</title>
</head>
<body>
ここから本文

</body>
</html>

２）本文の入力

　　タイトル

　　文字入力

　　画像ロールオーバー

ここから本文～この文章を削除して下記を入力する。

<h2>タイトル入力</h2>

</center>

大きい画像1枚の時<img src="03.jpg">

３）落葉ソース

落葉ソース挿入は<body>～</body>の間に

コピーしてテラパッドに貼り付ける。

main.htmlの出来上がりです。

文字

文字の色を変える

文字のサイズを変える

文字のサイズは数値(1から７まで）を使用

1～7の数字ではなく、-3～+3でも変わります。

<font face="フォント名">文字</font>
文字(フォント)の種類を変える

背景

<body bgcolor="色">　背景に色を入れる時　　　　

<body background="絵のファイル名"> 背景に画像を入れる時

場所body後に色を入力する

</center>

本文や画像を中心にする

<center>本文の最初に入れる

</center>本文の最後に入れる

</body>この前に入力

タイトル

<h数値>タイトル入力</h数値>　　

見出しにはいろいろな大きさが有ります

大きさは数値（１から６まで）を変えると変わります

上下に1行空白が入ります

（例）<h2>タイトル入力</h2>

ロールオーバー

<img src="最初に表示する画像のURL"

onmouseover="this.src='マウスが重なった時に表示する画像のURL'"

onmouseout="this.src='マウスが離れた時に表示する画像のURL'">

画像サイズ600×450で名前01.jpgと02.jpgにしたとき

onMousemoveと記載してましたがonmouseoverに訂正しました。

通常はonmouseoverを使用した方が良いとのこと。

右寄せ、中央寄せ、左寄せは<p> </p>の部分で設定します。

<br>の改行しないでも前後に空白が出来ます。

<p> </p>の間は一つのブロックで、そのブロック全てが同じ寄り方になります。

左寄せ

中央寄せ

右寄せ

<p>インタラクティブ編の風流な『落葉』から<br>

プログラムともみじ他画像をダウンロードしました。</p>

リンク

ダウンロードしたHPのアドレスと画像

<a>の中に target="_blank" を入れると新しいウィンドウでページを開くことが出来ます。

落葉ソース

下記ソース挿入は<body>～</body>の間に

<a href="http://plusone.jpn.org/javascript/" style="text-decoration:none;" target="_blank">javascript</a></div>