htmlで組み立てる
デザインパーツが仕上がったら材料をhtmlに挿入してコーディングしていきます。
文章がまだ仕上がっていない場合は仮文章で配置します。
→ dreamweaverを起動
→ 新規サイトを定義参考lesson1
→ imagesフォルダを作成、もしくはphotoshopからスライスを書き出し
→ index.htmlを作成し材料を挿入。htmlタグでマークアップしていく
- <h1><p> タグや <ul> リストなど、コンテンツに直接関わる HTML タグ
- HTML タグを、必要に応じて <div> でまとめる
- id 属性や class 属性（後程）で各部分に名前を付けて、CSS のセレクタを設計
- CSS でスタイルを記述
→ スタイルシートでレイアウト参考lesson3
→ テンプレートとして保存 参考lesson4
→ サイトマップの数だけページを作成 参考lesson4
→ 各ページ特有箇所もスタイルシートでデザイン
見出しタグの基本ルール
見出し1の次は見出し2・・・と順番を守る事
<h1>見出し1</h1> サイトまたはページの内容 <h2>見出し2</h2> 段落 <h3>見出し3</h3> 段落 h3>見出し3</h3> 段落 <h2>見出し2</h2> 段落 <h3>見出し3</h3> 段落 <h3>見出し3</h3> 段落
よくある質問
初めてコーディングするときよくある「あれ？なんで？？」という事を掲載していきます。
フロートすると背景画像が表示されない。
授業の説明の際にはfloatはわかりやすいように左右に寄せると説明しましたが、本来はボックスを”浮かせて”左右に配置するものなので、内側のボックス（div,img,liなど）が全部浮かんでしまった場合、外側のボックス（div）の高さはなくなってしまいます。
解決方法①
最も簡単な方法はdivの高さを指定することです。
html
<div id="content"> float leftを設定している内容など </div>
css
#content {
height: 500px;
}
ただしこの方法は高さが決まってしまうため、文字数の成り行きで高さが決まるテキストページには不向きです。
解決方法②
floatの解除はclearを両方（both）に設定する事です。float設定している下部にfloatの解除の設定をします。
html
<div class="clear"></div>
などと空白のタグを入れ、下記のようなｃｓｓルールを追加します。
ｃｓｓ
.clear {
clear: both;
}
ただしこの方法は空タグを挿入するためコードが美しくないというご意見もあります。
解決方法③
最後は少しややこしいですが主流なのではないでしょうか。とりあえず①と②で解決しておいて余裕がある時に下記はお試しになるのがいいかと思います。
（:afterなどcssの疑似要素がありますので授業でこの段階ではやりません）
フロートの解除、囲んでるdivにclass clearfixをいれる
.clearfix:after { /*floatの解除*/
display:block;
clear:both;
height:0px;
visibility:hidden;
content:".";
}
.clearfix {
min-height: 1px; /*IE6、7対策*/
}
* html .clearfix {
height: 1px;
/*\*//*/ /*MAC IE5.x対策*/
height: auto;
overflow: hidden;
/**/
}