《网页设计与制作实例教程》第7章(赵青松)

清华大学出版社《网页设计与制作实例教程》第7章高等学校计算机应用规划教材

2024/9/20主编方其桂规划布局网页内容提要第7章规划布局网页网页设计主要体现在配色、字体以及布局排版方面，这三个方面能够很好地结合就能制作出很漂亮的网站。因此，在进行网页设计时，需要对网页的版面布局进行整体的规划。在布局过程中，为确保网页美观大方，一般要遵循：正常平衡、异常平衡、对比、凝视、空白和尽量用图片解说等原则。比如，网页的白色背景太虚，则可以加些色块；版面零散，可以用线条和符号串联；左面文字过多，右面则可以插一些图片保持平衡；表格过于规矩，可以改用导角，增强视觉效果。本章通过多个实例，从使用表格、层、框架和CSS布局网页几个方面，介绍规划网页布局。教学目录使用表格布局使用层布局使用框架布局010203第7章规划布局网页04使用CSS布局7.1使用表格布局教学内容7.1.1输入文字内容

第7章规划布局网页在Dreamweaver网页文档中，可以通过“插入”→“表格”命令，插入需要的二维表格，输入数据，以便查询和浏览。实例1七年级部分学生基本信息表新建一个HTML文档，在页面中插入一个5行4列的简单表格，输入七年级部分学生基本信息表，效果如图所示。7.1使用表格布局教学内容7.1.2设置表格属性第7章规划布局网页在页面中插入表格后，可以在“属性”面板中对表格进行相关的设置，其中有些属性是与“表格”对话框中的属性一样的，此外，可以设置表格的“背景颜色”、“边框颜色”和“对齐方式”等属性。实例2七年级部分学生基本信息表

设置上一节中“七年级部分学生基本信息表”表格和单元格属性，表格填充为5像素，居中对齐，间距为0，表格ID为“stu”，单元格文字水平居中对齐，效果如图所示。7.1使用表格布局教学内容7.1.3认识表格标签第7章规划布局网页了解实现表格的HTML代码，可以对表格进行细微的调整，以达到最佳的效果。在DreamWeaver中，可以通过标签和代码实现表格。

实例3

《七年级部分学生基本信息表》代码将“七年级部分学生基本信息表”表格切换到“代码”或“拆分”视图，则呈现表格的代码，其中标签有<table>、<caption>、<tr>、<th>和<td>等，效果如图所示。7.1使用表格布局教学内容7.1.3认识表格标签第7章规划布局网页7.1使用表格布局教学内容7.1.4用表格布局网页第7章规划布局网页表格是最常用的网页布局实现方式。在表格中，可以很容易地对表格的行和列进行调整，能够精确地定位网页中的元素，从而方便地实现网页布局。实例4方舟中学信息技术网络课堂如下图所示是“方舟中学信息技术网络课堂”的首页，通过表格将整个网页进行了功能区的划分，使网页中的各个元素更加整齐、美观。7.1使用表格布局教学内容7.1.5表格模式第7章规划布局网页在DreamWeaver中，表格模式有“标准模式”和“扩展表格模式”两种。标准模式是添加具体网页内容和显示的模式，如上节就是在标准模式下完成用表格布局网页的；扩展表格模式不像浏览器那样显示表格，但便于在表格内部和表格周围选择。

实例5新书推荐

在新书推荐网页文档中，利用扩展表格模式，将新书推荐表格列宽调整到合适的大小，效果如图所示。7.2

使用层布局

教学内容7.2.1制作层

第7章规划布局网页层（也称AP元素）是一种分配有绝对位置的HTML网页元素。其中可以包含文本、图像、表单和表格等，也可以包含其他层。利用“层”不仅可以在网页上自由地进行布局和设计，而且可以任意地调整层的大小、背景和叠放顺序等。实例6制作和叠放层在网页文档中制作4个层，分别插入4张图像，并通过移动层将它们叠放起来，效果如图所示。7.2使用层布局教学内容7.2.2嵌套层

第7章规划布局网页一个层里可以包含另一个层，就是嵌套层，通常也称嵌入层为子层。一个嵌入层会继承其父层的可见性，并且能随父层的移动而移动。一般地，利用移动的办法来判断几个层之间的嵌套关系。

实例7展示新书在网页文档中，利用嵌套层的方法展示新书，效果如图所示。7.2使用层布局教学内容7.2.3认识层HTML代码第7章规划布局网页了解层的HTML代码，可以对层进行细微的调整和控制，以达到最佳的效果。在DreamWeaver中，可以通过标签和代码实现层、设置层。

实例8方舟中学网址（)二维码将方舟中学网址二维码图插入到层中，切换到“拆分”视图，则呈现层的代码，其中标签有<div>、</div>和属性代码，效果如图所示。7.2使用层布局教学内容7.2.4定位网页元素第7章规划布局网页

AP元素是一个十分灵活的网页元素，利用它进行网页布局，操作十分方便，而且功能比较强大，能精确地定位页面元素。实例9网上购车平台本例是用AP元素定位网页元素，布局网页“网上购车平台”，布局轮廓效果如图7-55所示。

7.2使用层布局教学内容7.2.5表格与层转换第7章规划布局网页在网页设计时，根据实际需要，可先用层设计页面，再将层转换成表格；或先用表格设计页面，再将表格转成层。实例10

《网上购车平台》转为表格布局将上节中用层布局的网页《网上购车平台》转换为表格布局的网页，转换前后代码效果如图所示。7.3使用框架布局教学内容7.3.1创建框架和框架集第7章规划布局网页要制作框架网页，就要建立框架集，框架集是组织页面内容的常见方法，通过框架集可以将内容组织到相互独立的HTML页面内。实例11简单的框架页面在网页文档中，插入简单的框架页面，如图7-60所示的是左右两个窗口的框架页面。

7.3使用框架布局教学内容7.3.2保存框架集和框架

第7章规划布局网页

框架集文件和与其相关的框架文件必须先保存，然后才能在浏览器中预览该页面。刚创建的框架网页文档，每个新框架文档都被预定义一个文件名，如UntitleFrameset-1.html代表框架集文件，Untitled-1.html代表主框架文件，UntitledFrame-1.html、UntitledFrame-2.html等代表其他框架文件。

实例12保存简单的框架页面在网页文档中，保存新建的框架集和框架，打开保存位置的文件夹后，显示的框架集和框架的文件名如图所示。

7.3使用框架布局教学内容7.3.3设置框架和框架集属性第7章规划布局网页框架和框架集是一些独立的HTML文档，可以通过设置某些框架或框架集的属性来对框架或框架集进行修改。实例13设置框架和框架集属性在网页文档中，对新建的框架集和框架的边框和滚动设置后，显示效果如图所示。7.3使用框架布局教学内容7.3.4用框架布局页面第7章规划布局网页利用框架可以更加灵活地设计网页布局。在一般情况下，可用框架来保持网页中固定的几个部分，比如网页大标题、导航栏等，剩下的框架用来展现所选的网页内容。实例14新书介绍本实例是在新建的嵌套框架中，在各个框架中分别插入新书图片和文字介绍，效果如图所示。7.3使用框架布局教学内容7.3.5控制带有链接的框架内容第7章规划布局网页在一个框架中使用链接，可以打开另一个框架中的文档，为此必须设置链接对象。此外，在链接目标列表中选择打开链接文档内容的框架或窗口。实例15带有链接的《新书介绍》本实例是设置了控制链接的《新书介绍》，其中每本书图都设置了超链接，链接到对应的新书介绍文字网页文件，效果如图所示。7.4使用CSS布局教学内容7.4.1表格＋CSS布局第7章规划布局网页表格+CSS布局可以使设计的网页结构更加合理，更便于维护和更改网页的样式，从本质上讲，这种布局网页的方式，是从传统的网页设计技术到符合Web2.0和Web3.0标准的网页设计技术的过渡。实例16

通知公告如图所示，这是在网站首页布局中经常会看到的局部布局的效果，位置一般在网页的右侧，或者放置在左侧。7.4使用CSS布局教学内容7.4.2DIV＋CSS布局第7章规划布局网页利用DIV+CSS布局网页是一种盒子模式的开发技术，通过由CSS定义的大小不一的盒子和盒子