ホームページビルダー１６のCSS編集（６）

（１６）メニュー部変更　　　　　　　　　　　　　　　　　

最初にやるのは「navTop_5Ea_01_02.png」、マウスを当てた時の画像は「navTop_5Ea_01_02_on.png」、
続いて「navTop_5Ea_01_03.png、navTop_5Ea_01_04.png、navTop_5Ea_01_05.png、
navTop_5Ea_01_06.png」の画像。
背景画像の上で右クリックし「ウェブアートデザイナー」を選択

「はい」を選択（「いいえ」の場合は白であった。」

四角の黒枠の部分は実測で3pixのように見えたので、これで行くことにした。

キャンパスの大きさを「編集／キャンパスの設定」で見ると

とあったので、背景のサイズが分かった。
ウェブアートデザイナーでの作成手順：
(a)黒の長方形を描く（215×140）



透明度は0%
※最初、キャンバスの色を黒にすると、それがWeb画像に反映されるものと思っていたが、そうではなかった。

(b)三角の部分は描く（但しオリジナルとは少し違う形にした）
「多角形（塗り潰しのみ）」で位置をステータスバーで見ながら次のようにして描いた。







なお、

の場合の三角形の頂点は左から（3,3)、(212,3）、(212,70）でカラーは#003399の透明度50％。

(c)メニューの画像
次の位置とサイズにした

これで黒枠は3pixになった

Web用に書き出しはオブジェクトを全てを選択して、

「Web用保存ウィザード」を選択


「保存形式をPNG、パレットをフルカラー、ファイルに保存」にして、同名のファイル名で上書き保存。
キャンパスはnavTop_5Ea_01_02.mifで..HPB_Recycledフォルダに保存。

同様にマウスを当てた時の画像を作成。




キャンパスはnavTop_5Ea_01_02_on.mifで、Web用はnavTop_5Ea_01_02_on.pngで保存。

（１７）フッター部のカラー変更
色合わせのため、footerBg_5Ea_01.gifの色とフォントカラーを変更した。
変更後のfooterBg_5Ea_01.gif


#hpb-footer　　（container_5Ea_2c_right.cssで）
{
padding-bottom: 20px;
clear: both;
position: relative;
width: 866px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
color: #F1F4FF;　　　カラー追加
}


次のページヘ

news新着情報

---

---

---