《中文版Dreamweaver_CS3网页制作实用教程》课件第3章.ppt

教学重点与难点 中文版Dreamweaver CS3实用教程 第3章 使用表格规划网页布局 网页的布局设计时，表格是常用的工具之一，表格在网页中不仅可以排列数据，还可以对页面中的图像、文本、动画等元素进行准确的定位，是页面显得整齐有序、分类明确，便于访问者浏览。使用表格布局网页，在不同平台和不同分辨率的浏览器中都能保持原有的布局。本章主要介绍使用表格规划网页布局。 创建图层 认识表格 制作表格 编辑表格 使用表格规划网页布局 3.1 认识表格 网页要向浏览者提供的信息是多样化的，包括文字、图像、Flash动画等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得有条理和美观，是设计人员在着手设计网页之前必须考虑的事情。表格的作用就在于帮助设计者高效、准确地定位各种网页数据，直观、鲜明地表达设计者的思想。 网页中的表格 表格的视图模式 3.1.1 网页中的表格 在网页文档中，表格被用于整理复杂的数据内容，安排网页文档的整体布局。利用表格来设计网页的布局，可以不受网页形态的限制，并在不同分辨率下维持原有的页面布局。典型的利用表格设计的网页 。 3.1.2 表格的视图模式 Dreamweaver CS3提供了3种表格视图模式，可以根据实际需要选择不同的视图模式。选择“查看”|“表格模式”命令，在弹出的菜单中可以选择“标准模式”、“扩展表格模式”和“布局模式”，如图所示。 3.2 使用表格 Dreamweaver CS3中，表格可以用于制作简单的图表，使用表格来显示数据，可以更加方便地进行查看、修改以及分析等目的。 插入表格 插入表格内容 3.2.1 插入表格 表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像等元素更有条理。 要在网页中创建表格，选择“插入记录”|“表格”命令，或者单击“常用”插入栏上的“表格”按钮，打开“表格”对话框，如图所示。 3.2.2 插入表格内容 在文档中插入表格后，就可以在表格中输入表格内容。将光标移至表格单元格中，然后插入表格内容即可，可以添加文本或插入图像等网页元素。 如果要定位和移动光标插入点，可以单击鼠标，也可以使用键盘上的方向键移动，按下Tab键，可以在单元格之间进行切换。 3.3 编辑表格 创建表格后，可以对表格进行编辑，包括合并和拆分单元格、添加和删除单元格、设置单元格和表格属性等，并且可以导入和到处表格。 选择表格 编辑表格和单元格 表格的其他操作 3.3.1 选择表格 要对网页元素进行编辑或设置，首先需要选择表格。在Dreamewaver CS3中，可以一次选择整个表、行或列，也可以选择连续的单元格。 3.3.2 编辑表格和单元格 在HTML页中的表格，可以设置表格单元格的属性来改变外观，也可以对网页中的表格及单元格进行调整大小、添加及删除行列、合并拆分单元格等操作。 3.3.3 表格的其他操作 在Dreamweaver CS3中，还可以对表格进行排序、数据的倒入和到处等操作。 3.4 使用表格规划网页布局 在网页设计中，页面布局是一个非常重要的部分。有了好的布局，整个网页才可能美观、大方、实用。Dreamweaver CS3提供了多种方法来创建和控制网页布局，使用表格的“布局模式”就是最常用、最实用的方式之一。 表格的“布局模式”来源于表格，但是在布局模式中简化了使用表格进行网页布局的过程，避免了使用传统的方法创建基于表格的页面布局时经常出现的一些问题，如定位不准、不易调整等。 使用布局单元格和表格 设置布局表格和单元格格式 3.4.1 使用布局单元格和表格 表格除了可以罗列数据，还可以进行页面定位。但是，创建表格最初是为了显示表格数据，而不是用于对Web页布局，因此使用表格进行页面定位或是设计布局并不是非常方便。除此以外，使用表格还存在一些其他问题。为了解决这一问题、简化使用表格进行页面布局的过程，Dreamweaver CS3在表格中提供了“布局模式”。 在“布局模式”中，可以在页面上方便地绘制布局单元格，灵活地将这些单元格移动到所需的位置，还可以创建固定宽度的布局和自动伸展为整个浏览器窗口宽度的布局，从而减少了繁琐的参数设置与定义，可以更高效、快速地制作结构复杂的版面。 3.4.2 设置布局表格和单元格格式 在Dreamweaver CS3中，可以使