第 7 章规划网页布局

第7章规划网页布局 使用表格布局网页在网页中使用AP 元素使用框架布局网页

网页布局 • 网页设计者应合理布局网页中的文字、图像等内容，使页面美观、结构清晰、层次分明，这样不仅使浏览者愿意把视线停留在页面上，更可以方便地找到所需的目标内容。

实例：实现如图所示的网页布局

在实现网页布局前，可先绘出布局草图。

一、使用表格布局网页 • 表格常用于在网页中定位图像和文本等页面对象 • 使用标准表格（即表格）进行布局 • 使用“布局表格”进行布局

表格常用于在网页中定位图像和文本等页面对象表格常用于在网页中定位图像和文本等页面对象 • 使用标准表格布局时，经常使用嵌套表格。

二、在网页中使用AP元素 • 在Dreamweaver中，可以通过插入“AP 元素”，方便地实现对文档内容的精确定位。本节主要讲述Dreamweaver CS的 “AP 元素”的使用方法。 • AP 元素可以包含文本、图像或其它任何可在HTML 文档正。 • 可以使用AP 元素来设计页面的布局。 • 用户可以将AP 元素前后放置。 • 隐藏某些AP 元素而显示其它AP 元素，以及在屏幕上移动AP 元素 • 利用AP 元素可以非常灵活地放置内容。

AP 元素 • 创建AP 元素 • AP 元素大小和属性设置 • 认识“AP 元素”面板 • 选择、移动和对齐AP 元素 • AP 元素的显示和隐藏 • AP 元素名的变更 • AP 元素的堆叠 • 删除AP 元素

创建AP 元素 • 在“插入”面板选择“布局”类别，然后单击“绘制AP 元素”按钮。光标在AP 元素中选中AP 元素后 AP 元素的属性面板：

利用AP 元素面板，改变AP 元素的堆叠次序 堆叠次序用鼠标拖动AP 元素名可改变AP 元素的堆叠次序

AP 元素的显示和隐藏 • 在AP 元素的眼形图标列内单击可以更改其可见性： • 眼睛睁开表示该AP 元素是可见的。 • 眼睛闭合表示该AP 元素是不可见的。 • 没有眼睛表示默认。利用AP 元素的显示、隐藏可制作动态效果，如弹出式菜单。

AP 元素的修饰、AP 元素的定位 • 使用AP 元素面板完成AP 元素的属性设置、AP 元素的定位等。 • 使用CSS样式完成AP 元素的修饰、AP 元素的定位。即 div+css，（AP 元素+CSS样式）实例：【例7-2】：在【例7-1】的基础上继续创建标题是“蓝色空间”的网站“我的站点”。本例中将创建“技术文章”栏目的网页（名为“article.html”）。页面的布局采用AP 元素技术，页面的全部修饰效果采用CSS样式。

表格和AP 元素布局网页的比较 • 表格排版存在一些问题。首先，利用表格排版的页面很难升级，需要花费较大的精力重新设置表格的行和列的内容及属性。其次，利用表格排版的页面在下载时必须等整个表格都下载完毕以后才会一次性显示出来。 • 而利用AP 元素排版，可以避免上述问题。CSS的AP 元素排版方式使得数据内容与CSS样式规则完全分离，修改网页排版效果时不需要关心网页数据部分（网页正文）的代码。 • AP 元素（div）+CSS样式的高度结合，已经成为网页设计的主流方法。

三、使用框架布局网页 • 认识框架和框架集 • 创建框架和框架集 • 选择框架和框架集 • 保存框架和框架集 • 设置框架和框架集的属性 • 处理不能显示框架的浏览器 • 框架间的超链接

认识框架和框架集 • 框架是浏览器窗口中的一个区域，可以独立显示一个网页的内容。 • 框架集文件本身不包含要在浏览器中显示的HTML 内容；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。

创建框架和框架集 • 通过预定义的框架集样式，用户可以很容易地选择要创建的框架集类型。 • 执行“插入”|“HTML”|“框架”子菜单中选择预定义的框架集；或在“插入”面板的“布局”类别中选择框架

框架属性面板框架面板 框架面板

框架集的属性面板 使用框架集属性面板可以查看和设置大多数框架集属性。

框架间的超链接 • 指定超链接的目标框架 • 四个默认的框架名： • _blank 在新的浏览器窗口中打开链接的文档 • _parent 在显示链接的框架的父框架中打开链接的文档 • _self 在当前框架中打开链接 • _top 在当前浏览器窗口中打开链接的文档

保存框架和框架集 • 可以单独保存每个框架集文件和带框架的文档 • 也可以同时保存框架集文件和框架中出现的所有文档。 • 执行“文件”|”保存全部”，则保存全部； • 选择框架集后执行“文件”|“保存框架集”； • 选择某框架后执行“文件”|“保存框架”；

删除框架 删除不需要的框架时，用鼠标将要删除框架的边框拖到父框架边框上或拖离页面即可。

框架网页实例 【例7-3】创建一个如图所示的包含框架的网页，框架类型为“顶部和嵌套的左侧框架”。

点击左侧框架中的“题西林壁”后，网页显示结果点击左侧框架中的“题西林壁”后，网页显示结果

处理不能显示框架的浏览器 • 如果浏览器不支持框架，框架和框架集的内容就不能显示。 • Dreamweaver 允许用户在框架集文件中，在<noframes>和</noframes>标签之间，给出类似“您的浏览器不支持框架，无法显示文档内容”提示信息。当不支持框架的浏览器加载该框架集文件时，浏览器只显示用<noframes>和</noframes>标签之间的内容。

例如：在Dreamweaver中，创建框架集时，在HTML文件中加入下列内容：例如：在Dreamweaver中，创建框架集时，在HTML文件中加入下列内容： <noframes> <body> 您的浏览器不支持框架，无法显示文档内容 </body> </noframes>

Thank You !

第 7 章规划网页布局