Div+CSSレイアウト入門チュートリアル(1)_html/css_WEB-ITnose

著者: Tomato Red
1. ページのレイアウトと計画

最近、DIV+CSS レイアウトについてよく質問する友人のことを思い出します。分析が開始されていないことが原因です。それでは、次の記事をご覧ください...

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 レイアウト入門チュートリアル (1) # -- ページのレイアウトと計画
Div+CSS レイアウト入門チュートリアル (2) # -- 全体のレイヤー構造と CSS の書き方
Div+CSS レイアウト入門チュートリアル ( 3) # -- ページの先頭を作る (1)
Div+CSS レイアウト入門講座 (4) # -- ページの先頭を作る (2)----list

を使ってメニューを作る
Div+CSS レイアウト入門チュートリアル ( 5) # -- ボーダーとクリアを上手に活用する
CSS コードを最適化する #