ch03 使用表格和框架规划网页布局讲义.ppt

第 三 章 学 习 目 标 本 章 重 点 3.1 使用表格 3.1.1 表格的概念 3.1.2 插入表格 3.2 编辑表格 3.2.1 选择表格 2.2.2 使用高级面板创建本地站点 3.2.3 编辑表格和单元格 3.3 使用表格规划网页布局 3.3.1 在【布局模式】中规划网页布局 2.3.2 设置布局表格和单元格属性 3.4 使用框架 3.4.1 框架的概念 3.4.2 创建框架网页文档 3.5 编辑框架 3.5.1 框架的基本操作 3.5.2 设置框架和框架集属性 * 使用表格和框架规划网页布局 规划网页布局，表格是常用的工具之一，表格在网页中不仅可以排列数据，还可以对页面中的图像、文本、动画等元素进行准确的定位，是页面显得整齐有序、分类明确，便于访问者浏览。使用表格布局网页，在不同平台和不同分辨率的浏览器中都能保持原有的布局。使用框架规划网页，可以把网页分成几个部分，每个部分都是一个独立的HTML页。本章主要介绍使用表格和框架规划网页布局。 表格的概念 使用表格 编辑表格 使用表格规划网页布局 框架的概念 使用框架设置网页布局 网页向浏览者提供的信息是多样化的，例如文字、图像、Flash动画等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得有条理和美观，是设计人员在着手设计网页之前必须考虑的事情。表格的作用就在于帮助设计者高效、准确地定位各种网页数据，直观、鲜明地表达设计者的思想。 表格的概念 插入表格 在网页文档中，表格是用于整理复杂的数据内容，安排网页文档的整体布局。利用表格来设计网页的布局，可以不受网页形态的限制，并在不同分辨率下维持原有的页面布局。典型的利用表格设计的网页。 Dreamweaver CS3中，表格可以用于制作简单的图表，使用表格来显示数据，可以更加方便地进行查看、修改以及分析等目的。 创建表格后，可以对表格进行编辑，包括合并和拆分单元格、添加和删除单元格、设置单元格和表格属性等，并且可以导入和到处表格。 选择表格 编辑表格和单元格 选要对网页元素进行编辑或设置，首先需要选择表格。在Dreamewaver CS3中，可以一次选择整个表、行或列，也可以选择连续的单元格。 使用高级面板创建本地站点，选择【站点】|【管理站点】命令，打开【管理站点】对话框，单击【新建】按钮，在弹出的菜单中选择【站点】命令，打开【站点定义为】对话框。单击【高级】选项卡，打开该选项卡对话框。 创在HTML页中的表格，可以设置表格单元格的属性来改变外观，也可以对网页中的表格及单元格进行调整大小、添加及删除行列、合并拆分单元格等操作。 在网页设计中，页面布局是非常重要的部分。好的布局能使整个网页更加美观、大方、实用。Dreamweaver CS3提供了多种方法来创建和控制网页布局，在表格的【布局模式】中规划网页布局就是最常用、最实用的方式之一。 表格的【布局模式】来源于表格，但是在布局模式中简化了使用表格进行网页布局的过程，避免了使用传统的方法创建基于表格的页面布局时经常出现的一些问题，如定位不准、不易调整等。 在【布局模式】中规划网页布局 设置布局表格和单元格属性 表格除了可以罗列数据，还可以进行页面定位。但是，创建表格最初是为了显示表格数据，而不是用于对Web页布局，因此使用表格进行页面定位或是设计布局并不是非常方便。除此以外，使用表格还存在一些其他问题。为了解决这一问题、简化使用表格进行页面布局的过程，Dreamweaver CS3在表格中提供了【布局模式】。 在Dreamweaver CS3中，可以在【属性】面板中设置【布局模式】中的任何布局单元格和布局表格的外观，例如背景、元素对齐方式等。 在网络带宽十分有限的情况下，如何提高网页的下载速度，是设计网页时必须考虑的问题。如果多个网页拥有相同的导航区，只是内容有所不同，则可以考虑使用框架来设计网页布局。这样浏览者在查看不同内容时，便无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容部分即可，从而能够极大提高网页的下载速度。这样的网页也称为框架页，其最典型的应用便是当前十分流行的各种论坛。 框架的概念 创建框架网页文档 框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的网页，每个区域可以独立翻滚。正是基于框架页面的这种特点，使用框架可以极大丰富网页设计的自由度，在不同的页面部分设置不同的网页属性，尤其是对于页面间的链接，可以使页面的结构变化自如。 使用框架最方便的方法就时创建框架网页文档，在Dreamweaver C