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

1、第第5章章 页面版式页面版式学习目标熟练掌握应用表格设计网页布局的方法。熟练掌握应用表格设计网页布局的方法。掌握使用掌握使用AP设计网页布局的方法。设计网页布局的方法。了解使用框架设计网页布局的方法。了解使用框架设计网页布局的方法。网页界面的版式设计，是指将文字、图形图网页界面的版式设计，是指将文字、图形图像、色彩、动画、视频多媒体等网页对象的传达像、色彩、动画、视频多媒体等网页对象的传达要素，根据特定内容和主题，在网页限定范围内要素，根据特定内容和主题，在网页限定范围内将设计意图以视觉形式表现出来。从网页技术角将设计意图以视觉形式表现出来。从网页技术角度讲，设计者通常是围绕着页面中的导航栏、

2、图度讲，设计者通常是围绕着页面中的导航栏、图像、动画、正文等内容展开页面布局的。像、动画、正文等内容展开页面布局的。版式的实用功能 主次分明、重点突出主次分明、重点突出应能让浏览者迅速找到网页的主题，并对整个页面应能让浏览者迅速找到网页的主题，并对整个页面有全面的掌握有全面的掌握 导航清晰、便于浏览导航清晰、便于浏览 网页应该具有一致风格的导航系统，为用户浏览提网页应该具有一致风格的导航系统，为用户浏览提供方便供方便 布局合理、逻辑性强布局合理、逻辑性强应能使网页中的各种视觉信息在页面中合理、有序应能使网页中的各种视觉信息在页面中合理、有序地排列，既要体现出设计思想，又要符合一般的视地排列，既

3、要体现出设计思想，又要符合一般的视觉原理和思维习惯觉原理和思维习惯 5.1 使用表格布局一、模式一、模式1布局模式布局模式布局模式用于绘制布局表格和布局单元格，是页面布局设计的主要布局模式用于绘制布局表格和布局单元格，是页面布局设计的主要模式。在布局单元格中，可以插入文本、图像、对象等网页元素。模式。在布局单元格中，可以插入文本、图像、对象等网页元素。2标准模式标准模式标准模式将布局表格转化为标准模式将布局表格转化为HTML常规表格的形式，从而能够使用常规表格的形式，从而能够使用HTML表格的编辑方法对布局表格进行编辑，如拆分单元格、合并表格的编辑方法对布局表格进行编辑，如拆分单元格、合并单元

4、格、调整大小、设定格式等。单元格、调整大小、设定格式等。3扩展表格模式扩展表格模式扩展表格模式临时向文档中的所有表格添加单元格边距和间距，并扩展表格模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以选且增加表格的边框以使编辑操作更加容易。利用这种模式，可以选择表格中的项目或者精确地放置插入点。择表格中的项目或者精确地放置插入点。二三种模式的切换二三种模式的切换使用以下任何一种方法，都能实现三种模式的切使用以下任何一种方法，都能实现三种模式的切换：换： 选择选择“查看查看/表格模式表格模式”菜单。菜单。 使用插入栏使用插入栏“布局布局”类别

5、中的类别中的“标准标准”、“扩扩展展”、“布局布局”按钮进行切换。按钮进行切换。示例：示例：使用表格布局设计图所示网页页面。使用表格布局设计图所示网页页面。 设计步骤设计步骤 1页面分析页面分析 2绘制表格和嵌套绘制表格和嵌套 3调整单元格大小及位置调整单元格大小及位置 4插入内容，并设置格式插入内容，并设置格式 5预览页面，进行细微调整，完成页面设计。预览页面，进行细微调整，完成页面设计。5、2使用AP进行页面布局1. 创建创建AP 在插入栏的在插入栏的“布局布局”类别中单击类别中单击“绘制绘制AP”按按钮。钮。 执行下列操作之一：执行下列操作之一： 拖动以绘制一个拖动以绘制一个AP（通过按

6、住（通过按住 Ctrl 键并拖动来连续键并拖动来连续绘制多个绘制多个AP ）在选定了插入点后，使用菜单在选定了插入点后，使用菜单“插入插入/布局对象布局对象/AP”绘制绘制AP。2AP面板面板在文档窗口中绘制的每一个在文档窗口中绘制的每一个AP都会出现在都会出现在AP面板面板中，通过中，通过AP面板可以管理文档中的面板可以管理文档中的AP。在在AP面板，面板，AP显示为按显示为按z轴顺序排列的名称列表。轴顺序排列的名称列表。先创建的先创建的AP出现在列表的底部，新创建的出现在列表的底部，新创建的AP出现出现列表的顶部。列表的顶部。嵌套的嵌套的AP显示为连接到父显示为连接到父AP的名称。单击加号

7、的名称。单击加号“+”或减号或减号“-”图标显示或隐藏嵌套的图标显示或隐藏嵌套的AP。使用使用AP面板可防止面板可防止AP重叠，更改重叠，更改AP的可见性，的可见性，将将AP嵌套或嵌套或AP叠，以及选择一个或多个叠，以及选择一个或多个AP。3选择选择AP 选择一个选择一个AP：在：在AP面板中单击该面板中单击该AP的名称或的名称或单击一个单击一个AP的边框。的边框。 选择多个选择多个AP：按住：按住Shift键并单击键并单击AP面板上的面板上的两个或更多个名称或在两个或更多个两个或更多个名称或在两个或更多个AP的边框内的边框内（或边框上）按住（或边框上）按住 Shift 键并单击。键并单击。当

8、选定多个当选定多个AP时，最后选定时，最后选定AP的大小调整柄将以的大小调整柄将以实心突出显示，其他实心突出显示，其他AP的大小调整柄则以空心显的大小调整柄则以空心显示。示。 在设计视图中直接点击在设计视图中直接点击AP标记或标记或AP左上角的选择左上角的选择柄也能实现柄也能实现AP选择。选择。 4调整调整AP大小大小 调整单个调整单个AP的大小的大小 拖动拖动AP的调整柄调整的调整柄调整AP的大小。的大小。 按箭头键时按住按箭头键时按住Ctrl键，对键，对AP一次调整一个像素的大一次调整一个像素的大小。小。 按箭头键时按住按箭头键时按住Shift+Ctrl键，则按网格靠齐增量来调键，则按网格

9、靠齐增量来调整整AP的大小。的大小。 在属性检查器中，键入在属性检查器中，键入“宽宽”和和“高高”的值，调整的值，调整AP的大小。的大小。 调整多个调整多个AP的大小的大小 在设计视图中选择多个在设计视图中选择多个AP。 选择如下菜单选择如下菜单 “修改修改/排列顺序排列顺序/设成宽度相同设成宽度相同”或或“修修改改/排列顺序排列顺序/设成高度相同设成高度相同”，则将选择的，则将选择的AP设定为相同设定为相同的宽度或高度，其结果值取决于最后选定的的宽度或高度，其结果值取决于最后选定的AP的大小。的大小。 6. 查看和设置查看和设置AP的属性的属性在属性检查器中查看和设置在属性检查器中查看和设置

10、AP属性的操作步骤如属性的操作步骤如下：下： 选择一个选择一个AP。 选择选择“窗口窗口/属性属性”菜单，打开属性检查器。菜单，打开属性检查器。 通过设置属性来更改通过设置属性来更改AP的属性。的属性。主要参数说明：主要参数说明：AP编号：用于指定编号：用于指定AP的名称，每个的名称，每个AP都必须有它自己的都必须有它自己的唯一唯一ID。左和上：指定左和上：指定AP的左上角相对于页面左上角的位置，默的左上角相对于页面左上角的位置，默认单位为认单位为px。Z 轴：确定轴：确定AP的堆叠顺序。编号较大的的堆叠顺序。编号较大的AP出现在编号较出现在编号较小的小的AP的前面。的前面。可见性：指定该可见

11、性：指定该AP最初是否是可见的。最初是否是可见的。背景图像：指定背景图像：指定AP的背景图像。的背景图像。背景颜色：指定背景颜色：指定AP的背景颜色。的背景颜色。标签：指定用来定义该标签：指定用来定义该AP的的 HTML 标签。标签。溢出：控制当溢出：控制当AP的内容超过的内容超过AP的指定大小时如何在浏览的指定大小时如何在浏览器中显示器中显示AP。7更改更改AP的的AP叠顺序叠顺序使用属性检查器或使用属性检查器或AP面板可更改面板可更改AP的的AP叠顺序。叠顺序。AP面板列表顶部的面板列表顶部的AP将位于将位于AP叠顺序的顶部，叠顺序的顶部，并且会出现在其他并且会出现在其他AP之前。之前。

12、在属性检查器的在属性检查器的“Z轴轴”文本框中输入文本框中输入AP叠序号，叠序号，可直接改变可直接改变AP叠顺序；叠顺序；在在AP面板中移动面板中移动AP也可改变也可改变AP叠顺序。叠顺序。8设置设置AP可见性可见性 使用使用AP面板设置面板设置AP的可见性的可见性睁开的眼睛表示睁开的眼睛表示AP是可见的。当设置为闭合状态时，对应的是可见的。当设置为闭合状态时，对应的AP将将不被显示。如果没有眼形图标，该不被显示。如果没有眼形图标，该AP通常会继承其父通常会继承其父AP的可见性。的可见性。 使用使用AP属性检查器设置属性检查器设置AP的可见性的可见性在在AP属性检查器中设置属性检查器中设置“可

13、见性可见性”的选项值，即可控制的选项值，即可控制AP的可见的可见性。性。“可见性可见性” 选项及含义：选项及含义：default: 默认状态默认状态inherit：继承父：继承父AP属性属性visible：AP可见可见hidden： AP不可见不可见说明：说明：如果如果AP没有嵌套，父没有嵌套，父AP就是文档正文，而文档正文始终是可见的。就是文档正文，而文档正文始终是可见的。另外，如果未指定可见性，则不会显示眼形图标。另外，如果未指定可见性，则不会显示眼形图标。 9AP转换为表格转换为表格 选择选择“修改修改/转换转换/AP到表到表”菜单，打开菜单，打开 “AP转转化为表格化为表格”对话框。对

14、话框。 在对话框中选择所需的选项，然后单击在对话框中选择所需的选项，然后单击“确定确定”按钮。按钮。5.3使用框架 1、创建自定义框架集、创建自定义框架集 选择选择“文件文件/新建新建”菜单，打开菜单，打开“新建文档新建文档”对对话框。话框。 在在“新建文档新建文档”对话框中，选择对话框中，选择“框架集框架集”类类别，。别，。 从从“框架集框架集”列表选择框架方式，然后单击列表选择框架方式，然后单击“创建创建”按钮。按钮。 2编辑框架集编辑框架集 拆分框架拆分框架 拆分插入点所在的框架：从拆分插入点所在的框架：从“修改修改/框架页框架页”子菜单选子菜单选择拆分项。择拆分项。 以垂直或水平方式拆

15、分框架：将框架边框从以垂直或水平方式拆分框架：将框架边框从“设计设计”视图的边缘向视图的边缘向“设计设计”视图的内部拖入。视图的内部拖入。 使用不在使用不在“设计设计”视图边缘的框架边框拆分框架：在视图边缘的框架边框拆分框架：在按住按住 Alt 键的同时拖动框架边框。键的同时拖动框架边框。 将一个框架拆分成四个框架：将框架边框从将一个框架拆分成四个框架：将框架边框从“设计设计”视图一角拖入框架的中间。视图一角拖入框架的中间。 删除框架删除框架将框架的边框拖离页面或拖到父框架的边框上后，当前框将框架的边框拖离页面或拖到父框架的边框上后，当前框架即被删除。架即被删除。3选择框架和框架集选择框架和框

16、架集 在框架面板中选择框架和框架集在框架面板中选择框架和框架集 选择框架：在框架面板中单击框架内部。选择框架：在框架面板中单击框架内部。 选择一个框架集：在框架面板中单击环绕框架选择一个框架集：在框架面板中单击环绕框架集的边框。集的边框。 在文档窗口中选择框架和框架集在文档窗口中选择框架和框架集 选择框架：在选择框架：在“设计设计”视图中，按住视图中，按住 Alt 键的键的同时单击框架内部。同时单击框架内部。 选择框架集：在选择框架集：在“设计设计”视图中，单击框架集视图中，单击框架集的某一内部框架边框。的某一内部框架边框。4指定框架的打开文档指定框架的打开文档要在框架中打开现有文档，操作步骤

17、如下：要在框架中打开现有文档，操作步骤如下： 将插入点放置在框架中。将插入点放置在框架中。 选择选择“文件文件/在框架中打开在框架中打开”菜单。菜单。 选择要在框架中打开的文档并单击选择要在框架中打开的文档并单击“确定确定”。该文档随即显示在框架中。该文档随即显示在框架中。 要使文档成为在浏览器中打开框架集时在框架要使文档成为在浏览器中打开框架集时在框架中显示的默认文档，则须保存该框架集。中显示的默认文档，则须保存该框架集。5框架集文件和框架的保存框架集文件和框架的保存 保存框架集文件保存框架集文件 在框架面板或文档窗口中选择框架集。在框架面板或文档窗口中选择框架集。 选择下列项之一：选择下列

18、项之一：保存框架集文件：选择保存框架集文件：选择“文件文件/保存框架集保存框架集”菜单。菜单。将框架集文件另存为新文件：选择将框架集文件另存为新文件：选择“文件文件/框架集另存为框架集另存为”菜菜单。单。 保存在框架中显示的文档保存在框架中显示的文档 在框架中单击。在框架中单击。 选择选择“文件文件/保存框架保存框架”或或“文件文件/框架另存为框架另存为”菜单。菜单。 保存与一组框架关联的所有文件保存与一组框架关联的所有文件选择选择“文件文件/保存全部保存全部”菜单。菜单。6设置框架和框架集的属性设置框架和框架集的属性 框架属性框架属性框架名称：链接的框架名称：链接的 target 属性或脚本

19、在引用该框架时所用属性或脚本在引用该框架时所用的名称。的名称。源文件：指定在框架中显示的源文档。源文件：指定在框架中显示的源文档。滚动：指定在框架中是否显示滚动条。滚动：指定在框架中是否显示滚动条。不能调整大小：钩选该项后，浏览网页时不能通过拖动框不能调整大小：钩选该项后，浏览网页时不能通过拖动框架边框调整框架大小。架边框调整框架大小。边框：在浏览器中查看框架时显示或隐藏当前框架的边框。边框：在浏览器中查看框架时显示或隐藏当前框架的边框。边框颜色：为所有框架的边框设置边框颜色。边框颜色：为所有框架的边框设置边框颜色。边界宽度：以像素为单位设置左边距和右边距的宽度。边界宽度：以像素为单位设置左边距和右边距的宽度。边界高度：以像素为单位设置上边距和下边距的高度。边界高度：以像素为单位设置上边距和下边距的高度。 框架集属性框架集属性属性检查器中属性检查器中“行列选择范围行列选择范围”窗的显示形式因窗的显示形式因框架结构而变化：当框架为左右结构时显示为左框架结构而变化：当框架为左右结构时显示为左右垂直窗；为上下结构时，显示为上下水平窗。右垂直窗；为上