第03章-使用表格布局页面ppt课件(全).ppt

《第03章-使用表格布局页面ppt课件(全).ppt》由会员分享，可在线阅读，更多相关《第03章-使用表格布局页面ppt课件(全).ppt（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 网页设计与制作基础教程网页设计与制作基础教程网页设计与制作基础教程网页设计与制作基础教程(第第第第3 3版版版版)第第第第 三三三三 章章章章使用表格布局页面使用表格布局页面使用表格布局页面使用表格布局页面:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :学学学学 习习习习 目目目目 标标标标 在网页中插入的文本和图像会随着浏览器窗口的放大与缩在网页中插入的文本和图像会随

2、着浏览器窗口的放大与缩在网页中插入的文本和图像会随着浏览器窗口的放大与缩在网页中插入的文本和图像会随着浏览器窗口的放大与缩小发生变化，这使得网页处于不稳定的显示状态。要解决这种小发生变化，这使得网页处于不稳定的显示状态。要解决这种小发生变化，这使得网页处于不稳定的显示状态。要解决这种小发生变化，这使得网页处于不稳定的显示状态。要解决这种状态，最简单的方法就是使用表格，表格不仅能够控制网页在状态，最简单的方法就是使用表格，表格不仅能够控制网页在状态，最简单的方法就是使用表格，表格不仅能够控制网页在状态，最简单的方法就是使用表格，表格不仅能够控制网页在浏览器窗口中的位置，还可以控制网页元素在网页中

3、的显示位浏览器窗口中的位置，还可以控制网页元素在网页中的显示位浏览器窗口中的位置，还可以控制网页元素在网页中的显示位浏览器窗口中的位置，还可以控制网页元素在网页中的显示位置置置置。:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :本本本本 章章章章 重重重重 点点点点uu 创建基本表格创建基本表格创建基本表格创建基本表格uu 插入表格元素插入表格元素插入表格元素插入表格元素

4、uu 调整表格大小调整表格大小调整表格大小调整表格大小uu 导入与导出表格数据导入与导出表格数据导入与导出表格数据导入与导出表格数据uu 使用表格制作网页使用表格制作网页使用表格制作网页使用表格制作网页:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.1 3.1 3.1 3.1 使用表格使用表格使用表格使用表格 网页能够向访问者提供的信息是多样化的，包括文字、图像、动画

5、和视网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。仅美观而且有条

6、理，是网页设计者在着手设计网页之前必须要考虑的问题。仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地表达设计者的思想表达设计者的思想表达设计者的思想表达设计者的思想。uuu 网页中表格的用途网页中表格的用途网页中表格的用途网页中表格的用途网页中表格的用途网页中表格的用途uuu 创建表格创建表格创建表格创建表格创建表格

7、创建表格uuu 插入表格元素插入表格元素插入表格元素插入表格元素插入表格元素插入表格元素uuu 设置表格属性设置表格属性设置表格属性设置表格属性设置表格属性设置表格属性:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.1.1 3.1.1 3.1.1 3.1.1 网页中表格的用途网页中表格的用途网页中表格的用途网页中表格的用途 使用表格排版的页面在不同平台、不同分辨率的浏

8、览器中都能保持其原使用表格排版的页面在不同平台、不同分辨率的浏览器中都能保持其原使用表格排版的页面在不同平台、不同分辨率的浏览器中都能保持其原使用表格排版的页面在不同平台、不同分辨率的浏览器中都能保持其原有的布局，并且在不同的浏览器平台中具有较好的兼容性，所以表格式网页有的布局，并且在不同的浏览器平台中具有较好的兼容性，所以表格式网页有的布局，并且在不同的浏览器平台中具有较好的兼容性，所以表格式网页有的布局，并且在不同的浏览器平台中具有较好的兼容性，所以表格式网页中最常用的排版方式之一中最常用的排版方式之一中最常用的排版方式之一中最常用的排版方式之一。:计算机基础与实训教材系列计算机基础与实训

9、教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.1.2 3.1.2 3.1.2 3.1.2 创建表格创建表格创建表格创建表格 表格是用于在表格是用于在表格是用于在表格是用于在HTMLHTML页面上显示表格式数据以及对文本和图形进行布局页面上显示表格式数据以及对文本和图形进行布局页面上显示表格式数据以及对文本和图形进行布局页面上显示表格式数据以及对文本和图形进行布局的工具。表格由一行或多行组成，每行又由一个或多

10、个单元格组成的工具。表格由一行或多行组成，每行又由一个或多个单元格组成的工具。表格由一行或多行组成，每行又由一个或多个单元格组成的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。uuu 插入表格插入表格插入表格插入表格插入表格插入表格uuu 插入嵌套表格插入嵌套表格插入嵌套表格插入嵌套表格插入嵌套表格插入嵌套表格:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3

11、.1.3 3.1.3 3.1.3 3.1.3 插入表格元素插入表格元素插入表格元素插入表格元素 为了使网页中的元素能够有序的在浏览器中显示，用户在插入文本和图为了使网页中的元素能够有序的在浏览器中显示，用户在插入文本和图为了使网页中的元素能够有序的在浏览器中显示，用户在插入文本和图为了使网页中的元素能够有序的在浏览器中显示，用户在插入文本和图像之前，最好先插入一个表格。在表格中插入文本与图像的方法与直接在网像之前，最好先插入一个表格。在表格中插入文本与图像的方法与直接在网像之前，最好先插入一个表格。在表格中插入文本与图像的方法与直接在网像之前，最好先插入一个表格。在表格中插入文本与图像的方法与

12、直接在网页中插入基本相同，只是在插入之前，需要先将鼠标光标放置在表格中页中插入基本相同，只是在插入之前，需要先将鼠标光标放置在表格中页中插入基本相同，只是在插入之前，需要先将鼠标光标放置在表格中页中插入基本相同，只是在插入之前，需要先将鼠标光标放置在表格中。uuu 在表格中输入文本在表格中输入文本在表格中输入文本在表格中输入文本在表格中输入文本在表格中输入文本uuu 在表格中插入图像在表格中插入图像在表格中插入图像在表格中插入图像在表格中插入图像在表格中插入图像:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与

13、实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.1.4 3.1.4 3.1.4 3.1.4 设置表格属性设置表格属性设置表格属性设置表格属性 表格由单元格组成，即使是一个最简单的表格，也由一个单元格。而表表格由单元格组成，即使是一个最简单的表格，也由一个单元格。而表表格由单元格组成，即使是一个最简单的表格，也由一个单元格。而表表格由单元格组成，即使是一个最简单的表格，也由一个单元格。而表格与单元格的属性完全不同，选择不同的对象（表格或单元格），格与单元格的属性完全不同，选择不同的对象（表格或单元格）

14、，格与单元格的属性完全不同，选择不同的对象（表格或单元格），格与单元格的属性完全不同，选择不同的对象（表格或单元格），“属性属性属性属性”检查器将会显示相应的选项参数检查器将会显示相应的选项参数检查器将会显示相应的选项参数检查器将会显示相应的选项参数。uuu 表格属性表格属性表格属性表格属性表格属性表格属性uuu 单元格属性单元格属性单元格属性单元格属性单元格属性单元格属性:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网

15、站系列丛书官方网站 edu :edu :edu :3.2 3.2 3.2 3.2 编辑表格编辑表格编辑表格编辑表格 当用户创建的表格不符合网页设计的要求时，可以通过拆分与合并表格当用户创建的表格不符合网页设计的要求时，可以通过拆分与合并表格当用户创建的表格不符合网页设计的要求时，可以通过拆分与合并表格当用户创建的表格不符合网页设计的要求时，可以通过拆分与合并表格中的单元格，或者增加与删除表格行或列来达到所需的目的。除此之外，在中的单元格，或者增加与删除表格行或列来达到所需的目的。除此之外，在中的单元格，或者增加与删除表格行或列来达到所需的目的。除此之外，在中的单元格，或者增加与删除表格行或列来

16、达到所需的目的。除此之外，在表格中还可以执行复制、剪切、粘贴等操作，并保存原有单元格的格式表格中还可以执行复制、剪切、粘贴等操作，并保存原有单元格的格式表格中还可以执行复制、剪切、粘贴等操作，并保存原有单元格的格式表格中还可以执行复制、剪切、粘贴等操作，并保存原有单元格的格式。uuu 选择表格元素选择表格元素选择表格元素选择表格元素选择表格元素选择表格元素uuu 调整表格大小调整表格大小调整表格大小调整表格大小调整表格大小调整表格大小uuu 更改列宽和行高更改列宽和行高更改列宽和行高更改列宽和行高更改列宽和行高更改列宽和行高uuu 添加或删除行或列添加或删除行或列添加或删除行或列添加或删除行或

17、列添加或删除行或列添加或删除行或列uuu 拆分与合并单元格拆分与合并单元格拆分与合并单元格拆分与合并单元格拆分与合并单元格拆分与合并单元格uuu 复制与粘贴单元格复制与粘贴单元格复制与粘贴单元格复制与粘贴单元格复制与粘贴单元格复制与粘贴单元格uuu 设置表格内容排序设置表格内容排序设置表格内容排序设置表格内容排序设置表格内容排序设置表格内容排序uuu 导入与导出表格式数据导入与导出表格式数据导入与导出表格式数据导入与导出表格式数据导入与导出表格式数据导入与导出表格式数据:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算

18、机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.2.1 3.2.1 3.2.1 3.2.1 选择表格元素选择表格元素选择表格元素选择表格元素 将鼠标光标放置在网页中的表格内，将鼠标光标放置在网页中的表格内，将鼠标光标放置在网页中的表格内，将鼠标光标放置在网页中的表格内，“属性属性属性属性”检查器将显示单元格的属检查器将显示单元格的属检查器将显示单元格的属检查器将显示单元格的属性，而不是表格的属性。这说明选中的单元格，而非表格。在网页中创建一性，而不是表格的属性。这说明选中的单元格，而非表格。

19、在网页中创建一性，而不是表格的属性。这说明选中的单元格，而非表格。在网页中创建一性，而不是表格的属性。这说明选中的单元格，而非表格。在网页中创建一个表格，既包括表格自身，还包含单元格、行与列等元素，而这些元素的选个表格，既包括表格自身，还包含单元格、行与列等元素，而这些元素的选个表格，既包括表格自身，还包含单元格、行与列等元素，而这些元素的选个表格，既包括表格自身，还包含单元格、行与列等元素，而这些元素的选择方法各不相同择方法各不相同择方法各不相同择方法各不相同。uuu 选择整个表格选择整个表格选择整个表格选择整个表格选择整个表格选择整个表格uuu 选中选中选中选中选中选中行和列行和列行和列行

20、和列行和列行和列uuu 选中单元格选中单元格选中单元格选中单元格选中单元格选中单元格uuu 选中单元格选中单元格选中单元格选中单元格选中单元格选中单元格区域区域区域区域区域区域uuu 选中不相邻的单元格选中不相邻的单元格选中不相邻的单元格选中不相邻的单元格选中不相邻的单元格选中不相邻的单元格:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.2.2 3.2.2 3.2.2

21、 3.2.2 调整表格大小调整表格大小调整表格大小调整表格大小 当用户选中网页中的表格后，在表格右下角区域将显示当用户选中网页中的表格后，在表格右下角区域将显示当用户选中网页中的表格后，在表格右下角区域将显示当用户选中网页中的表格后，在表格右下角区域将显示33个控制点，通个控制点，通个控制点，通个控制点，通过拖动这过拖动这过拖动这过拖动这33个控制点可以将表格横向、纵向或者整体放大个控制点可以将表格横向、纵向或者整体放大个控制点可以将表格横向、纵向或者整体放大个控制点可以将表格横向、纵向或者整体放大。:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材

22、系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.2.3 3.2.3 3.2.3 3.2.3 更改列宽和行高更改列宽和行高更改列宽和行高更改列宽和行高 要更改单元格的列宽和行高，可以在要更改单元格的列宽和行高，可以在要更改单元格的列宽和行高，可以在要更改单元格的列宽和行高，可以在“属性属性属性属性”面板中调整数值，或拖动面板中调整数值，或拖动面板中调整数值，或拖动面板中调整数值，或拖动列或行的边框来更改表格的列宽或行高；也可以在列或行的边框来更改表格的列宽或行高

23、；也可以在列或行的边框来更改表格的列宽或行高；也可以在列或行的边框来更改表格的列宽或行高；也可以在“代码代码代码代码”视图中修改视图中修改视图中修改视图中修改HTMLHTML代码来更改单元格的宽度和高度代码来更改单元格的宽度和高度代码来更改单元格的宽度和高度代码来更改单元格的宽度和高度。:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.2.4 3.2.4 3.2.4 3

24、.2.4 添加或删除行或列添加或删除行或列添加或删除行或列添加或删除行或列 表格中空白的单元格也会占据页面位置，所以多余的行或列可以删除；表格中空白的单元格也会占据页面位置，所以多余的行或列可以删除；表格中空白的单元格也会占据页面位置，所以多余的行或列可以删除；表格中空白的单元格也会占据页面位置，所以多余的行或列可以删除；此外，也可以在特定行或列上方或左侧添加行或列此外，也可以在特定行或列上方或左侧添加行或列此外，也可以在特定行或列上方或左侧添加行或列此外，也可以在特定行或列上方或左侧添加行或列。:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列

25、计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.2.5 3.2.5 3.2.5 3.2.5 拆分与合并单元格拆分与合并单元格拆分与合并单元格拆分与合并单元格 在制作页面时，如果插入的表格与实际效果不相符，例如有缺少或多余在制作页面时，如果插入的表格与实际效果不相符，例如有缺少或多余在制作页面时，如果插入的表格与实际效果不相符，例如有缺少或多余在制作页面时，如果插入的表格与实际效果不相符，例如有缺少或多余单元格的情况，可根据需要，进行拆分和合并单元格操作单元格的情况

26、，可根据需要，进行拆分和合并单元格操作单元格的情况，可根据需要，进行拆分和合并单元格操作单元格的情况，可根据需要，进行拆分和合并单元格操作。:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.2.6 3.2.6 3.2.6 3.2.6 复制与粘贴单元格复制与粘贴单元格复制与粘贴单元格复制与粘贴单元格 用户在用户在用户在用户在Dreamweaver CCDreamweave

27、r CC中插入表格并选中表格中一个单元格后，选择中插入表格并选中表格中一个单元格后，选择中插入表格并选中表格中一个单元格后，选择中插入表格并选中表格中一个单元格后，选择“编辑编辑编辑编辑”命令，在弹出的的菜单中可以对表格执行命令，在弹出的的菜单中可以对表格执行命令，在弹出的的菜单中可以对表格执行命令，在弹出的的菜单中可以对表格执行“剪切剪切剪切剪切”、“拷贝拷贝拷贝拷贝”、“粘贴粘贴粘贴粘贴”等操作等操作等操作等操作。:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站

28、系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.2.7 3.2.7 3.2.7 3.2.7 设置表格内容排序设置表格内容排序设置表格内容排序设置表格内容排序 对于网页中插入的表格，用户可以根据单个列的内容对表格中的行进行对于网页中插入的表格，用户可以根据单个列的内容对表格中的行进行对于网页中插入的表格，用户可以根据单个列的内容对表格中的行进行对于网页中插入的表格，用户可以根据单个列的内容对表格中的行进行排序或者根据两个列的内容执行更加复杂的表格排序排序或者根据两个列的内容执行更加复杂的表格排序排序或者根据两个列的内容执行更加复杂的表格排序排序

29、或者根据两个列的内容执行更加复杂的表格排序。:计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列计算机基础与实训教材系列系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站系列丛书官方网站 edu :edu :edu :3.2.8 3.2.8 3.2.8 3.2.8 导入与导出表格式数据导入与导出表格式数据导入与导出表格式数据导入与导出表格式数据 使用使用使用使用Dreamweaver CCDreamweaver CC，用户不仅可以将另一个应用程序，例如，用户不仅可以将另一个应用程序，例如，用户不

30、仅可以将另一个应用程序，例如，用户不仅可以将另一个应用程序，例如ExcelExcel中中中中创建并以分隔文本格式创建并以分隔文本格式创建并以分隔文本格式创建并以分隔文本格式(其中的项以制表符、逗号、冒号、分号或其他分隔其中的项以制表符、逗号、冒号、分号或其他分隔其中的项以制表符、逗号、冒号、分号或其他分隔其中的项以制表符、逗号、冒号、分号或其他分隔符隔开符隔开符隔开符隔开)保存的表格式数据导入到网页文档中并设置为表格的格式，而且还保存的表格式数据导入到网页文档中并设置为表格的格式，而且还保存的表格式数据导入到网页文档中并设置为表格的格式，而且还保存的表格式数据导入到网页文档中并设置为表格的格式，而且还可以将可以将可以将可以将Dreamweaver CCDreamweaver CC中的表格导出中的表格导出中的表格导出中的表格导出。uuu 导入表格式数据导入表格式数据导入表格式数据导入表格式数据导入表格式数据导入表格式数据uuu 导出表格式数据导出表格式数据导出表格式数据导出表格式数据导出表格式数据导出表格式数据