如何基于 Dreamweaver 模板设计网页

优质

小牛编辑

143浏览

2023-12-01

了解如何使用 Dreamweaver 模板设计“固定的”页面布局；然后基于模板创建文档，创建的文档会继承模板的页面布局。

模板是一种特殊类型的文档，用于设计“固定的”页面布局；然后您便可以基于模板创建文档，创建的文档会继承模板的页面布局。设计模板时，可以指定在基于模板的文档中哪些内容是用户“可编辑的”。使用模板，模板创作者控制哪些页面元素可以由模板用户（如作家、图形艺术家或其他 Web 开发人员）进行编辑。模板创作者可以在文档中包括数种类型的模板区域。

注意:使用模板可以控制大的设计区域，以及重复使用完整的布局。如果要重复使用个别设计元素，如站点的版权信息或徽标，可以创建库项目。

使用模板可以一次更新多个页面。从模板创建的文档与该模板保持连接状态（除非您以后分离该文档）。可以修改模板并立即更新基于该模板的所有文档中的设计。

注意:Dreamweaver 中的模板与某些其他 Adobe Creative Cloud 软件中的模板的不同之处在于：默认情况下 Dreamweaver 模板的页面中的各部分是固定的（即不可编辑）。

模板区域的类型

将文档另存为模板以后，文档的大部分区域就被锁定。模板创作者在模板中插入可编辑区域或可编辑参数，从而指定在基于模板的文档中哪些区域可以编辑。

创建模板时，可编辑区域和锁定区域都可以更改。而在基于模板的文档中，模板用户只能在可编辑区域中进行更改，不能修改锁定区域。

共有四种类型的模板区域：

可编辑区域：基于模板的文档中未锁定的区域，也就是模板用户可以编辑的部分。模板创作者可以将模板的任何区域指定为可编辑的。要使模板生效，其中至少应该包含一个可编辑区域；否则基于该模板的页面是不可编辑的。有关可编辑区域中的详细信息，请参阅在模板中创建可编辑区域。

重复区域：文档布局的一部分，设置该部分可以使模板用户必要时在基于模板的文档中添加或删除重复区域的副本。例如，可以设置重复一个表格行。重复部分是可编辑的，这样，模板用户可以编辑重复元素中的内容，而设计本身则由模板创作者控制。

可以在模板中插入的重复区域有两种：重复区域和重复表格。如需了解如何使用重复区域，请参阅在 Dreamweaver 中创建重复区域和表格。

可选区域：模板中放置内容（如文本或图像）的部分，该部分在文档中可以出现也可以不出现。在基于模板的页面上，模板用户通常控制是否显示内容。有关详细信息，请参阅可选区域部分。

可编辑的标签属性：用于对模板中的标签属性解除锁定，这样便可以在基于模板的页面中编辑相应的属性。例如，可以“锁定”出现在文档中的图像，而允许模板用户将对齐设置为左对齐、右对齐或居中对齐。有关详细信息，请参阅在 Dreamweaver 中定义可编辑的标签属性。

模板中的链接

如果您的模板文件是通过将现有页面另存为模板来创建的，则新模板在 Templates 文件夹中，并且模板文件中的所有链接都将更新以保证相应的文档相对路径是正确的。如果您以后基于该模板创建文档并保存该文档，则所有文档相对链接将再次更新，从而依然指向正确的文件。

向模板文件中添加新的文档相对链接时，如果在属性检查器的链接文本框中键入路径，则输入的路径名很容易出错。模板文件中正确的路径是从 Templates 文件夹到链接文档的路径，而不是从基于模板的文档的文件夹到链接文档的路径。在模板中创建链接时就要使用文件夹图标或者使用属性检查器中的“指向文件”图标，以确保存在正确的链接路径。

模板以及基于模板的文档中的服务器脚本

一些服务器脚本被插入到文档的起始或结尾处（在 <html> 标签之前或 </html> 标签之后）。此类脚本要求在模板和基于模板的文档中特殊处理。正常情况下，如果对模板中 <html> 标签之前或 </html> 标签之后的脚本代码进行更改，这些更改将不会复制到基于该模板的文档中。如果模板主体内部的其他服务器脚本依赖于没有副本的脚本，则这将导致服务器错误。如果您更改模板中 <html> 标签之前或 </html> 标签之后的脚本，Dreamweaver 会发出警告。

若要避免此问题，可以在模板的 head 部分插入以下代码：

<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

如果模板中包含这些代码，则对 <html> 标签之前或 </html> 标签之后的脚本所做的更改将复制到基于该模板的文档中。但是，您将无法编辑基于该模板的文档中的那些脚本。因而，可以选择在模板中或在基于该模板的文档中编辑这些脚本，但不能同时选择两者。

模板参数

模板参数指示控制基于模板的文档中的内容的值。模板参数可用于可选区域或可编辑标签属性，也可用于设置要传递给附加的文档的值。需要为每个参数选择名称、数据类型和默认值。每个参数都必须有一个唯一的名称且区分大小写。这些参数必须是以下五种许可的数据类型中的一种：文本、布尔型、颜色、URL 或数字。

模板参数作为实例参数传递到文档中。大多数情况下，模板用户可以编辑参数的默认值，以便自定义出现在基于模板的文档中的内容。少数情况下，模板创作者可以根据模板表达式的值来确定出现在文档中的内容。

模板表达式

模板表达式是计算值或求值的语句。

可以使用表达式存储某个值并在文档中显示该值。例如，表达式可能像一个参数的值一样简单，如 @@(Param)@@，也可能复杂到需要计算用于替换表格行背景颜色的值，如 @@((_index & 1) ? red : blue)@@。

还可以针对假设条件和多重假设条件定义表达式。当表达式用在条件语句中时，Dreamweaver 将它计算为 true 或 false。如果条件为 True，则将在基于模板的文档中显示可选区域；如果条件为 False，则不显示。

插入可选区域时，可以在“代码”视图或“可选区域”对话框中定义表达式。

在“代码”视图中，定义模板表达式的方法有两种：使用  注释或 @@(your expression)@@。在模板代码中插入表达式以后，表达式标记将出现在“设计”视图中。应用模板以后，Dreamweaver 求出表达式的值，然后在基于模板的文档中显示该值。

模板表达式语言

模板表达式语言是 JavaScript 的一个小子集，并使用 JavaScript 语法和优先级规则。可以使用 JavaScript 运算符来编写这样的表达式：

@@(firstName+lastName)@@

支持下列功能和运算符：

数字文本、字符串文本（仅限于双引号语法）和布尔值文本（true 或 false）
变量引用（请参阅本节后面的定义变量列表）
域引用（“点”运算符）
一元运算符：+、-、~、!
二元运算符：+、-、*、/、%、&、|、^、&&、||、<、<=、 >、 >=、==、!=, <<, >>
条件运算符：?:
括号：()
使用的数据类型如下：布尔型、IEEE 64-bpc 浮点型、字符串和对象。Dreamweaver 模板不支持使用 JavaScript“null”类型或“未定义”类型，而且不允许将标量类型隐式转换为对象；因此，表达式 "abc".length 将引起错误，而不是得出值 3。
唯一可用的对象是由表达式对象模型定义的对象。定义了下列变量：
_document
包含文档级模板数据，模板中每个参数都有一个字段。
_repeat
仅为出现在重复区域内的表达式定义。提供关于区域的内置信息
_index
当前项的数字索引（从 0 开始）
_numRows
此重复区域内的总项数
_isFirst
如果当前项是其重复区域内的第一项，则为 true
_isLast
如果当前项是其重复区域内的最后一项，则为 true
_prevRecord
上一项的 _repeat 对象。访问该区域内第一项的此属性是一个错误。
_nextRecord
下一项的 _repeat 对象。访问该区域内最后一项的此属性是一个错误。
_parent
在嵌套的重复区域内，此项提供封闭（外层）重复区域的 _repeat 对象。在嵌套的重复区域外部访问此属性是一个错误。
在表达式计算过程中，_document 对象和 _repeat 对象的所有域都默认为可用。例如，为访问文档的标题参数，可以输入 title 而不是 _document.title。
在出现域冲突的情况下，_repeat 对象的域优先于 _document 对象的域。因此，除非在重复区域内可能需要通过 _document 来引用已被重复区域参数隐藏的文档参数，否则不需要显式引用 _document 或 _repeat。
使用嵌套的重复区域时，只有最内层重复区域的域为默认为可用。外层区域必须使用 _parent 明确引用。

模板代码中的多重假设条件

可以定义假设条件和多重假设条件的模板表达式。下面的示例讲述如何定义名为“Dept”的参数、如何设置初始值以及如何定义用来确定显示哪个徽标的多重假设条件。

以下是在模板的 head 部分输入的代码示例：

<!-- TemplateParam name="Dept" type="number" value="1" -->

下面的条件语句检查赋给 Dept 参数的值。如果条件为真或匹配，则显示适当的图像。

<!-- TemplateBeginMultipleIf --> <!-- checks value of Dept and shows appropriate image--> <!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause--> <!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause --> <!-- TemplateEndMultipleIf -->

创建基于模板的文档后，模板参数将自动传递到该文档。模板用户决定显示哪个图像。