ホームページを作ろう - 演習（１１）

演習（１１） - トップページデザインの作成

これまで，基本レイアウトデザインの作成手順を説明してきましたが，後は同様に各ページのデザインを作成していきます。まずは，トップページデザインから着手してみましょう。

レイアウト図の作成
最初は，レイアウト図の作成でしたね。
ここでは，基本レイアウトを基に追加レイアウトを考えて作成していきます。

トップページデザイン（レイアウト図）のサンプルへのリンク

レイアウト階層図の作成
つぎはレイアウト階層図の作成です。トップページでは，いろいろな線形性が考えられますが，今回は比較的作成が容易な方法として「subBody要素」というスタイルコンテナを別に用意して，その中に基本レイアウトで決めた「リンク領域」，そのつぎにトップページ独自の「リンク集領域」，そして「コンテンツ領域」という線形性にしました。

トップページデザイン（レイアウト階層図）のサンプルへのリンク

レイアウトスタイル及びスタイルシートの作成
レイアウト図とレイアウト階層図に基づいてトップページのレイアウトスタイルとスタイルシートを作成します。このとき注意してほしいこととして，いきなりスタイルシートが出来上がる訳でなく，具体的なスタイルを作成するために対になるXHTMLも同時に作成しているということです。
ここで作成したプロトタイプXHTMLが，つぎの段階の準備にもなります。

トップページデザイン（レイアウトスタイル）のサンプルへのリンク

トップページデザイン（スタイルシート）のサンプルへのリンク

コンテンツの作成
実は，この「コンテンツ」あるいは「コンテンツシート」とも言いますが，最も重要な作業です。

この「コンテンツ」によって，実際にどのような記述をページに表示するかが決まるからです。当然，最初は，仮データで作成する部分も多々あるでしょうけど，それらの部分も実際に公開する場合は，具体的な単語や文章になる訳です。つまり「コンテンツ」の作成とは，「原稿」の作成と言い換えることもできます。

トップページデザイン（コンテンツ）のサンプルへのリンク

サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて，最初の「サンプルXHTML」が作成されます。

トップページデザイン（サンプルXHTML）のサンプルへのリンク