対象アプリケーション
Microsoft Office FrontPage® 2003

洗練された構造でコンテンツがまとめられた Web サイトに感心することがありませんか。そのようなサイトには、角の丸い詳細タブや影付きの複雑な罫線による修飾などが使用されていることがあります。そのようなサイトの作成に Web デザイナーはどのくらいの時間をかけているのか、また、自分でそのようなサイトを作成できるのだろうかと考えたことがあるかと思います。

FrontPage 2003 では、Web ページ内に整然としていて美しい独自の構造を作成してコンテンツを表示できます。プロ レベルの外観を実現するには、レイアウト テーブルとレイアウト セルを使用します。

• レイアウト テーブル   レイアウト セル、スペース用のセル、および場合によっては他のレイアウト テーブルを格納する枠組み。
• レイアウト セル   テキスト、イメージ、Web パーツ、その他のページ要素などの Web コンテンツを格納するレイアウト テーブル内の領域。
• スペース用のセル   テーブル内に構造を追加するテーブル セル。スペース用のセルには、1 つの非区切りスペース (NBSP) 以外のコンテンツは格納されません。

次の図に、2 つのレイアウト セルとスペース用のセルが中央揃えで配置されているレイアウト テーブルを示します。

レイアウト テーブル

レイアウト セル

スペース用のセル

セルの書式: コンテンツの編成以上の効果

セルの書式を設定すると、ページ上に自由にコンテンツを配置でき、FrontPage の従来のテーブルやセルではできなかったような複雑な修飾要素を使用できます。たとえば、角の丸み、複雑な罫線による修飾、影、背景のグラデーション、曲線のヘッダーまたはフッターなどを使用できます。

FrontPage の従来のテーブルやセルでは、コンテンツの配置はできますが、レイアウト セルを使用した場合のようにテーブルの外観を向上させることはできません。

FrontPage では、レイアウト テーブルやレイアウト セルを含んだ Web ページを編集できます。Macromedia Dreamweaver などの他の Web 作成ツールを使用して作成されたページでも編集できます。

レイアウト テーブルを追加する

セルの書式を設定する前に、Web ページにレイアウト テーブルを追加する必要があります。[レイアウト テーブルとセル] 作業ウィンドウに用意されている定義済みのレイアウト テーブルを使用できますが、独自のレイアウト テーブルを作成することもできます。

テーブル サイズを指定する

Web ページにレイアウト テーブルを追加したら、テーブルの幅と高さを設定します。また、配置、および上、左、下、右の余白のプロパティもピクセル単位で設定できます。

レイアウト セルを追加または作成する

次に、ページ上の Web コンテンツの表示位置を決めます。その後、そのコンテンツを配置するセルを追加または作成します。たとえば、ナビゲーション バーを格納するセルをページの上部に配置し、ナビゲーション バーの下のページ本文部分に 3 つのコンテンツのブロックを格納する 3 つのセルを配置するなどです。このように事前に位置を決定しておくと、レイアウト作業が楽になります。

デザイン レイアウトを決める際、自分のニーズに合ったページ デザインを探して、それを参考にする方法もあります。インターネット上には、デザインに関するアイデアがたくさん存在します。

次に、FrontPage 2003 のイメージ トレース ツールを視覚的なガイドとして使用して、その Web ページの大枠をトレースします。イメージを取得したら、それをガイドとして使用して、独自のレイアウト テーブルおよびレイアウト セルを作成します。イメージは、[デザイン] ビューで、ドキュメント ウィンドウの背景に表示されます。

イメージのトレース方法の詳細については、「イメージのトレースについて」を参照してください。

レイアウト セルのプロパティを設定する

レイアウト セルを配置したら、それらのセルのプロパティの設定を開始できます。設定できるプロパティは次のとおりです。

• セルの幅、高さ、間隔、縦位置、および背景色
• セルの枠線の幅、色、およびスタイル
• セルの余白
• セルのヘッダーとフッターの高さ、間隔、縦位置、背景色、枠線の幅、および枠線の色
• セルのコーナーの幅、高さ、色、枠線の色、およびスタイル
• セルの影の幅、テクスチャ、色、および方向

レイアウト セルにコンテンツを追加する

テキスト、イメージ、Web パーツ、その他のコンテンツなどのページ要素をレイアウト セルに追加できます。コンテンツの追加先のセルをクリックし、テキストを入力するか、使用するページ要素を挿入します。

メモ  ページに Web パーツを追加する場合、Web サイトのホストが Microsoft Windows® SharePoint™ Services を実行しているサーバーである必要があります。Web パーツの詳細については、「Web パーツの利用について」を参照してください。

レイアウト テーブルおよびレイアウト セルのサイズを変更する

レイアウト テーブルまたはレイアウト セルのサイズは、次のような方法で変更できます。

• レイアウト テーブルの場合、[レイアウト テーブルとセル] 作業ウィンドウで、高さと幅をピクセル単位で設定します。

• レイアウト セルの場合、[セルの書式] 作業ウィンドウの [セルのプロパティと枠線] に移動して、高さと幅をピクセル単位で設定します。
• テーブルの列または行を選択して、自動調整機能を適用します。

  列幅または行の高さのサイズ変更ラベル上の矢印をクリックして [列幅の自動調整] または [行の高さの自動調整] をクリックすると、そのセルは自動調整セルになります。セルのサイズは、サイトの閲覧者のブラウザ ウィンドウの領域に合わせて自動的に変更されます。

• レイアウト テーブルまたはレイアウト セルの枠をクリックしてサイズ変更ラベルを表示し、ラベル上の矢印をクリックして列の幅と行の高さを変更します。

  

• レイアウト テーブルまたはレイアウト セルのサイズを少しずつ変更するには、テーブルまたはセルの枠をクリックし、Alt キーを押したままにします。次に、枠をドラッグしてサイズを変更します。

自動調整について

自動調整は、レイアウト テーブル内の 1 つの行または列にだけ適用できます。レイアウト テーブル内のそれ以外の行または列には、固定の幅または高さを設定する必要があります。

既定では、列を自動調整に設定すると、スペース用のイメージが追加されます。スペース用のイメージは、自動調整テーブル内の間隔の調整に使用できる透明な GIF イメージです。スペース用のイメージは、1 ピクセルの透明なイメージでできていて、指定されたピクセル数になるように幅が広げられます。

ブラウザでは、テーブル列を、列内のセルに格納されている最も幅の広いイメージより狭くすることはできないので、レイアウト テーブルの列にスペース用のイメージを配置すると、その列の幅は強制的にスペース用のイメージより広くなります。

レイアウト テーブルまたはレイアウト セルを移動する

レイアウト テーブルまたはレイアウト セルを移動するには、次のいずれかの操作を行います。

• レイアウト テーブルまたはレイアウト セルの余白をクリックし、レイアウト テーブルまたはレイアウト セルを新しい場所にドラッグします。
• レイアウト テーブルまたはレイアウト セルの枠をクリックし、レイアウト テーブルまたはレイアウト セルを新しい場所にドラッグします。

例: コントソ製薬

Web 開発者である青木さんは、コントソ製薬という会社の消費者対応部門のカスタマ サービス部のマネージャである正門さんと共に、チームの Web サイトのリニューアルに取り組んでいます。カスタマ サービス ワークグループは、部門サーバー上に Windows SharePoint Services Web サイトを設置しています。

正門さんは、特に、部門の連絡先、共有ドキュメントの場所、カスタマ サービスの地域別担当 (カスタマ サポート担当者の写真を含む)、およびチームの作業リストをサイトに載せることを希望しています。

青木さんは、[レイアウト テーブルとセル] 作業ウィンドウから、[ヘッダー、本文、フッター、および左] の構成の定義済みのテーブル レイアウトを選択しました。

このテーブル レイアウトでは、ページの上部に横方向のレイアウト セルが配置されており、ここに消費者対応部門のカスタマ サービスのロゴと、Web サイトの情報へのリンクをいくつか表示します。また、左側にナビゲーション リンクを表示する縦方向のレイアウト セルが配置され、その右側には、主要なコンテンツが表示される 2 つのセルが配置されています。

この定義済みのレイアウト テーブルに用意されているセルの数はちょうどよいのですが、セルのサイズはコンテンツのニーズに合わせて若干変更することにします。

レイアウト セルのプロパティ (セルの余白の設定など) を設定し、枠線と背景の色を指定して、タブ形式のページにコーナーと影を追加します。さらに、上部のレイアウト セルに消費者対応部門のロゴを追加し、左側のレイアウト セルにナビゲーション リンクを追加します。

次に、右側の 2 つのセルに入るコンテンツ領域の指定に移ります。

正門さんおよび他のカスタマ サービス部のメンバーは、新しい Web サイトを気に入っており、さらに新しい機能の追加を計画しています。

正門さんは、最新の地域別販売件数を載せることを希望しています。青木さんは、ソース ドキュメントの販売件数と Web サイト内の Web パーツとの間の接続を確立することによって、この機能を追加します。

構造化されたページ レイアウトの作成方法

次の手順に従うと、レイアウト テーブルとレイアウト セルを使用して、構造化されたページ レイアウトを作成できます。Web ページにレイアウト テーブルとレイアウト セルを追加したら、テーブルやセルのサイズを変更したり、プロパティを設定できます。 また、テーブルやセルを削除することもできます。

レイアウト テーブル用のレイアウト ツールのオンとオフを切り替える

Microsoft FrontPage のレイアウト ツールは、既定ではオフになっています。

• 次のいずれかの操作を行います。

レイアウト テーブルを追加または作成する

1. [表] メニューの [レイアウト テーブルとセル] をクリックします。
2. [レイアウト テーブルとセル] 作業ウィンドウで、次のいずれかの操作を行います。

   [テーブルのレイアウト] のテンプレートの一覧からレイアウト テーブルを追加する

   • [テーブルのレイアウト] セクションで、テンプレートの一覧からレイアウト テーブルを選択します。

   レイアウト テーブルを作成する

   1. [新しいテーブルとセル] セクションで、 (レイアウト テーブルの作成) をクリックします。
   2. ポインタをドキュメント ウィンドウの左隅に移動し、ドラッグしてテーブルを作成します。
   3. [レイアウト テーブルとセル] 作業ウィンドウの [テーブルのプロパティ] セクションで、必要なプロパティを設定します。

レイアウト テーブルのプロパティを設定する

1. ドキュメント ウィンドウで、プロパティを設定するレイアウト テーブルの枠をクリックします。
2. [レイアウト テーブルとセル] 作業ウィンドウの [テーブルのプロパティ] セクションで、必要なプロパティを選択します。

レイアウト テーブルにセルを追加する

1. [レイアウト テーブルとセル] 作業ウィンドウの [新しいテーブルとセル] セクションで、 (レイアウト セルの作成) をクリックします。
2. レイアウト テーブル上でポインタをドラッグして、セルを作成します。
3. さらにセルを追加するには、手順 1 と 2 を繰り返します。

   ヒント

   複数のセルを連続して作成するには、 (レイアウト セルの作成) をクリックし、Ctrl キーを押しながらポインタをドラッグします。
4. 選択したセルのプロパティを設定するには、[レイアウト テーブルとセル] 作業ウィンドウで [セルの書式設定] をクリックして、必要なプロパティを選択します。

レイアウト セルのレイアウトと枠線のプロパティを設定する

1. ドキュメント ウィンドウで、レイアウトと枠線のプロパティを設定するセルの枠をクリックします。
2. [レイアウト テーブルとセル] 作業ウィンドウで、[セルの書式設定] をクリックします。
3. [セルの書式] 作業ウィンドウで、[セルのプロパティと枠線] をクリックして、次の操作のいずれか、または複数の操作を行います。

   レイアウト セルのレイアウト プロパティを設定する

   [レイアウト セルのプロパティ] セクションで、次の操作のいずれか、または複数の操作を行います。

   • セルの固定の幅または高さを設定するには、[幅] ボックスと [高さ] ボックスにピクセル (ピクセル : コンピュータのモニタ上に表示される画像の単位。1 ピクセルは画面上では小さな点にすぎませんが、これが集まって画像が構成されます。)単位で値を入力します。
   • セル内のコンテンツとセルの境界との間のスペースのピクセル数を設定するには、[間隔] ボックスに値をピクセル単位で入力します。
   • セルの縦位置を設定するには、[縦位置] の一覧で、[上]、[中央]、または [下] を選択します。
   • セルの背景色を設定するには、[背景色] の一覧で色をクリックします。

   レイアウト セルの枠線のプロパティを設定する

   [枠線] セクションで、次の操作のいずれか、または複数の操作を行います。

   • セルの枠線の太さを設定するには、[幅] ボックスに、表示する枠線の幅を示す値をピクセル単位で入力します。
   • セルの枠線に色を付けるには、[色] の一覧で色をクリックします。
   • [適用] セクションで、セルに適用する枠線の種類を示すボタンをクリックします。

レイアウト セルのヘッダーとフッターのプロパティを設定する

1. ドキュメント ウィンドウで、ヘッダーまたはフッターのプロパティを設定するセルの枠をクリックします。
2. [レイアウト テーブルとセル] 作業ウィンドウで、[セルの書式設定] をクリックします。
3. [セルの書式] 作業ウィンドウで、[セルのヘッダーおよびフッター] をクリックして、次の操作のいずれか、または複数の操作を行います。

   レイアウト セルのヘッダーのプロパティを設定する

   [ヘッダー] セクションで、[ヘッダーを表示する] をクリックし、次の操作のいずれか、または複数の操作を行います。

   • 既定値を変更するには、[高さ] ボックスに希望の値をピクセル (ピクセル : コンピュータのモニタ上に表示される画像の単位。1 ピクセルは画面上では小さな点にすぎませんが、これが集まって画像が構成されます。)単位で入力します。
   • セル ヘッダーとセルの境界との間のスペースのピクセル数を設定するには、[間隔] ボックスに値をピクセル単位で入力します。
   • セル ヘッダーの縦位置を設定するには、[縦位置] の一覧で、[上]、[中央]、または [下] をクリックします。
   • セル ヘッダーの背景色を設定するには、[背景色] の一覧で色をクリックします。
   • セル ヘッダーの枠線の太さを設定するには、[枠線の幅] ボックスに、表示する枠線の幅を示す値をピクセル単位で入力します。
   • セル ヘッダーの枠線に色を付けるには、[枠線の色] の一覧で色をクリックします。

   レイアウト セルのフッターのプロパティを設定する

   [フッター] セクションで、[フッターを表示する] をクリックし、次の操作のいずれか、または複数の操作を行います。

   • 既定値を変更するには、[高さ] ボックスに希望の値をピクセル (ピクセル : コンピュータのモニタ上に表示される画像の単位。1 ピクセルは画面上では小さな点にすぎませんが、これが集まって画像が構成されます。)単位で入力します。
   • セル フッターとセルの境界との間のスペースをピクセル数で設定するには、[間隔] ボックスに値をピクセル単位で入力します。
   • セル フッターの縦位置を設定するには、[縦位置] の一覧で、[上]、[中央]、または [下] をクリックします。
   • セル フッターの背景色を設定するには、[背景色] の一覧で色をクリックします。
   • セル フッターの枠線の太さを設定するには、[枠線の幅] ボックスに、表示する枠線の幅を示す値をピクセル単位で入力します。
   • セル フッターの枠線に色を付けるには、[枠線の色] の一覧で色をクリックします。

レイアウト セルのコーナーと影のプロパティを設定する

1. ドキュメント ウィンドウで、コーナーと影のプロパティを設定するセルの枠をクリックします。
2. [レイアウト テーブルとセル] 作業ウィンドウで、[セルの書式設定] をクリックします。
3. [セルのコーナーと影] をクリックし、次の操作のいずれか、または複数の操作を行います。

   レイアウト セルのコーナーのプロパティを変更する

   • [コーナー] セクションで、次の操作のいずれか、または複数の操作を行います。
     • セルのコーナーにカスタム イメージを追加するには、[カスタム イメージを使用する] をオンにし、[参照] をクリックして使用するグラフィックを選択します。
     • セル コーナーの幅または高さを設定するには、[幅] ボックスまたは [高さ] ボックスにピクセル (ピクセル : コンピュータのモニタ上に表示される画像の単位。1 ピクセルは画面上では小さな点にすぎませんが、これが集まって画像が構成されます。)単位で値を入力します。
     • セルのコーナーに色を付けるには、[色] の一覧で色をクリックします。
     • セルのコーナーの枠線に色を付けるには、[枠線の色] の一覧で色をクリックします。
     • セルの上、下、または上と下の両方にコーナーを適用するには、[適用] セクションで、使用するオプションをクリックします。

   レイアウト セルの影のプロパティを変更する

   • [影] セクションで、次の操作を行います。
     • セルの影の幅を設定するには、[幅] ボックスにピクセル単位で値を入力します。
     • セルの影の濃さを設定するには、[ぼかし] ボックスにピクセル単位で値を入力します。
     • セルの影に色を付けるには、[色] の一覧で色をクリックします。
     • 影を付ける側を設定するには、[適用] セクションでオプションをクリックします。

レイアウト テーブルまたはレイアウト セルのサイズを変更する

次のいずれかの操作を行います。

レイアウト テーブルまたはレイアウト セルのサイズを少しずつ変更する

1. レイアウト テーブルまたはセルの枠をクリックします。
2. Alt キーを押しながら枠をドラッグしてサイズを変更します。

自動調整を使用してレイアウト テーブルまたはレイアウト セルのサイズを変更する

1. [ページ] ビューで、ドキュメント ウィンドウの下部にある (デザイン) をクリックします。
2. レイアウト テーブルまたはセルを選択するには、枠をクリックします。
3. 列幅または行の高さのラベル上の矢印をクリックしてドロップダウン メニューを表示し、[列幅の自動調整] または [行の高さの自動調整] をクリックします。

メモ  自動調整は、レイアウト テーブル内の 1 つのセルにだけ適用できます。レイアウト テーブル内のそれに対応する行または列には、固定の幅または高さを設定する必要があります。

レイアウト テーブルまたはレイアウト セルを削除する

次のいずれかの操作を行います。

1 つのレイアウト セルを削除する

• レイアウト セルの枠をクリックし、Del キーを押します。

レイアウト テーブルを削除する

次のいずれかの操作を行います。

• レイアウト ツールがオンになっていて、レイアウト テーブル全体が選択されている場合は、Del キーを押します。
• レイアウト ツールがオフになっているか、レイアウト テーブルが選択されていない場合は、[レイアウト テーブルとセル] 作業ウィンドウで (レイアウト ツールの表示) をクリックしてテーブルを選択し、Del キーを押します。