Div+CSSレイアウト入門チュートリアル(1) ページレイアウトとプランニング_html/css_WEB-ITnose

Web ページ制作には、CSS、HTML、DHTML、XHTML などの用語がたくさんあります。次の記事では、HTML についての基本的な知識を使用します。この入門チュートリアルを学習する前に、HTML についての基本的な知識がすでにあることを確認してください。 DIV+CSS を段階的に使用して Web ページのレイアウトをデザインしてみましょう。

すべてのデザインの最初のステップは構想です。構想後は、一般的に、PhotoShop や FireWorks などの写真処理ソフトウェア (以下、PS または FW) を使用して、作成するインターフェイスのレイアウトを単純に描画する必要があります。以下は私がよく考えたインターフェイスのレイアウト図です。

次に、概念図に基づいてページのレイアウトを計画する必要があります。図を注意深く分析すると、画像が次の部分に大まかに分かれていることが簡単にわかります。

1. 上部、ロゴ、メニュー、バナー画像も含まれます。
2. コンテンツ部分はサイドバーとメインコンテンツに分割できます
3. 下部には著作権情報が含まれます。
上記の分析により、デザインレイヤーは以下のように簡単にレイアウトできます。

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

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

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