使用手冊 取消

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

 

 

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

重複區域是範本中的一塊區段,可以在以範本為架構的頁面中多次進行複製。通常重複區域會用在表格上,但您也可以為其他頁面元素定義一塊重複區域。

重複區域可經由重複特定項目 (例如目錄項目和描述版面) 或資料列 (例如項目清單),讓您控制頁面版面。

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

在範本中建立重複區域

重複區域可讓範本用戶在範本中依其所需無限複製指定的區域。重複區域不一定是可編輯區域。

如果要讓重複區域中的內容成為可編輯 (例如,允許用戶在以範本為架構之文件的表格儲存格中輸入文字),您必須將可編輯區域插入重複區域中。

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

    • 將插入點放在文件中您想要插入重複區域的地方。

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

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

  3. 在「名稱」方塊中,為這個範本區域輸入唯一的名稱 (您不可以對範本中一個以上重複區域使用相同的名稱)。
    註解:

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

  4. 按一下「確定」。

插入重複表格

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

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

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

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

    列數

    決定表格擁有的列數。

    欄數

    決定表格擁有的欄數。

    儲存格內距

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

    儲存格間距

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

    註解:

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

    Width

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

    邊框

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

    註解:

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

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

    表格的重複列

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

    起始列

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

    結束列

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

    區域名稱

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

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

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

在範本中插入重複表格之後,您就可以變更表格資料列的背景顏色,自訂重複表格。

  1. 在「文件」視窗中,選取重複表格中的某個資料列。
  2. 按一下「文件」工具列中的「顯示程式碼檢視」或「顯示程式碼和設計檢視」按鈕,以便存取所選取表格列的程式碼。
  3. 在「程式碼」檢視中,編輯 <tr> 標籤,以包含下列程式碼:
    <tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
    <tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
    <tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">

    您可以選擇其他顏色來取代 #FFFFFF 和 #CCCCCC 十六進位值。

  4. 儲存範本。

    下面是一個表格程式碼範例,含有可替換的表格列背景顏色:

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

更快、更輕鬆地獲得協助

新的使用者?