ボタンの作成ができた人は メニューボタンを作成しよう！
以下の説明を読んで、２学期に作成する「自分のサイト」の
メニュー部分を作成していきましょう。
------------------------------------------------------------------------------------------------------------------------------------
まず
※ロールオーバーボタンの復習 ※
ロールオーバーリンクのその他の種類
カーソルを置いた時に表示が変化するメニューボタンのことをロールオーバーと言います。
(教科書のロールオーバーはjavascriptを用いたものですが、
ここにあげているロールオーバーはcssとHTMLで構成されています。)
カーソルを置いた時に表示が変化するメニューボタン(6種)
画像でもできるがCSSのみでもボタンはできる
-メニューボタンを CSS でつくるには -
or
-CSSとHTMLがセット配布されているメニュー(22種類)
の中から自分のサイトに入れるメニューボタンに組み込む仕組みを選び
自分のサイト用にデザインをオリジナル化してmenu.htmlを完成させましょう。
------------------------------------------------------------------------------------------------------------------------------------
-メニューボタンを CSS でつくるには -
(文字と背景カラーでつくる／文字と背景画像でつくる／画像でつくって表示位置をズラす)
http://www.css-designsample.com/csslayout/technique-3.html
http://www.css-designsample.com/csslayout/technique-3.html
例=テキストのみの場合
1.新規htmlファイルを作成
2.公開されているコードをプレーン表示(orコピー)してコードをコピーする。
3.作成した新規htmlの<body> ~ </body>のコード内にペーストする。
すると、デザインビューでは↓このように表示される
4.同じようにcssコードもコピーする
5.新規cssファイルを作成する
6.cssファイル内にペーストする。
7.cssファイルをmenu.cssという名前で保存
8.最初に作成したhtmlファイルをmenu.htmlという名前で保存する
9.menu.htmlを表示しcssスタイルパネルの下にあるクサリのマークをクリック
10.参照ボタンをクリックしてmenu.cssをリンクさせる
11.menu.htmlファイルのデザインビューがこのように表示される事を確認する。
12.ネット上できちんと動作するかどうかを確認する
------------------------------------------------------------------------------------------------------------------------------------
- CSSとHTMLがセット配布されているメニュー(22種類) -
(教科書のロールオーバーボタン(P.109)はjavascriptを用いたものですが、
ここにあげているロールオーバーはcssとHTMLで構成されています。)
1.Dreamweaverで新規htmlファイルを作成
(例えば名前をmenu.htmlとする)
2.新規でCSSを作成する
(例えば名前をmenu.cssとする)
3.スタイルシートを添付ボタンをクリックしてmenu.cssを選ぶ
menu.htmlとmenu.cssを結びつけてリンクする
4.画像を保存する
My Islandの場合は[Download]からダウンロード。
その他のサイトの場合は画像をドラッグしてダウンロードする場合もあります。
5.cssへのリンクのコードをコピーして<head>〜</head>内に貼付ける。
6.公開しているHTMLコードを
<ul>~</ul>まで または <div>〜</div>まで
をコピーしてmenu.htmlに貼付ける。
7.公開されているCSSコードをすべてコピーしてmenu.cssに貼付ける。
8.menu.htmlとmenu.cssを保存し、
menu.htmlをSafariにドラッグして表示し、正しく動作するかどうかを確認する。
[コードの全景]
※〜の部分は画像コードの場合とテキストの場合があるので省略しています。
自分のメニューに合うコードを〜の部分に入れましょう。
OKであれば、
画像のメニューボタンにしたい人は、テキスト部分をオリジナル画像に差し替える。
または画像を使わずCSSの色コードでメニューボタンを作る場合は色のコードを書き換える。
またはcssのliの背景画像をオリジナル画像に差し替える