Ｗｅｂページの文章化をページの上から書いたものをコピーしたあとのことです。
先ずは各部分を自身で考えたワーヤーフレームに沿ってブロック化します。
例えとして、アチキのホームページを使いますが、下記のようなワイヤーフレームとなっています。
ページ全体の要素は上記のとおりで、上部を≪ヘッダー≫、各ページに行く為のボタンがある部分を≪グローバルナビゲーション≫、その下左が下層ページ等に行くための≪ローカルナビゲーション≫で、右側が≪コンテンツエリア≫、最下部は≪フッター≫と、大きくは５つの要素で成り立っています。
じゃぁ、この５つを≪div≫で区切ればいいのかというと、ちょっと違うんです。
区切り方は人それぞれ・・・若しくは、そのサイトのレイアウトや表現するものによっても違ってきます。
単純に５つの要素でも、上のように９つに分けます。
①≪page≫という大きな要素
②≪pageTop≫というフッターを除いた要素
③≪header≫というコンテンツ以外の上部要素
④≪header≫内のロゴが置かれるエリア要素
⑤≪gNav≫グローバルナビゲーションの要素
⑥≪contentsArei≫中央部分のコンテンツエリアの大きな要素
⑦≪mainContents≫メインとなるコンテンツアリア要素
⑧≪sideContents≫ローカルナビゲーション要素
⑨≪footer≫よいう②で除かれた部分要素
①は、ページ全体のルール（次の作業のCSS）を決める上で必要な要素です。
例えば『文字は１０pxで色は＃９９９９９９、左寄せで行間隔は１．５em。背景色は＃００００００』といった具合。
これを基本とし、各要素で個別指定をしない限りはこのルールが適用されます。
②は、人によってあったり無かったりするのですが、左右にコンテンツ分けした場合や、≪page≫ルール以外のルールとして、左右に空きを取りたいといった大きなくくりが必要な場合用として作ります。
なので、ないページもあると思います。
③はグローバルナビゲーションも含めた要素。
④⑤は、先に書いた５つの要素を個別化した要素。
⑥は大きくコンテンツエリアとしてくくった要素。
⑦⑧は５つの要素のものなので、③④と同様に個別化。
⑨は、５つの要素のひとつ。
これでスタートをしていくのですが、実際問題として、ローカルナビゲーション内・コンテンツエリア内は、複数の要素が入ってきます。
したがって、下記のように更に細かい要素分けが出てきます。
これらを全て≪div≫や≪ｄｌ≫といったタグで囲い、分けていくことになります。
ちなみに、アチキのような左右に要素が分かれると、かなり次の作業の『CSS』で苦労します (￣u￣；)
【Fireworks】の様に、切り貼り的には配置が出来ないためです。
あくまでもプログラムなので、指示をしそれを解除していく為、かなりごちゃごちゃになります（笑）
こういう要素に分けながら、要素以外の≪タグ≫をつけ終わればCSSを使い、レイアウトを整えるだけ。
ひとつのページが出来てしまえば、あとはそれにはめ込んでいけばいいので、大変なのは最初だけです。
（レイアウトが違うページは、同じように大変ですが、ひとつのフォーマットさえ出来てしまえば同じページがいくつもある場合は楽ですよ）
お手数お掛けしますが、下のバナーのクリックを、お願いされてちょうだい┏○゛ペコ
