課題 1.4: Web サイトのルック・アンド・フィールを設計する

デモの表示

Web サイトの設計を開始する前に、『課題 1.3: Web サイトに Web ページを取り込む』を完了しておく必要があります。

1 単位としての Web サイトを構成する Web ページは、同じビジュアル設計およびレイアウトになっている必要があります。個々のページが関連して表示されることで、まとまりのある Web サイトになります。最初に Web サイトの設計について考えてから個々の Web ページを作成するという方法でプロジェクトを開始するのが最良の方法です。そうしないと最終的には、組織的でない、また明らかなビジュアル上の関連性を持たないいくつかのばらばらの Web ページで構成された Web サイト になってしまいます。

Web サイトの共通のルック・アンド・フィールを作成する最良の方法は、ページ・テンプレートを使用することです。 ページ・テンプレートは単一のファイルで、サイト内にあるすべてのページ上で共通エレメントをコントロールするために使用することができます。ページにテンプレートを適用すると、 将来の設計変更のときの労力を最小にすることができます。 テンプレートの変更を 1 回だけ行えば、 テンプレートを使用しているすべてのページに適用されるからです。

ページ・テンプレートは共通域と コンテンツ領域を持つように設計されています。共通域 は、 ページ・テンプレートを使用するページすべてに共通の共用域で、 サイト・バナーやナビゲーション・エリアなど、すべてのページで同じエレメントに役立ちます。 コンテンツ領域 は、それぞれのページごとに異なっています。 個々のページにテンプレートを適用した後、 これらのページのコンテンツ領域を編集して、ページに固有の情報を追加することができます。 特定のページ固有のテキストやイメージのようなページ・エレメントは、 ページ・テンプレートのコンテンツ領域に入る タイプのエレメントです。1 つのテンプレートには、任意の数のコンテンツ領域および共通域を作成することができます。

ページ・テンプレートを使用すると、 スタイル・シートを使用した場合とは大きく異なる方法で、サイトのレイアウトのルック・アンド・フィールがコントロールされます。 『ページ・テンプレートとスタイル・シートの違いについてさらに学習したい方に』を参照してください。

このチュートリアルでは、ページ・テンプレートを作成し、 広告サイト全体に渡って一貫性のあるルック・アンド・フィールを設計するために、 いくつかのコンテンツ領域および共通域を定義します。 このページ・テンプレートを使用することで、各ページの外観は以下のデザインのようになります。

基本的なサイトのレイアウト

新規ページ・テンプレートの作成

  1. 「プロジェクト・エクスプローラー」ビューで、プロジェクト名 ClassifiedsTutorial を右クリックします。
  2. ポップアップ・メニューで、「新規」>「ページ・テンプレート・ファイル」と選択します。 「新規ページ・テンプレート・ファイル」ウィザードが表示されます。
  3. デフォルト・フォルダー (/ClassifiedsTutorial/WebContent) を受け入れます。 テンプレート・ファイルが作成されるとここに置かれます。
  4. 「ファイル名」フィールドに、テンプレート・ファイルの名前を入力します。 このチュートリアルでは、このファイルに template という名前を使用します。 結果ファイルのフルネームは template.jtpl になることに注意してください。
  5. マークアップ言語として必ず HTML を選択してください。
  6. モデル」として「JSP を含むテンプレート」を選択します。
  7. 拡張オプションの構成」チェック・ボックスはチェックを外しておきます。
  8. 終了」をクリックします。新規 テンプレートが Page Designer で開かれます。空のテンプレートが開かれたときに、 テンプレートにコンテンツ領域を少なくとも 1 つ追加する必要があると、ダイアログ・ボックスで指示されます。 「OK」をクリックし、ダイアログ・ボックスを閉じます。

空のテンプレートにいくつかのエレメントを追加する

これでテンプレートが作成されました。空のテンプレートにいくつかのエレメントを追加する必要があります。
  1. まず、テキストの「 コンテンツをここに配置します。 (Place content here)」を削除することから開始します。
  2. ページ・テンプレートの構造をレイアウトする最も簡単な方法の 1 つは、不可視テーブルを使用することです。 この方法で、使用するページのセクションをさまざまな方法で指定することができ、ページ上のオブジェクトの配置をコントロールすることができます。
    1. 「パレット」ビューで、「HTML タグ」ドロワーをクリックして展開します。
    2. テーブル」コンポーネントを「パレット」から空のテンプレートにドラッグします。 「テーブルの挿入」ダイアログが開きます。
    3. このテンプレートには、3 行 1 列が必要です。 「行数」フィールドに 3、「列数」フィールドに 1 を入力します。
    4. 次に「OK」をクリックします。テンプレート・ページにテーブルが表示されます。
  3. 初めに表示されるのはとても小さいテーブルです。テーブルの属性を編集して、 テーブルのサイズと構造を調整する必要があります。
    1. テーブルを右クリックし、「プロパティー」を選択して、「プロパティー」ビューを開きます。
    2. 「プロパティー」ビューで、「テーブル」タブをクリックします。
    3. 位置合わせ」フィールドで、「中央」を選択します。これでテーブルがページの中央に表示されます。
    4. テーブル全体のサイズを大きくする必要があります。 そうすることで、ページが表示される画面のサイズによって、 テンプレートの構造が展開されます。そうしないと、 ページのデザインは固定サイズで表示され、小画面に極大、 あるいは大画面に極小といった表示になる場合があります。「テーブルの幅」および「テーブルの高さ」フィールドで 90 と入力し、パーセント (%) 符号を選択します。
    5. ページにテーブルの実際のアウトラインを表示するのは好ましくないため、 「ボーダー」を 0 ピクセルに設定する必要もあります。 Page Designer は、不可視テーブルのボーダーを点線で表示します。
  4. すべてのページに、Web サイト名とサイト全体を結合するビジュアルを示すバナーが欲しい場合、このレイアウト・テーブルでその領域をフォーマットする必要があります。 また、サイトのためのロゴやバナー・イメージをグラフィック・デザイナーに作成してもらうことがありますが、 このテンプレートにバナー用プレースホルダーとしてテキストを追加することができます。
    1. テーブルの先頭のセルを選択します。
    2. 選択したセルについて、「プロパティー」ビューの「TD」タブで、「高さ」を 70 ピクセルに指定します。作成してきた テンプレートに、グラフィック・デザイナーが作成したバナー・グラフィックを入れる必要がある場合は、 このセルをバナー・グラフィックにぴったりのサイズに指定することができます。
    3. 「プロパティー」ビューの「TD」タブで、プルダウン・メニューから「」を「グレー」に設定します。 別の色を使用する場合は、 スポイト・ツールを使用して画面上の任意の場所から色を選択するか、またはフィールドに RGB 値 (グレーの場合は #808080 など) を入力することができます。
    4. 先頭の行の任意の場所をクリックして「広告へようこそ!」と入力します。
    5. デフォルト・テキストは小さくて見にくいため、フォントのサイズを大きくする必要があります。 フレーズ全体を選択して、「フォーマット」>「フォント」の順に選択します。
    6. サイトを新聞のような感じにするため「フォント」は「Courier」を選択します。 「サイズ」は「6」を選択し、 「」は「」に指定して、セルのグレーの背景に目立つようにします。
    7. 次に「OK」をクリックします。
    8. バナー・テキストを中央揃えにするには、 再度テキストを選択し、「フォーマット」>「位置合わせ」>「水平方向に中央揃え」の順に選択します。
  5. ユーザーが別のページに移動できるようにするには、バナーの下にリンクの行を挿入する必要があります。 ナビゲーション用のタブは後で追加しますが、ここでは 2 行目の形式を整えてボタン用に確保しておきます。
    1. テーブルの 2 番目のセルを選択します。
    2. このセルをバナーのセルと同じサイズに設定するため、「プロパティー」ビューの「TD」タブで「高さ」を70 ピクセルと入力します。
  6. 3 行目はコンテンツを配置する場所です。コンテンツは行の上と位置が合うようにしなければなりません。
    1. テーブルの 3 行目を選択します。
    2. 「プロパティー」ビューの「TD」タブで、「垂直方向の位置合わせ」で「」を選択します。

コンテンツ領域の追加

個々のページの特定の仕様を表示することができるテンプレートのエリアが必要です。 特定の仕様とは、例えば filtered_records ページ上の検索結果や new_record ページ上の新規掲載項目のための記入フォームなどです。サイトの共通構造とカラー・スキームの定義ができたので、ここでコンテンツ領域を追加することができます。
  1. 「パレット」ビューで「ページ・テンプレート」ドロワーをクリックします。
  2. コンテンツ領域」コンポーネントを 3 行目にドラッグします。ここが特定のコンテンツを提供する個々のページになります。「ページ・テンプレートのコンテンツ領域の挿入」ウィザードが開きます。
  3. コンテンツ領域名」のデフォルトの「bodyarea」を受け入れて、「OK」をクリックします。コンテンツ領域名では、 編成上の目的で、さまざまなコンテンツ領域に異なる名前を指定することができます。例えば、 それぞれのページに常に 2 つずつのコンテンツ領域があるサイトを設計している場合、 メインのコンテンツが取り込まれるエリアに bodyarea、 さらに検索結果が取り込まれるエリアに searcharea という名前を付けることができます。 これは既に存在しているページにページ・テンプレートを適用する必要 がある場合にも役立ちます。マークアップ・タグで既存ページのエリアを割り当て、 テンプレートの特定のコンテンツ領域を取り込むことができるためです。コンテンツ領域はテーブル・セルに挿入されます。
  4. ページ・テンプレートに対する変更を保管します。

基本テンプレート構造は、次のサンプルのようになっているはずです。

基本ページ・テンプレート

これで、共通域とコンテンツ領域を Web サイトに定義したページ・テンプレートが作成されました。 『課題 1.5: Web サイトにページ・テンプレートを適用する』を開始することができます。

ご利用条件 | フィードバック

(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.