演習(13)- 詳細ページデザインの作成
これまで,基本レイアウトデザイン,トップページデザイン,書籍トップページと設計してきました。つぎは詳細ページに着手してみましょう。
レイアウト図の作成
最初は,レイアウト図の作成でしたね。
前回のサブトップページレイアウトを基にしてコンテンツベースで考えればよいと思います。
詳細ページデザイン(レイアウト図)のサンプルへのリンク
レイアウトスタイルの作成
レイアウト図に基づいて詳細ページと拡大ページのレイアウトスタイルとスタイルシートを作成します。
詳細ページデザイン(レイアウトスタイル)のサンプルへのリンク
詳細ページデザイン(スタイルシート)のサンプルへのリンク
コンテンツ画像の作成
コンテンツで使用する画像について考えていきます。
詳細ページデザイン(コンテンツ用画像)のサンプルへのリンク
コンテンツの作成
コンテンツについてレイアウト,スタイル,要素について作成していきます考えていきます。
詳細ページデザイン(訓読用コンテンツ)のサンプルへのリンク
詳細ページデザイン(拡大用コンテンツ)のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて,最初の「サンプルXHTML」が作成されます。
詳細ページデザイン(訓読用サンプルXHTML)のサンプルへのリンク
詳細ページデザイン(拡大用サンプルXHTML)のサンプルへのリンク
2011年1月25日火曜日
2011年1月20日木曜日
ホームページを作ろう - 演習(12)
演習(12) - サブトップページデザインの作成
これまで,基本レイアウトデザイン,トップページデザインと設計してきました。つぎは書籍トップページとなるサブトップページに着手してみましょう。
レイアウト図の作成
最初は,レイアウト図の作成でしたね。
ここでは,基本レイアウトを基に追加レイアウトを考えて作成していきます。ただし,前回のトップページよりは単純で基本レイアウトを基にしてコンテンツベースで考えればよいと思います。
サブトップページデザイン(レイアウト図)のサンプルへのリンク
レイアウトスタイル及びスタイルシートの作成
レイアウト図に基づいてトップページのレイアウトスタイルとスタイルシートを作成します。
なお,今回のページデザインでは,レイアウト階層図を記述していませんが,これは基本レイアウトをそのまま使用しているからです。スタイルを考える場合は,ページ全体のレイアウトのスタイルに関わる部分が有る場合は,レイアウト階層図を記述した方がよいでしょう。逆に基本レイアウトからレイアウト的に変化がほとんどない場合は省略しても大丈夫です。
サブトップページデザイン(レイアウトスタイル)のサンプルへのリンク
サブトップページデザイン(スタイル用画像)のサンプルへのリンク
サブトップページデザイン(スタイルシート)のサンプルへのリンク
コンテンツの作成
コンテンツシートの作成です。トップページと同様の考え方で作成していきます。
サブトップページデザイン(コンテンツ)のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて,最初の「サンプルXHTML」が作成されます。
サブトップページデザイン(サンプルXHTML)のサンプルへのリンク
これまで,基本レイアウトデザイン,トップページデザインと設計してきました。つぎは書籍トップページとなるサブトップページに着手してみましょう。
レイアウト図の作成
最初は,レイアウト図の作成でしたね。
ここでは,基本レイアウトを基に追加レイアウトを考えて作成していきます。ただし,前回のトップページよりは単純で基本レイアウトを基にしてコンテンツベースで考えればよいと思います。
サブトップページデザイン(レイアウト図)のサンプルへのリンク
レイアウトスタイル及びスタイルシートの作成
レイアウト図に基づいてトップページのレイアウトスタイルとスタイルシートを作成します。
なお,今回のページデザインでは,レイアウト階層図を記述していませんが,これは基本レイアウトをそのまま使用しているからです。スタイルを考える場合は,ページ全体のレイアウトのスタイルに関わる部分が有る場合は,レイアウト階層図を記述した方がよいでしょう。逆に基本レイアウトからレイアウト的に変化がほとんどない場合は省略しても大丈夫です。
サブトップページデザイン(レイアウトスタイル)のサンプルへのリンク
サブトップページデザイン(スタイル用画像)のサンプルへのリンク
サブトップページデザイン(スタイルシート)のサンプルへのリンク
コンテンツの作成
コンテンツシートの作成です。トップページと同様の考え方で作成していきます。
サブトップページデザイン(コンテンツ)のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて,最初の「サンプルXHTML」が作成されます。
サブトップページデザイン(サンプルXHTML)のサンプルへのリンク
ラベル:
ホームページを作ろう
2011年1月14日金曜日
ホームページを作ろう - 演習(11)
演習(11) - トップページデザインの作成
これまで,基本レイアウトデザインの作成手順を説明してきましたが,後は同様に各ページのデザインを作成していきます。まずは,トップページデザインから着手してみましょう。
レイアウト図の作成
最初は,レイアウト図の作成でしたね。
ここでは,基本レイアウトを基に追加レイアウトを考えて作成していきます。
トップページデザイン(レイアウト図)のサンプルへのリンク
レイアウト階層図の作成
つぎはレイアウト階層図の作成です。トップページでは,いろいろな線形性が考えられますが,今回は比較的作成が容易な方法として「subBody要素」というスタイルコンテナを別に用意して,その中に基本レイアウトで決めた「リンク領域」,そのつぎにトップページ独自の「リンク集領域」,そして「コンテンツ領域」という線形性にしました。
トップページデザイン(レイアウト階層図)のサンプルへのリンク
レイアウトスタイル及びスタイルシートの作成
レイアウト図とレイアウト階層図に基づいてトップページのレイアウトスタイルとスタイルシートを作成します。このとき注意してほしいこととして,いきなりスタイルシートが出来上がる訳でなく,具体的なスタイルを作成するために対になるXHTMLも同時に作成しているということです。
ここで作成したプロトタイプXHTMLが,つぎの段階の準備にもなります。
トップページデザイン(レイアウトスタイル)のサンプルへのリンク
トップページデザイン(スタイルシート)のサンプルへのリンク
コンテンツの作成
実は,この「コンテンツ」あるいは「コンテンツシート」とも言いますが,最も重要な作業です。
この「コンテンツ」によって,実際にどのような記述をページに表示するかが決まるからです。当然,最初は,仮データで作成する部分も多々あるでしょうけど,それらの部分も実際に公開する場合は,具体的な単語や文章になる訳です。つまり「コンテンツ」の作成とは,「原稿」の作成と言い換えることもできます。
トップページデザイン(コンテンツ)のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて,最初の「サンプルXHTML」が作成されます。
トップページデザイン(サンプルXHTML)のサンプルへのリンク
これまで,基本レイアウトデザインの作成手順を説明してきましたが,後は同様に各ページのデザインを作成していきます。まずは,トップページデザインから着手してみましょう。
レイアウト図の作成
最初は,レイアウト図の作成でしたね。
ここでは,基本レイアウトを基に追加レイアウトを考えて作成していきます。
トップページデザイン(レイアウト図)のサンプルへのリンク
レイアウト階層図の作成
つぎはレイアウト階層図の作成です。トップページでは,いろいろな線形性が考えられますが,今回は比較的作成が容易な方法として「subBody要素」というスタイルコンテナを別に用意して,その中に基本レイアウトで決めた「リンク領域」,そのつぎにトップページ独自の「リンク集領域」,そして「コンテンツ領域」という線形性にしました。
トップページデザイン(レイアウト階層図)のサンプルへのリンク
レイアウトスタイル及びスタイルシートの作成
レイアウト図とレイアウト階層図に基づいてトップページのレイアウトスタイルとスタイルシートを作成します。このとき注意してほしいこととして,いきなりスタイルシートが出来上がる訳でなく,具体的なスタイルを作成するために対になるXHTMLも同時に作成しているということです。
ここで作成したプロトタイプXHTMLが,つぎの段階の準備にもなります。
トップページデザイン(レイアウトスタイル)のサンプルへのリンク
トップページデザイン(スタイルシート)のサンプルへのリンク
コンテンツの作成
実は,この「コンテンツ」あるいは「コンテンツシート」とも言いますが,最も重要な作業です。
この「コンテンツ」によって,実際にどのような記述をページに表示するかが決まるからです。当然,最初は,仮データで作成する部分も多々あるでしょうけど,それらの部分も実際に公開する場合は,具体的な単語や文章になる訳です。つまり「コンテンツ」の作成とは,「原稿」の作成と言い換えることもできます。
トップページデザイン(コンテンツ)のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて,最初の「サンプルXHTML」が作成されます。
トップページデザイン(サンプルXHTML)のサンプルへのリンク
ラベル:
ホームページを作ろう
2011年1月13日木曜日
ホームページを作ろう - 演習(10)
演習(10) - 基本レイアウトデザイン(サンプルXHTML)の作成
基本レイアウトができた所で,実際に画面表示するためのサンプルXHTMLの作成です。
これまで同様プロトタイプによる試行錯誤のプロセスで作り上げて来たXHTMLを清書したようなものです。
サンプルXHTMLの制作で注意すべきことは,レイアウトの確認ができること,さらに使用する可能性の高い要素について表示できるようにし,それらがうまく機能しているかどうかテストを繰り返すことです。
テストでは,いくつかの種類のブラウザで表示したり,ブラウザウィンドウの大きさを変更したり,文字サイズを変更したり等,いくつかのパターンを検証します。
その結果,うまく行く場合もあれば,そうでない場合もあるでしょう。課題となるのは,うまく表示されない場合,それを例外とするのか,それともうまく表示できるように対処するのかを決定することです。
サンプル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
つぎは、「レイアウト図」で考えたレイアウトを具体的な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
つぎは、「サイト階層図(ラフ)」で考えた各ページの基本となる詳細なデザインを「基本レイアウトデザイン」として作成します。
基本レイアウトデザインは、サンプルのように机上だけで作成することも可能ですが、実際にはプロトタイプ(試作品)を作りながら最終稿として仕上げる方がデザイン上の妥協点を見いだしやすいかもしれません。
また、レイアウトデザインは物理デザインとも言い換えることができますから、論理デザインとして文書の線形性(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
つぎは、「コンテンツデザイン(ラフ)」で考えたページを具体的なページとしてサイト上の階層(ディレクトリ名およびファイル名)を「サイト階層図」として作成します。
演習の「サイト階層図」ルートディレクトリを起点として、サイトトップページ、書籍トップページ(大學トップ)、各詳細ページ(朱熹章句序から伝十章までの各ページ)、さらにそれに伴う画像やスタイルシートの器(ディレクトリ)の階層について考えます。ただし、あくまでも制作前段階ですから、ここで考えた階層が後々変更される可能性があることは十分あり得ます。
では、実際のサイト階層図のサンプルを以下のURLから参照してください。
http://hitp.konjiki.jp/hpex/hpex.html#s6
ラベル:
ホームページを作ろう
2011年1月2日日曜日
ホームページを作ろう - 演習(5)
演習(5) - コンテンツデザイン(ラフ)の作成
つぎは、「コンテンツシート(ラフ)」で考えた内容に基づいて、おおよその「コンテンツデザイン(ラフ)」を作成します。
「コンテンツデザイン(ラフ)」では、各ページの大まかなレイアウトについて考えます。
ここで考えたレイアウトを元にして具体的なスタイルシート用のデザインを構築していきます。
では、実際の制作ガイドラインのサンプルを以下のURLから参照してください。
http://hitp.konjiki.jp/hpex/hpex.html#s5
つぎは、「コンテンツシート(ラフ)」で考えた内容に基づいて、おおよその「コンテンツデザイン(ラフ)」を作成します。
「コンテンツデザイン(ラフ)」では、各ページの大まかなレイアウトについて考えます。
ここで考えたレイアウトを元にして具体的なスタイルシート用のデザインを構築していきます。
では、実際の制作ガイドラインのサンプルを以下のURLから参照してください。
http://hitp.konjiki.jp/hpex/hpex.html#s5
ラベル:
ホームページを作ろう
2011年1月1日土曜日
ホームページを作ろう - 演習(4)
演習(4) - 制作ガイドラインの作成
つぎは、「サイトマップ(ラフ)」で考えた内容について具体的なページとして制作していきます。しかし、その前に制作上の前提条件や制約について整理するために展開した「制作ガイドライン」を作成します。
「制作ガイドライン」では、いろいろなことについて考えますが、今回は以下のような事項について整理してみました。
では、実際の制作ガイドラインのサンプルを以下のURLから参照してください。
http://hitp.konjiki.jp/hpex/hpex.html#s4
つぎは、「サイトマップ(ラフ)」で考えた内容について具体的なページとして制作していきます。しかし、その前に制作上の前提条件や制約について整理するために展開した「制作ガイドライン」を作成します。
「制作ガイドライン」では、いろいろなことについて考えますが、今回は以下のような事項について整理してみました。
- 色
- モノトーンを基調とした配色とする(もっと具体的に基調色とか背景色とか個別に考える場合もあります)。
- 文字サイズ
- 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
ラベル:
ホームページを作ろう
登録:
投稿 (Atom)