2011年1月25日火曜日

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

演習(13)- 詳細ページデザインの作成

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

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

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

レイアウトスタイルの作成
レイアウト図に基づいて詳細ページと拡大ページのレイアウトスタイルスタイルシートを作成します。

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

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

コンテンツ画像の作成
コンテンツで使用する画像について考えていきます。

詳細ページデザイン(コンテンツ用画像)のサンプルへのリンク

コンテンツの作成
コンテンツについてレイアウト,スタイル,要素について作成していきます考えていきます。

詳細ページデザイン(訓読用コンテンツ)のサンプルへのリンク

詳細ページデザイン(拡大用コンテンツ)のサンプルへのリンク

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

詳細ページデザイン(訓読用サンプルXHTML)のサンプルへのリンク

詳細ページデザイン(拡大用サンプルXHTML)のサンプルへのリンク

0 件のコメント:

コメントを投稿