Web サイト構造を作成する

Web サイトのページは階層で編成されています。Web Site Designer はこの階層構造情報を使用して、ナビゲーション・リンクとサイト・マップを自動的に生成します。

サイトの構造が変更される (例えば、新規ページが追加される) と、 新規 Web サイト構造を反映するためにナビゲーション・リンクが自動的に 再生成されます。このダイナミック・ナビゲーションは、ナビゲーション・バーと サイト・マップ用の特殊なコメント・タグを使用して実行されます。これらのコメント・タグは、 Web Site Designer が .website-config と呼ばれる XML ファイルに保管するサイト構造情報およびサイトに関連した情報を使用します。Web プロジェクトを作成する場合、 Web Site Designer サポートはプロジェクトのデフォルト機能です。Web プロジェクトには Web サイト・ナビゲーションという名前の website-config ファイルのプレースホルダーが 含まれます。Web サイト・ナビゲーションをダブルクリックすると、Web Site Designer が 起動され、ナビゲーション・ビューで website-config が開きます。

Web サイト 構造内のページ間の関係

Web Site Designer では、 Web サイトはナビゲーション・ビューに視覚的に表示されます。Web サイトの各 Web ページ は、ページ・アイコンとして表されます。線がページ・アイコンを接続して、 ページ間に存在する関係を示します。ページが互いに持つことのできる関係がいくつかあります。関係の多くは家族関係をモデルにしています。例えば、ページは 「親 - 子」の関係または「兄弟」の関係を持つことができます。

以下の例では、 「索引 」ページには「製品 」ページと「feedback.jsp 」ページに接続された線があります。これは、「索引」が子ページである「製品」と「feedback.jsp」の親であることを意味しています。また、「製品」ページと「feedback.jsp」ページが互いに兄弟であることも 意味しています。


Web Site Designer ナビゲーション・ビュー

エラー ・ページは階層において索引ページと 同じレベルにあります。ただし、これは接続線で他のどのページにも 接続されていません。エラー・ページと索引ページは 家族タイプの関係を持つ代わりに、対等の関係を持っています。

ページの関係は、自動的にナビゲーション・リンクを生成するために使用されます。したがって、索引、製品、および feedback.jsp のすべてのページで 「ナビゲーションで表示」オプションが選択されている場合、feedback.jsp ページのナビゲーション・バーにはその親 (索引ページ) と兄弟 (製品ページ) へのリンクを含むことができます。「ナビゲーションで表示」アイコン 「ナビゲーションで表示」アイコンのピクチャー が可視であるため、この 3 つすべてのページがナビゲーションに 表示されているのが分かります。ただし、エラー・ページはナビゲーションには表示されません。 これは、サイトが問題を検出したときにはエラー・ページを作成したいけれど、 そのエラー・ページをナビゲーションの一部として表示したり、またはサイト・マップ上には 表示したくないという理由ですので理にかなっています。また、サイト・マップにページを組み込んだり、サイト・マップから除去することもできます。この例では、エラー・ページを除く すべてのページが「サイト・マップに表示「サイト・マップに表示」アイコンのピクチャー として表示されます。

Web サイト構造にナビゲーションを定義する

トップ・ページ (通常、サイトで作成される最初のページ) は、 しばしば「ナビゲーション・ルート「ナビゲーション・ルート」アイコンのピクチャーとして設定されます。ただし、どのページをナビゲーション・ルートにするかは変更できます。 ナビゲーション・ルートは、ナビゲーション・バーや サイト・マップといった Web サイト・ナビゲーションを生成するときに使用される リンク・レベルを決定するため重要です。この例では、索引ページが ナビゲーション・ルートです。

Web ページ・プロパティー

Web Site Designer では、 どのページに実際のファイルが関連付けられているかを、 コード・アイコン (HTML コード・アイコン および JSP コード・アイコン) で見ることができます。この例では、索引ページには関連した HTML ファイルがあり、feedback.jsp ページには関連した JSP ページがあります。関連付けられたファイルがあるページ・アイコンは 実線の黒い枠を持っていますが、一方でアイコンだけを持っているページはそのページが単なる プレースホルダーであることを示すために破線の枠を持っています。

また、ページ・アイコンから、ページ・テンプレートが適用されているかどうかも分かります。ページと関連付けられたページ・テンプレートがある場合、アイコンの背景は デフォルトで青になります。ページ・テンプレートが索引ページに適用されている場合は、 ページ・アイコンの背景が青なので分かります。

トップ・ページが 定義された新規 Web サイトができたら、Web Site Designer でページ・アイコンを作成してサイトにマップすることによりそのサイトにデータを取り込むことができます。Web Site Designer を 使用してサイト全体の編成を計画およびレイアウトし、その後、サイトを満たす それぞれの Web ページ・ファイルを作成することができます。

Web Site Designer は、エディターと Web サイト・ナビゲーション・ドロワーで構成されています。
  • Web Site Designer エディター。 Web Site Designer エディターは、.website-config ファイルを編集しているときや Web サイト・ナビゲーション・ファイルを編集しているときは可視となります。Web Site Designer エディター内でサイト全体を表示することができます。このツールを使用して、Web サイトを構成する Web ページを 追加、削除、および再配置することができます。エディターには、ナビゲーション・ビューと詳細ビューという 2 つのビューがあります。ナビゲーション・ビューには Web サイトの構造が表示され、詳細ビューには サイト構造で使用されるすべての Web ページのリストが表示されます。
  • Web サイト・ナビゲーション・ドロワー。 Web サイト・ナビゲーション・ドロワー は、HTML または JSP ページを編集しているときに可視となります。サイト・ドロワーは、 Web Site Designer エディターが開いているときに開きます。パレット・ビューでは、 さまざまなナビゲーション・バーやサイト・マップなどの Web サイト・エレメントを含む Web サイト・ナビゲーション・ドロワーがあります。これらの項目を Page Designer で Web ページ 上にドラッグすることができます。
  • サイト・ドロワー。 パレット・ビューには、ページおよびプロジェクト・エレメント を含むサイト・ドロワーがあります。

これらの Web Site Designer ツールを、フリー・レイアウト・モード やページ・テンプレートなど、他の Web ツールと一緒に使用することができます。既存のページ・テンプレートを変更したり独自のページ・テンプレートを作成した後、一貫性のある設計を確実に行うために Web サイト内のすべての Web ページに そのテンプレートを適用することができます。ページ・テンプレートを編集するときには、 各 Web ページのレイアウトに変更を行うためにフリー・レイアウト・モードを使用することができます。それぞれ個々の Web ページでナビゲーション・バーのサイズ変更などの変更を行う代わりに、ページ・テンプレートを変更することができます。その変更は Web サイト全体に適用されます。

Web Site Designer にデータを取り込む

Web Site Designer で Web サイト・ナビゲーションを使用する
注:
  • 一部の文書タイプでは Web サイト・ナビゲーションを使用できません。Web サイト・ナビゲーション を追加した後に「この Web サイト・ナビゲーションは使用できません 」というエラー・メッセージを受け取った場合は、選択した Web サイト・ナビゲーションの 仕様ファイルがターゲット・ページで使用されると、無効なソースが生成されます。例えば、 ページの文書タイプが CHTML または WML の場合、ほとんどすべての Web サイト・ナビゲーションに これらのマークアップ言語で無効なタグが含まれています。
  • 関連した仕様ファイルが原因で、ナビゲーション・バーに無効なソースが 含まれる可能性があります。仕様ファイルを編集してエラーを訂正してください。オンライン・ヘルプ の「ナビゲーション仕様の編集」というトピックを参照してください。
  • ページのナビゲーション・バーに壊れた文字が含まれる可能性があります。これは、 ナビゲーション・ラベルに、ページに指定されたエンコード・ルールに従って エンコードできない文字が含まれている場合に発生します。この問題を避けるためには、 ナビゲーション・ラベルで使用される文字のタイプを、ページで使用されるエンコードに限定するか、豊富な表現を持つエンコード・ルールを使用してください。
  • 「サイト・マップの挿入」ウィンドウにリストされたすべてのサンプル仕様ファイルは、 サイト構造のレベル 1 からレベル 5 の間のページを処理することができます。siteedit:sitemap タグ の属性ビューでレベル 5 を超える終了レベルを設定しても、レベル 5 を超えるページへのリンクはサイト・マップには組み込まれません。
関連概念
Web プロジェクト
Cascading Style Sheet (CSS) Designer
関連タスク
Web サイトを設計する
ページ・テンプレートを作成する
フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.