Microsoft-expression-webpage-layout
Microsoft Expression Web-Webページのレイアウト
この章では、Webページの基本的なレイアウトについて説明します。 ウェブページのレイアウトを作成する前に、コンテンツについて考え、ウェブサイトに表示されるコンテンツであるため、そのコンテンツの表示方法を設計する必要があります。
視聴者が私たちのサイトを見つけて、チェックアウトするためにどのようにコンテンツを提示するかは私たち次第です。 レイアウトには、おそらく会社のロゴまたはバナーが上部に含まれ、ナビゲーションメニュー、複数の列を含むコンテンツ領域、およびページの下部にフッターが含まれます。
以前は、開発者はテーブルを使用してこの外観を実現していました。 テーブルは、行と列を作成するために使用されるボックスのグループを作成しました。 現在、Webデザイナーは <div> s を使用してボックスを作成し、CSSを使用してそれらのボックスをページに配置します。
<div>タグ
以下は、<div>タグの機能の一部です。
- <div>タグは、HTMLドキュメント内の部門またはセクションを定義し、それらの部門またはセクションの管理、スタイル設定、および操作を簡単にします。
- ブロック要素をグループ化してCSSでフォーマットするために使用されます。
- ブラウザは通常、div要素の前後に改行を配置します。
- <div>タグはブロックレベルの要素です。
- <div>タグには、他のほとんどの要素を含めることができます。
- <div>タグを<p>タグ内に含めることはできません。
例
<div> </div>タグを使用してさまざまなボックスとスタイルルールを作成する簡単な例を見てみましょう。
ステップ1 *-Expression Webを開いてから、前の章で作成した *indexl ページを開きます。
ステップ2 *-上記のスクリーンショットに見られるように、コードビューはデフォルトで強調表示されています。 *コードビュー*または*デザインビュー*で作業できますが、コードビューとデザインビューの両方を開くスプリットビューも表示できます。 そこで、 *Split View オプションを選択しましょう。
ステップ3 *- *body 要素はドキュメントの本文を定義します。 <body>タグのスタイルを設定するには、新しいスタイルを作成する必要があります。 最初にデザインビューでbodyタグを選択し、[スタイルの適用]パネルで[新しいスタイル…]をクリックすると、[新しいスタイル]ダイアログが開きます。 ここで、スタイルのさまざまなオプションを定義できます。
ステップ4 *-最初のステップは、*セレクタ*ドロップダウンリストから *body を選択し、ドロップダウンリストの[定義]から既存のスタイルシートを選択することです。 URLから、前の章で作成したCSSファイルを選択します。
左側には、フォント、背景などの*カテゴリ*リストがあります。 現在のフォントが強調表示されます。 上記のスクリーンショットに示すように、要件に応じてフォント関連情報を設定します。
- ステップ5 *-必要な*背景色*を選択します。 ブラウザのボタンを使用して、背景の画像を選択することもできます。 背景が完成したら、必要に応じて境界線を定義します。
- ステップ6 *-境界線の*二重線*オプションを選択し、ドロップダウンリストから幅と色を選択します。 スタイルの設定が完了したら、[OK]をクリックします。
- ステップ7 *-デザインビューで、背景色が選択した色に変更されたことを確認できます。 sample.cssファイルを開くと、すべての情報がCSSファイルに自動的に保存されていることがわかります。
ステップ8 *- *indexl ページに再度移動し、[ツールボックス]パネルから <div> をドラッグして、開いているページにドロップします。
ステップ9 *-*コードビュー*の上に、 *<body> および <div> タグが表示されます。 <div> タグをクリックし、[スタイルの適用]パネルで[新しいスタイル]をクリックします。 [新しいスタイル]ダイアログが開きます。
[セレクタ]フィールドに「#container」と入力します。 ハッシュマーク＃はIDセレクターです。 [定義]ドロップダウンリストから、[既存のスタイルシート]を選択し、[ドキュメント選択に新しいスタイルを適用]オプションをオンにします。 背景カテゴリに移動します。
- ステップ10 *-背景色を選択し、白色を選択してから[ボックス]カテゴリに移動します。
ステップ11 *- *padding と margin を定義して、 Position カテゴリに移動します
- ステップ12 *-幅を90％に設定します。 ただし、ここではコンテンツを入力するときにコンテナを拡張する必要があるため、高さを指定しないでください。 OKボタンをクリックしてください。
同様に、ヘッダー、トップナビゲーション、左ナビゲーション、メインコンテンツ、フッターのスタイルを追加しましょう。
sample.css
以下は、上記のすべてのスタイルを追加した後の sample.css スタイルシートのコードです。
body {
font-family: Calibri;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
color: #0000FF;
background-color: #CCFFFF;
background-image: none;
border: medium double #FF0000;
}
#container {
background-color: #FFFFFF;
padding: 8px;
margin: 8px;
width: 90%;
}
#header {
background-color: #54B431;
background-repeat: no-repeat;
background-position: right center;
height: 170px;
}
#top-nav {
height: 50px;
border-top: solid medium #006600;
border-bottom: solid medium #006600;
background-color: #FFFFFF;
}
#left-nav {
margin: 20px 0px 10px 0px;
width: 180px;
float: left;
border: thin dashed #006600;
}
#main-content {
margin: 20px 10px 10px 200px;
background-color: #CCFFCC;
}
#footer {
border-top: 2px solid #006600;
clear: both;
padding: 10px 0px;
text-align: center;
}インデックス
以下は、すべての<div>タグを追加した後のindexlファイルのコードです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type"/>
<style type = "text/css"></style>
<link href = "sample.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<div id = "container">
<div id = "header"></div>
<div id = "top-nav"></div>
<div id = "left-nav"></div>
<div id = "main-content"></div>
<div id = "footer"></div>
</div>
</body>
</html>出力
デザインビューのページレイアウトは、次のスクリーンショットのようになります。
