在 Dreamweaver 模板中创建重复区域和表格

上次更新日期: 2021年4月27日

在 Dreamweaver 中创建重复区域和重复表格并配置表格属性以控制您的页面布局。

重复区域是模板的一部分,可以在基于模板的页面中复制多次。通常,重复区域与表格一起使用,但您可以为其他页面元素定义重复区域。

重复区域让您能够通过重复某些项目来控制页面布局,例如目录项和说明布局,或者项目列表等数据行。

您可以使用两种重复区域模板对象:重复区域和重复表。

在模板中创建重复区域

重复区域让模板用户能够根据需要在模板中复制指定区域。重复区域不必是可编辑区域。

要使重复区域中的内容可编辑(例如,允许用户在基于模板的文档的表格单元格中输入文本),您必须在重复区域中插入可编辑区域。

在“文档”窗口中执行下列操作之一:
  • 选择您要设置为重复区域的文本或内容。

  • 将插入点放在文档中您要插入重复区域的位置。

执行下列操作之一:
  • 选择“插入”>“模板”>“重复区域”。

  • 在“插入”面板的“模板”类别中,选择“重复区域”。

在"名称"框中,为模板区域输入唯一名称。(在一个模板中,不能为多个重复区域使用相同的名称。)
注释

命名区域时,不要使用特殊字符。

单击“确定”。

插入重复表格

您可以使用重复表格来创建具有重复行的可编辑区域(表格形式)。您可以定义表格属性并设置哪些表格单元格是可编辑的。

在"文档"窗口中,将插入点放在文档中您要插入重复表格的位置。
执行下列操作之一:
  • 选择“插入”>“模板”>“重复表格”。

  • 在“插入”面板的“模板”类别中,选择“重复表格”。

指定下列选项,然后单击“确定”。

决定表格中的行数。

决定表格中的列数。

单元格边距

确定单元格内容和单元格边界之间的像素数量。

单元格间距

决定相邻的表格单元格之间的像素数。

注释

如果您没有为单元格边距和单元格间距明确赋值,则多数浏览器按照单元格边距设为 1、单元格间距设为 2 来显示表格。 若要确保浏览器显示表格时不显示边距或间距,请将“单元格边距”和“单元格间距”设置为 0。

宽度

指定表格的宽度(以像素为单位或浏览器窗口宽度的百分比)。

边框

指定表格边框的宽度(以像素为单位)。

注释

如果您没有为边框明确赋值,则多数浏览器按边框设为 1 来显示表格。 若要确保浏览器显示的表格没有边框,请将“边框”设置为 0。

若要在边框设置为 0 时查看单元格和表格边框,请选择“查看”>“设计视图选项”>“可视化助理”。 此选项仅在“设计”视图中可用。

重复表格的行

指定表格中要包含在重复区域中的行。

起始行

将输入的行号设置为包含在重复区域中的第一行。

结束行

将输入的行号设置为包含在重复区域中的最后一行。

区域名称

用于设置重复区域的唯一名称。

创建重复表格
创建重复表格

在重复表格中设置交替背景颜色

在模板中插入重复表格后,您可以通过交替表格行的背景颜色来自定义它。

在"文档"窗口中,选择重复表格中的一行。
单击文档工具栏中的"显示代码视图"或"显示代码和设计视图"按钮,以便您可以访问所选表格行的代码。
在代码视图中,编辑 <tr> 标记 以包含以下代码:

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

您可以将 #FFFFFF 和 #CCCCCC 十六进制值替换为其他颜色选择。

保存该模板。

下面是一个表格的代码示例,其中包含 交替的背景表格行颜色:

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

<tr><th>姓名</th><th>电话号码</th><th>电子邮件地址</th></tr>

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

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

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

</td>

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

</td>

<td> <!-- TemplateBeginEditable name="email" --> 电子邮件 <!-- TemplateEndEditable -->

</td>

</tr>

<!-- TemplateEndRepeat -->

</table>