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

1、网页设计与制作基础实验指导书2实验6实验六 基于CSS的网页布局设计实验目的1、 CSS的页面分割技术、盒模式和定位技术2、 熟悉层（AP Div）的基本操作并能利用层（AP Div）来定位页面元素；3、 掌握模板的创建、编辑和应用。实验环境WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。实验重点及难点 CSS盒模式和定位技术 灵活利用层来实现网页元素的精确定位。 利用模板生成多个风格一致的网页。实验内容1、 在你的站点中创建文件夹：sy6。在sy6文件夹下创建两个文件：my.html、和zzy.html。并将给定的多媒体文件放入相应的文件夹

2、中。2、 结合所学的CSS布局知识和实验操作说明中关于AP Div（层）的知识，利用Dreamweaver对my.htm进行设计编辑，效果如下图所示。3、 编辑网页文件“zzy.html”，效果如下图所示。4、 a) 根据网页文件“拙政园.html”生成模板文件“my.dwt”。文件存放于sy6文件夹下。b) 根据模板文件“my.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，站点中的my.html的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html

3、”。实验操作说明使用 CSS 对页面进行布局关于 Dreamweaver 中的 AP 元素AP 元素（绝对定位元素，层）是分配有绝对位置的 HTML 页面元素，具体地说，就是 div 标签或其它任何标签。AP 元素可以包含文本、图像或其它任何可放置于 HTML 文档正文中的内容。AP 元素用于设计页面的布局。AP 元素通常是绝对定位的 div 标签。（它们是 Dreamweaver 默认插入的 AP 元素类型。）但是请记住，可以将任何 HTML元素（例如，一个图像）作为 AP 元素进行分类，方法是为其分配一个绝对位置。所有 AP 元素（不仅仅是绝对定位的 div 标签）都将在“AP 元素” 面

4、板中显示。AP Div 元素的 HTML 代码Dreamweaver 使用 div 标签创建 AP 元素。当使用“ 绘制 AP Div” 工具绘制 AP 元素时，Dreamweaver 在文档中插入一个div 标签，并为该div 指定一个 ID 值（默认情况下为第一个div指定apDiv1，第二个div分配apDiv2，依此类推）。可以使用“AP 元素” 面板或属性检查器将 AP Div 重新命名为想要的任何名称。以下是 AP Div 的示例 HTML 代码：Sample AP Div Page可以更改页面上的 AP Div （或任何 AP 元素）的属性，包括 x 坐标和 y 坐标、z 轴（也

5、称作堆叠顺序）和可见性等所有CSS布局属性。插入 AP Div将插入点放置在“ 文档” 窗口中，然后选择“ 插入”“ 布局对象”“AP Div”。创建 AP Div 后，只需将插入点放置于该 AP Div 中，然后就可以像在页面中添加内容一样，将内容添加到 AP Div 中。使用嵌套的 AP Div嵌套的 AP Div 是其代码包含在另一个 AP Div 的标签内的 AP Div。例如：apDiv4 div 实际上位于 apDiv3 div 的内部。（可以在“AP 元素” 面板中更改 AP Div 堆叠顺序。）嵌套通常用于将 AP Div 组合在一起。嵌套 AP Div 随其父 AP Div

6、一起移动，并且可以设置为继承其父级的可见性。插入嵌套 AP Div1 确保已取消选择“ 防止重叠”。2 在“ 文档” 窗口的“ 设计” 视图中，将插入点放置在一个现有 AP Div 的内部，然后选择“ 插入”“ 布局对象”“AP Div”。使用 AP 元素面板将现有 AP 元素嵌套在另一个 AP 元素中1 选择“ 窗口”“AP 元素” 打开“AP 元素” 面板。2 在“AP 元素” 面板中选择一个 AP 元素，然后按住 Ctrl 拖动 (Windows)将此 AP 元素拖动到“AP 元素” 面板中的目标 AP 元素。3 当目标 AP 元素的名称高亮显示时，松开鼠标按钮。注：使用“ 首选参数”

7、对话框中的“AP 元素” 类别可指定新建 AP 元素的默认设置。1 选择“ 编辑”“ 首选参数”(Windows) 或“Dreamweaver”“ 首选参数”(Macintosh)。使用 DREAMWEAVER CS4 142使用 CSS 创建页面2 从左侧的“ 分类” 列表选择 AP 元素并指定以下任意首选参数，然后单击“ 确定”。可见性确定 AP 元素在默认情况下是否可见。其选项为“default”、“ 继承”、“ 可见” 和“ 隐藏”。宽和高指定使用“ 插入”“ 布局对象”“AP Div” 创建的 AP 元素的默认宽度和高度（以像素为单位）。背景颜色指定一种默认背景颜色。请从颜色选择器中

8、选择颜色。背景图像指定默认背景图像。单击“ 浏览” 可在计算机上查找图像文件。嵌套: 在 AP Div 内创建时嵌套指定从现有 AP Div 边界内的某点开始绘制的 AP Div 是否应该是嵌套的 AP Div。查看或设置单个 AP 元素的属性当选择一个 AP 元素时，属性检查器将显示 AP 元素的属性。 AP 元素面板概述“AP 元素” 面板（“ 窗口”“AP 元素”）用于管理文档中的 AP 元素。使用“AP 元素” 面板可防止重叠，更改 AP元素的可见性，嵌套或堆叠 AP 元素，以及选择一个或多个 AP 元素。注： Dreamweaver 中的 AP 元素是分配有绝对位置的 HTML 页面

9、元素，“AP 元素” 面板不会显示相对定位的元素。选择多个 AP 元素. 请执行下列操作之一：. 在“AP 元素” 面板（“ 窗口”“AP 元素”）中，按住 Shift 单击两个或更多个 AP 元素名称。. 在“ 文档” 窗口中，按住 Shift 键并在两个或更多个 AP 元素的边框内（或边框上）单击。更改 AP 元素的堆叠顺序使用属性检查器或“AP 元素” 面板可更改 AP 元素的堆叠顺序。“AP 元素” 面板列表顶部的 AP 元素位于堆叠顺序的顶部，并出现在其它 AP 元素之前。在 HTML 代码中，AP 元素的堆叠顺序或 z 轴决定了 AP 元素在浏览器中的绘制顺序。AP 元素的 z 轴

10、值越高，该 AP 元素在堆叠顺序中的位置就越高。可以使用“AP 元素” 面板或属性检查器来更改每个 AP 元素的 z 轴。使用 AP 元素面板更改 AP 元素的堆叠顺序1 选择“ 窗口”“AP 元素” 打开“AP 元素” 面板。2 将 AP 元素向上或向下拖至所需的堆叠顺序。当移动 AP 元素时会出现一条线，它指示 AP 元素将出现的位置。当放置线出现在堆叠顺序中的所需位置时，松开鼠标按钮。使用属性检查器更改 AP 元素的堆叠顺序1 选择“ 窗口”“AP 元素” 打开“AP 元素” 面板以查看当前的堆叠顺序。2 在“AP 元素” 面板或“ 文档” 窗口中选择 AP 元素。3 在属性检查器（“

11、窗口”“ 属性”）中，在“Z 轴” 文本框中键入一个数字。. 键入一个较大的数字可将 AP 元素在堆叠顺序中上移。. 键入一个较小的数字可将 AP 元素在堆叠顺序中下移。显示和隐藏 AP 元素当处理文档时，可以使用“AP 元素” 面板手动显示和隐藏 AP 元素，以查看页面在不同条件下的显示方式。注： 当前选定 AP 元素始终会变为可见，并在选定时将出现在其它 AP 元素的前面。更改 AP 元素的可见性1 选择“ 窗口”“AP 元素” 打开“AP 元素” 面板。2 在 AP 元素的眼形图标列内单击可以更改其可见性。. 眼睛睁开表示 AP 元素是可见的。. 眼睛闭合表示 AP 元素是不可见的。.

12、如果没有眼形图标， AP 元素通常会继承其父级的可见性。（如果 AP 元素没有嵌套，父级就是文档正文，而文档正文始终是可见的。）另外，如果未指定可见性，则不会显示眼形图标（在“ 属性” 检查器中表示为“default” 可见性）。同时更改所有 AP 元素的可见性. 在“AP 元素” 面板（“ 窗口”“AP 元素”）中，单击列顶部的标题眼形图标。注： 此过程可以将所有 AP 元素设置为“ 可见” 或“ 隐藏”，但不能设置为“ 继承”。调整 AP 元素大小1 在“ 设计” 视图中，选择一个 AP 元素。2 执行以下操作之一以调整 AP 元素的大小：. 若要通过拖动来调整大小，请拖动 AP 元素的任

13、一调整大小手柄。. 若要一次调整一个像素的大小，请在按箭头键时按住 Ctrl 键 (Windows) 。箭头键可移动 AP 元素的右边框和下边框；对于此方法，不能使用上边框和左边框来调整大小。. . 在属性检查器（“ 窗口”“ 属性”）中，键入宽度 (W) 和高度 (H) 的值。关于 Dreamweaver 模板了解 Dreamweaver 模板模板是一种特殊类型的文档，用于设计“ 固定的” 页面布局；用模板创建的文档会继承模板的页面布局。设计模板时，可以指定在基于模板的文档中哪些内容是用户“ 可编辑的”。使用模板，模板创作者控制哪些页面元素可以由模板用户进行编辑。模板创作者可以在文档中包括数

14、种类型的模板区域。注： 使用模板可以控制大的设计区域，以及重复使用完整的布局。如果要重复使用个别设计元素，如站点的版权信息或徽标，可以创建库项目。使用模板可以一次更新多个页面。应用模板创建的文档与该模板保持连接状态，可以修改模板并立即更新基于该模板的所有文档中的设计。模板区域的类型模板为基于模板的文档指定了锁定（不可编辑）区域和其它可编辑区域。在基于模板的页面中，模板用户只能编辑可编辑区域中的内容。可以轻松标识和选择可编辑区域来编辑内容。模板用户不能编辑锁定区域中的内容.注：默认情况下 Dreamweaver 模板的页面中的各部分是固定（即不可编辑）的。将文档另存为模板以后，文档的大部分区域就

15、被锁定。模板创作者在模板中插入可编辑区域或可编辑参数，从而指定在基于模板的文档中哪些区域可以编辑。创建模板时，可编辑区域和锁定区域都可以更改。而在基于模板的文档中，模板用户只能在可编辑区域中进行更改，不能修改锁定区域。共有四种类型的模板区域：可编辑区域 基于模板的文档中未锁定的区域，也就是模板用户可以编辑的部分。模板创作者可以将模板的任何区域指定为可编辑的。要使模板生效，其中至少应该包含一个可编辑区域；否则基于该模板的页面是不可编辑的。重复区域 文档布局的一部分，设置该部分可以使模板用户必要时在基于模板的文档中添加或删除重复区域的副本。例如，可以设置重复一个表格行。重复部分是可编辑的，这样，模

16、板用户可以编辑重复元素中的内容，而设计本身则由模板创作者控制。可以在模板中插入的重复区域有两种：重复区域和重复表格。可选区域 模板中放置内容（如文本或图像）的部分，该部分在文档中可以出现也可以不出现。可编辑标签属性 用于对模板中的标签属性解除锁定，这样便可以在基于模板的页面中编辑相应的属性。例如，可以“ 锁定” 出现在文档中的图像，而允许模板用户将对齐设置为左对齐、右对齐或居中对齐。模板中的保存模板文件保存在站点的 Templates 文件夹中，Templates 文件夹在第一次创建模板时创建。模板文件的扩展名为 .dwt识别模板和基于模板的文档在设计视图中识别模板在“ 设计” 视图中，可编辑

17、区域出现在“ 文档” 窗口的预设高亮颜色的矩形外框中。每个区域的左上角都会出现一个小的标签，其中显示该区域的名称。在代码视图中识别模板在“ 代码” 视图中，使用以下注释标记 HTML 中的可编辑内容区域： 和 可以使用代码颜色首选参数设置自己的配色方案，以便在“ 代码” 视图中查看文档时可以轻松地区分模板区域。如：Enter nameEnter AddressEnter Telephone注： 在“ 代码” 视图中编辑模板代码时请小心，避免更改 Dreamweaver 所依赖的任何与模板相关的注释标签。在设计视图中识别基于模板的文档在基于模板的文档中， “ 文档” 窗口的“ 设计” 视图中的可

18、编辑区域出周围会显示预设高亮颜色的矩形外框。每个区域的左上角都会出现一个小的标签，其中显示该区域的名称。除可编辑区域的外框之外，整个页面周围也会显示其它颜色的外框，右上角的选项卡给出该文档的基础模板的名称。不能更改可编辑区域之外的内容。在代码视图中识别基于模板的文档在“ 代码” 视图中，派生自模板的文档的可编辑区域用与不可编辑区域中的代码不同的颜色显示。可以更改可编辑区域中的代码或可编辑参数；但是不能在锁定区域中键入内容。在 HTML 中使用以下 Dreamweaver 注释标记可编辑内容： 和 这些注释之间的任何内容都可以在基于模板的文档中编辑。可编辑区域的 HTML 源代码可能类似于如下形

19、式：NameAddressTelephone NumberEnter nameEnter AddressEnter Telephone不可编辑文本的默认颜色是灰色；您可以在“ 首选参数” 对话框中为可编辑区域和不可编辑区域选择不同的颜色。创建 Dreamweaver 模板基于现有文档创建模板1 打开要另存为模板的文档。2 请执行下列操作之一： 选择“ 文件”“ 另存为模板”。 在“ 插入” 面板的“ 常用” 类别中，单击“ 模板” 按钮，然后从弹出菜单中选择“ 创建模板”。注： 除非您以前选择了“ 不再显示此对话框”，否则您会收到一个警告，指出您正在保存的文档中没有可编辑区域。单击“ 确定”

20、将文档另存为模板，或单击“ 取消” 退出此对话框而不创建模板。3 从“ 站点” 弹出菜单中选择一个用来保存模板的站点，然后在“ 另存为” 框中为模板输入一个唯一的名称。4 单击“ 保存”。Dreamweaver 将模板文件以文件扩展名 .dwt 保存在站点的本地根文件夹中的 Templates 文件夹中。如果该Templates 文件夹在站点中尚不存在， Dreamweaver 将在保存新建模板时自动创建该文件夹。注： 不要将模板移动到 Templates 文件夹之外或者将任何非模板文件放在 Templates 文件夹中。此外，不要将 Templates 文件夹移动到本地根文件夹之外。这样做将

21、在模板中的路径中引起错误。使用资源面板来创建新模板1 在“ 资源” 面板（“ 窗口”“ 资源”）中，选择面板左侧的“ 模板” 类别 。2 单击“ 资源” 面板底部的“ 新建模板” 按钮 。一个新的、无标题模板将添加到“ 资源” 面板的模板列表中。3 在模板仍处于选定状态时，输入模板的名称，然后按 Enter (Windows)。Dreamweaver 在“ 资源” 面板和 Templates 文件夹中创建一个空模板。使用“插入”莱单项创建面板从“插入”莱单项中的“模板对象”选择“创建模板”创建可编辑区域插入可编辑区域1 在“ 文档” 窗口中，执行下列操作之一选择区域： 选择想要设置为可编辑区域

22、的文本或内容。 将插入点放在想要插入可编辑区域的地方。2 执行下列操作之一插入可编辑区域： 选择“ 插入”“ 模板对象”“ 可编辑区域”。 右键单击 (Windows)，然后选择“ 模板”“ 新建可编辑区域”。 在“ 插入” 面板的“ 常用” 类别中，单击“ 模板” 按钮，然后从弹出菜单中选择“ 可编辑区域”。3 在“ 名称” 框中为该区域输入唯一的名称。（不能对特定模板中的多个可编辑区域使用相同的名称。注： 不要在“ 名称” 框中使用特殊字符。4 单击“ 确定”。可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色。该区域左上角的选项卡显示该区域的名称。如果在文档

23、中插入空白的可编辑区域，则该区域的名称会出现在该区域内部。选择可编辑区域在模板文档和基于模板的文档中，都可以方便地标识和选择模板区域。在文档窗口中选择可编辑区域 单击可编辑区域左上角的选项卡。在文档中查找和选择可编辑区域 选择“ 修改”“ 模板”，然后从该子菜单底部的列表中选择区域的名称。注： 重复区域内的可编辑区域不会出现在该菜单中。必须通过在“ 文档” 窗口中查找选项卡式的边框来定位这些区域。可编辑区域在文档中被选定。删除可编辑区域如果已经将模板文件的某个区域标记为可编辑，现在想要重新锁定该区域（使其在基于模板的文档中不可编辑），请使用“ 删除模板标记” 命令。1 单击可编辑区域左上角的标

24、签以选中它。2 请执行下列操作之一： 选择“ 修改”“ 模板”“ 删除模板标记”。 右键单击 (Windows) 或按住 Control 单击 (Macintosh)，然后选择“ 模板”“ 删除模板标记”。该区域便不再可编辑。更改可编辑区域的名称插入可编辑区域后，可以在以后更改它的名称。1 单击可编辑区域左上角的标签以选中它。2 在属性检查器（“ 窗口”“ 属性”）中，输入一个新名称。3 按 Enter (Windows)。创建和管理重复区域、使用可选区域、可编辑标签属性同理。文档与模板分离若要更改基于模板的文档的锁定区域，必须将该文档从模板分离。将文档分离之后，整个文档都将变为可编辑的。1 打开想要分离的基于模板的文档。2 选择“ 修改”“ 模板”“ 从模板中分离”。文档被从模板分离，所有模板代码都被删除。模板语法一般语法规则Dreamweaver 使用 HTML 注释标签来指定模板和基于模板的文档中的区域，因此，基于模板的文档仍然是有效的 HTML 文件。插入模板对象以后，模板标签便被插入代码中。模板标签Dreamweaver 使用以下模板标签： (equivalent to .)实例标签Dreamweaver 使用以下实例标签：