设计Web页面布局分析报告.ppt

9.1 使用布局模式对页进行布局 9.2 AP元素 9.3 框架 9.4 样式表 9.5 模板 第9章 设计Web页面布局 创建页布局的一种常用的方法是使用HTML表格对元素进行定位。但是，使用表格进行布局不太方便，因为最初创建表格是为了显示表格数据，而不是用于对Web页进行布局。为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”模式。 在“布局”模式中，用户可以使用表格作为基础结构来设计页，同时避免了使用传统的方法创建基于表格的设计时经常出现的一些问题。 9.1 使用布局模式对页进行布局 9.1.1 “布局”模式的概念 在“布局”模式中，用户可以在添加内容前使用布局单元格和表格来对页面进行布局。例如，用户可以沿页面的顶部绘制一个单元格用于放置标题图形，在页面的左边绘制另一个单元格用于放置导航条，在右边绘制第三个单元格用于放置内容。添加内容时，可以按需要在其四周移动单元格，以调整布局。 页面上显示的布局表格外框为绿色，而布局单元格外框为蓝色。当用户将鼠标指针移到表格单元格上时，Dreamweaver会高亮显示该单元格。 9.1 使用布局模式对页进行布局 9.1.2 “标准”模式与“布局”模式的切换 在绘制布局表格或布局单元格之前，必须从“标准”模式切换到“布局”模式。 1．“标准”模式切换到“布局”模式 要切换到“布局”模式，可以执行以下操作之一： ① 如果用户正在代码视图中工作，则选择“查看”→“设计”菜单命令或“查看”→“代码和设计”菜单命令。 ② 选择“查看”→“表格模式”→“布局模式”菜单命令，在文档窗口的顶部会出现标有“布局模式”的横条。 2．“布局”模式切换到“标准”模式 要切换出“布局”模式，可以执行以下操作之一： ① 在文档窗口的顶部，单击“布局模式”后的“退出”项，如图9-3所示。 ② 选择“查看”→“表模式”→“标准模式”菜单命令。 9.1 使用布局模式对页进行布局 9.1.3 在“布局”模式下绘制布局单元格和表格 1．绘制布局单元格和表格 （1）绘制布局单元格 ① 确保设计处于“布局”模式下。 ② 在插入面板的“布局”分类中单击“绘制布局单元格”按钮 ，鼠标指针变为加号（+）形状。 ③ 将鼠标指针移到要开始绘制单元格的位置单击，然后按住鼠标左键拖动以创建布局单元格。 （2）绘制布局表格 ① 确保设计处于“布局”模式下。 ② 在插入面板的“布局”分类中单击“绘制布局表格”按钮 ，鼠标指针变为加号（+）形状。 ③ 在页面上单击然后按住鼠标左键拖动以创建布局表格，在页面上显示的布局表格外框为绿色。 9.1 使用布局模式对页进行布局 9.1.3 在“布局”模式下绘制布局单元格和表格 2．绘制嵌套布局表格 用户可以将一个布局表格绘制在另一个布局表格中，创建嵌套表格。对外部表格所进行的更改不会影响嵌套表格中的单元格。例如，当用户更改外部表格中行或列的大小时，内部表格中单元格的大小不发生变化。用户可以插入多级嵌套表格，但要注意嵌套布局表格的大小不能超过包含它的表格。绘制嵌套布局表格的操作步骤如下。 ① 确保设计处于“布局”模式下。 ② 在插入面板的“布局”分类中单击“绘制布局表格”按钮 ，鼠标指针变为加号（+）形状。 ③ 在现有布局表格中的空白（灰色）区域中单击，然后按住鼠标左键拖动以创建嵌套布局表格。 9.1 使用布局模式对页进行布局 9.1.4 调整布局单元格和表格的大小及位置 1．调整布局单元格的大小及位置 （1）调整布局单元格的大小 （2）调整布局单元格的位置 2．调整布局表格的大小及位置 （1）调整布局表格的大小 （2）移动布局表格 9.1.5 将内容添加到布局单元格中 在“布局”模式下，用户可以将文本、图像和其他内容添加到布局单元格中，就像在“标准”模式下将内容添加到表格单元格中一样。 【案例9-1】制作世界名车展示网页。 9.1 使用布局模式对页进行布局 AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，具体地说，就是Div标签或其它任何标签。AP元素可以包含文本、图像或其它任何可放置到HTML文档正文中的内容。 在设计网页时，必须对页面元素进行定位，使页面布局整齐、美观。AP元素可以放置在页面的任意位置，使用AP元素可以以像素为单位来精确定位页面元素。把页面元素置入AP元素中，可以控制某个AP元素显示在前面还是后面，显示还是隐藏。配合时间轴的使用，可同时移动一个或多个AP元素，从而轻松制作出动态效果。 9.2 AP元素 9.2.1 A