第6章 布局网页

第6章 网页布局 章当遨游Internet时，一幅幅漂亮的网页令人流 连忘返，网页的精彩和色彩的搭配、文字的变化 、图片的处理等关系密切，除此之外，还有一个 非常重要的因素——网页的布局。 本章介绍用Dreamweaver进行网页布局的方法， 主要内容有： 使用表格布局模式进行布局 利用框架进行布局

6.1 使用布局模式前面学习了利用表格布局页面的方法，利用表格直接 布局网页元素灵活性不强，比如很难把表格自身定位 在一个随意的位置，表格或者是靠左对齐，或者靠右 对齐，或者居中对齐。 为了提高表格布局的灵活性，Dreamweaver提供了布 局模式，在布局模式下，可以使用表格作为基础结构 来设计网页，同时也使网页布局更加高效。比如可以 使用布局表格，把表格放置在页面的任意处。

6.1.1 在布局模式下绘制表格1.切换布局模式 . 在【插入】工具栏上选择【布局】类别。在右边的工具栏上单 击【布局】按钮，弹出一个【从布局模式开始】对话框。按【 确定】按钮即进入“布局模式”中。 2.绘制布局表格 . 在工具栏的【布局】类别中，单击【布局表格】按钮。鼠标移 到页面时指针变为加号“+”。拖动鼠标绘制一个布局表格。 3.绘制布局单元格 . 在工具栏的【布局】类别中，单击【绘制布局单元格】按钮。 鼠标移到布局表格上或者网页内容下边的空白处时指针变为加 号“+”。拖动鼠标绘制一个布局单元格。 4.绘制嵌套布局表格 . 绘制嵌套布局表格，就是将一个布局表格绘制在另一个布局表 格中。对外部表格所进行的更改不会影响嵌套表格中的单元格 。

6.1.2 设置布局表格布局表格是使用布局模式的基础，进入布局模式首先 要做的就是要插入一个布局表格，然后设置尺寸、背 ——“ 景等属性，另外布局表格还有个特有的属性——“自动 伸展”也需要进行设置。 1.设置布局表格的大小 . 2.设置布局表格自动伸展 .

6.1.3 设置布局单元格在布局模式中，光有布局表格是不够的，布局表格内 部不能直接插入页面内容，必须先添加布局单元格， 然后再在布局单元格内部插入页面内容。本小节讲解 布局单元格的设置。 1.设置布局单元格的位置 . 2.设置布局单元格内容的格式 . 3.为布局单元格添加间隔图像 .

6.1.4 课堂实例 课堂实例――用布局表格布局网站主页 用布局表格布局网站主页要设计一个精美的网页，先要规划好版式。网页中最常用的版式类似 于报刊，这种版式采用规范的、理性的分割方法，把网页分成竖向通 栏、双栏、三栏、四栏或横向的通栏、双栏、三栏、四栏等。一般以 竖向分栏为多，

这种版式给人以和谐、理性的美。几种分栏方式结合 使用，既理性、条理，又活泼而富有弹性。

1.绘制网页顶部布局 . 2.布局网页主体部分布局 . 3.绘制网页底部布局 .

6.2 利用框架布局网页主要内容有：

制作一个简单框架网页 创建框架和框架集 设置框架集属性 嵌套框架 框架集中的超链接 制作一个框架网页

6.2 利用框架布局网页在网页设计中，框架是组织复杂页面的一种重要方法。框架 可以将浏览器显示窗口分割成几个不同的小窗口，每个窗口可 以独立显示不同的网页，而且在替换窗口中的网页文件时，各 个窗口之间没有影响。 框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口 的其余部分中所显示内容无关的HTML文档。

框架集是HTML文件，它定义一组框架的布局和属性，包括 框架的数目、框架的大小和位置以及在每个框架中初始显示的 页面的URL。 使用框架的最常见的情况是，一个框架显示包含导航控件的 文档，而另一个框架显示含有内容的文档。

6.2.1制作一个简单框架网页 制作一个简单框架网页要制作框架网页，就要建立框架集。框架集是组织页 面内容的常见方法，通过框架集可以将网页的内容组 织到相互独立的HTML页面内，相对固定的内容(比 如导航栏、标题栏)和经常变动的内容分别以不同的 文件保存将会大大提高网页设计和维护的效率。

制作一个简单的框架网页，对框架集和框架等概念有 一个概括的认识。

理解框架集HTML代码 代码 理解框架集

6.2.2 创建框架和框架集所谓框架集就是指定义网页结构与属性的 HTML 页 面，这其中包含了显示在页面中框架的数目，框架 的尺寸，装入框架的页面的来源，以及其他一些可 定义的属性的相关信息。框架集页面不会在浏览器 中显示(noframes 部分除外),它只是向浏览器提 供如何显示一组框架以及在这些框架中应显示哪些 文档的有关信息。

创建新的空预定义框架集Dreamweaver中提供的预定义框架种类很多，用户可以根据 自己的实际需要选择一种框架类型。使用预定义的框架集的 方法分为两种，一种是通过“插入”工具栏“布局”类中的 “框架”按钮创建，别一种是通过选择“文件”|“新建”命 令，打开“新建文档”对话框来创建。

在现有文档中创建预定义的框架集

6.2.3 拆分和删除框架拆分框架有以下几种方法： 将光标放置在要拆分的框架中，从【修改】|【框架页】的子菜 单中选择拆分项。 在“设计”视图中，将框架边框从视图的边缘拖入视图的中间 ，以垂直或水平方式拆分一个框架。 如果要使用不在视图边缘的框架边框来拆分框架

,可以按住【 Alt】键并同时拖动框架边框。 要将一个框架拆分成4个框架，请将框架边框从“设计”视图一 角拖入框架的中间。 删除一个框架： 只需将它的边框拖动到页面之外或拖动到父框架的边框上即可 。如果要删除的框架中的文档有未保存的内容，Dreamweaver 将提示保存该文档。

6.2.4 设置框架集属性框架和框架集是一些独立的HTML文档。可以通过设 置框架或框架集的属性来对框架或框架集进行修改。 对于框架和框架集的设置，既可以在框架集文件的源 代码中修改标签<frameset></frameset>和<frame/>的 属性来完成，也可以在【属性】面板中进行，后者更 加直观。

6.2.5 选中框架和框架集在设计视图窗口中选择要在文档窗口的设计视图中选择一个框架，按住Alt键的同 时单击框架内部。 要在文档窗口的设计视图中选择一个框架集，单击框架集 的某一内部框架边框(要执行这一操作，框架边框必须是可 见的)。

在【框架】面板中选择 框架】“框架”面板提供所见即所得的效果，在“框架”面板 中单击框架或环绕框架集的边框，即可在文档窗口中选 择该框架或框架集。在“框架”面板和文档窗口的设计 视图中，框架周围都会显示一个选择轮廓。

6.2.6 设置框架的属性框架的背景颜色可以在页面属性中进行设置，而 框架的的其他属性，比如确定各个框架集内各个框架 的名称、源文件、链接、边距、滚动、边框和能否调 整大小等，要在自己的属性面板中进行设置。 选取框架打开框架的【属性】面板。如图所示。

6.2.7 设置框架集的属性使用框架集属性面板可以设置边框和边框大小。设置框架属 性会覆盖在框架集中设置的相应属性。比如，设置某框架的边 框属性，将覆盖在框架集中对该框架设置的边框属性。 选取框架集，打开框架集的【属性】面板。如图所示。

边框：设置文档在浏览器中查看时是否显示框架边框。 边框颜色：设置边框的颜色。 边框宽度：指定框架集中所有边框的宽度。 框架大小：单击【行列选择范围】区域左侧或顶部的选项卡；然后在“值” 文 本框中，输入高度或宽度。

6.2.8 框架集中的超链接要在一个框架内使用链接打开另一个框架中的文档， 必须设置链接目标。可以使用属性面板中的【目标】 列表框，在弹出的菜单中指定被链接的目标。在前面 章节中介绍超链接时，已经尝试过设置链接目标，但 是由于当时没有使用框架页，因此一些链接目标的设 置没有效果，本节通过实例讲解在框架页的背景下设 置超链接的目标。

6.2.9 实例 制作一个框架网页 实例―制作一个框架网页访问者在浏览框

架网页时，可以使某个框架中的内容 固定不变，通过导航条的链接更改主体框架的内容， 从而达到网页布局的相对统一。在一般情况下，可以 用框架来保持网页中固定的几个部分，比如网页大标 题、导航条等，剩下的框架用来展现所选择的网页内 容。利用框架可以更加灵活地制作网页，本节将制作 一个基于框架的网页。

实例网页共分4个框架，顶部为标题部分，左侧为导航部分，右侧为主 体部分，底部为版权说明部分。浏览网页时可以通过单击左侧导航栏 中的链接切换主体部分的网页内容。效果如图所示。

网页中共分4个框架。顶部为标 题部分，显示网页的大标题；中间 左侧为导航部分，提供各网页的导 航链接；中间右侧为主体部分，显 示网页主要内容；底部为说明部分， 主要包括一些版权信息。 网页展示的是一个语文课内容， 共分4大部分，分别为：课文正文、 时代背景、中心思想和配乐朗诵。 这4部分内容分别放置在4个网页中， 并且通过导航链接控制在主框架中 显示。

制作步骤1.创建框架网页 . 2.编辑各框架内的网页文档 . 3.制作其他需要调用至主框架的网页文件 . 4.定义框架之间的超链接 .