《Dreamweaver-8精品教程》第7章.ppt

《《Dreamweaver-8精品教程》第7章.ppt》由会员分享，可在线阅读，更多相关《《Dreamweaver-8精品教程》第7章.ppt（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第7章章 网页布局网页布局|使用表格布局网页使用表格布局网页使用表格布局网页使用表格布局网页|上机实践上机实践上机实践上机实践用表格布局主页用表格布局主页用表格布局主页用表格布局主页|使用框架布局网页使用框架布局网页使用框架布局网页使用框架布局网页|上机实践上机实践上机实践上机实践用框架布局页面用框架布局页面用框架布局页面用框架布局页面7.1 使用表格布局网页使用表格布局网页表格是由一个或多个单元格构成的集合，表格中横向表格是由一个或多个单元格构成的集合，表格中横向表格是由一个或多个单元格构成的集合，表格中横向表格是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格

2、称为列。的多个单元格称为行，垂直的多个单元格称为列。的多个单元格称为行，垂直的多个单元格称为列。的多个单元格称为行，垂直的多个单元格称为列。行行列列7.1.1 创建表格创建表格确定插入点后，在确定插入点后，在确定插入点后，在确定插入点后，在“插入插入插入插入”栏的栏的栏的栏的“常用常用常用常用”类别中单击类别中单击类别中单击类别中单击“表格表格表格表格”图标图标图标图标 ，打开，打开，打开，打开“表格表格表格表格”对话框，可以在对话框，可以在对话框，可以在对话框，可以在“表格表格表格表格”对话框中设置表格的行数、列数、宽度、边框、边对话框中设置表格的行数、列数、宽度、边框、边对话框中设置表格的

3、行数、列数、宽度、边框、边对话框中设置表格的行数、列数、宽度、边框、边数以及间距。数以及间距。数以及间距。数以及间距。7.1.2 改变表格和单元格的宽度与高度改变表格和单元格的宽度与高度使用属性面板可以非常方便地改变表格和单元格的宽使用属性面板可以非常方便地改变表格和单元格的宽使用属性面板可以非常方便地改变表格和单元格的宽使用属性面板可以非常方便地改变表格和单元格的宽度与高度，也可取消宽度与高度的设置。度与高度，也可取消宽度与高度的设置。度与高度，也可取消宽度与高度的设置。度与高度，也可取消宽度与高度的设置。通过拖动表格的边框也可轻易改变表格的宽度与高度。通过拖动表格的边框也可轻易改变表格的宽

4、度与高度。通过拖动表格的边框也可轻易改变表格的宽度与高度。通过拖动表格的边框也可轻易改变表格的宽度与高度。7.1.3 拆分和合并单元格拆分和合并单元格1 1拆分单元格拆分单元格拆分单元格拆分单元格所谓拆分单元格，就是将一个单元格拆分为几行或几所谓拆分单元格，就是将一个单元格拆分为几行或几所谓拆分单元格，就是将一个单元格拆分为几行或几所谓拆分单元格，就是将一个单元格拆分为几行或几列。列。列。列。2合并单元格合并单元格所谓合并单元格，就是将相邻的几个单元格合并成一所谓合并单元格，就是将相邻的几个单元格合并成一所谓合并单元格，就是将相邻的几个单元格合并成一所谓合并单元格，就是将相邻的几个单元格合并成

5、一个单元格。个单元格。个单元格。个单元格。7.1.4 插入、删除行和列插入、删除行和列如果希望在某个单元格上方插入行，或者在其左侧插如果希望在某个单元格上方插入行，或者在其左侧插如果希望在某个单元格上方插入行，或者在其左侧插如果希望在某个单元格上方插入行，或者在其左侧插入列，可首先右击该单元格，然后从弹出的快捷菜单入列，可首先右击该单元格，然后从弹出的快捷菜单入列，可首先右击该单元格，然后从弹出的快捷菜单入列，可首先右击该单元格，然后从弹出的快捷菜单中选择中选择中选择中选择“插入行插入行插入行插入行”或或或或“插入列插入列插入列插入列”。如果希望删除行或列，可在弹出的快捷菜单中选择如果希望删除

6、行或列，可在弹出的快捷菜单中选择如果希望删除行或列，可在弹出的快捷菜单中选择如果希望删除行或列，可在弹出的快捷菜单中选择“删除行删除行删除行删除行”或或或或“删除列删除列删除列删除列”。7.1.5 为表格和单元格设置背景颜色或背景图像为表格和单元格设置背景颜色或背景图像可为整个表格设置背景颜色，也可为单个或多个单元可为整个表格设置背景颜色，也可为单个或多个单元可为整个表格设置背景颜色，也可为单个或多个单元可为整个表格设置背景颜色，也可为单个或多个单元格设置背景颜色，其设置方法完全相同。格设置背景颜色，其设置方法完全相同。格设置背景颜色，其设置方法完全相同。格设置背景颜色，其设置方法完全相同。还

7、可为表格或单元还可为表格或单元还可为表格或单元还可为表格或单元格设置背景图像。格设置背景图像。格设置背景图像。格设置背景图像。7.1.6 为表格和单元格设置边框颜色为表格和单元格设置边框颜色通过设置表格边框粗细、单元格间距、背景颜色，以通过设置表格边框粗细、单元格间距、背景颜色，以通过设置表格边框粗细、单元格间距、背景颜色，以通过设置表格边框粗细、单元格间距、背景颜色，以及单元格背景颜色可以制作不同边框的表格。及单元格背景颜色可以制作不同边框的表格。及单元格背景颜色可以制作不同边框的表格。及单元格背景颜色可以制作不同边框的表格。细线表细线表细线表细线表格格格格粗线表粗线表粗线表粗线表格格格格双

8、线表双线表双线表双线表格格格格表格的高级操作主要包括对表格的整行内容进行移动、表格的高级操作主要包括对表格的整行内容进行移动、表格的高级操作主要包括对表格的整行内容进行移动、表格的高级操作主要包括对表格的整行内容进行移动、排序表格内容和导入排序表格内容和导入排序表格内容和导入排序表格内容和导入/导出表格数据等。导出表格数据等。导出表格数据等。导出表格数据等。7.1.7 表格的高级操作表格的高级操作1.1.移动表格整行内容移动表格整行内容移动表格整行内容移动表格整行内容选中行选中行选中行选中行并剪切并剪切并剪切并剪切将光标置于要移将光标置于要移将光标置于要移将光标置于要移动位置的下一行动位置的下

9、一行动位置的下一行动位置的下一行任意单元格中任意单元格中任意单元格中任意单元格中粘贴粘贴粘贴粘贴表格作为一种常见的数据处理形式，免不了要对其中表格作为一种常见的数据处理形式，免不了要对其中表格作为一种常见的数据处理形式，免不了要对其中表格作为一种常见的数据处理形式，免不了要对其中的数据进行排序。的数据进行排序。的数据进行排序。的数据进行排序。2排序表格内容排序表格内容选中选中选中选中表格表格表格表格选择选择选择选择“命令命令命令命令”“排排排排序表格序表格序表格序表格”菜单，打开菜单，打开菜单，打开菜单，打开“排序表格排序表格排序表格排序表格”对话框。对话框。对话框。对话框。排序后排序后排序后

10、排序后的表格的表格的表格的表格在在在在DreamweaverDreamweaver中，可以将表格的内容导入或导出中，可以将表格的内容导入或导出中，可以将表格的内容导入或导出中，可以将表格的内容导入或导出,在页面中添加表格时，如果预先有表格数据存储在记在页面中添加表格时，如果预先有表格数据存储在记在页面中添加表格时，如果预先有表格数据存储在记在页面中添加表格时，如果预先有表格数据存储在记事本或事本或事本或事本或WordWord等文档中，可以直接将数据导入。等文档中，可以直接将数据导入。等文档中，可以直接将数据导入。等文档中，可以直接将数据导入。3导入或导出表格内容导入或导出表格内容导入的表导入的

11、表导入的表导入的表格数据格数据格数据格数据源数据源数据源数据源数据选择选择选择选择“文件文件文件文件”“导入导入导入导入”“表格式数据表格式数据表格式数据表格式数据”菜单，菜单，菜单，菜单，打开打开打开打开“导入表格式数据导入表格式数据导入表格式数据导入表格式数据”对话框对话框对话框对话框7.1.8 制作嵌套表格制作嵌套表格所谓嵌套表格，就是在一个大表格的某个单元格里插所谓嵌套表格，就是在一个大表格的某个单元格里插所谓嵌套表格，就是在一个大表格的某个单元格里插所谓嵌套表格，就是在一个大表格的某个单元格里插入一个新表格的情况。入一个新表格的情况。入一个新表格的情况。入一个新表格的情况。下面通过制

12、作一个简单的页面局部布局，详细分析如下面通过制作一个简单的页面局部布局，详细分析如下面通过制作一个简单的页面局部布局，详细分析如下面通过制作一个简单的页面局部布局，详细分析如何合理使用嵌套表格（具体操作见视频何合理使用嵌套表格（具体操作见视频何合理使用嵌套表格（具体操作见视频何合理使用嵌套表格（具体操作见视频7-17-1）。7.1.9 制作精美的圆角表格制作精美的圆角表格在做网页时为了美化页面，常常要把表格制作成圆角在做网页时为了美化页面，常常要把表格制作成圆角在做网页时为了美化页面，常常要把表格制作成圆角在做网页时为了美化页面，常常要把表格制作成圆角表格，这样可以使整个页面看起来更加柔和、美

13、观。表格，这样可以使整个页面看起来更加柔和、美观。表格，这样可以使整个页面看起来更加柔和、美观。表格，这样可以使整个页面看起来更加柔和、美观。7.2 上机实践上机实践用表格布局主页用表格布局主页接下来我们以下面的实例来讲解利用表格布局网页的接下来我们以下面的实例来讲解利用表格布局网页的接下来我们以下面的实例来讲解利用表格布局网页的接下来我们以下面的实例来讲解利用表格布局网页的方法（具体操作见视频）。方法（具体操作见视频）。方法（具体操作见视频）。方法（具体操作见视频）。7.3 使用框架布局网页使用框架布局网页框架可以将一个浏览器窗口划分为多个区域，且每个区域都框架可以将一个浏览器窗口划分为多个

14、区域，且每个区域都框架可以将一个浏览器窗口划分为多个区域，且每个区域都框架可以将一个浏览器窗口划分为多个区域，且每个区域都可以显示不同的可以显示不同的可以显示不同的可以显示不同的HTMLHTML文档。使用框架的最常见情况就是，一文档。使用框架的最常见情况就是，一文档。使用框架的最常见情况就是，一文档。使用框架的最常见情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内个框架显示包含导航控件的文档，而另一个框架显示含有内个框架显示包含导航控件的文档，而另一个框架显示含有内个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。一般大型的论坛会用到框架页。容的文档。一般大型的论坛

15、会用到框架页。容的文档。一般大型的论坛会用到框架页。容的文档。一般大型的论坛会用到框架页。7.3.1 关于框架和框架集关于框架和框架集框架是浏览器窗口中的一个区域，它可以显示与浏览框架是浏览器窗口中的一个区域，它可以显示与浏览框架是浏览器窗口中的一个区域，它可以显示与浏览框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的器窗口的其余部分中所显示内容无关的器窗口的其余部分中所显示内容无关的器窗口的其余部分中所显示内容无关的HTMLHTML文档。文档。文档。文档。框架集是框架集是框架集是框架集是HTMLHTML文件，它定义一组框架的布局和属性。文件，它定义一组框架的布

16、局和属性。文件，它定义一组框架的布局和属性。文件，它定义一组框架的布局和属性。包括框架的数目、大小和位置，以及在每个框架中初包括框架的数目、大小和位置，以及在每个框架中初包括框架的数目、大小和位置，以及在每个框架中初包括框架的数目、大小和位置，以及在每个框架中初始显示的页面始显示的页面始显示的页面始显示的页面URLURL。7.3.2 创建框架集创建框架集DreamweaverDreamweaver中有预定义的框架集，可以直接创建，中有预定义的框架集，可以直接创建，中有预定义的框架集，可以直接创建，中有预定义的框架集，可以直接创建，也可以在普通页面中加载。也可以在普通页面中加载。也可以在普通页面

17、中加载。也可以在普通页面中加载。1 1直接创建预定义框架集直接创建预定义框架集直接创建预定义框架集直接创建预定义框架集“新建文档新建文档新建文档新建文档”对话框对话框对话框对话框选择框架集类型选择框架集类型选择框架集类型选择框架集类型创建的创建的创建的创建的框架集框架集框架集框架集2加载预定义框架集加载预定义框架集在页面中加载框架集就像插入表格一样。在页面中加载框架集就像插入表格一样。在页面中加载框架集就像插入表格一样。在页面中加载框架集就像插入表格一样。如果预定义框架集不能满足需要，还可以在它的基础如果预定义框架集不能满足需要，还可以在它的基础如果预定义框架集不能满足需要，还可以在它的基础如

18、果预定义框架集不能满足需要，还可以在它的基础上进行分割上进行分割上进行分割上进行分割.选择预定选择预定选择预定选择预定义框架集义框架集义框架集义框架集加载的加载的加载的加载的框架集框架集框架集框架集7.3.3 框架和框架集的基本操作框架和框架集的基本操作对框架及框架集的基本操作包括选择、删除等操作。对框架及框架集的基本操作包括选择、删除等操作。对框架及框架集的基本操作包括选择、删除等操作。对框架及框架集的基本操作包括选择、删除等操作。1 1认识认识认识认识“框架框架框架框架”面板面板面板面板利用利用利用利用“框架框架框架框架”面板可以对框架和框架集进行操作，选择面板可以对框架和框架集进行操作，

19、选择面板可以对框架和框架集进行操作，选择面板可以对框架和框架集进行操作，选择“窗口窗口窗口窗口”“框架框架框架框架”菜单，可以打开菜单，可以打开菜单，可以打开菜单，可以打开“框架框架框架框架”面板。面板。面板。面板。2选择框架和框架集选择框架和框架集在文档窗口中选择框架的方法为，按住在文档窗口中选择框架的方法为，按住在文档窗口中选择框架的方法为，按住在文档窗口中选择框架的方法为，按住【AltAlt】键，然后在键，然后在键，然后在键，然后在要选择的框架内单击即可，被选中的框架边线为虚线。要选择的框架内单击即可，被选中的框架边线为虚线。要选择的框架内单击即可，被选中的框架边线为虚线。要选择的框架内

20、单击即可，被选中的框架边线为虚线。被选中被选中被选中被选中的框架的框架的框架的框架如要选择框架集，则单击该框架集上的任意框架即可，选如要选择框架集，则单击该框架集上的任意框架即可，选如要选择框架集，则单击该框架集上的任意框架即可，选如要选择框架集，则单击该框架集上的任意框架即可，选中的框架集所有边框都呈虚线显示。中的框架集所有边框都呈虚线显示。中的框架集所有边框都呈虚线显示。中的框架集所有边框都呈虚线显示。利用利用利用利用“框架框架框架框架”面板选择框架时，直接在面板中单击即可。面板选择框架时，直接在面板中单击即可。面板选择框架时，直接在面板中单击即可。面板选择框架时，直接在面板中单击即可。选

21、择框架集时，在面板中单击框架集的边框即可。选择框架集时，在面板中单击框架集的边框即可。选择框架集时，在面板中单击框架集的边框即可。选择框架集时，在面板中单击框架集的边框即可。7.3.4 框架及框架集的属性设置框架及框架集的属性设置利用利用利用利用“属性属性属性属性”面板可以设置框架和框架集的属性，包面板可以设置框架和框架集的属性，包面板可以设置框架和框架集的属性，包面板可以设置框架和框架集的属性，包括框架名称、框架源文件、框架边框等。括框架名称、框架源文件、框架边框等。括框架名称、框架源文件、框架边框等。括框架名称、框架源文件、框架边框等。1 1设置框架属性设置框架属性设置框架属性设置框架属性

22、命名选取命名选取命名选取命名选取的框架的框架的框架的框架 框架源文框架源文框架源文框架源文件的保存件的保存件的保存件的保存地址地址地址地址选择是否选择是否选择是否选择是否显示框架显示框架显示框架显示框架的边框的边框的边框的边框 设置框架设置框架设置框架设置框架滚动条的滚动条的滚动条的滚动条的属性属性属性属性设置是设置是设置是设置是否能改否能改否能改否能改变框架变框架变框架变框架大小大小大小大小设置设置设置设置框架框架框架框架边框边框边框边框的颜的颜的颜的颜色色色色设置框架内容设置框架内容设置框架内容设置框架内容距上下左右边距上下左右边距上下左右边距上下左右边框的距离框的距离框的距离框的距离2设

23、置框架集属性设置框架集属性该面板中各参数的含义同选中框架时的属性面板基本该面板中各参数的含义同选中框架时的属性面板基本该面板中各参数的含义同选中框架时的属性面板基本该面板中各参数的含义同选中框架时的属性面板基本相同，不同的是在相同，不同的是在相同，不同的是在相同，不同的是在“行行行行”或或或或“列列列列”文本框中可设置框文本框中可设置框文本框中可设置框文本框中可设置框架的行或列的宽度，在架的行或列的宽度，在架的行或列的宽度，在架的行或列的宽度，在“单位单位单位单位”下拉列表框中可选择下拉列表框中可选择下拉列表框中可选择下拉列表框中可选择宽度的单位。宽度的单位。宽度的单位。宽度的单位。7.3.5

24、 保存框架及框架集保存框架及框架集框架及框架集的保存与一般网页文档的保存不同。框架及框架集的保存与一般网页文档的保存不同。框架及框架集的保存与一般网页文档的保存不同。框架及框架集的保存与一般网页文档的保存不同。1 1保存框架保存框架保存框架保存框架将鼠标光标定位到要保存的框架中，选择将鼠标光标定位到要保存的框架中，选择将鼠标光标定位到要保存的框架中，选择将鼠标光标定位到要保存的框架中，选择“文件文件文件文件”“保存框架保存框架保存框架保存框架”菜单，然后在弹出的对话框中指定保存路菜单，然后在弹出的对话框中指定保存路菜单，然后在弹出的对话框中指定保存路菜单，然后在弹出的对话框中指定保存路径和文件

25、名后，单击径和文件名后，单击径和文件名后，单击径和文件名后，单击“保存保存保存保存”按钮即可。按钮即可。按钮即可。按钮即可。2保存框架集保存框架集保存框架集的方法与保存框架相似，选中所需保存的保存框架集的方法与保存框架相似，选中所需保存的保存框架集的方法与保存框架相似，选中所需保存的保存框架集的方法与保存框架相似，选中所需保存的框架集，选择框架集，选择框架集，选择框架集，选择“文件文件文件文件”“保存框架页保存框架页保存框架页保存框架页”菜单，然后菜单，然后菜单，然后菜单，然后执行与保存框架相同的操作即可。执行与保存框架相同的操作即可。执行与保存框架相同的操作即可。执行与保存框架相同的操作即可

26、。3保存框架集中的所有文档保存框架集中的所有文档选择选择选择选择“文件文件文件文件”“保存全部保存全部保存全部保存全部”菜单，即可保存框架集菜单，即可保存框架集菜单，即可保存框架集菜单，即可保存框架集中的所有文档。此时会依次弹出多个中的所有文档。此时会依次弹出多个中的所有文档。此时会依次弹出多个中的所有文档。此时会依次弹出多个“另存为另存为另存为另存为”对话对话对话对话框，逐个保存框架集中的所有框架。框，逐个保存框架集中的所有框架。框，逐个保存框架集中的所有框架。框，逐个保存框架集中的所有框架。7.4 上机实践上机实践用框架布局页面用框架布局页面本节以制作本节以制作本节以制作本节以制作“娱乐空间娱乐空间娱乐空间娱乐空间”为为为为例来练习一下用框架布例来练习一下用框架布例来练习一下用框架布例来练习一下用框架布局页面局页面局页面局页面的方法的方法的方法的方法。