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

《《网页设计与制作基础教程》第03章-规划网页布局.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第03章规划网页布局构建好本地站点后，可以开始规划网页布局。表格和框架是常用的布局工具，表格在网页中不仅可以排列数据，还可以对页面中的图像、文本、动画等元素进行准确的定位，是页面显得整齐有序、分类明确，便于浏览。使用表格布局网页，在不同平台和不同分辨率的浏览器中都能保持原有的布局。使用框架规划网页，可以把网页分成几个部分，每个部分都是一个独立的HTML页。本章主要介绍使用表格和框架规划网页布局。本章知识点使用表格编辑表格使用框架设置框架属性3.1表格的基础知识网页向浏览者提供的信息是多样化的，例如文字、图像、Flash动画等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得有条理和美

2、观，是设计人员在着手设计网页之前必须考虑的事情。表格的作用就在于帮助设计者高效、准确地定位各种网页数据，直观、鲜明地表达设计者的思想。认识表格表格模式插入表格3.1.1认识表格表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。当选定了表格或表格中有插入点时，Dreamweaver会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用这些菜单可以快速访问与表格相关的常用命令。可以启用或禁用宽度和菜单。如果未显示表格的宽度或列的宽度，则说明没有在HTML代码中指定该表格或列的宽度。如果出现两个数，则说

3、明【设计】视图中显示的表格可视宽度与【HTML】代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小，或者添加到单元格中的内容比该单元格的设置宽度大时，会出现这种情况。3.1.2表格模式在网页文档中，表格是用于整理复杂的数据内容，安排网页文档的整体布局。利用表格来设计网页的布局，可以不受网页形态的限制，并在不同分辨率下维持原有的页面布局。典型的利用表格设计的网页如图所示。3.1.3插入表格DreamweaverCS4中，表格可以用于制作简单的图表，使用表格来显示数据，可以更加方便地进行查看、修改以及分析等目的。表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像等元素更有条理。插

4、入表格后，还可以在表格中插入嵌套表格。3.2编辑表格创建表格后，可以对表格进行编辑，包括合并和拆分单元格、添加和删除单元格、设置单元格和表格属性等，并且可以导入和导出表格。选择表格表格的基本操作表格的其他操作【扩展表格模式】3.2.1选择表格要对网页元素进行编辑或设置，首先需要选择表格。在DreamewaverCS4中，可以一次选择整个表、行或列，也可以选择连续的单元格。3.2.2表格的基本操作在HTML页中的表格，可以设置表格单元格的属性来改变外观，也可以对网页中的表格及单元格进行调整大小、添加及删除行列、合并拆分单元格等操作。3.2.3表格的其他操作对于插入的表格，除了上述的一些基本操作外

5、，还可以设置排序表格，导入和导出表格。3.2.4【扩展表格模式】【扩展表格模式】会临时向网页文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。使用该模式，可以选择表格中的项目或者精确地放置插入点，从而避免无意中选中该图像或表格单元格。3.3使用框架在网络带宽十分有限的情况下，如何提高网页的下载速度，是设计网页时必须考虑的问题。如果多个网页拥有相同的导航区，只是内容有所不同，则可以考虑使用框架来设计网页布局。这样浏览者在查看不同内容时，便无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容部分即可，从而能够极大提高网页的下载速度。这样的网页也称为

6、框架页，其最典型的应用便是当前十分流行的各种论坛。框架的概念使用框架布局网页文档3.3.1框架的概念框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的网页，每个区域可以独立翻滚。正是基于框架页面的这种特点，使用框架可以极大丰富网页设计的自由度，在不同的页面部分设置不同的网页属性，尤其是对于页面间的链接，可以使页面的结构变化自如。3.3.2使用框架布局网页文档使用框架布局网页文档最方便的方法就是创建框架网页文档，此外，对于普通的HTML网页文档，也可以应用框架。3.4编辑框架创建好框架后，可以对框架进行适当的编辑操作，主要包括选择框架、设置框架属性。要注意的是框架并不是在所有

7、浏览器中都可以显示的，对于不能显示的浏览器，就需要在标签中输入提示信息。框架的基本操作设置框架和设置框架集属性处理浏览器不能显示的页面3.4.1框架的基本操作编辑框架的操作主要包括创建嵌套框架、选择框架以及设置框架的属性等。3.4.2设置框架和设置框架集属性在制作网页的过程中，在框架的【属性】面板中可以定义框架名称、源文件、页边距等属性；在框架集的【属性】面板中可以定义框架集边线颜色、宽度等属性。