《网页设计与制作基础教程》第03章学习规划网页布局.pptVIP

网页设计与制作基础教程 第03章 规划网页布局 构建好本地站点后，可以开始规划网页布局。表格和框架是常用的布局工具，表格在网页中不仅可以排列数据，还可以对页面中的图像、文本、动画等元素进行准确的定位，是页面显得整齐有序、分类明确，便于浏览。使用表格布局网页，在不同平台和不同分辨率的浏览器中都能 保持原有的布局。使用框架规划网页，可以把网页分成几个部分，每个部分都是一个独立的HTML页。本章主要介绍使用表格和框架规划网页布局。 本章知识点 使用表格 编辑表格 使用框架 设置框架属性 3.1 表格的基础知识 网页向浏览者提供的信息是多样化的，例如文字、图像、Flash动画等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得有条理和美观，是设计人员在着手设计网页之前必须考虑的事情。表格的作用就在于帮助设计者高效、准确地定位各种网页数据，直观、鲜明地表达设计者的思想。 认识表格 表格模式 插入表格 3.1.1 认识表格 表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。 当选定了表格或表格中有插入点时，Dreamweaver会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用这些菜单可以快速访问与表格相关的常用命令。可以启用或禁用宽度和菜单。 如果未显示表格的宽度或列的宽度，则说明没有在HTML代码中指定该表格或列的宽度。如果出现两个数，则说明【设计】视图中显示的表格可视宽度与【HTML】代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小，或者添加到单元格中的内容比该单元格的设置宽度大时，会出现这种情况。 3.1.2 表格模式 在网页文档中，表格是用于整理复杂的数据内容，安排网页文档的整体布局。利用表格来设计网页的布局，可以不受网页形态的限制，并在不同分辨率下维持原有的页面布局。典型的利用表格设计的网页如图所示。 3.1.3 插入表格 Dreamweaver CS4中，表格可以用于制作简单的图表，使用表格来显示数据，可以更加方便地进行查看、修改以及分析等目的。表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像等元素更有条理。插入表格后，还可以在表格中插入嵌套表格。 3.2 编辑表格 创建表格后，可以对表格进行编辑，包括合并和拆分单元格、添加和删除单元格、设置单元格和表格属性等，并且可以导入和导出表格。 选择表格 表格的基本操作 表格的其他操作 【扩展表格模式】 3.2.1 选择表格 要对网页元素进行编辑或设置，首先需要选择表格。在Dreamewaver CS4中，可以一次选择整个表、行或列，也可以选择连续的单元格。 3.2.2 表格的基本操作 在HTML页中的表格，可以设置表格单元格的属性来改变外观，也可以对网页中的表格及单元格进行调整大小、添加及删除行列、合并拆分单元格等操作。 3.2.3 表格的其他操作 对于插入的表格，除了上述的一些基本操作外，还可以设置排序表格，导入和导出表格。 3.2.4 【扩展表格模式】 【扩展表格模式】会临时向网页文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。使用该模式，可以选择表格中的项目或者精确地放置插入点，从而避免无意中选中该图像或表格单元格。 3.3 使用框架 在网络带宽十分有限的情况下，如何提高网页的下载速度，是设计网页时必须考虑的问题。如果多个网页拥有相同的导航区，只是内容有所不同，则可以考虑使用框架来设计网页布局。这样浏览者在查看不同内容时，便无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容部分即可，从而能够极大提高网页的下载速度。这样的网页也称为框架页，其最典型的应用便是当前十分流行的各种论坛。 框架的概念 使用框架布局网页文档 3.3.1 框架的概念 框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的网页，每个区域可以独立翻滚。正是基于框架页面的这种特点，使用框架可以极大丰富网页设计的自由度，在不同的页面部分设置不同的网页属性，尤其是对于页面间的链接，可以使页面的结构变化自如。 3.3.2 使用框架布局网页文档 使用框架布局网页文档最方便的方法就是创建框架网页文档，此外，对于普通的HTML网页文档，也可以应用框架。 3.4 编辑框架 创建好框架后，可以对框架进行适当的编辑操作，主要包括选择框