注）自分用のメモです。
1.ＨＴＭＬで文章構造を定義
[1]処理エラーを防ぐための設定,言語設定,SEO対策（サイトの説明や検索キーワード）等細かいこと
↓
[2]マークアップ
↓
[3]リンク設定（とりあえずヌルリンク、リンクタイトル）
↓
[4]画像挿入
↓
[5]divタグでグループ分け
《主なグループ名（id名）》
wrapper,header,sidebar,main,footer
↓
[6]バリデート
[ファイル]-[ページのチェック]-[マークアップのバリデート]（dreamweaver8の場合）
2.ＣＳＳでページレイアウト
[1]文字コードやショートハンド,メディアタイプ（media = “screen,tv,projection”）の設定
↓
[2]HTMLファイルにリンクをはる
↓
[3]「＊」セレクタの設定(初期化)
「＊」セレクタで初期化するものは主に次の２つ
・余白,マージン [0]
・タイプのスタイル [標準]
↓
[4]bodyタグの設定
bodyタグで設定することは主に次の３つ
・タイプ（サイズ75%、ライン高1.6 複数、sans-serif）
・背景色
・背景イメージ
↓
[5]リンクをCSSで設定
特にa:activeの設定は覚えておきたい。
a:active{
text-decoration:none;
position:relative;
left:+1px;
top:+1px;
}
↓
[6]コンテンツ領域全体（#wrapper）の設定
コンテンツ領域全体の設定は主に次の２つ
・幅の設定
・マージンの設定（上下を 0px 左右 auto）◆これでコンテンツが画面中央にきます。
↓
[7]#mainの設定
・幅の設定
・フロートの適用【右】
↓
[8]#sidebarの設定
・幅の設定
・フロートの適用【左】
↓
[9]#footerの設定
・クリアの適用【両方】
↓
[10]#headerの設定
・背景画像の適用
・高さの設定
↓
[11]ヘッダー領域のロゴの位置
ヘッダー領域へのロゴの配置位置は一つ上のヘッダータグを基準にすると分かりやすい。
次のようにヘッダーにposition:relative，ロゴにposition:absoluteを設定するとそれを実現出来る。
#header position:relative;
#header #logo{
position:absolute;
left:15px;
top:15px;
}
↓
[12]リストをレイアウトして、メニューボタンのようにする。
注）重要だと思う設定のみを抜粋している。全ての設定ではない。
#header ul{
width:858px;
position:absolute;
left:0px;
}
#header ul li{
float:left;
list-style:none;
}
#header ul li a{
line-height:2.5em;
text-decoration:none;
display:block;
height:2.5em;
width:170px;
border-top:3px solid #ffff66;
border-bottom:3px double #999999;
border-left:2px solid #ffffff;
}
↓
[13]リンクにid属性を設定し左端のアイコンのみ以下のCSSを適用（左端にはボーダーの設定は必要ないの
で）
#header ul li#nHome a{</pre>
<ul>
<li id="nHome">border-left-style:none;
}
↓
[14]メイン領域の体裁を整える。
#main p{
line-height:1.8;
margin-bottom:1em;
}
↓
[15]#footerの箇条書きの配置を横並びにする
#footer ul li{
display:inline;
margin-right:15px;
list-style:none;
}
↓
[16]body要素にid属性を設定する。
◆こうすることで各ページに対応したメニューボタンの設定ができたり、ページごとに異なる背景を設定で
きたりする。ここでは、とりあえずホームボタンの背景のみ変更しておく。
#home #header #nHome a{
cokor:#ffffff;
background-color:#828ca7;
}
↓
[17]テンプレートの作成
その際、#mainと#sidebarを編集可能領域にする。また、body要素のid属性を[修正]-[テンプレート]-[属
性を編集可能にする]で編集可能に設定する。
◆こうすることでヘッダー領域の背景を個別に変更できる。
↓
[18]テンプレートから各ページを作成する。
↓
[19]各ページを修正する。
1)各ページのbody要素のid属性を[修正]-[テンプレートプロパティ]で変更する。
2)各ページに対応したCSSを書く。
①各ページに対応したメニューボタンの設定
#home #header #nHome a,
#profile #header #nProfile a,
・
・
②各ページに対応したヘッダー領域の設定
#profile #header{
backgroun-image: url(images/header02.jpg);
}
#works #header{
backgroun-image: url(images/header03.jpg);
}
↓
[20]サイドバー領域のメニューのリンク
＊重要だと思う設定のみ抜粋
#sidebar ul{
margihn-top: 10px;
}
#sidebar ul li{
list-style:none;
}
#sidebar ul li a{
background-image: url(images/arrow.gif);
bakground-repeat:no-repeat;
background-position:left center;
display: block;
width: 210px;
padding-left: 15px;
}
#sidebar ul li a:hover{
background-image:url(images/arrow_hover.gif);
}
３.その他
☆FAQページを作るには → FAQをリスト定義する
[1]dlタグ、dtタグにid属性を設定
↓
[2]dtタグにCSSルールの適用
↓
[3]ddタグにCSSルールの適用 line-height:1.8; padding-bottom:1em;
テーブルを作成するには
[1]テーブルの挿入
↓
[2]ボーダーを削除
↓
[3]summaryに概要を記載
↓
[4]ヘッダの設定→プロパティインスペクタのヘッダにチェックを入れる。
↓
[5]thセルを検索置換で
とする（横方向）
↓
[6]線の重なりをcollapseに設定
#main table{
border-collapse:collapse;
}
↓
[7]背景色をクラスで設定
#main table tr.odd{
background-color: #efefef;
}
☆画像を並べて表示するには
[1]画像の要素をひとかたまりにする。例）
</pre>
<div class="wk">
↓
[2]配置を設定する
#main div.wk{
float:left;
width:170px;
}
↓
[3]文字にCSSを適用
#main div.wk h3 a{
line-height:1.2;
display:block;
border-left:3px solid #999999;
}
☆フォームを作成するには
[1]フォームの挿入。フォーム名を適用。
↓
[2]フォーム内にテーブルの挿入（テーブル幅は１００％、ボーダーの設定では１を削除）
