网页设计与制作基础实验指导书实验6.docx

apDiv4div实际上位于apDiv3div的内部。

（可以在“AP元素”面板中更改APDiv堆叠顺序。

）

嵌套通常用于将APDiv组合在一起。

嵌套APDiv随其父APDiv一起移动，并且可以设置为继承其父级的可见性。

插入嵌套APDiv

1确保已取消选择“防止重叠”。

2在“文档”窗口的“设计”视图中，将插入点放置在一个现有APDiv的内部，然后选择“插入”>“布局对象”>“APDiv”。

使用AP元素面板将现有AP元素嵌套在另一个AP元素中

1选择“窗口”>“AP元素”打开“AP元素”面板。

2在“AP元素”面板中选择一个AP元素，然后按住Ctrl拖动（Windows）将此AP元

素拖动到“AP元素”面板中的目标AP元素。

3当目标AP元素的名称高亮显示时，松开鼠标按钮。

注：

使用“首选参数”对话框中的“AP元素”类别可指定新建AP元素的默认设置。

1选择“编辑”>“首选参数”（Windows）或“Dreamweaver”>“首选参数”（Macintosh）。

使用DREAMWEAVERCS4142

使用CSS创建页面

2从左侧的“分类”列表选择AP元素并指定以下任意首选参数，然后单击“确定”。

可见性确定AP元素在默认情况下是否可见。

其选项为“default”、“继承”、“可见”和“隐藏”。

宽和高指定使用“插入”>“布局对象”>“APDiv”创建的AP元素的默认宽度和高度（以像素为单位）。

背景颜色指定一种默认背景颜色。

请从颜色选择器中选择颜色。

背景图像指定默认背景图像。

单击“浏览”可在计算机上查找图像文件。

嵌套:

在APDiv内创建时嵌套指定从现有APDiv边界内的某点开始绘制的APDiv是否应该是嵌套的APDiv。

查看或设置单个AP元素的属性

当选择一个AP元素时，属性检查器将显示AP元素的属性。

AP元素面板概述

“AP元素”面板（“窗口”>“AP元素”）用于管理文档中的AP元素。

使用“AP元素”面板可防止重叠，更改AP元素的可见性，嵌套或堆叠AP元素，以及选择一个或多个AP元素。

注：

Dreamweaver中的AP元素是分配有绝对位置的HTML页面元素，“AP元素”面板不会显示相对定位的元素。

选择多个AP元素

.请执行下列操作之一：

.在“AP元素”面板（“窗口”>“AP元素”）中，按住Shift单击两个或更多个AP元素名称。

.在“文档”窗口中，按住Shift键并在两个或更多个AP元素的边框内（或边框上）单击。

更改AP元素的堆叠顺序

使用属性检查器或“AP元素”面板可更改AP元素的堆叠顺序。

“AP元素”面板列表顶部的AP元素位于堆叠顺序的顶部，并出现在其它AP元素之前。

在HTML代码中，AP元素的堆叠顺序或z轴决定了AP元素在浏览器中的绘制顺序。

AP元素的z轴值越高，该AP元素在堆叠顺序中的位置就越高。

可以使用“AP元素”面板或属性检查器来更改每个AP元素的z轴。

使用AP元素面板更改AP元素的堆叠顺序

1选择“窗口”>“AP元素”打开“AP元素”面板。

2将AP元素向上或向下拖至所需的堆叠顺序。

当移动AP元素时会出现一条线，它指示AP元素将出现的位置。

当放置线出现在堆叠顺序中的所需位置时，松开鼠标按钮。

使用属性检查器更改AP元素的堆叠顺序

1选择“窗口”>“AP元素”打开“AP元素”面板以查看当前的堆叠顺序。

2在“AP元素”面板或“文档”窗口中选择AP元素。

3在属性检查器（“窗口”>“属性”）中，在“Z轴”文本框中键入一个数字。

.键入一个较大的数字可将AP元素在堆叠顺序中上移。

.键入一个较小的数字可将AP元素在堆叠顺序中下移。

显示和隐藏AP元素

当处理文档时，可以使用“AP元素”面板手动显示和隐藏AP元素，以查看页面在不同条件下的显示方式。

注：

当前选定AP元素始终会变为可见，并在选定时将出现在其它AP元素的前面。

更改AP元素的可见性

1选择“窗口”>“AP元素”打开“AP元素”面板。

2在AP元素的眼形图标列内单击可以更改其可见性。

.眼睛睁开表示AP元素是可见的。

.眼睛闭合表示AP元素是不可见的。

.如果没有眼形图标，AP元素通常会继承其父级的可见性。

（如果AP元素没有嵌套，父级就是文档正文，而文档正文始终是可见的。

）另外，如果未指定可见性，则不会显示眼形图标（在“属性”检查器中表示为“default”可见性）。

同时更改所有AP元素的可见性

.在“AP元素”面板（“窗口”>“AP元素”）中，单击列顶部的标题眼形图标。

注：

此过程可以将所有AP元素设置为“可见”或“隐藏”，但不能设置为“继承”。

调整AP元素大小

1在“设计”视图中，选择一个AP元素。

2执行以下操作之一以调整AP元素的大小：

.若要通过拖动来调整大小，请拖动AP元素的任一调整大小手柄。

.若要一次调整一个像素的大小，请在按箭头键时按住Ctrl键（Windows）。

箭头键可移动AP元素的右边框和下边框；对于此方法，不能使用上边框和左边框来调整大小。

..在属性检查器（“窗口”>“属性”）中，键入宽度（W）和高度（H）的值。

关于Dreamweaver模板

了解Dreamweaver模板

模板是一种特殊类型的文档，用于设计“固定的”页面布局；用模板创建的文档会继承模板的页面布局。

设计模板时，可以指定在基于模板的文档中哪些内容是用户“可编辑的”。

使用模板，模板创作者控制哪些页面元素可以由模板用户进行编辑。

模板创作者可以在文档中包括数种类型的模板区域。

注：

使用模板可以控制大的设计区域，以及重复使用完整的布局。

如果要重复使用个别设计元素，如站点的版权信息或徽标，可以创建库项目。

使用模板可以一次更新多个页面。

应用模板创建的文档与该模板保持连接状态，可以修改模板并立即更新基于该模板的所有文档中的设计。

模板区域的类型

模板为基于模板的文档指定了锁定（不可编辑）区域和其它可编辑区域。

在基于模板的页面中，模板用户只能编辑可编辑区域中的内容。

可以轻松标识和选择可编辑区域来编辑内容。

模板用户不能编辑锁定区域中的内容.

注：

默认情况下Dreamweaver模板的页面中的各部分是固定（即不可编辑）的。

将文档另存为模板以后，文档的大部分区域就被锁定。

模板创作者在模板中插入可编辑区域或可编辑参数，从而指定在基于模板的文档中哪些区域可以编辑。

创建模板时，可编辑区域和锁定区域都可以更改。

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

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

可编辑区域基于模板的文档中未锁定的区域，也就是模板用户可以编辑的部分。

模板创作者可以将模板的任何区域指定为可编辑的。

要使模板生效，其中至少应该包含一个可编辑区域；否则基于该模板的页面是不可编辑的。

重复区域文档布局的一部分，设置该部分可以使模板用户必要时在基于模板的文档中添加或删除重复区域的副本。

例如，可以设置重复一个表格行。

重复部分是可编辑的，这样，模板用户可以编辑重复元素中的内容，而设计本身则由模板创作者控制。

可以在模板中插入的重复区域有两种：

重复区域和重复表格。

可选区域模板中放置内容（如文本或图像）的部分，该部分在文档中可以出现也可以不出现。

可编辑标签属性用于对模板中的标签属性解除锁定，这样便可以在基于模板的页面中编辑相应的属性。

例如，可以“锁定”出现在文档中的图像，而允许模板用户将对齐设置为左对齐、右对齐或居中对齐。

模板中的保存

模板文件保存在站点的Templates文件夹中，Templates文件夹在第一次创建模板时创建。

模板文件的扩展名为.dwt

识别模板和基于模板的文档

在设计视图中识别模板

在“设计”视图中，可编辑区域出现在“文档”窗口的预设高亮颜色的矩形外框中。

每个区域的左上角都会出现一个小的标签，其中显示该区域的名称。

在代码视图中识别模板

在“代码”视图中，使用以下注释标记HTML中的可编辑内容区域：

—TemplateBeginEditablename=”可编辑区域的名称”>和

--TemplateEndEditable-->

可以使用代码颜色首选参数设置自己的配色方案，以便在“代码”视图中查看文档时可以轻松地区分模板区域。

如：

--TemplateBeginEditablename="LocationList"-->

Entername

EnterAddress

EnterTelephone

--TemplateEndEditable-->

注：

在“代码”视图中编辑模板代码时请小心，避免更改Dreamweaver所依赖的任何与模板相关的注释标签。

在设计视图中识别基于模板的文档

在基于模板的文档中，“文档”窗口的“设计”视图中的可编辑区域出周围会显示预设高亮颜色的矩形外框。

每个区域的左上角都会出现一个小的标签，其中显示该区域的名称。

除可编辑区域的外框之外，整个页面周围也会显示其它颜色的外框，右上角的选项卡给出该文档的基础模板的名称。

不能更改可编辑区域之外的内容。

在代码视图中识别基于模板的文档

在“代码”视图中，派生自模板的文档的可编辑区域用与不可编辑区域中的代码不同的颜色显示。

可以更改可编辑区域中的代码或可编辑参数；但是不能在锁定区域中键入内容。

在HTML中使用以下Dreamweaver注释标记可编辑内容：

—InstanceBeginEditablename=”可编辑区域的名称”>和

--InstanceEndEditable-->

这些注释之间的任何内容都可以在基于模板的文档中编辑。

可编辑区域的HTML源代码可能类似于如下形式：

Name

Address

TelephoneNumber

--InstanceBeginEditablename="LocationList"-->

Entername

EnterAddress

EnterTelephone

--InstanceEndEditable-->

不可编辑文本的默认颜色是灰色；您可以在“首选参数”对话框中为可编辑区域和不可编辑区域选择不同的颜色。

创建Dreamweaver模板

基于现有文档创建模板

1打开要另存为模板的文档。

2请执行下列操作之一：

•选择“文件”>“另存为模板”。

•在“插入”面板的“常用”类别中，单击“模板”按钮，然后从弹出菜单中选择“创建模板”。

注：

除非您以前选择了“不再显示此对话框”，否则您会收到一个警告，指出您正在保存的文档中没有可编辑区域。

单击“确定

”将文档另存为模板，或单击“取消”退出此对话框而不创建模板。

3从“站点”弹出菜单中选择一个用来保存模板的站点，然后在“另存为”框中为模板输入一个唯一的名称。

4单击“保存”。

Dreamweaver将模板文件以文件扩展名.dwt保存在站点的本地根文件夹中的Templates文件夹中。

如果该Templates文件夹在站点中尚不存在，Dreamweaver将在保存新建模板时自动创建该文件夹。

注：

不要将模板移动到Templates文件夹之外或者将任何非模板文件放在Templates文件夹中。

此外，不要将Templates文件夹移动到本地根文件夹之外。

这样做将在模板中的路径中引起错误。

使用资源面板来创建新模板

1在“资源”面板（“窗口”>“资源”）中，选择面板左侧的“模板”类别。

2单击“资源”面板底部的“新建模板”按钮。

一个新的、无标题模板将添加到“资源”面板的模板列表中。

3在模板仍处于选定状态时，输入模板的名称，然后按Enter（Windows）。

Dreamweaver在“资源”面板和Templates文件夹中创建一个空模板。

使用“插入”莱单项创建面板

从“插入”莱单项中的“模板对象”选择“创建模板”

创建可编辑区域

插入可编辑区域

1在“文档”窗口中，执行下列操作之一选择区域：

•选择想要设置为可编辑区域的文本或内容。

•将插入点放在想要插入可编辑区域的地方。

2执行下列操作之一插入可编辑区域：

•选择“插入”>“模板对象”>“可编辑区域”。

•右键单击（Windows），然后选择“模板”>“新建可编辑区域”。

•在“插入”面板的“常用”类别中，单击“模板”按钮，然后从弹出菜单中选择“可编辑区域”。

3在“名称”框中为该区域输入唯一的名称。

（不能对特定模板中的多个可编辑区域使用相同的名称。

注：

不要在“名称”框中使用特殊字符。

4单击“确定”。

可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色。

该区域左上角的选项卡显示该区域的名称。

如果在文档中插入空白的可编辑区域，则该区域的名称会出现在该区域内部。

选择可编辑区域

在模板文档和基于模板的文档中，都可以方便地标识和选择模板区域。

在文档窗口中选择可编辑区域

❖单击可编辑区域左上角的选项卡。

在文档中查找和选择可编辑区域

❖选择“修改”>“模板”，然后从该子菜单底部的列表中选择区域的名称。

注：

重复区域内的可编辑区域不会出现在该菜单中。

必须通过在“文档”窗口中查找选项卡式的边框来定位这些区域。

可编辑区域在文档中被选定。

删除可编辑区域

如果已经将模板文件的某个区域标记为可编辑，现在想要重新锁定该区域（使其在基于模板的文档中不可编辑），请使用“删

除模板标记”命令。

1单击可编辑区域左上角的标签以选中它。

2请执行下列操作之一：

•选择“修改”>“模板”>“删除模板标记”。

•右键单击（Windows）或按住Control单击（Macintosh），然后选择“模板”>“删除模板标记”。

该区域便不再可编辑。

更改可编辑区域的名称

插入可编辑区域后，可以在以后更改它的名称。

1单击可编辑区域左上角的标签以选中它。

2在属性检查器（“窗口”>“属性”）中，输入一个新名称。

3按Enter（Windows）。

创建和管理重复区域、使用可选区域、可编辑标签属性同理。

文档与模板分离

若要更改基于模板的文档的锁定区域，必须将该文档从模板分离。

将文档分离之后，整个文档都将变为可编辑的。

1打开想要分离的基于模板的文档。

2选择“修改”>“模板”>“从模板中分离”。

文档被从模板分离，所有模板代码都被删除。

模板语法

一般语法规则

Dreamweaver使用HTML注释标签来指定模板和基于模板的文档中的区域，因此，基于模板的文档仍然是有效的HTML文件。

插入模板对象以后，模板标签便被插入代码中。

模板标签

Dreamweaver使用以下模板标签：

--TemplateBeginEditablename="..."-->

--TemplateEndEditable-->

--TemplateParamname="..."type="..."value="..."-->

--TemplateBeginRepeatname="..."-->

--TemplateEndRepeat-->

--TemplateBeginIfcond="..."-->

--TemplateEndIf-->

--TemplateBeginPassthroughIfcond="..."-->

--TemplateEndPassthroughIf-->

--TemplateBeginMultipleIf-->

--TemplateEndMultipleIf-->

--TemplateBeginPassthroughMultipleIf-->

--TemplateEndPassthroughMultipleIf-->

--TemplateBeginIfClausecond="..."-->

--TemplateEndIfClause-->

--TemplateBeginPassthroughIfClausecond="..."-->

--TemplateEndPassthroughIfClause-->

--TemplateExprexpr="..."-->（equivalentto@@...@@）

--TemplatePassthroughExprexpr="..."-->

--TemplateInfocodeOutsideHTMLIsLocked="..."-->

实例标签

Dreamweaver使用以下实例标签：

--InstanceBegintemplate="..."codeOutsideHTMLIsLocked="..."-->

--InstanceEnd-->

--InstanceBeginEditablename="..."-->

--InstanceEndEditable-->

--InstanceParamnam