課題 1.4: Web サイトの外観を設計する
Web サイトの外観の設計を開始する前に、『課題 1.3: Web サイトに Web ページを取り込む』を完了しておく必要があります。
1 単位としての Web サイトを構成する Web ページは、同じビジュアル設計およびレイアウトになっている必要があります。個々のページが関連して表示されることで、まとまりのある Web サイトになります。
最初に Web サイト設計を考えてから個々の Web ページを作成する、という方法でプロジェクトを開始するのが最良の方法です。そう
しないと、最終的には、編成や明らかな表示の関連性を持たないいくつかのばらばらの Web ページで構成された Web サイト になってしまいます。
Web サイトの共通外観を作成する最良の方法は、ページ・テンプレートを使用することです。
ページ・テンプレートは単一のファイルで、サイト内にあるすべてのページ上で
共通エレメントをコントロールするために使用することができます。ページにテンプレートを適用すると、
将来の設計変更のときの労力を最小にすることができます。
テンプレートの変更を 1 回だけ行えば、テンプレートを
使用しているすべてのページに適用されるからです。
ページ・テンプレートは共通域と
コンテンツ領域を持つように設計されています。共通域 は、
ページ・テンプレートを使用するページすべてに共通の共用域で、
サイト・バナーやナビゲーション・エリアなど、すべてのページで同じエレメントに役立ちます。
コンテンツ領域 は、それぞれのページごとに異なっています。
個々のページにテンプレートが適用された後は、
これらのページのコンテンツ領域を編集して、ページに固有の情報を追加することができます。
特定のページ固有のテキストやイメージのようなページ・エレメントは、
ページ・テンプレートのコンテンツ領域に入る
エレメント・タイプです。1 つのテンプレートには、任意の数のコンテンツ領域および共通域を作成することができます。
ページ・テンプレートを使用すると、
スタイル・シートを使用した場合とは大きく異なる方法で、サイトのレイアウトの外観がコントロールされます。
さらに詳しく学習するには、『ページ・テンプレートとスタイル・シートの違いについてさらに詳しく学習する』を参照してください。
このチュートリアルでは、ページ・テンプレートを作成し、
広告サイト全体の外観に一貫性のある設計をするために、いくつかのコンテンツ領域および共通域を定義します。
このページ・テンプレートによって、各ページの外観は、以下の設計のようになります。
新規ページ・テンプレートを作成する
- 「プロジェクト・ナビゲーター」ビューで、プロジェクト名「ClassifiedsTutorial」を右マウス・ボタンでクリックします。
- ポップアップ・メニューで、「新規」>「ページ・テンプレート・ファイル」と選択します。
「新規ページ・テンプレート・ファイル」ウィザードが表示されます。
- デフォルト・フォルダー (/ClassifiedsTutorial/WebContent) を受け入れます。
テンプレート・ファイルが作成されるとここに置かれます。
- 「ファイル名」フィールドに、テンプレート・ファイルの名前を入力します。
このチュートリアルではファイルに「template」という名前を使用します。
結果ファイルのフルネームは
「template.jtpl」になることに注意してください。
- マークアップ言語として必ず HTML を選択してください。
- 「モデル」に「Faces コンポーネントが含まれるテンプレート (Template containing Faces components)」を選択します。
- 「拡張オプションの構成」チェック・ボックスはチェックをはずしておきます。
- 「完了」をクリックします。新規
テンプレートが Page Designer で開かれます。空のテンプレートが開かれたときに、
ダイアログでテンプレートにコンテンツ領域を少なくとも 1 つ追加する必要があることが指摘されます。
「OK」をクリックし、ダイアログを閉じます。
空のテンプレートにいくつかのエレメントを追加する
これでテンプレートが作成されました。空のテンプレートにいくつかのエレメントを追加する必要があります。
- まず、デフォルトのコンテンツ領域を削除します。
デフォルトのコンテンツ領域は、デフォルト・テキストの「ここにコンテンツを配置します。」をクリックすると確認できます。
コンテンツ領域を囲む隠しボーダーが示されます。
- ページ・テンプレートの構成をレイアウトする最も簡単な方法の 1 つは、隠しテーブルを使用することです。
この方法で、使用するページのセクションをさまざまな方法で指定することができ、ページ上のオブジェクトの配置をコントロールすることができます。
- 「パレット」ビューで、「HTML タグ」ドロワーをクリックして展開します。
- 「テーブル」コンポーネントを「パレット」から空のテンプレートにドラッグします。
「テーブルの挿入」ウィザードが表示されます。
- このテンプレートでは、3 行 1 列が必要です。
「行数」フィールドに「3」、「列数」フィールドに「1」を入力します。
- 次に「OK」をクリックします。テンプレート・ページにテーブルが表示されます。
- 初めに表示されるのはとても小さいテーブルです。テーブルの属性を編集して、
テーブルのサイズと構造を調整する必要があります。
- 属性ビューで、「テーブル」タブをクリックします。
- 「位置合わせ」フィールドで、「中央」を選択します。これでテーブルがページの中央に表示されます。
- テーブル全体のサイズを大きくする必要があります。
そうすることで、ページが表示される画面のサイズによって、
テンプレートの構造が展開されます。そうしないと、
ページの設計は固定サイズで表示され、小画面に極大、
あるいは大画面に極小といった表示になる場合があります。「表の幅」および「表の
高さ」フィールドで 90 と入力し、パーセント (%) 符号を選択します。
- ページにテーブルの実際のアウトラインを表示するのは好ましくないため、
「ボーダー」を「0」ピクセルに設定する必要もあります。
Page Designer は、隠しテーブルのボーダーを点線で表示します。
- すべてのページの上に、Web サイト名とサイト全体を結合する表示としての
バナーが必要なので、このレイアウト・テーブルでその領域をフォーマットする必要があります。
また、グラフィック・デザイナーに、サイトのための
ロゴやバナー・イメージを作成してもらう場合が多いですが、
このテンプレートの中のバナー用プレースホルダーとして単にテキストを追加することもできます。
- テーブルの先頭のセルを選択します。
- セルが選択されたら、「属性」ビューの「セル」タブで、
「高さ」を 70 ピクセルに指定します。作成してきた
テンプレートに、グラフィック・デザイナーが作成したバナー・グラフィックを入れる必要がある場合は、
このセルをバナー・グラフィックにぴったりのサイズに指定することができます。
- 「属性」ビューの「セル」タブで、「色」をプルダウン・メニューから「グレー」に設定します。
別の色を使用する場合は、
点眼器ツールを使用して画面上の任意の場所から色を選択するか、またはフィールドに RGB 値 (グレーの場合は #808080 など) を入力することができます。
- 先頭の行の任意の場所をクリックして「広告へようこそ!」と入力します。
- デフォルト・テキストは小さくて見にくいため、フォントのサイズを大きくする必要があります。
句全体を選択して、「フォーマット」>「フォント」の順に選択します。
- サイトを新聞のような感じにするため「フォント」は「Courier」を選択します。
「サイズ」は「6」を選択し、
「色」は「白」に指定して、セルのグレーを背景にして目立つようにします。
- 次に「OK」をクリックします。
- バナー・テキストを中央そろえするには、
再度テキストを選択し、「フォーマット」>「位置合わせ」>「横方向中央 (Horizontal Center)」の順に選択します。
- ユーザーが別のページに移動できるようにするには、バナーの下にリンクの行を挿入する必要があります。
ナビゲーション用のタブは後で追加しますが、2 行目をボタン用に確保しておきます。
- テーブルの 2 番目のセルを選択します。
- このセルをバナーのセルと同じサイズに設定するため、「属性」ビューの「セル」タブで「高さ」に「70」ピクセルを入力します。
- 3 行目はコンテンツを配置する場所です。コンテンツは行の上と位置が合うようにしなければなりません。
- テーブルの 3 行目を選択します。
- 「属性」ビューの「セル」タブで、「垂直方向の配置」で「上」を選択します。
コンテンツ領域を追加する
個々のページの詳細を表示することができるテンプレートのエリアが必要です。
詳細とは、例えば filtered_records ページ上の検索結果や create_record 上の
新規掲載項目の記入フォームなどです。サイトの共通構造と
カラー・スキームの定義ができたので、ここでコンテンツ領域を
追加することができます。
- 「パレット」ビューで「ページ・テンプレート」ドロワーをクリックします。
- 「コンテンツ領域」コンポーネントを 3 行目にドラッグ・アンド・ドロップします。ここが特定のコンテンツを提供する個々のページになります。
「ページ・テンプレートのコンテンツ領域の挿入」ウィザードが表示されます。
- 「コンテンツ領域名」のデフォルトの「bodyarea」を受け入れて、「OK」をクリックします。コンテンツ領域名では、
編成上の目的で、さまざまなコンテンツ領域に異なる名前を指定することができます。例えば、
それぞれのページに常に 2 つずつの
コンテンツ領域があるサイトを設計している場合、
メインのコンテンツが取り込まれるエリアに bodyarea、
さらに検索結果が取り込まれるエリアに searcharea という名前を付けることができます。
これは既に存在しているページにページ・テンプレートを適用する必要
がある場合にも役立ちます。マークアップ・タグで既存のページのエリアを割り当て、
テンプレートの特定のコンテンツ領域を取り込むことができるためです。コンテンツ領域は
テーブル・セルに挿入されます。
- ページ・テンプレートに対する変更を保管します。
基本テンプレート構造は、次のようになっているはずです。
これで、共通域とコンテンツ領域を Web サイトに
定義したページ・テンプレートが作成されました。課題 1.5: Web サイトにページ・テンプレートを適用する』を開始することができます。