HTTPプロキシでガート（？）されたMacで罠にハマった！！！
2014年1月22日水曜日
2011年2月3日木曜日
ホームページを作ろう - 演習（最終回）
演習（最終回）- 今後の展開
これまで，基本レイアウトデザイン，トップページデザイン，書籍トップページ，詳細ページのデザイン（設計），それらを元にした「ひな形（テンプレート）」を作成してきました。
この後は，テンプレートを実際のコンテンツとして展開していくことになります。
これまでの演習を「ホームページの制作演習 I」として，具体的なコンテンツ制作の部分を「ホームページの制作演習 II」として作成しました。
また，異なるレイアウト方式で制作した「ホームページの制作演習 III」も続けて作成しました。さらに，XHTMLとCSSのコンテンツを一冊のPDF形式としました。
以下のURLからPDFバージョンのテキストをご覧ください。何かの参考になれば幸いです。
ホームページ制作演習へのリンク
これまで，基本レイアウトデザイン，トップページデザイン，書籍トップページ，詳細ページのデザイン（設計），それらを元にした「ひな形（テンプレート）」を作成してきました。
この後は，テンプレートを実際のコンテンツとして展開していくことになります。
これまでの演習を「ホームページの制作演習 I」として，具体的なコンテンツ制作の部分を「ホームページの制作演習 II」として作成しました。
また，異なるレイアウト方式で制作した「ホームページの制作演習 III」も続けて作成しました。さらに，XHTMLとCSSのコンテンツを一冊のPDF形式としました。
以下のURLからPDFバージョンのテキストをご覧ください。何かの参考になれば幸いです。
ホームページ制作演習へのリンク
2011年2月2日水曜日
ホームページを作ろう - 演習（１４）
演習（１４）- テンプレートデザインの作成
これまで，基本レイアウトデザイン，トップページデザイン，書籍トップページ、詳細ページのデザイン（設計）を順番に見てきました。
ここでは，それらのデザインを実際に制作場面で使用できる「ひな形（テンプレート）」を作成します。
ファイル命名規則の作成
まず最初にフォルダ名やファイル名など命名規則を定めます。
テンプレートデザイン（ファイル命名規則）のサンプルへのリンク
CSS規則の作成
つぎにスタイルシートで使用するID名やクラス名と要素，レイアウト領域の関係などについての規則を定めます。
テンプレートデザイン（CSS規則）のサンプルへのリンク
画像規則の作成
同様にして，画像についての規則を定めます。
テンプレートデザイン（画像規則）のサンプルへのリンク
サイト階層の作成
具体的なサイト階層を作成します。
テンプレートデザイン（サイト階層図）のサンプルへのリンク
共通スタイルシートの作成
これまでの手順でテンプレートの元となるコードは，かなり出来上がっているはずです。うまく行けば，それらが何の変更もなく使用できる場合もあります。
テンプレートデザイン（共通スタイルシート）のサンプルへのリンク
サイトトップページの作成
ここからは，各ページを作成する上で必要となる「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「スタイルシート」と「XHTML」の作成を行います。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（サイトトップCSS）のサンプルへのリンク
テンプレートデザイン（サイトトップXHTML）のサンプルへのリンク
書籍トップページの作成
サイトトップと同様に「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「スタイルシート」と「XHTML」の作成を行います。
なお，ここで作成するスタイルシートは，詳細ページでも共通して使用できる形式で作成しています。つまり，詳細ページの作成では，スタイルシートの作成はしなくて良いことになります。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（書籍用CSS）のサンプルへのリンク
テンプレートデザイン（書籍トップXHTML）のサンプルへのリンク
詳細（訓読）ページの作成
サイトトップと同様に「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「XHTML」の作成を行います。
なお，前項で作成したスタイルシートを使用するので，ここではスタイルシートの作成は行いません。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（詳細（訓読）ページXHTML）のサンプルへのリンク
詳細（拡大）ページの作成
詳細（訓読）ページと同様に「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「XHTML」の作成を行います。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（詳細（拡大）ページXHTML）のサンプルへのリンク
この演習（１４）までで基本的なデザイン（設計）は終了したことになります。
かなり細かい形でドキュメントサンプルを掲載しましたが，それぞれのドキュメントをすべて使用する必要もありませんし，また，逆に不足しているドキュメントもあります。
そうした事項については，作成しようとするサイトの性格によって適宜過不足を調整すれば良いと思います。
これまで，基本レイアウトデザイン，トップページデザイン，書籍トップページ、詳細ページのデザイン（設計）を順番に見てきました。
ここでは，それらのデザインを実際に制作場面で使用できる「ひな形（テンプレート）」を作成します。
ファイル命名規則の作成
まず最初にフォルダ名やファイル名など命名規則を定めます。
テンプレートデザイン（ファイル命名規則）のサンプルへのリンク
CSS規則の作成
つぎにスタイルシートで使用するID名やクラス名と要素，レイアウト領域の関係などについての規則を定めます。
テンプレートデザイン（CSS規則）のサンプルへのリンク
画像規則の作成
同様にして，画像についての規則を定めます。
テンプレートデザイン（画像規則）のサンプルへのリンク
サイト階層の作成
具体的なサイト階層を作成します。
テンプレートデザイン（サイト階層図）のサンプルへのリンク
共通スタイルシートの作成
これまでの手順でテンプレートの元となるコードは，かなり出来上がっているはずです。うまく行けば，それらが何の変更もなく使用できる場合もあります。
テンプレートデザイン（共通スタイルシート）のサンプルへのリンク
サイトトップページの作成
ここからは，各ページを作成する上で必要となる「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「スタイルシート」と「XHTML」の作成を行います。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（サイトトップCSS）のサンプルへのリンク
テンプレートデザイン（サイトトップXHTML）のサンプルへのリンク
書籍トップページの作成
サイトトップと同様に「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「スタイルシート」と「XHTML」の作成を行います。
なお，ここで作成するスタイルシートは，詳細ページでも共通して使用できる形式で作成しています。つまり，詳細ページの作成では，スタイルシートの作成はしなくて良いことになります。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（書籍用CSS）のサンプルへのリンク
テンプレートデザイン（書籍トップXHTML）のサンプルへのリンク
詳細（訓読）ページの作成
サイトトップと同様に「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「XHTML」の作成を行います。
なお，前項で作成したスタイルシートを使用するので，ここではスタイルシートの作成は行いません。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（詳細（訓読）ページXHTML）のサンプルへのリンク
詳細（拡大）ページの作成
詳細（訓読）ページと同様に「ユーザー用コンテンツシート」，「制作用コンテンツシート」，それらを実現するための「XHTML」の作成を行います。
テンプレートデザイン（コンテンツ：ユーザー用）のサンプルへのリンク
テンプレートデザイン（コンテンツ：制作用）のサンプルへのリンク
テンプレートデザイン（詳細（拡大）ページXHTML）のサンプルへのリンク
この演習（１４）までで基本的なデザイン（設計）は終了したことになります。
かなり細かい形でドキュメントサンプルを掲載しましたが，それぞれのドキュメントをすべて使用する必要もありませんし，また，逆に不足しているドキュメントもあります。
そうした事項については，作成しようとするサイトの性格によって適宜過不足を調整すれば良いと思います。
2011年1月25日火曜日
ホームページを作ろう - 演習（１３）
演習（１３）- 詳細ページデザインの作成
これまで，基本レイアウトデザイン，トップページデザイン，書籍トップページと設計してきました。つぎは詳細ページに着手してみましょう。
レイアウト図の作成
最初は，レイアウト図の作成でしたね。
前回のサブトップページレイアウトを基にしてコンテンツベースで考えればよいと思います。
詳細ページデザイン（レイアウト図）のサンプルへのリンク
レイアウトスタイルの作成
レイアウト図に基づいて詳細ページと拡大ページのレイアウトスタイルとスタイルシートを作成します。
詳細ページデザイン（レイアウトスタイル）のサンプルへのリンク
詳細ページデザイン（スタイルシート）のサンプルへのリンク
コンテンツ画像の作成
コンテンツで使用する画像について考えていきます。
詳細ページデザイン（コンテンツ用画像）のサンプルへのリンク
コンテンツの作成
コンテンツについてレイアウト，スタイル，要素について作成していきます考えていきます。
詳細ページデザイン（訓読用コンテンツ）のサンプルへのリンク
詳細ページデザイン（拡大用コンテンツ）のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて，最初の「サンプルXHTML」が作成されます。
詳細ページデザイン（訓読用サンプルXHTML）のサンプルへのリンク
詳細ページデザイン（拡大用サンプルXHTML）のサンプルへのリンク
これまで，基本レイアウトデザイン，トップページデザイン，書籍トップページと設計してきました。つぎは詳細ページに着手してみましょう。
レイアウト図の作成
最初は，レイアウト図の作成でしたね。
前回のサブトップページレイアウトを基にしてコンテンツベースで考えればよいと思います。
詳細ページデザイン（レイアウト図）のサンプルへのリンク
レイアウトスタイルの作成
レイアウト図に基づいて詳細ページと拡大ページのレイアウトスタイルとスタイルシートを作成します。
詳細ページデザイン（レイアウトスタイル）のサンプルへのリンク
詳細ページデザイン（スタイルシート）のサンプルへのリンク
コンテンツ画像の作成
コンテンツで使用する画像について考えていきます。
詳細ページデザイン（コンテンツ用画像）のサンプルへのリンク
コンテンツの作成
コンテンツについてレイアウト，スタイル，要素について作成していきます考えていきます。
詳細ページデザイン（訓読用コンテンツ）のサンプルへのリンク
詳細ページデザイン（拡大用コンテンツ）のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて，最初の「サンプルXHTML」が作成されます。
詳細ページデザイン（訓読用サンプルXHTML）のサンプルへのリンク
詳細ページデザイン（拡大用サンプルXHTML）のサンプルへのリンク
2011年1月20日木曜日
ホームページを作ろう - 演習（１２）
演習（１２） - サブトップページデザインの作成
これまで，基本レイアウトデザイン，トップページデザインと設計してきました。つぎは書籍トップページとなるサブトップページに着手してみましょう。
レイアウト図の作成
最初は，レイアウト図の作成でしたね。
ここでは，基本レイアウトを基に追加レイアウトを考えて作成していきます。ただし，前回のトップページよりは単純で基本レイアウトを基にしてコンテンツベースで考えればよいと思います。
サブトップページデザイン（レイアウト図）のサンプルへのリンク
レイアウトスタイル及びスタイルシートの作成
レイアウト図に基づいてトップページのレイアウトスタイルとスタイルシートを作成します。
なお，今回のページデザインでは，レイアウト階層図を記述していませんが，これは基本レイアウトをそのまま使用しているからです。スタイルを考える場合は，ページ全体のレイアウトのスタイルに関わる部分が有る場合は，レイアウト階層図を記述した方がよいでしょう。逆に基本レイアウトからレイアウト的に変化がほとんどない場合は省略しても大丈夫です。
サブトップページデザイン（レイアウトスタイル）のサンプルへのリンク
サブトップページデザイン（スタイル用画像）のサンプルへのリンク
サブトップページデザイン（スタイルシート）のサンプルへのリンク
コンテンツの作成
コンテンツシートの作成です。トップページと同様の考え方で作成していきます。
サブトップページデザイン（コンテンツ）のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて，最初の「サンプルXHTML」が作成されます。
サブトップページデザイン（サンプルXHTML）のサンプルへのリンク
これまで，基本レイアウトデザイン，トップページデザインと設計してきました。つぎは書籍トップページとなるサブトップページに着手してみましょう。
レイアウト図の作成
最初は，レイアウト図の作成でしたね。
ここでは，基本レイアウトを基に追加レイアウトを考えて作成していきます。ただし，前回のトップページよりは単純で基本レイアウトを基にしてコンテンツベースで考えればよいと思います。
サブトップページデザイン（レイアウト図）のサンプルへのリンク
レイアウトスタイル及びスタイルシートの作成
レイアウト図に基づいてトップページのレイアウトスタイルとスタイルシートを作成します。
なお，今回のページデザインでは，レイアウト階層図を記述していませんが，これは基本レイアウトをそのまま使用しているからです。スタイルを考える場合は，ページ全体のレイアウトのスタイルに関わる部分が有る場合は，レイアウト階層図を記述した方がよいでしょう。逆に基本レイアウトからレイアウト的に変化がほとんどない場合は省略しても大丈夫です。
サブトップページデザイン（レイアウトスタイル）のサンプルへのリンク
サブトップページデザイン（スタイル用画像）のサンプルへのリンク
サブトップページデザイン（スタイルシート）のサンプルへのリンク
コンテンツの作成
コンテンツシートの作成です。トップページと同様の考え方で作成していきます。
サブトップページデザイン（コンテンツ）のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて，最初の「サンプルXHTML」が作成されます。
サブトップページデザイン（サンプルXHTML）のサンプルへのリンク
2011年1月14日金曜日
ホームページを作ろう - 演習（１１）
演習（１１） - トップページデザインの作成
これまで，基本レイアウトデザインの作成手順を説明してきましたが，後は同様に各ページのデザインを作成していきます。まずは，トップページデザインから着手してみましょう。
レイアウト図の作成
最初は，レイアウト図の作成でしたね。
ここでは，基本レイアウトを基に追加レイアウトを考えて作成していきます。
トップページデザイン（レイアウト図）のサンプルへのリンク
レイアウト階層図の作成
つぎはレイアウト階層図の作成です。トップページでは，いろいろな線形性が考えられますが，今回は比較的作成が容易な方法として「subBody要素」というスタイルコンテナを別に用意して，その中に基本レイアウトで決めた「リンク領域」，そのつぎにトップページ独自の「リンク集領域」，そして「コンテンツ領域」という線形性にしました。
トップページデザイン（レイアウト階層図）のサンプルへのリンク
レイアウトスタイル及びスタイルシートの作成
レイアウト図とレイアウト階層図に基づいてトップページのレイアウトスタイルとスタイルシートを作成します。このとき注意してほしいこととして，いきなりスタイルシートが出来上がる訳でなく，具体的なスタイルを作成するために対になるXHTMLも同時に作成しているということです。
ここで作成したプロトタイプXHTMLが，つぎの段階の準備にもなります。
トップページデザイン（レイアウトスタイル）のサンプルへのリンク
トップページデザイン（スタイルシート）のサンプルへのリンク
コンテンツの作成
実は，この「コンテンツ」あるいは「コンテンツシート」とも言いますが，最も重要な作業です。
この「コンテンツ」によって，実際にどのような記述をページに表示するかが決まるからです。当然，最初は，仮データで作成する部分も多々あるでしょうけど，それらの部分も実際に公開する場合は，具体的な単語や文章になる訳です。つまり「コンテンツ」の作成とは，「原稿」の作成と言い換えることもできます。
トップページデザイン（コンテンツ）のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて，最初の「サンプルXHTML」が作成されます。
トップページデザイン（サンプルXHTML）のサンプルへのリンク
これまで，基本レイアウトデザインの作成手順を説明してきましたが，後は同様に各ページのデザインを作成していきます。まずは，トップページデザインから着手してみましょう。
レイアウト図の作成
最初は，レイアウト図の作成でしたね。
ここでは，基本レイアウトを基に追加レイアウトを考えて作成していきます。
トップページデザイン（レイアウト図）のサンプルへのリンク
レイアウト階層図の作成
つぎはレイアウト階層図の作成です。トップページでは，いろいろな線形性が考えられますが，今回は比較的作成が容易な方法として「subBody要素」というスタイルコンテナを別に用意して，その中に基本レイアウトで決めた「リンク領域」，そのつぎにトップページ独自の「リンク集領域」，そして「コンテンツ領域」という線形性にしました。
トップページデザイン（レイアウト階層図）のサンプルへのリンク
レイアウトスタイル及びスタイルシートの作成
レイアウト図とレイアウト階層図に基づいてトップページのレイアウトスタイルとスタイルシートを作成します。このとき注意してほしいこととして，いきなりスタイルシートが出来上がる訳でなく，具体的なスタイルを作成するために対になるXHTMLも同時に作成しているということです。
ここで作成したプロトタイプXHTMLが，つぎの段階の準備にもなります。
トップページデザイン（レイアウトスタイル）のサンプルへのリンク
トップページデザイン（スタイルシート）のサンプルへのリンク
コンテンツの作成
実は，この「コンテンツ」あるいは「コンテンツシート」とも言いますが，最も重要な作業です。
この「コンテンツ」によって，実際にどのような記述をページに表示するかが決まるからです。当然，最初は，仮データで作成する部分も多々あるでしょうけど，それらの部分も実際に公開する場合は，具体的な単語や文章になる訳です。つまり「コンテンツ」の作成とは，「原稿」の作成と言い換えることもできます。
トップページデザイン（コンテンツ）のサンプルへのリンク
サンプルXHTMLの作成
最後にスタイルシートを作成するときに使用したプロトタイプにコンテンツを合わせて，最初の「サンプルXHTML」が作成されます。
トップページデザイン（サンプルXHTML）のサンプルへのリンク
登録:
投稿 (Atom)