第6章表格在网页中的应用-中文版Dreamweaver-CS6网页制作课件.pptx

1、 清华大学出版社清华大学出版社 第6章表格在网页中的应用中文版Dreamweaver CS6从入门到精通中文版Dreamweaver CS6网页制作从入门到精通本章导读从入门到精通清华大学出版社2表格的创建12对表格进行编辑3表格属性设置4表格的高级操作中文版Dreamweaver CS6从入门到精通6.1 表格的创建在在表格中添加内容表格中添加内容创建创建表格表格嵌套嵌套表格表格6.1.16.1.26.1.3中文版Dreamweaver CS6网页制作从入门到精通表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像等元素更有条理。Dreamweaver CS6的表格功能强大，用户可以

2、方便创建出各种规格的表格。6.1.1 创建表格从入门到精通清华大学出版社4 中文版Dreamweaver CS6网页制作从入门到精通6.1.2 嵌套表格从入门到精通清华大学出版社5嵌套表格是指在表格的某个单元格中再插入一个表格。创建嵌套表格与创建表格相似，首先将鼠标光标定位到需创建嵌套表格的单元格中，其他与创建表格步骤一样。中文版Dreamweaver CS6网页制作从入门到精通在表格中可添加包括文本、图像、动画等类型的各种网页元素。添加表格内容的方法很简单，只需将鼠标光标定位到要添加内容的单元格中，然后按照添加网页元素的方法操作即可。6.1.3 在表格中添加内容从入门到精通清华大学出版社6中

3、文版Dreamweaver CS6从入门到精通6.2 对表格进行编辑Contents6.2.1 选择整个表格6.2.2 行或列的选中6.2.3 单元格的选中6.2.4 单元格的合并与拆分6.2.5 行或列的添加与删除中文版Dreamweaver CS6网页制作从入门到精通在对表格进行操作之前需先选中表格。6.2.1 选择整个表格从入门到精通清华大学出版社8 单击表格边框线单击单元格边框线选择“选择表格”命令单击“”标签 中文版Dreamweaver CS6网页制作从入门到精通6.2.2 行或列的选中从入门到精通清华大学出版社9 在Dreamweaver CS6中，除了选中整个表格，有时根据需要

4、要求选中表格一行或一列。中文版Dreamweaver CS6网页制作从入门到精通在表格中可选中单个单元格，也可以选中连续多个单元格，还可以选中不连续的多个单元格。6.2.3 单元格的选中从入门到精通清华大学出版社10 选中连续单元格选中不连续单元格中文版Dreamweaver CS6网页制作从入门到精通6.2.4 单元格的合并与拆分从入门到精通清华大学出版社11 单元格单元格的合并的合并1单元格单元格的拆分的拆分2中文版Dreamweaver CS6网页制作从入门到精通合并单元格是指将连续的多个单元格合并为一个单元格的操作。合并单元格的方法有如下几种：选中要合并的单元格区域，选择【修改】/【表

5、格】/【合并单元格】命令。选中要合并的单元格区域，单击【属性】面板左下角的 按钮。选中要合并的单元格区域并单击鼠标右键，在弹出的快捷菜单选择【表格】/【合并单元格】命令。1单元格的合并从入门到精通清华大学出版社12中文版Dreamweaver CS6网页制作从入门到精通单元格的拆分是将一个单元格拆分为多个单元格的操作。拆分单元格的方法同合并单元格相似，只是在选择拆分命令后，会打开“拆分单元格”对话框，用户需要在其中进行拆分设置。2单元格的拆分从入门到精通清华大学出版社13 中文版Dreamweaver CS6网页制作从入门到精通6.2.5 行或列的添加与删除从入门到精通清华大学出版社14 单行

6、单行或单列的添加或单列的添加1多多行或多列的添加行或多列的添加2行行或列的删除或列的删除3中文版Dreamweaver CS6网页制作从入门到精通将鼠标光标定位到相应的单元格中，选择【修改】/【表格】/【插入行】命令可在当前选择单元格上面添加一行，选择【修改】/【表格】/【插入列】命令，可在当前列左侧插入一列。将鼠标光标定位到相应的单元格中单击鼠标右键，在弹出的快捷菜单选择【表格】/【插入行】命令或【表格】/【插入列】命令，可实现单行或单列的插入。将鼠标光标定位到相应的单元格中，选择【插入】/【表格对象】菜单下的“在上面插入行”、“在下面插入行”、“在左边插入列”和“在右边插入列”命令，可选中

7、插入行或列的位置。1单行或单列的添加从入门到精通清华大学出版社15中文版Dreamweaver CS6网页制作从入门到精通添加多行或多列的操作方法与添加单行或多单基本相同，可以通过“插入行或列”对话框来进行多行或多列的添加。2多行或多列的添加 从入门到精通清华大学出版社16中文版Dreamweaver CS6网页制作从入门到精通3行或列的删除从入门到精通清华大学出版社17 表格中不能删除单独的单元格，但是可以进行整行或整列的删除。中文版Dreamweaver CS6从入门到精通6.3 表格属性设置设置设置表格属性表格属性设置设置单元格属性单元格属性6.3.16.3.2中文版Dreamweave

8、r CS6网页制作从入门到精通6.3.1 设置表格属性从入门到精通清华大学出版社19 选中表格后，可在其“属性”面板中对表格的属性进行设置。中文版Dreamweaver CS6网页制作从入门到精通除了可以设置整个表格的属性外，还可以对表格的单元格、行或列的属性进行设置。6.3.2 设置单元格属性从入门到精通 清华大学出版社20 中文版Dreamweaver CS6从入门到精通6.4 表格的高级操作排序排序表格表格导导入和导出表格内容入和导出表格内容6.4.16.4.2中文版Dreamweaver CS6网页制作从入门到精通6.4.1 排序表格从入门到精通清华大学出版社22 利用Dreamwea

9、ver提供的表格排序功能，可以对表格指定列的内容进行排序。中文版Dreamweaver CS6网页制作从入门到精通6.4.2 导入和导出表格内容从入门到精通清华大学出版社23表格表格数据的导入数据的导入1表格表格数据的导出数据的导出2中文版Dreamweaver CS6网页制作从入门到精通在页面中需添加表格时，如果表格数据预先存储在其他应用程序如记事本、Excel、Word中，可以直接将数据导入。1表格数据的导入从入门到精通清华大学出版社24 中文版Dreamweaver CS6网页制作从入门到精通为了对页面中的数据进行保存，还可以将其中的表格导出为其他格式。在Dreamweaver中表格数据

10、的导出一般有两种形式：一种是“作为XML数据模版”，另一种是“表格”。2表格数据的导出从入门到精通清华大学出版社25中文版Dreamweaver CS6从入门到精通6.5 提高实例制作产品目录页面本章的提高实例中将在页面中插入表格，并对表格进行适当设置和处理，然后在其中的单元格中导入包含产品目录的Excel表格，并进行整体美化处理。中文版Dreamweaver CS6网页制作从入门到精通6.5.1 行业分析从入门到精通清华大学出版社27本例制作的产品目录页面主要是对各种产品做介绍，并达到展示盒宣传的目的，所以部分产品还可做图片展示。但是由于产品种类很多，不可能都进行图片展示，所以可以在适当的位

11、置添加一些产品图片，而具体的产品规格和报价等信息则可以通过表格的方式直观表现出来。为了达到美观的效果，可通过表格初步布局一下页面，然后在主要区域导入已经制作好的产品表格，对于布局表格，为了在页面中不显示表格，可设置其边框粗细为0，而产品表格为了直观，可设置为可见。中文版Dreamweaver CS6网页制作从入门到精通6.5.2 操作思路从入门到精通清华大学出版社28插入布局表格进行合并和调整等操作导入表格数据操作思路1234作整体的设置中文版Dreamweaver CS6从入门到精通6.6 提高练习制作日历网页 创建表格布局设置表格及单元格属性输入文本设置文本属性中文版Dreamweaver

12、 CS6从入门到精通6.7 知识问答问：为什么设置了表格的一些属性后，整个表格就“变形”了，本来已经很整齐的表格又需要重新调整？问：在Word中制作的表格可以直接复制到dreamweaver中吗？中文版Dreamweaver CS6从入门到精通知识关联：网页中表格的使用注意表格应尽量用绝对像素定义其大小，以免浏览器分辨率不同时产生变形。一个网页要尽量避免将所有的内容都嵌套在一个大表格之中，因为浏览器在解释页面元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之中，那么当浏览者输入网址浏览网页时，可能会在空白窗口中停留很长时间以等待加载网页，加载完后所有的网页内容才同时出现。另外，在表格代码中添加“”标记，可使表格分块显示，从而加快网页下载时间，其写法如“”的形式。