メニューボタンの作成
課題が完成した人は メニューボタンを作成しよう！
課題が完成した人は メニューボタンを作成しよう！
-メニューボタンを CSS でつくるには -(文字と背景カラーでつくる／文字と背景画像でつくる／画像でつくって表示位置をズラす)
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ファイルのデザインビューがこのように表示される事を確認する。
- CSSとHTMLがセット配布されているもの(22種類) -
http://myisland.jp/template/menus/index.html
(教科書のロールオーバーは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にドラッグして表示し、正しく動作するかどうかを確認する。
[コードの全景]
画像をオリジナル画像に差し替える。
または色のコードを書き換える。
または背景画像をオリジナル画像に差し替える。
この課題は２学期の各自のサイト作成のメニューになります。(2学期の提出物です)
おまけ
ロールオーバーリンクのその他の種類
カーソルを置いた時に表示が変化するメニューボタンのことをロールオーバーと言います。
(教科書のロールオーバーはjavascriptを用いたものですが、
ここにあげているロールオーバーはcssとHTMLで構成されています。)
カーソルを置いた時に表示が変化するメニューボタン(6種)
0 コメント :
コメントを投稿