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