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 の記述を開始することです。