Web サイトを計画する
まず、Web サイトを計画する必要があります。このチュートリアルでは、Web サイトを構築する例として次の図を取り上げます。
図 1
を以下に示します。
図 2 は
主に 5 つの部分で構成されています。
1. メイン ナビゲーション ボタン効果のあるナビゲーション バー。
幅: 760ピクセル 高さ: 50ピクセル
2. ヘッダー Web サイトのヘッダー アイコンには、Web サイトのロゴと名前が含まれています。
幅: 760ピクセル 高さ: 150ピクセル
3. コンテンツ Web サイトのメインコンテンツ。
幅：480px 高さ：コンテンツにより異なります
4. サイドバーの境界線、追加情報。
幅：280px 高さ：状況に応じて変化します
5. フッターサイトの下段には著作権情報等が記載されております。
幅: 760ピクセル 高さ: 66ピクセル
1. HTMLテンプレートやファイルディレクトリなどを作成します。
コードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
「 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 」
<html>
<頭>
<meta http-equiv="コンテンツタイプ" content="text/html; charset=UTF-8" />
<title>会社名 - ページ名</title>
<meta http-equiv="コンテンツ言語" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="説明" content="説明" />
<meta name="キーワード" content="キーワード" />
<meta name="著者" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<本文>
</body>
</html>
それをindex.htmlとして保存し、cssとimagesのフォルダーを作成します。 Webサイトの構造は次のとおりです。
図 3
2. Web サイト用の大きなボックスを作成する:
Web サイトのすべての要素を含む幅 760 ピクセルのボックスを作成します。
HTMLファイルの<body>と</body>の間に<div id="page-container">を記述します。
こんにちは世界。
</div>
CSS ファイルを作成し、master.css という名前を付けて /css/ フォルダーに保存します。書く：
#ページコンテナ {
幅: 760ピクセル;
背景: 赤;
}
idがpage-containerのボックスの幅をhtmlで760pxに制御し、背景を赤色にすると以下のようになります。
図 4
ここで、ボックスを中央に配置するために、「margin: auto;」と書き込み、CSS ファイルは次のようになります。
#ページコンテナ {
幅: 760ピクセル;
マージン: 自動;
背景: 赤;
}
ボックスの上部とブラウザーの間に 8 ピクセルの幅の隙間があることがわかります。これは、ブラウザのデフォルトのパディングと境界線が原因です。このギャップを解消するには、css ファイルに次のように記述する必要があります。
html、本文{
マージン: 0;
パディング: 0;
}
Web サイトを 5 つの div に分割します
。 1. 「ステップ 1」で説明した 5 つの部分をボックスに入れ、HTML ファイルに次のように記述します。
<div id="ページコンテナ">
<div id="main-nav">メインナビゲーション</div>
<div id="header">ヘッダー</div>
<div id="sidebar-a">サイドバー A</div>
<div id="content">コンテンツ</div>
<div id="footer">フッター</div>
</div> は
次のように動作します。
図 5
2. 5 つの部分を区別するために、これら 5 つの部分を異なる背景色でマークし、css ファイルに次のように記述します。
#メインナビ {
背景: 赤;
高さ: 50ピクセル;
}
#ヘッダー {
背景: 青;
高さ: 150ピクセル;
}
#サイドバー-a {
背景: ダークグリーン;
}
＃コンテンツ {
背景: 緑;
}
#フッター {
背景: オレンジ;
高さ: 66ピクセル;
パフォーマンス
は次のとおりです。
図 6
Web ページのレイアウトと div フローティングなど
1. フローティング: まず、境界線をメイン コンテンツの右側にフローティングさせます。 CSSを使用してフローティングを制御します。
#サイドバー-a {
フロート: 右;
幅: 280ピクセル;
背景: ダークグリーン;
パフォーマンス
は次のとおりです。
図7
2. メインコンテンツボックスにテキストを書き込みます。 HTML ファイルに次のように記述します。
<div id="コンテンツ">
Lorem ipsum dolor sit amet、consectetuer adipiscing elit。
Praesent sapien purus、ultrices a、varius ac、suscipit ut、maecenas in lectus。
ニブ・ルトルム・グラヴィダのサピエンスのドネク。
euismod vulputate、Nullam rhoncus mauris ac metus。
Duis scelerisque justo a pede、Nam augue lorem、semper at、porta eget、placerat eget、
Purus は、hac 習慣プラテア dictumst で、マティス nunc 前庭舌を停止します。
</div>
性能は以下の通りです。
図 8
ただし、メイン コンテンツ ボックスがページ コンテナーの幅全体を占めていることがわかります。#content の右枠を 280px に設定する必要があります。国境と衝突しないように。
CSSコードは次のとおりです。
＃コンテンツ {
マージン右: 280px;
背景: 緑;
同時に
、境界線にテキストを書き込みます。 HTML ファイルに次のように記述します。
<div id="サイドバー-a">
Lorem ipsum dolor sit amet、consectetuer adipiscing elit。
Praesent sapien purus、ultrices a、varius ac、suscipit ut、maecenas in lectus。
ニブ・ルトルム・グラヴィダのサピエンスのドネク。
euismod vulputate、Nullam rhoncus mauris ac metus。
Duis scelerisque justo a pede、Nam augue lorem、semper at、porta eget、placerat eget、
Purus は、hac 習慣プラテア dictumst で、マティス nunc 前庭舌を停止します。
</div> は
次のように動作します。
図 9
これは私たちが望んでいたものではありません。Web サイトの下部フレームが境界線の下に入り込んでいます。これは境界線を右側にフローティングしているためです。フローティングしているため、ボックス全体の上の別のレイヤーにあることがわかります。したがって、下部のボックスとコンテンツ ボックスは位置合わせされます。
そこでCSSで次のように書きます。
#フッター {
クリア：両方。
背景: オレンジ;
高さ: 66ピクセル;
パフォーマンス
は次のとおりです。
図10
Web ページのメイン フレーム外の追加構造のレイアウトとプレゼンテーション。次のような Web ページのメイン フレーム外の追加構造のプレゼンテーション (レイアウト)。
1. メイン ナビゲーション バー。
2. タイトル (Web サイト名とコンテンツのタイトルを含む)。
3. コンテンツ。
4. 著作権、認証、サブナビゲーション バー (オプション) を含むフッター情報。
これらの構造を追加するときは、元のフレームワークを破壊しないように、css ファイルの「body」タグ (TAG) の下に追加する必要があります。
。隠れた {
表示: なし。
}
「.hidden」は追加したクラスです。このクラスは、hidden クラスに属するページ上の要素を非表示にすることができます。これらは後で使用するので、今は忘れてください。
ここで見出しを追加します。
まず HTML コードに戻ります。<h1> から <h6> はよく使用される HTML 見出しコードです。たとえば、一般的には <h1>ウェブサイト名</h1>、<h2>ウェブサイトのサブタイトル</h2>、<h3>コンテンツのメインタイトル</h3>などを使用します。 HTML ファイルのヘッダー層 (Div) に以下を追加します。
<div id="ヘッダー">
<h1>デザインを啓発する</h1>
</div>
ページを更新すると、巨大なタイトルとその周囲の空白が表示されます。これは、<h1>> タグのデフォルトのサイズと余白が原因で、これらの空白を最初に追加する必要があります。
h1 {
マージン: 0;
パディング: 0;
次
はナビゲーション バーです。
ナビゲーション バーのパフォーマンスを制御する CSS コードは比較的複雑です。9 番目または 10 番目のステップで詳しく説明します。次に、HTML ファイルにナビゲーション コードを追加します。
<div id="メインナビ">
<ul>
<li id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" >概要</a></li>
<li id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" >サービス</a></li>
<li id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" >ポートフォリオ</a></li>
<li id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" >お問い合わせ</a></li>
</ul>
</div>
(注: 元のチュートリアルでは dl と dt が使用されていましたが、jorux ではここでより一般的に使用される ul と li タグが使用されています)
現時点では、ナビゲーション バーのパフォーマンスは比較的悪いですが、その特別なパフォーマンスは今後のチュートリアルで紹介されるため、ナビゲーション バーを一時的に非表示にする必要があるため、次のように追加しました。
<div id="メインナビ">
<dl class="hidden">
<dt id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" >概要</a></dt>
<dt id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" >サービス</a></dt>
<dt id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" >ポートフォリオ</a></dt>
<dt id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" >お問い合わせ</a></dt>
</dl>
</div>