課題 1.6: Web サイトのダイナミック・ナビゲーションを実現する

デモの表示

Web サイトのダイナミック・ナビゲーションの実現を始める前に、『課題 1.5: Web サイトにページ・テンプレートを適用する』を完了しておく必要があります。

課題 1.2 で Web サイトの構成を設計したときに、ページ間の関係について決定したことがいくつかあります。 ラインで接続しながらページ・アイコンをレイアウトしたことを思い出してください。

サイト構造

1 つのページを他のページに関連付ける方法は、いくつかあります。 このような関係は、ファミリー内の関係に例えて表現されます。 この例では、「広告をすべて表示 (View All Classifieds)」が親ページとなり、他の 3 つのページが子ページとなります。 また、この 3 つのページは兄弟ページとなります。

このページの関係は、ナビゲーション・バーやタブなどのナビゲーション・リンクを生成する場合に使用されます。 各ページでは、関連付けられているページに基づいて、ナビゲーション・リンクが自動的に作成されます。 このプロセスは、ダイナミック・ナビゲーション と呼ばれています。

サイト構造を検査する

サイト構造の設定で、どのページがナビゲーションに含まれるようにセットアップされているかを確認します。Web サイト・デザ イナーで、リンクとしてダイナミック・ナビゲーションに含めるページ、サイト・マップに含めるページ、およびサイト構造と ページ関係に基づいた他のナビゲーション・オプションを指定できます。 これはサイトに必要なページがあるときには便利ですが、ナビゲーション機能の一部としては意味がありません。例えば、サイト に問題が生じたときに表示されるエラー・ページが存在する場合がありますが、このエラー・ページはナビゲーションの一部として表示したくはありません。
  1. 「プロジェクト・ナビゲーター」ビューの「Web サイト・ナビゲーション」をダブルクリックして、サイト構造を表示します。
  2. すべてのページに、デフォルトで選択された「ナビゲーションで表示」オプションがあります。これは、「ナビゲーションで表示」アイコン () が表示されていることから分かります。 「ナビゲーションで表示」アイコンはページ・アイコンのアイコンの行の最初にあります。 このオプションは、ナビゲーション・バーに表示させたい各ページに対して選択する必要があります。 ダイナミック・ナビゲーションがそのページにリンクを追加できるようにします。 ナビゲーションにページが表示されないようにすることもできます。 「広告をすべて表示 (View All Classifieds)」ページの検索オプションによりユーザーが送信されてくるため、検索結果ページ「フィルタリングされたリスト (Filtered Listings)」をナビゲーションから使用できないようにする必要があります。
    1. フィルタリングされたリスト (Filtered Listings)」ページ・アイコンを右マウス・ボタンでクリックします。
    2. ナビゲーション」>「ナビゲーションで表示」の順に選択し、このチェックマークを外します。 「ナビゲーションで表示」アイコンは「フィルタリングされたリスト (Filtered Listings)」ページ・アイコン上でぼかし表示になります。
  3. また、「広告をすべて表示 (View All Classifieds)」ページの更新オプションによりユーザーが送信されてくるため、「リストの更新 (Update Listing)」ページも使用不可にする必要があります。 「リストの更新 (Update Listing)」ページ・アイコンを右マウス・ボタンでクリックします。 「ナビゲーション」>「ナビゲーションで表示」の順に選択し、このチェックマークを外します。 「ナビゲーションで表示」アイコンは「リストの更新 (Update Listing)」ページ・アイコン上でぼかし表示になります。
  4. サイトにナビゲーション・ルートを設定する必要があります。トップ・ ページは、通常、サイトで作成される最初のページですが、多くの場合、ナビゲーション・ルートとして設定されます。 「広告をすべて表示 (View All Classifieds)」ページ・アイコンを右マウス・ボタンでクリックし、「ナビゲーション」>「ナビゲーション・ルートの設定」とクリックします。 この行の 3 番目のアイコン () は、「ルート (Root)」アイコンです。 ナビゲーション・ルートが重要なのは、Web サイト・ナビゲーションを生成するときに使用されるナビゲーション・バーなどのリンク・レベルを決定するからです。
    注:「広告をすべて表示 (View all Classifieds page)」ページおよび「リストの掲載 (Post a Listing)」ページのサイト・ナビゲーションによって設定されたデフォルト・オプションのチェックマークを外さないでください。
  5. Ctrl+S を押します。

ナビゲーション・コンポーネントをページ・テンプレートに追加する

  1. 「プロジェクト・ナビゲーター」ビューの「template.jtpl」をダブルクリックして、ページ・テンプレートに戻ります。
  2. 「パレット」ビューで「Web サイト・ナビゲーション」をクリックして、ナビゲーション・コンポーネントを含んでいるドロワーを開きます。 Web サイトに追加できるダイナミック・ナビゲーション・コンポーネントには、サイト・マップを含め、さまざまなタイプがあります。最も基本的なコンポーネントに「水平バー」がありますが、これはサイト構造に基づいたリンクの行で構成されています。
  3. リンクの行をそれぞれのページの上に設けて、ユーザーがサイト内の他のページにアクセスできるようにする必要があり ますが、ナビゲーションには何か視覚的に興味を引くものも追加したいものです。「水平タブ」コンポーネントをページ・テンプレートの 2 行目にドラッグ・アンド・ドロップします。このコンポーネントがタブのついた行にダイナミック・リンクを作成します。 「水平タブの挿入」ウィザードが表示されます。
  4. デフォルトを受け入れ「サンプル」ナビゲーション・コンポーネントを使用します。
  5. サムネール」イメージ (horizontal-tab01.html) でデフォルトを受け入れます。「ファイル名」 フィールドに自動的に値が取り込まれていることに注意してください。
  6. ページ間の関係に基づいて、ナビゲーション・バーに表示するリンクのタイプを選択します。 サイトのトップ・ページと、それぞれのページの兄弟と子がナビゲーションに表示されるように指定するために、以下のものを選択します。 前または次のリンクを選択すると、それらのリンクについて表示されるラベルである「進む」や「戻る」などを提供できます。
  7. OK」をクリックします。 ページ・テンプレートに「ナビゲーション・コンポーネント (Navigation Component)」アイコン () が表示されます。
  8. ページ・テンプレートに対する変更を保管します。 テンプレートを保管したときに、ダイナミック・ナビゲーションの変更はサイト内のすべてのページに適用されます。

ナビゲーション・コンポーネントは Web プロジェクトにいくつかのファイルを追加します。 テンプレートを保管した後で、「プロジェクト・ナビゲーター」ビューに新しい .html およびいくつかの .gif ファイルが含まれていることに注意してください。 これらのファイルは、ページ内でタブとして表示されます。

「プロジェクト・ナビゲーター」とナビゲーション

ナビゲーションのプレビュー

ナビゲーションがテンプレートではなく実際のページでどのように見えるかの事例を確認する場合は、 「プロジェクト・ナビゲーター」ビューの中の「all_records.jsp」をダブルクリックして、Page Designer の「プレビュー」タブをクリックします。 タブの上に表示された名前が、ファイル名ではなく、ページのナビゲーション・ラベルになっていることが分かります。また、現行 ページは強調表示タブで表示されており、サイト内をナビゲートしている間も常に上に強調表示タブとして存在することに注意してください。

ヒント: 「ナビゲーション」ビューでサイトの構造を変更すると、 ダイナミック・ナビゲーション・リンクは、新規の構造を反映するように自動的に更新されます。

ナビゲーション・タブ

この 2 つのタブの横には、リンク・アイコン リンク・アイコンabc シンボルが付いています。 これらのシンボルによって、これらのタブがリンクであり、ダイナミックに生成されたテキストであることが示されています。 実際のサーバーでページをテストしたり、表示する場合には、これらのアイコンは表示されません。

これで、ダイナミック・ナビゲーションのセットアップが完了しました。『課題 1.7: Web サイトをプレビューする』を始めることができます。

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

(C) Copyright IBM Corporation 1999, 2004. All Rights Reserved.