CSS+Div レイアウト入門tutorial_html/css_WEB-ITnose

Web ページ制作には、CSS、HTML、DHTML、XHTML などの用語がたくさんあります。次の記事では、HTML についての基本的な知識を使用します。この入門チュートリアルを学習する前に、HTML についての基本的な知識がすでにあることを確認してください。 CSS+DIV を使用して Web ページのレイアウトを段階的にデザインしてみましょう。
すべてのデザインの最初のステップは構想です。構想後は、一般的に、PhotoShop や FireWorks などの写真処理ソフトウェア (以下、PS または FW) を使用して、作成するインターフェイスのレイアウトを作成する必要があります。以下は私の考えたインターフェイスのレイアウト図です。

次に、概念図に基づいてページのレイアウトを計画する必要があります。図を注意深く分析すると、画像が次の部分に大まかに分かれていることが簡単にわかります。
1.ロゴとメニュー、およびバナー画像
2. コンテンツ部分はサイドバーとメインコンテンツに分割できます。
3. 下部には著作権情報が含まれています。
上記の分析により、私たちのデザインレイヤーは以下のように簡単にレイアウトできます:

上の図に基づいて、レイヤーの入れ子関係を示すために実際のページレイアウト図を描きました。理解しやすくなります。

DIVの構造は以下の通りです:
│body {} /*HTML要素ですので詳細は説明しません*/
└#Container {} /*ページレイヤーコンテナ*/
#Header {} /*ページヘッダー*/
§#PageBody {} /*ページボディ*/
│ §#サイドバー{} /*サイドバー*/
│ └#MainBody {} /*メインコンテンツ*/
└#フッター {} /*ページの下部*/

この時点で、ページのレイアウトと計画は完了しました。次に行う必要があるのは、HTML コードと CSS の記述です。