| CREATIVE POINT F |
Dreamweaverで要素を配置する |
| KEY WORD 1 |
できるだけ少ない要素で配置できるよう工夫する |
||
| KEY WORD 2 |
背景の表示する位置を調整する |
メニューの文字を非表示にし、スライスを設定して書き出す【1】。下のスライスはページの背景画像として使用する。次に、メニュー以外の素材を非表示にし、背景を透明にして、ボタンの部分を「PNG 32」形式で書き出す【2】。Dreamweaverでbody要素の背景画像を指定し、繰り返しを「Y軸にリピート」にする【3】【4】。h1要素の中にメイン写真の画像を配置し【5】、上のマージンを「0」、左のマージンを「65」に設定する【6】【7】。同じh1要素の背景イメージに空の画像を適用し、繰り返しを「リピートなし」、水平位置を「455」pxにした【8】【9】。このように、空の画像をh1要素の背景画像とすることで、少ない要素でレイアウトできる。idを「navi」としたdiv要素を作成し、この中にボタンを4つ挿入する。配置のタイプを「絶対的」にして、ナビゲーションの位置を設定する【10】【11】。ボタンの間隔が狭くなってしまっているので、div要素「navi」の中のimg要素の下のマージンを「25」pxにして、間隔を調整して完成だ【12】【13】。
【1】メニューの文字を非表示にし、スライスを設定して書き出す
【2】メニュー以外の素材を非表示にし、背景を透明にして「PNG 32」形式で書き出す
【3】body要素の背景画像を指定し、繰り返しを「Y軸にリピート」に設定する
【4】背景画像が設定された
【5】h1要素の中にメインの画像を配置する
【6】上のマージンを「0」、左のマージンを「65」に設定する
【7】メインの写真画像が正しい位置に配置された
【8】h1要素の背景イメージに空の画像を適用し、繰り返しを「リピートなし」、水平位置を「455」pxに設定する
【9】空の画像が配置された
【10】div要素「navi」の中にボタンを挿入し、配置のタイプを「絶対的」にして、ナビゲーションの位置を設定する
【11】ボタンが配置されたが、このままではボタンの間隔が狭い
【12】div要素「navi」の中のimg要素の下のマージンを「25」pxにする
【13】ボタンの間隔が調整された状態。これでデザインが完成した
INDEX ブラシで描いた模様を生かしたデザイン
CREATIVE POINT A カラー写真を白黒に変換する
CREATIVE POINT B 周辺光量の低下した画像を作成する
CREATIVE POINT C 文字のアンチエイリアスをコントロールする
CREATIVE POINT D デザイン的にも白と黒のコントラストを生かす
CREATIVE POINT E ナビゲーションを配置する
CREATIVE POINT F Dreamweaverで要素を配置する
