Div+CSS の入門チュートリアルの 1 つ、layout_html/css_WEB-ITnose

1. ページのレイアウトと計画

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

コンセプト マップ、HTML および CSS ソース ファイル: クリックしてダウンロード

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

上の図に従って、レイヤーの入れ子関係を示すために実際のページレイアウト図を描きました。理解できるようになります。

DIV の構造は以下の通りです:
│body {} /*HTML要素ですので詳細は説明しません*/
└#Container {} /*ページ層コンテナ*/
§#Header { } /*ページヘッダー └ページの下部*/

この時点で、ページのレイアウトと計画は完了しました。次にしなければならないのは、HTML コードと CSS の記述を開始することです。


2. 全体のレイヤー構造と CSS を記述します

次に、デスクトップに新しいフォルダーを作成し、「DIV+CSS レイアウト演習」という名前を付けます。そのフォルダーの下に空のメモ帳ドキュメントを 2 つ作成し、次の内容を入力します。

; html xmlns ="http://www.w3.org/1999/xhtml" > < メタ http-equiv ="Content-Type" ; charset =gb2312 " />

< title > divcss
< link href ="css.css" rel ="stylesheet" type ="text/css" />

< body >

これは XHTML の基本構造であり、もう 1 つのメモ帳ドキュメントに css という名前を付けます。
次に、タグペアに DIV の基本構造を記述します。コードは次のとおりです。


id =" ヘッダー" >