2011年2月3日木曜日

ホームページを作ろう - 演習(最終回)

演習(最終回)- 今後の展開

これまで,基本レイアウトデザイン,トップページデザイン,書籍トップページ,詳細ページのデザイン(設計),それらを元にした「ひな形(テンプレート)」を作成してきました。

この後は,テンプレートを実際のコンテンツとして展開していくことになります。

これまでの演習を「ホームページの制作演習 I」として,具体的なコンテンツ制作の部分を「ホームページの制作演習 II」として作成しました。

また,異なるレイアウト方式で制作した「ホームページの制作演習 III」も続けて作成しました。さらに,XHTMLとCSSのコンテンツを一冊のPDF形式としました。

以下のURLからPDFバージョンのテキストをご覧ください。何かの参考になれば幸いです。

ホームページ制作演習へのリンク

2011年2月2日水曜日

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

演習(14)- テンプレートデザインの作成

これまで,基本レイアウトデザイン,トップページデザイン,書籍トップページ、詳細ページのデザイン(設計)を順番に見てきました。

ここでは,それらのデザインを実際に制作場面で使用できる「ひな形(テンプレート)」を作成します。

ファイル命名規則の作成
まず最初にフォルダ名やファイル名など命名規則を定めます。

テンプレートデザイン(ファイル命名規則)のサンプルへのリンク

CSS規則の作成
つぎにスタイルシートで使用するID名やクラス名と要素,レイアウト領域の関係などについての規則を定めます。

テンプレートデザイン(CSS規則)のサンプルへのリンク

画像規則の作成
同様にして,画像についての規則を定めます。

テンプレートデザイン(画像規則)のサンプルへのリンク

サイト階層の作成
具体的なサイト階層を作成します。

テンプレートデザイン(サイト階層図)のサンプルへのリンク

共通スタイルシートの作成
これまでの手順でテンプレートの元となるコードは,かなり出来上がっているはずです。うまく行けば,それらが何の変更もなく使用できる場合もあります。

テンプレートデザイン(共通スタイルシート)のサンプルへのリンク

サイトトップページの作成
ここからは,各ページを作成する上で必要となる「ユーザー用コンテンツシート」,「制作用コンテンツシート」,それらを実現するための「スタイルシート」と「XHTML」の作成を行います。

テンプレートデザイン(コンテンツ:ユーザー用)のサンプルへのリンク
テンプレートデザイン(コンテンツ:制作用)のサンプルへのリンク
テンプレートデザイン(サイトトップCSS)のサンプルへのリンク
テンプレートデザイン(サイトトップXHTML)のサンプルへのリンク

書籍トップページの作成
サイトトップと同様に「ユーザー用コンテンツシート」,「制作用コンテンツシート」,それらを実現するための「スタイルシート」と「XHTML」の作成を行います。

なお,ここで作成するスタイルシートは,詳細ページでも共通して使用できる形式で作成しています。つまり,詳細ページの作成では,スタイルシートの作成はしなくて良いことになります。

テンプレートデザイン(コンテンツ:ユーザー用)のサンプルへのリンク
テンプレートデザイン(コンテンツ:制作用)のサンプルへのリンク
テンプレートデザイン(書籍用CSS)のサンプルへのリンク
テンプレートデザイン(書籍トップXHTML)のサンプルへのリンク

詳細(訓読)ページの作成
サイトトップと同様に「ユーザー用コンテンツシート」,「制作用コンテンツシート」,それらを実現するための「XHTML」の作成を行います。

なお,前項で作成したスタイルシートを使用するので,ここではスタイルシートの作成は行いません。

テンプレートデザイン(コンテンツ:ユーザー用)のサンプルへのリンク
テンプレートデザイン(コンテンツ:制作用)のサンプルへのリンク
テンプレートデザイン(詳細(訓読)ページXHTML)のサンプルへのリンク

詳細(拡大)ページの作成
詳細(訓読)ページと同様に「ユーザー用コンテンツシート」,「制作用コンテンツシート」,それらを実現するための「XHTML」の作成を行います。

テンプレートデザイン(コンテンツ:ユーザー用)のサンプルへのリンク
テンプレートデザイン(コンテンツ:制作用)のサンプルへのリンク
テンプレートデザイン(詳細(拡大)ページXHTML)のサンプルへのリンク


この演習(14)までで基本的なデザイン(設計)は終了したことになります。

かなり細かい形でドキュメントサンプルを掲載しましたが,それぞれのドキュメントをすべて使用する必要もありませんし,また,逆に不足しているドキュメントもあります。

そうした事項については,作成しようとするサイトの性格によって適宜過不足を調整すれば良いと思います。

2011年1月25日火曜日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2011年1月20日木曜日

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

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

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

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

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

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

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

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

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

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

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

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

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

2011年1月14日金曜日

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2011年1月13日木曜日

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

演習(10) - 基本レイアウトデザイン(サンプルXHTML)の作成

基本レイアウトができた所で,実際に画面表示するためのサンプルXHTMLの作成です。

これまで同様プロトタイプによる試行錯誤のプロセスで作り上げて来たXHTMLを清書したようなものです。

サンプルXHTMLの制作で注意すべきことは,レイアウトの確認ができること,さらに使用する可能性の高い要素について表示できるようにし,それらがうまく機能しているかどうかテストを繰り返すことです。

テストでは,いくつかの種類のブラウザで表示したり,ブラウザウィンドウの大きさを変更したり,文字サイズを変更したり等,いくつかのパターンを検証します。

その結果,うまく行く場合もあれば,そうでない場合もあるでしょう。課題となるのは,うまく表示されない場合,それを例外とするのか,それともうまく表示できるように対処するのかを決定することです。

サンプルXHTMLのサンプルへのリンク

2011年1月6日木曜日

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

演習(9) - 基本レイアウトデザイン(基本スタイルシート)の作成

いよいよスタイルシートの作成です。

これまで同様プロトタイプによる試行錯誤の繰り返しをドキュメントとしたものです。

最初に、使用する可能性のある要素について要素初期設定を行います。

要素初期設定のサンプルへのリンク

つぎに、それらの要素について基本スタイルを設定します。

基本スタイルのサンプルへのリンク

つぎに、レイアウトのためのレイアウトスタイルを設定します。

レイアウトスタイルのサンプルへのリンク

つぎに、スタイルシートで使用する画像を作成します。

レイアウトスタイルのサンプルへのリンク

最後に、それらをスタイルシートとして具体化します。

スタイルシートのサンプルへのリンク

2011年1月5日水曜日

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

演習(8) - 基本レイアウトデザイン(レイアウト階層)の作成

つぎは、「レイアウト図」で考えたレイアウトを具体的なXHTMLの線形性に視覚化する「レイアウト階層」を作成します。

前回の演習と同じことの繰り返しになりますが、プロトタイプ(試作品)を作りながら最終稿として仕上げる方が物理デザインと論理デザインの線形性との落としどころ(妥協点?)も見えてきます。

では、基本レイアウトデザインのサンプルを以下のURLから参照してください。

http://hitp.konjiki.jp/hpex/hpex.html#s7_2

2011年1月4日火曜日

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

演習(7) - 基本レイアウトデザインの作成

つぎは、「サイト階層図(ラフ)」で考えた各ページの基本となる詳細なデザインを「基本レイアウトデザイン」として作成します。

基本レイアウトデザインは、サンプルのように机上だけで作成することも可能ですが、実際にはプロトタイプ(試作品)を作りながら最終稿として仕上げる方がデザイン上の妥協点を見いだしやすいかもしれません。

また、レイアウトデザインは物理デザインとも言い換えることができますから、論理デザインとして文書の線形性(XHTMLの文書記述順序のこと)と物理デザインとの競合もプロトタイプをいくつかのパターンで作成した方が理解しやすいかもしれません。

実際、サンプルは、プロトタイプのXHTML、CSS、画像などをいくつか用意して作成した中の一案です。

では、基本レイアウトデザインのサンプルを以下のURLから参照してください。

http://hitp.konjiki.jp/hpex/hpex.html#s7

2011年1月3日月曜日

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

演習(6) - サイト階層図の作成

つぎは、「コンテンツデザイン(ラフ)」で考えたページを具体的なページとしてサイト上の階層(ディレクトリ名およびファイル名)を「サイト階層図」として作成します。

演習の「サイト階層図」ルートディレクトリを起点として、サイトトップページ、書籍トップページ(大學トップ)、各詳細ページ(朱熹章句序から伝十章までの各ページ)、さらにそれに伴う画像やスタイルシートの器(ディレクトリ)の階層について考えます。ただし、あくまでも制作前段階ですから、ここで考えた階層が後々変更される可能性があることは十分あり得ます。

では、実際のサイト階層図のサンプルを以下のURLから参照してください。

http://hitp.konjiki.jp/hpex/hpex.html#s6

2011年1月2日日曜日

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

演習(5) - コンテンツデザイン(ラフ)の作成

つぎは、「コンテンツシート(ラフ)」で考えた内容に基づいて、おおよその「コンテンツデザイン(ラフ)」を作成します。

「コンテンツデザイン(ラフ)」では、各ページの大まかなレイアウトについて考えます。

ここで考えたレイアウトを元にして具体的なスタイルシート用のデザインを構築していきます。
では、実際の制作ガイドラインのサンプルを以下のURLから参照してください。

http://hitp.konjiki.jp/hpex/hpex.html#s5

2011年1月1日土曜日

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

演習(4) - 制作ガイドラインの作成

つぎは、「サイトマップ(ラフ)」で考えた内容について具体的なページとして制作していきます。しかし、その前に制作上の前提条件や制約について整理するために展開した「制作ガイドライン」を作成します。

「制作ガイドライン」では、いろいろなことについて考えますが、今回は以下のような事項について整理してみました。
モノトーンを基調とした配色とする(もっと具体的に基調色とか背景色とか個別に考える場合もあります)。

文字サイズ
UA 依存とし,medium を基本サイズとする。

印刷
考慮しない(CSS では、印刷用の設定をすることもできますが、今回の演習では、割愛しました)。

幅や高さ
画面サイズの横幅として最大 1280 ピクセルの画面を基準とする。高さ制限は考慮しない。スマートフォンなどの小さい画面については,考慮しない。

対応ブラウザ
現在主流のモダンブラウザを対象とする。主なブラウザとしては,IE8,Firefox 3.x など。

OS
開発環境の OS は特に制限しない。

想定回線
ブロードバンド回線

閲覧場所
考慮しない。

CSS ルール
CSS 2.1 で作成する。基本スタイルシートを作成し,個別スタイルについては基本スタイルシートをインポートする形式で対応する。また,すべて外部スタイルシート指定とし,内部スタイルシートおよび style 属性は使用しない。

HTML ルール
XHTML 1.0 Strict で作成する。また,画像形式は PNG 形式を使用する。

禁止事項
非推奨要素 b,i,tt,u は使用禁止とする(これらスタイルに関わる要素はCSSで実現します)。

JavaScript ルール
使用しない(JavaScriptはまだ学習していないので、使用しないこととします)。

制作ツール

では、実際の制作ガイドラインのサンプルを以下のURLから参照してください。

http://hitp.konjiki.jp/hpex/hpex.html#s4