WEB第８回 5/20

今日の内容

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

まず、教科書P112~P117の手順でkadaisitoの中のindex.htmlのメニューボタンをロールオーバーボタンに編集し直して完成させましょう。

[新規ロールオーバーボタンのページを作成して公開]
次に、前回の授業で準備した↓のボタン素材を使って

　第６章　第７章 の作業が終わったら

　第８章 用にロールオーバー用画像を2種類作成する。
　　http://html-coding.co.jp/knowhow/tips/000302/　
　　　例：mac アクア風ボタンの作り方　http://www.allef.com/gpx/
　　　例：photoshop ボタンの作り方(初心者向け)
　　　　　http://blog.livedoor.jp/psychedeledge/archives/51812346.html
　　　例：Illustratorでアクア風ボタンの作り方
　　　　http://forty-n-five.boy.jp/blog/2009/11/illustrator_4.php
　　　例：ボタンジェネレーター
　　　　http://jirox.net/AsButtonGen/    http://www.glassybuttons.com/glassy.php

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

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: 500px dotted #09F;)

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

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