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

1、第03章计划web布局，构建本地网站后，就可以开始进行web布局的计划。 表格和框架是常用的布局工具，表格不仅能在网页上放置数据，还能正确地放置页面内的图像、文本、动画等要素，使页面分类整齐，容易阅读。 使用表布局网页，可以在平台或分辨率不同的浏览器中保持布局。 使用框架计划网页的话，网页可以分成几个部分，每个部分都是独立的HTML页面。 本章主要介绍使用表和框架的web布局的计划。 使用本章的知识点、表编辑表设定框架属性，3.1表的基础知识、网页向阅览者提供的信息多种多样，如文字、图像、Flash动画等。 如何在网页中的合理位置显示这些网页要素，使网页整齐美丽，是设计者在着手网页设计之前必须

2、考虑的事情。 表格的作用是帮助设计者有效和准确地定位各种页面数据，以直观和清晰地表达设计者的思想。 识别表模式并插入表，识别3.1.1表，表是用于在HTML页面上显示表形式的数据，对文本和图形进行布局的工具。 表格由一行或多行组成，每一行由一个或多个单元格组成。 如果选定的表或表具有插入点，Dreamweaver将显示表的宽度和每个表的列宽度。 在宽度旁边，显示表标题菜单和列标题菜单的箭头。 使用这些菜单，可以快速访问与表相关的常用命令。 可以启用或禁用宽度和菜单。 如果看不到表的宽度或列的宽度，则HTML代码没有指定表或列的宽度。 如果有两个数字，则表示“设计”视图中显示的表格的显示宽度与H

3、TML代码中指定的宽度不匹配。 当拖动表的右下角来调整表的大小，或者添加到单元格中的内容大于该单元格的设置宽度时，会发生这种情况。 在3.1.2表格模式、web文档中，表格用于组织复杂的数据内容和安排整个web文档的布局。 利用格式设计网页的布局，可以与网页的形式无关地以不同的分辨率维持传统的页面布局。 利用典型的表单设计的页面如图所示。3.1.3插入表，在Dreamweaver CS4中，可以使用表制作简单的图表，使用表显示数据，使显示、修改、分析等目的更加容易。 表格不仅可以宏观地布局页面，还可以组织页面中的文本、图像等元素。 插入表后，还可以将嵌套表插入表中。 编辑3.2表并创建表后，可

4、以编辑表，如合并和分割单元格、添加和删除单元格、设置单元格和表属性、导入和导出表等。 要选择表的基本操作表的其他操作【扩展表模式】，选择3.2.1表，编辑或设定网页元素，必须先选择表。 Dreamewaver CS4允许您一次选择整个表、行或列，或选择连续的单元格。3.2.2表的基本操作、在HTML页面的表中，可以设定表单元格的属性来更改外观、调整网页的表和单元格的大小、添加和删除矩阵、分割单元格等操作。3.2.3表的其他操作、插入的表除了上述基本操作之外，还可以设置排序表、导入和导出表。 3.2.4【扩展表模式】、【扩展表模式】对web文档内的所有表格暂时添加单元格的空白和间隔，增加表格的边

5、框，使编辑变得容易。 在此模式下，您可以选择表格项目，或者精确地定位插入点，以防止错误地选择图像或表格单元格。 使用3.3框架，在网络带宽非常有限的情况下，如何提高网页的下载速度是设计网页时必须考虑的问题。多个网页具有相同的导航区域，但内容不同的情况下，可以考虑使用框架来设计网页的布局。 这样，阅览者看到不同的内容时，不需要每次下载整个页面，只要使导航部分保持原样，仅下载需要更新web页的内容部分即可，可以大幅度提高网页的下载速度这样的页面也称为框架页面，其最典型的应用是现在流行的各种论坛。 帧的概念使用帧布局web文档、3.3.1帧的概念，能够通过帧将帧页或web页分成多个独立的区域，按各区

6、域分别显示不同的web页，能够在每个区域中独立地翻滚。 基于帧页的特征，帧的使用使得页设计的自由度显着变得更加丰富，并且通过为各页部分设置不同的页属性，尤其是页之间的链接，能够自由地改变页的结构。 另外，使用3.3.2帧布局web文档和帧布局web文档的最方便的方法是创建帧布局web文档，还可以将帧应用于通常的htmlweb文档。 编辑3.4帧并创建帧后，可以对帧执行适当的编辑操作。 主要选择框架，并设置框架属性。 请注意，并不是所有浏览器都可以显示框架。 对于无法显示的浏览器，必须在标签上输入提示信息。 框架的基本操作设定框架和设定框架集属性浏览器中不能显示的页面、3.4.1框架的基本操作、编辑框架的操作主要是嵌套框架的制作、框架的选择、框架的属性的设定等。 3.4.2在框架集的“属性”面板中，可以设置框架和框架集的属性，并在创建web页面的过程中在框架的“属性”面板中定义框架名、源文件、页边距等属性如果3.4.3浏览器正在处理无法显示的页面，而浏览器不支持框