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

演習（１０） - 基本レイアウトデザイン（サンプルXHTML）の作成

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

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

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

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

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

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

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

演習（９） - 基本レイアウトデザイン（基本スタイルシート）の作成

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

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

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

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

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

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

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

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

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

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

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

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

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

演習（８） - 基本レイアウトデザイン（レイアウト階層）の作成

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

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

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

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

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

演習（７） - 基本レイアウトデザインの作成

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

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

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

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

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

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

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

演習（６） - サイト階層図の作成

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

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

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

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

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

演習（５） - コンテンツデザイン（ラフ）の作成

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

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

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

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

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

演習（４） - 制作ガイドラインの作成

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

「制作ガイドライン」では、いろいろなことについて考えますが、今回は以下のような事項について整理してみました。

色

モノトーンを基調とした配色とする（もっと具体的に基調色とか背景色とか個別に考える場合もあります）。

文字サイズ

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はまだ学習していないので、使用しないこととします）。

制作ツール

• テキストエディタ:(自作ツール:pectin) URL: http://sourceforge.jp/projects/pectin/
• 画像処理: GIMP(URL: http://www.gimp.org/),Inkscape(URL: http://inkscape.org/)
• FTP クライアント: FileZilla(URL: http://filezilla-project.org/)
• サーバー環境:この項目については後で説明します。

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

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