演習（１４）- テンプレートデザインの作成
これまで，基本レイアウトデザイン，トップページデザイン，書籍トップページ、詳細ページのデザイン（設計）を順番に見てきました。
ここでは，それらのデザインを実際に制作場面で使用できる「ひな形（テンプレート）」を作成します。
ファイル命名規則の作成
まず最初にフォルダ名やファイル名など命名規則を定めます。
テンプレートデザイン（ファイル命名規則）のサンプルへのリンク
CSS規則の作成
つぎにスタイルシートで使用するID名やクラス名と要素，レイアウト領域の関係などについての規則を定めます。
テンプレートデザイン（CSS規則）のサンプルへのリンク
画像規則の作成
同様にして，画像についての規則を定めます。
テンプレートデザイン（画像規則）のサンプルへのリンク
サイト階層の作成
具体的なサイト階層を作成します。
テンプレートデザイン（サイト階層図）のサンプルへのリンク
共通スタイルシートの作成
これまでの手順でテンプレートの元となるコードは，かなり出来上がっているはずです。うまく行けば，それらが何の変更もなく使用できる場合もあります。
テンプレートデザイン（共通スタイルシート）のサンプルへのリンク
サイトトップページの作成
ここからは，各ページを作成する上で必要となる「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「スタイルシート」と「XHTML」の作成を行います。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（サイトトップCSS）のサンプルへのリンク
テンプレートデザイン（サイトトップXHTML）のサンプルへのリンク
書籍トップページの作成
サイトトップと同様に「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「スタイルシート」と「XHTML」の作成を行います。
なお，ここで作成するスタイルシートは，詳細ページでも共通して使用できる形式で作成しています。つまり，詳細ページの作成では，スタイルシートの作成はしなくて良いことになります。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（書籍用CSS）のサンプルへのリンク
テンプレートデザイン（書籍トップXHTML）のサンプルへのリンク
詳細（訓読）ページの作成
サイトトップと同様に「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「XHTML」の作成を行います。
なお，前項で作成したスタイルシートを使用するので，ここではスタイルシートの作成は行いません。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（詳細（訓読）ページXHTML）のサンプルへのリンク
詳細（拡大）ページの作成
詳細（訓読）ページと同様に「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「XHTML」の作成を行います。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（詳細（拡大）ページXHTML）のサンプルへのリンク
この演習（１４）までで基本的なデザイン（設計）は終了したことになります。
かなり細かい形でドキュメントサンプルを掲載しましたが，それぞれのドキュメントをすべて使用する必要もありませんし，また，逆に不足しているドキュメントもあります。
そうした事項については，作成しようとするサイトの性格によって適宜過不足を調整すれば良いと思います。
0 件のコメント:
コメントを投稿