Dreamweaver でのリピート領域およびテーブルの作成

最終更新日 : 2021年4月27日

リピート領域とリピートテーブルを作成し、Dreamweaver でテーブルのプロパティを構成してページレイアウトを制御します。

リピート領域は、テンプレートベースのページで何度も複製できるテンプレートのセクションです。通常、繰り返し領域はテーブルで使用されますが、他のページ要素に対しても繰り返し領域を定義できます。

リピート地域を使用すると、カタログアイテムと説明レイアウト、またはアイテムリストなどのデータの行など、特定のアイテムを繰り返すことでページレイアウトをコントロールできます。

使用できる繰り返し領域テンプレートオブジェクトは2つあります:繰り返し領域と繰り返しテーブルです。

テンプレートでリピート地域を作成

リピート領域により、テンプレートユーザーは必要に応じてテンプレート内の指定された領域を複製できます。リピート領域は必ずしも編集可能領域ではありません。

繰り返し領域のコンテンツを編集可能にするには(例えば、テンプレートベースのドキュメント内のテーブルセルにユーザーがテキストを入力できるようにする)、繰り返し領域内に編集可能領域を挿入する必要があります。

ドキュメントウィンドウで、次のいずれかの操作を行います。
  • リピート領域として設定したいテキストまたはコンテンツを選択します。

  • リピート地域を挿入したいドキュメント内の位置にカーソルを配置します。

次のいずれかの操作を実行します。
  • 挿入/テンプレート/リピート領域を選択します。

  • 挿入パネルの「テンプレート」カテゴリーで、リピート領域を選択します。

「名前」ボックスに、テンプレート領域の一意の名前を入力します。(テンプレート内で複数のリピート地域に同じ名前は使用できません。)
メモ

領域に名前を付けるときは、特殊文字を使用しないでください。

「OK」をクリックします。

リピートテーブルの挿入

繰り返しテーブルを使用して、繰り返し行を持つ編集可能な領域(テーブル形式)を作成できます。テーブル属性を定義し、どのテーブルセルを編集可能にするかを設定できます。

ドキュメントウィンドウで、リピートテーブルを挿入したいドキュメント内の位置にカーソルを配置します。
次のいずれかの操作を実行します。
  • 挿入/テンプレート/リピートテーブルを選択します。

  • 挿入パネルの「テンプレート」カテゴリーで、リピートテーブルを選択します。

次のオプションを指定して、「OK」をクリックします。

テーブルの行数を指定します。

テーブルの列数を指定します。

セル内余白

セルのコンテンツとセル境界の間のピクセル数を決定します。

セル内間隔

隣接するテーブルセルの間隔をピクセル単位で指定します。

メモ

セル内余白やセル内間隔を明示的に指定しなければ、一般的なブラウザーでは、セル内余白が 1、セル内間隔が 2 に設定されているものとしてテーブルが表示されます。 テーブルに余白と間隔を表示しないようにするには、「セル内余白」および「セル内間隔」を 0 に設定します。

テーブルの幅をピクセル単位、またはブラウザーウィンドウの幅のパーセンテージで指定します。

ボーダー

テーブルのボーダー幅をピクセル値で指定します。

メモ

ボーダーの値を明示的に指定しなければ、一般的なブラウザーでは、ボーダーが 1 に設定されているものとしてテーブルが表示されます。 ボーダーなしのテーブルをブラウザーに確実に表示するには、「ボーダー」を 0 に設定してください。

ボーダーを 0 に設定しているときにセルおよびテーブルの境界を見るには、表示/デザインビューオプション/ビジュアルエイドを選択してください。 このオプションは、デザインビューでのみ使用できます。

テーブルのリピート行

テーブルのどの行を繰り返し領域に含めるかを指定します。

開始行

入力した行番号を繰り返し領域に含める最初の行として設定します。

終了行

入力した行番号をリピート地域に含める最後の行として設定します。

領域名

リピート領域の一意の名前を設定します。

リピートテーブルの作成
リピートテーブルの作成

リピートテーブルで背景色を交互に設定

テンプレートにリピートテーブルを挿入した後、テーブル行の背景色を交互にしてカスタマイズできます。

ドキュメントウィンドウで、リピートテーブル内の行を選択します。
ドキュメントツールバーの「コード表示」または「コードとデザイン表示」ボタンをクリックして、選択したテーブル行のコードにアクセスします。
コードビューで、<tr>タグを編集して以下のコードを含めます:

<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">

#FFFFFFと#CCCCCCの16進数値を 他の色の選択肢に置き換えることができます。

テンプレートを保存します。

以下は、テーブルの行の背景色を交互に変更する テーブルのコード例です:

<table width="75%" border="1" cellspacing="0" cellpadding="0">

<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>

<!-- TemplateBeginRepeat name="contacts" -->

<tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@">

<td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable -->

</td>

<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable -->

</td>

<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable -->

</td>

</tr>

<!-- TemplateEndRepeat -->

</table>