第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 拆分和删除框架拆分框架有以下几种方法： 将光标放置在要拆分的框架中，从【修改】|【框架页】的子菜 单中选择拆分项。 在“设计”视图中，将框架边框从视图的边缘拖入视图的中间 ，以垂直或水平方式拆分一个框架。 如果要使用不在视图边缘的框架边框来拆 …… 此处隐藏：1718字，全部文档内容请下载后查看。喜欢就下载吧 ……