在 Dreamweaver 中建立重複區域和表格

上次更新時間 2021年4月27日

在 Dreamweaver 中建立重複區域和重複表格,並且設定表格屬性以控制頁面版面。

重複區域是範本中的區段,可在以範本為基礎的頁面中複製多次。一般來說,重複區域會與表格一起使用,但您也可以為其他頁面元素定義重複區域。

重複區域讓您能透過重複某些項目來控制頁面配置,例如目錄項目與描述配置,或是資料列(如項目清單)。

您可以使用兩種重複區域範本物件:重複區域和重複表格。

在範本中建立重複區域

重複區域可讓範本使用者視需要在範本中複製指定的區域。重複區域不一定是可編輯區域。

若要讓重複區域中的內容變成可編輯(例如,允許使用者在範本型文件的表格儲存格中輸入文字),您必須在重複區域中插入可編輯區域。

在「文件」視窗中,執行下列其中一項作業:
  • 選取您要設定為重複區域的文字或內容。

  • 將插入點置於文件中要插入重複區域的位置。

執行下列其中一項作業:
  • 選取「插入 > 範本 > 重複區域」。

  • 在「插入」面板的「範本」類別中,選取「重複區域」。

在「名稱」方塊中,輸入範本區域的唯一名稱。(在範本中,不能讓多個重複區域使用相同的名稱。)
備註

命名區域時,請勿使用特殊字元。

按一下「確定」。

插入重複表格

您可以使用重複表格建立具有重複列的可編輯區域(表格格式)。您可以定義表格屬性並設定哪些表格儲存格是可編輯的。

在「文件」視窗中,將插入點置於文件中要插入重複表格的位置。
執行下列其中一項作業:
  • 選取「插入 > 範本 > 重複表格」。

  • 在「插入」面板的「範本」類別中,選取「重複表格」。

設定下列選項,然後按一下「確定」。

列數

決定表格擁有的列數。

欄數

決定表格擁有的欄數。

儲存格內距

決定儲存格內容與儲存格邊界之間的像素數量。

儲存格間距

決定相鄰表格儲存格之間的像素數目。

備註

如果您沒有明確指定儲存格內距和儲存格間距的值,則大部分瀏覽器會以儲存格內距為 1 且儲存格間距為 2 的設定顯示表格。 若要讓瀏覽器以沒有內距和間距的方式顯示表格,請將「儲存格內距」和「儲存格間距」設定為 0。

Width

指定表格的寬度(以像素為單位),或指定為瀏覽器視窗寬度的百分比。

邊框

以像素為單位指定表格邊框的寬度。

備註

如果您沒有明確指定邊框的值,則大部分瀏覽器會以邊框設定為 1 的方式顯示表格。 若要讓瀏覽器以沒有邊框的方式顯示表格,請將「邊框」設定為 0。

如果要在邊框設定為 0 時,檢視儲存格與表格邊界,請選取「檢視 > 設計檢視選項 > 視覺輔助」。 這個選項只能在「設計」檢視中使用。

表格的重複列

指定表格中的哪些列會包含在重複區域中。

起始列

將輸入的列號設定為包含在重複區域中的第一列。

結束列

將輸入的列號設定為包含在重複區域中的最後一列。

區域名稱

可讓您對重複區域設定唯一的名稱。

建立重複表格
建立重複表格

在重複表格中設定交替的背景顏色

在範本中插入重複表格後,您可以透過交替表格列的背景顏色來自訂表格。

在「文件」視窗中,選取重複表格中的一列。
按一下「文件」工具列中的「顯示程式碼檢視」或「顯示程式碼和設計檢視」按鈕,以便存取所選表格列的程式碼。
在「程式碼」檢視中,編輯 <tr> 標記 以包含下列程式碼:

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

您 可以將 #FFFFFF 和 #CCCCCC 十六進位值 替換為其他色彩選擇。

儲存範本。

以下是包含 交替背景表格列色彩的表格程式碼範例:

<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>