第8章 设计Web页面布局.pptVIP

网站规划与网页设计 电子工业出版社 8.1 使用布局模式对页进行布局 8.2 AP元素 8.3 框架 8.4 样式表 8.5 模板 第8章 设计Web页面布局 创建页布局的一种常用的方法是使用HTML表格对元素进行定位。但是，使用表格进行布局不太方便，因为最初创建表格是为了显示表格数据，而不是用于对Web页进行布局。为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”模式。 在“布局”模式中，用户可以使用表格作为基础结构来设计页，同时避免了使用传统的方法创建基于表格的设计时经常出现的一些问题。 8.1 使用布局模式对页进行布局 【例8-1】 AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，具体地说，就是Div标签或其它任何标签。AP元素可以包含文本、图像或其它任何可放置到HTML文档正文中的内容。 在设计网页时，必须对页面元素进行定位，使页面布局整齐、美观。AP元素可以放置在页面的任意位置，使用AP元素可以以像素为单位来精确定位页面元素。把页面元素置入AP元素中，可以控制某个AP元素显示在前面还是后面，显示还是隐藏。配合时间轴的使用，可同时移动一个或多个AP元素，从而轻松制作出动态效果。 8.2 AP元素 【例8-2】 8.2.2 将AP元素转换为表格 许多网页设计人员更喜欢通过AP元素进行页面布局设计，而不是使用表格或布局模式创建页面布局。Dreamweaver支持用户使用AP元素创建页面布局，然后将它们转换为表格。如果用户需要一个使用表格的页面布局，最好使用Dreamweaver中的标准表格布局工具创建该页面布局。 当然，用户可以在AP元素和表格之间相互转换，以调整布局并优化网页设计。但是，需要注意的是，当用户将表格转换回AP元素时，Dreamweaver会将此表格转换回AP Div，此操作与对表格进行转换之前页面上可能已有的AP元素的类型无关。另外，用户不能转换页面上特定的表格或AP元素，必须将页面上所有的AP元素转换为表格。 8.2 AP元素 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由框架集（Frameset）和单个框架（Frame）组成。框架集是在一个文档内定义一组框架结构的HTML网页。框架集定义了一个网页中显示的框架集数、框架集的大小、载入框架的网页源和其他可定义的属性等。单个框架是指在网页上定义的一个区域。 1．框架类型 Dreamweaver预定义了多种类型的框架结构。在插入工具栏的“布局”分类中单击“框架”按钮 ，在弹出的菜单中，用户可以选择系统预定义的框架结构。 2．框架面板 在操作框架的过程中，框架面板是非常有用的。使用框架面板可以进行选取、观察、修改框架等基本操作。因此在对框架操作时，框架面板最好一直打开。 8.3 框架 【例8-3】 8.4.1 Dreamweaver中CSS样式的类型 执行“窗口”→“CSS样式”命令，打开CSS样式面板，如图所示。单击CSS样式面板中的“新建CSS规则”按钮 ，打开“新建CSS规则”对话框，如图所示。 8.4 样式表 8.4.1 Dreamweaver中CSS样式的类型 在Dreamweaver中CSS样式的类型包括以下3种。 （1）类 类也称为class类样式或自定义CSS样式，它在网页中定义了一个CSS样式属性集，当页面中的对象引用该样式后，所定义的CSS属性应用到页面中。 （2）标签 标签也称为重新定义HTML标签样式，该类样式是对HTML标签进行重新定义。例如，创建或更改H1标签（对应于段落格式中的“标题1”）的CSS样式时，网页中所有使用H1标签设置了该格式的文本都能立即被更新。 （3）高级CSS选择器样式 该类样式可以定义网页中的超链接效果。例如，可以使超链接文字在各种状态下均无下划线，并且当鼠标悬停时，文字颜色由蓝色变为红色等。 8.4 样式表 8.4.2 Dreamweaver中使用CSS样式表美化页面 8.4 样式表 【例8-4】