网页设计与制作-页面版式.ppt

第5章 页面版式 二．三种模式的切换 使用以下任何一种方法，都能实现三种模式的切换： ⑴ 选择“查看/表格模式”菜单。 ⑵ 使用插入栏“布局”类别中的“标准”、“扩展”、“布局”按钮进行切换。 示例： 使用表格布局设计图所示网页页面。 设计步骤 1．页面分析 2．绘制表格和嵌套 3．调整单元格大小及位置 4．插入内容，并设置格式 5．预览页面，进行细微调整，完成页面设计。 5、2使用AP进行页面布局 1. 创建AP ⑴ 在插入栏的“布局”类别中单击“绘制AP”按钮。 ⑵ 执行下列操作之一： 拖动以绘制一个AP（通过按住 Ctrl 键并拖动来连续绘制多个AP ） 在选定了插入点后，使用菜单“插入/布局对象/AP”绘制AP。 2．AP面板 在文档窗口中绘制的每一个AP都会出现在AP面板中，通过AP面板可以管理文档中的AP。 在AP面板，AP显示为按z轴顺序排列的名称列表。先创建的AP出现在列表的底部，新创建的AP出现列表的顶部。 嵌套的AP显示为连接到父AP的名称。单击加号“+”或减号“-”图标显示或隐藏嵌套的AP。 使用AP面板可防止AP重叠，更改AP的可见性，将AP嵌套或AP叠，以及选择一个或多个AP。 3．选择AP ⑴ 选择一个AP：在AP面板中单击该AP的名称或单击一个AP的边框。 ⑵ 选择多个AP：按住Shift键并单击AP面板上的两个或更多个名称或在两个或更多个AP的边框内（或边框上）按住 Shift 键并单击。 当选定多个AP时，最后选定AP的大小调整柄将以实心突出显示，其他AP的大小调整柄则以空心显示。 在设计视图中直接点击AP标记或AP左上角的选择柄也能实现AP选择。 4．调整AP大小 ⑴ 调整单个AP的大小 ① 拖动AP的调整柄调整AP的大小。 ② 按箭头键时按住Ctrl键，对AP一次调整一个像素的大小。 ③ 按箭头键时按住Shift+Ctrl键，则按网格靠齐增量来调整AP的大小。 ④ 在属性检查器中，键入“宽”和“高”的值，调整AP的大小。 ⑵ 调整多个AP的大小 ① 在设计视图中选择多个AP。 ② 选择如下菜单 “修改/排列顺序/设成宽度相同”或“修改/排列顺序/设成高度相同”，则将选择的AP设定为相同的宽度或高度，其结果值取决于最后选定的AP的大小。 6. 查看和设置AP的属性 在属性检查器中查看和设置AP属性的操作步骤如下： ⑴ 选择一个AP。 ⑵ 选择“窗口/属性”菜单，打开属性检查器。 ⑶ 通过设置属性来更改AP的属性。 主要参数说明： AP编号：用于指定AP的名称，每个AP都必须有它自己的唯一ID。 左和上：指定AP的左上角相对于页面左上角的位置，默认单位为px。 Z 轴：确定AP的堆叠顺序。编号较大的AP出现在编号较小的AP的前面。 可见性：指定该AP最初是否是可见的。 背景图像：指定AP的背景图像。 背景颜色：指定AP的背景颜色。 标签：指定用来定义该AP的 HTML 标签。 溢出：控制当AP的内容超过AP的指定大小时如何在浏览器中显示AP。 7．更改AP的AP叠顺序 使用属性检查器或AP面板可更改AP的AP叠顺序。AP面板列表顶部的AP将位于AP叠顺序的顶部，并且会出现在其他AP之前。 在属性检查器的“Z轴”文本框中输入AP叠序号，可直接改变AP叠顺序； 在AP面板中移动AP也可改变AP叠顺序。 8．设置AP可见性 ⑴ 使用AP面板设置AP的可见性 睁开的眼睛表示AP是可见的。当设置为闭合状态时，对应的AP将不被显示。如果没有眼形图标，该AP通常会继承其父AP的可见性。 ⑵ 使用AP属性检查器设置AP的可见性 在AP属性检查器中设置“可见性”的选项值，即可控制AP的可见性。 “可见性” 选项及含义： default: 默认状态 inherit：继承父AP属性 visible：AP可见 hidden： AP不可见 说明： 如果AP没有嵌套，父AP就是文档正文，而文档正文始终是可见的。另外，如果未指定可见性，则不会显示眼形图标。 9．AP转换为表格 ⑴ 选择“修改/转换/AP到表”菜单，打开 “AP转化为表格”对话框。 ⑵ 在对话框中选择所需的选项，然后单击“确定”按钮。 5.3使用框架 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由框架集（Frameset）和单个框架（Frame）组成。框架集是在一个文档内定义一组框架结构的HTML网页。框架集定义了一个网页中显示的框架集数、框架集的大小、载入框架的网页源和其他可定义的属性等。单个框架是指在网页上定义的一个区域。 1．框架类型 Dreamweaver预定义了多种类型的框架结构。在插入工具栏的“布局”分类中单击“框架”按钮