ロールオーバーボタンの作成

第８章・・・・ロールオーバーイメージを追加しよう

[新規ロールオーバーボタンのページを作成して公開]



次に、前回の授業で準備した↓のボタン素材(ジェネレータまたはPhotoshop or Illustrator)を使って作成したものを使って

オンラインジェネレーター


kadaisiteの一つ上の階層にrollover.htmlファイルを新規作成し、
下記の条件にあわせて編集し完成させましょう。
(下記の条件はすべて今までに教科書にでてきたもので、
※P.101〜P.102でかなり省略された中でやったことになっています。)





事前の準備
ロールオーバー用のボタン画像を2個作成する。
(1個目は最初の表示のボタン、２個目はマウスを画像の上にもってきた時の表示用のボタン)

1.Dreamweaverを起動
2.画面上の「ファイル」内の新規から
　「空白ページ」ページタイプ:「HTML」レイアウト:<なし>を選択する。
3.出てきたHTMファイルをrollover.htmlという名前で自分のサイトのフォルダに保存する。
4.画面上の「挿入」の中の「レイアウトオブジェクト」から「Divタグ」を選択
5.idの欄にcontentと記入してOKをクリック
6.「 id "content" の内容がここに入ります」の文字を選択し
7.画面上の「挿入」の中の「レイアウトオブジェクト」から「Divタグ」を選択
8.idの欄にalphaと記入してOKをクリック


9.コード内の「 id "content" の内容がここに入ります」の文字を消す

10.コードの
<div id="alpha">　(ココ)　</div>
をクリック

11.画面上の「挿入」内の「イメージオブジェクト」内の「ロールオーバーイメージ」を選択
12.出てきたウインドウの「元のイメージ」の欄の右側にある「参照」ボタンをクリックし
最初の表示用のボタン画像を選択する。
13.次にその下の「ロールオーバーイメージ」の欄の右側にある「参照」ボタンをクリックし
マウスを画像の上にもってきた時の表示用のボタン画像を選択する。

手順の続きは↓のページを参照

ロールオーバーボタンの作成の 手順13以降の設定





1.alpha内のパーツの配置は中央配置にする  (セレクタ alphaのプロパティーtext-alignのバリューをcenterにする)

まず、alphaの中身を選択し、CSSをクリックし
プロパティのパネルをHTMLからCSSに切り替える


 プロパティのパネルの右の方に
中央揃えボタンがあるのでそれをクリック


2.alpha内にロールオーバーボタンを設置し　＝P.112〜P.115 
ロールオーバーボタンのリンクをkadaisiteの中のindex.htmlに設定する。
＝P.112〜P.115 
3.ボタン下に「↑ボタンクリックでkadaisiteのトップページへ」のテキストを挿入し、
4.フォントファミリーを「ＭＳ Ｐ明朝, MS PMincho,ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif」に設定。＝P.98-(６)
5.文字サイズを10pxに設定。=P.98-(7)   文字の色を#53C09Bに設定。=P.99-(9)

6.contentの横幅を500pxにし、
新規CSSボタンを押す(CSSスタイルのパネルの右下)　　


IDを選択し、contentという名前のセレクタ名を入れてOK


左の「カテゴリ」から「ボックス」を選択
ボックスの横幅(width)を500pxにする。




7.境界線の線種を点線、境界線の色を#09Fにする(border: 1px dotted #09F;)

「カテゴリ」から「ボーダー」を選択する

すべて同一のチェックを外し、styleの項目をdotted(点線)にする。

コメント

コメントを投稿