Web ページ制作には、CSS、HTML、DHTML、XHTML などの用語がたくさんあります。次の記事では、HTML についての基本的な知識を使用します。この入門チュートリアルを学習する前に、HTML についての基本的な知識がすでにあることを確認してください。 DIV+CSS を段階的に使用して Web ページのレイアウトをデザインしてみましょう。
すべてのデザインの最初のステップは構想です。構想後は、一般的に、PhotoShop や FireWorks (以下、PS または FW) などの画像処理ソフトウェアを使用して、作成する必要のあるインターフェイスのレイアウトを描画する必要があります。以下は私が考えたインターフェースのレイアウト図です。
次に、概念図に基づいてページのレイアウトを計画する必要があります。この図を注意深く分析すると、図が次の部分に大まかに分かれていることがわかります。
1. 上部にはロゴ、メニュー、バナー画像も含まれます。
2. コンテンツ部分はサイドバーとメインコンテンツに分けることができます。
3. 下部には著作権情報が含まれています。
上記の分析により、以下に示すように設計レイヤーを簡単にレイアウトできます。
上の図をもとに、レイヤーの入れ子関係をわかりやすくするために、実際のページレイアウト図を再度描いてみました。
DIV 構造は次のとおりです。
│body {} /*HTML要素なので詳細は説明しません*/
└#Container {} /*ページ層コンテナ*/
§#Header {} /*ページヘッダー*/
§#PageBody {} /*ページ本体*/
│ §#サイドバー {} /*サイドバー*/
│ └#MainBody {} /*メインコンテンツ*/
└#フッター {} /*ページの下部*/
この時点で、ページのレイアウトと計画は完了しました。次にしなければならないのは、HTML コードと CSS の記述を開始することです。
次に、デスクトップに新しいフォルダーを作成し、「DIV+CSS Layout Exercise」という名前を付けます。そのフォルダーの下に空のメモ帳ドキュメントを 2 つ作成し、次の内容を入力します。
これは XHTML の基本構造です。index.htm という名前を付け、もう 1 つのメモ帳ドキュメントには css.css という名前を付けます。
次に、DIV の基本構造を <body></body> タグのペアに記述します。コードは次のとおりです。
<div id=container><!--ページレイヤーコンテナ-->
<div id=Header><!--ページヘッダー-->
</div>
<div id=PageBody><!--ページ本文-->
<div id=サイドバー><!--サイドバー-->
</div>
<div id=MainBody><!--メインコンテンツ-->
</div>
</div>
<div id=Footer><!--ページの下部-->
</div>
</div>
将来コードを読みやすくするために、関連するコメントを追加する必要があります。次に、css.css ファイルを開いて CSS 情報を記述します。コードは次のとおりです。