（4）POINT C　Dreamweaverで原稿をレイアウト

2008.1.29 TUE

プロならではのアイデアが満載！
ＷＥＢレイアウトのネタ帖

第1回　写真を生かしながら多くの文章を表示できるレイアウト

POINT C
Dreamweaverで原稿をレイアウト

●idとclassを組み合わせて効率的なCSSの設定を行う
●読む順番がわかりやすいように数字を入れる

[1]	Dreamweaverでレイアウトしていく。「boxA」から「boxF」までのIDをもつdivボックスを作成し、「boxB」から「boxF」までには「textBox」という共通のクラスを割り当てておく。さらに全体を囲むdiv要素「content」を作成する［1］。
[2]	div要素「content」の幅を750pxに設定し、クラス「textBox」は幅と高さを250pxにして、左にフロートさせておく［2］。ID「boxA」もこの段階ではクラス「textBox」と同じ設定を記述しておく。これはあとで設定が変わってくるので、あらかじめ分けておく。
[3]	Dreamweaverのデザインビューで、ビジュアルエイドの「CSSレイアウトの背景」を有効にするとこのように見える［3］。
[4] [5]	左上の領域「boxA」にタイトルの画像を配置する［4］。さらに他の領域の原稿も配置する［5］。
[6] [7]	読む順番を明示するために数字を入れ［6］、行間やマージンなどを整える［7］。