2011年1月20日木曜日

ホームページを作ろう - 演習(12)

演習(12) - サブトップページデザインの作成

これまで,基本レイアウトデザイン,トップページデザインと設計してきました。つぎは書籍トップページとなるサブトップページに着手してみましょう。

レイアウト図の作成
最初は,レイアウト図の作成でしたね。
ここでは,基本レイアウトを基に追加レイアウトを考えて作成していきます。ただし,前回のトップページよりは単純で基本レイアウトを基にしてコンテンツベースで考えればよいと思います。

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

レイアウトスタイル及びスタイルシートの作成
レイアウト図に基づいてトップページのレイアウトスタイルスタイルシートを作成します。
なお,今回のページデザインでは,レイアウト階層図を記述していませんが,これは基本レイアウトをそのまま使用しているからです。スタイルを考える場合は,ページ全体のレイアウトのスタイルに関わる部分が有る場合は,レイアウト階層図を記述した方がよいでしょう。逆に基本レイアウトからレイアウト的に変化がほとんどない場合は省略しても大丈夫です。

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

サブトップページデザイン(スタイル用画像)のサンプルへのリンク

サブトップページデザイン(スタイルシート)のサンプルへのリンク

コンテンツの作成
コンテンツシートの作成です。トップページと同様の考え方で作成していきます。

サブトップページデザイン(コンテンツ)のサンプルへのリンク

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

サブトップページデザイン(サンプルXHTML)のサンプルへのリンク

0 件のコメント:

コメントを投稿