新编Dreamweaver CS3动态网页设计与制作教程第6章.ppt

1、6.1 项目1：在页面中应用表格 6.2 项目2：导入和导出表格数据 6.3 项目3：表格排序 6.4 项目4：用布局表格布局网页 6.5 课堂综合训练 6.6 小结 习题,第6章 表格的应用,表格在网页设计中的地位也非常重要。表格是将一定的内容按特定的行、列规则进行排列而构成的。网页设计者将表格作为控制页面布局最有力的工具，这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能，如果不能熟练掌握表格的运用，就不可能设计出出色的网页。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。在学习表格的使用之前，我们先来认识一下表格的结构。表格是由若干行、若干列

2、组成的，表格中的每个小方格称为一个单元格，它是网页布局的最小单位。图6.1所示的是一个2行3列的表格，其中各参数含义如下：,图6.1 2行3列表格, 表格宽度，定义表格的总宽度，可直接填入数值，后面的宽度选项分为像素和百分比，当宽度单位为百分比时，表格的宽度可以根据浏览器的宽度自动伸展。 边框粗细，定义表格的外边框宽度。 单元格边距，定义单元格中的内容与单元格边框的宽度，也就是单元格内的空白。 单元格间距，定义单元格与单元格之间的间隙。在4.2节已对如何在页面中插入表格做过简单介绍，下面将进一步详细介绍表格的应用。,1. 插入表格内容表格可以包含任何对象，无论是文本、图像、动画还是声视频和插件

3、程序，网页中的一切对象都可以插入到表格中。具体操作步骤如下：(1) 在Dreamweaver CS3中新建一组表格，单击要输入文本的单元格。(2) 在表格中输入文本，单元格会随着文本键入自动扩展。,6.1 项目1：在页面中应用表格,或者通过从其他文本处理软件复制文本，粘贴到单元格中，如果从Dreamweaver CS3中复制文本，使用【粘贴】命令可以保留文本格式。(3) 按Tab键移动光标到下一单元格，按Shift+Tab组合键可返回到上一单元格。,2. 选择表格及元素插入表格后，用户可以快速选择整个表格，也可以选择某行或某列，还能够选择表格中连续或者不连续的多个单元格。1) 选择整个表格选择

4、整个表格的方法有以下四种：,(1) 移动鼠标指针到表格的左上角，当鼠标变为形时，单击鼠标即可选中整个表格；或者在表格的单元格内边框、表格右边缘或者下边缘，当光标变为平行线光标时单击鼠标，选中整个表格。(2) 将光标置于表格内任一单元格中，在编辑窗口左下角标签选择栏中单击标签，如图6.2所示，则表示选中整个表格。(3) 单击表格宽度菜单中的小三角图标，在下拉菜单中执行【选择表格】命令，如图6.3所示，则选中整个表格。,图6.2 选中表格标签视图,图6.3 【选择表格】命令,(4) 使用热键：在单元格中执行【修改】【表格】【选择表格】命令，或者连续按两次Ctrl+A组合键；在单元格中连续执行三次【

5、编辑】【选择父标签】命令，或连续按三次Ctrl+组合键，则选中整个表格。2) 选择表格的行或列选择表格的行或列的方法如下：(1) 选择单列：将光标置于行的左边缘或者列的顶端，出现选择箭头时单击鼠标，选中该行或列，单击并拖动，可选择连续的多行或多列，如图6.4所示。,图6.4 选择单列视图,(2) 选择多列：将光标置于表格的任意单元格，平行或向下拖拽光标可选择连续的多行或多列，如图6.5所示。(3) 选择单行：将光标置于表格内任一单元格中，在编辑窗口左下角标签选择栏中单击标签，如图6.6所示，则选中光标所在行。,图6.5 拖选多列视图,图6.6 【选择单行】视图,(4) 选择列：单击表格列宽度菜

6、单中的小三角图标，在下拉菜单中执行【选择列】命令，如图6.7所示，选中该列。(5) 使用热键选择：在单元格中连续执行两次【编辑】【选择父标签】命令，或连续按两次Ctrl+组合键，则选中光标所在行。,图6.7 选择列视图,3) 选择单元格选择单元格有以下三种方法：(1) 将光标置于单元格中，按Ctrl+A或Ctrl+组合键，或执行【编辑】【选择父标签】命令，可选中单元格。(2) 将光标置于单元格中，在编辑窗口左下角标签选择栏中单击标签，可选中单元格。(3) 按住Ctrl键的同时单需要选择的单元格，可以选择多个连续或者不连续的单元格。,3. 合并单元格合并单元格的操作方法如下：(1) 在Dream

7、weaver CS3中新建一个3行3列的表格，选择要合并的连续的单元格，如图6.8所示。,图6.8 选择单元格视图,(2) 执行【修改】【表格】【合并单元格】命令，或者单击【属性】面板中的【合并所选单元格，使用跨度】按钮，如图6.9所示。(3) 查看合并单元格之后的效果，如图6.10所示。,图6.9 单元格【属性】面板,图6.10 合并单元格效果,4. 拆分单元格拆分单元格的操作方法如下：(1) 在上面合并单元格后的表格中继续操作，选择需要拆分的单元格，如图6.11所示。(2) 执行【修改】【表格】【拆分单元格】命令，或者单击【属性】面板中的【拆分单元格为行或列】按钮，弹出【拆分单元格】对话框

8、，选择将【单元格拆分】双选按钮中的【行】选项，【行数】设为2，如图6.12所示。(3) 查看拆分单元格后的效果，如图6.13所示。,图6.11 选中单元格视图,图6.12 【拆分单元格】对话框,图6.13 拆分单元格后的效果,5. 剪切、复制、粘贴表格剪切、复制、粘贴表格的操作方法如下：(1) 选中表格，执行【编辑】【剪切】命令，或者按Ctrl+X组合键，即可剪切所选表格。(2) 选中表格，执行【编辑】【复制】命令，或者按Ctrl+C组合键，即可复制所选表格。(3) 选中表格，执行【编辑】【粘贴】命令，或者按Ctrl+V组合键，即可粘贴所选表格。,6. 设置表格属性在Dreamweaver C

9、S3中新建一个2行3列的表格。选中整个表格后，可以通过图6.14所示的【属性】面板来设置或修改表格属性。该面板中的参数设置如下： 【表格Id】文本框：用于输入表格ID编号，便于用脚本对表格进行控制，可以不填。,图6.14 表格【属性】面板, 【行】和【列】文本框：用于设置表格的行数和列数；【宽】文本框用来设置表格宽度，在其后的下拉列表选择宽度的单位，包括百分比(%)和像素。 【填充】文本框：用于设置单元格内部和单元格边框间的距离，即单元格边距。在其文本框中输入30，单位为像素，查看与填充为0的表格的效果对比，如图6.15所示。,图6.15 不同【填充】效果对比, 【间距】文本框：用于设置单元格

10、之间的距离，在文本框内输入30，单位为像素，查看与间距为2的表格的效果对比，如图6.16所示。 【边框】文本框：用于设置表格边框的宽度，单位是像素。 【清除列宽】按钮和【清除行高】按钮：分别用来清除表格的宽度和高度，使表格的宽和高恢复到最小状态。,图6.16 不同【间距】效果对比, 【将表格跨度转换成像素】按钮和【将表格跨度转换成百分比】按钮：可将表格的宽度单位在像素和屏幕百分比间互相转换。 【背景颜色】文本框：用于输入十六进制值来表现颜色效果，或者点击颜色框，弹出色板，这时光标变为滴管状，可选取所需的颜色。【边框颜色】文本框用来设置表格边框的颜色，当边框不为0时有效，设置边框颜色为蓝色(#0

11、066FF)。, 【背景图像】文本框：用于设置表格的背景图像。可通过在Dreamweaver CS3的文件中单击文本框后的【选择文件】按钮来查找图像文件，也可以在文本框内输入背景图像的路径查找图像文件。背景图像以原始大小显示，超出表格部分不会显示。7. 设置单元格属性除可整体设置表格属性外，还可以通过【属性】面板对表格中的某个特定的行、列和单元格进行属性设置，如图6.17所示。,图6.17 单元格【属性】面板, 【宽】、【高】文本框：设置单元格的宽度和高度。 【不换行】单选按钮：不勾选此复选框输入文本时即超过单元格宽度，也不会自动换行，继续横向输入，就会延长单元格的宽度。 【标题】单选按钮：为

12、了与其他内容区分，突出显示单元格标题后居中对齐。 【背景】：设置单元格的背景图像。 【背景颜色】：设置单元格背景的颜色。 【边框】：设置单元格边框的颜色。,8. 相关知识点插入表格的方法；合并和拆分单元格；设置表格和单元格属性的方法。,9. 知识拓展1：制作细线表格下面利用边框宽度为像素1的单元格背景颜色来制作细线表格。具体操作步骤如下：(1) 若要在Dreamweaver CS3中新建一个5行3列的表格，则执行【插入记录】【表格】命令，弹出【表格】对话框。(2) 在对话框中将【行数】设置为5，【列数】设置为3，【表格宽度】设为300像素，【边框粗细】缺省，【单元格边距】和【单元格间距】均设为

13、0，如图6.18所示。,图6.18 【表格】对话框,(3) 单击【确定】按钮，插入表格。(4) 选中表格，在【属性】面板中将【间距】设置为1，【背景颜色】设置为#FFCC33 (橘色)，如图6.19所示。(5) 选中所有单元格，在【属性】面板中将【背景颜色】设置为#FFFFFF(白色)，如图6.20所示。(6) 保存设置，在浏览器中预览，其效果如图6.21所示。,图6.19 表格背景颜色设置,图6.20 单元格背景颜色设置,图6.21 细线表格,10. 知识拓展2：制作虚线表格虚线对表格起到一定的美化作用，使页面不再单调，给浏览者带来了新鲜感。可通过在代码视图中输入以下HTML代码制作虚线表格

14、：虚线表格,在以上代码中，style=border:1px dotted black表示表格外边框的边框粗细为1像素，dotted表示边框为点虚线，black表示边框颜色为黑色。保存并修改以上代码，在浏览器中进行预览，其效果如图6.22所示。,图6.22 虚线表格效果图,1. 导入表格数据操作步骤表格数据是纯文本文件，第一行是表头，每列数据用逗号或其他分隔符分开，可用记事本编辑。具体操作步骤如下：(1) 在Dreamweaver CS3中打开已有文件，在编辑界面中，执行【文件】【导入】【导入表格式数据】命令，弹出【导入表格式数据】对话框，如图6.23所示。,6.2 项目2：导入和导出表格数据,

15、图6.23 【导入表格式数据】对话框,(2) 点击【浏览】按钮选择需转换为表格形式的数据文件，并对【定界符】、【表格宽度】、【单元格边距】、【单元格间距】、【格式化首行】等做相应的设置。(3) 设置完毕，单击【确定】按钮，即完成了表格数据的导入。(4) 保存页面设置，在浏览器中预览其导入效果。,2. 导出表格数据导出表格数据的操作步骤如下：(1) 在Dreamweaver CS3中打开已有文件，将光标置于表格中，执行【文件】【导出】【表格】命令，弹出【导出表格】对话框，如图6.24所示。,图6.24 【导出表格】对话框,(2) 在【定界符】下拉列表中选择在导出的文件中所使用的分隔符，包括Tab

16、、空白键、逗点、分号和冒号，如图6.25所示。(3) 点击【换行符】下拉列表，选择导出的文件所使用的操作系统，包括有Windows、Mac和UNIX，不同的操作系统具有特定的文本行结尾方式，如图6.26所示。,图6.25 【定界符】下拉列表,图6.26 【换行符】下拉列表,(4) 单击【导出】按钮，弹出【表格导出为】对话框，如图6.27所示，在此选择文件的保存位置，并为新文件命名，文件后缀名默认为.csv，之后单击【保存】即导出表格数据。3. 相关知识点导入表格数据的方法；导出表格数据的方法。,图6.27 【表格导出为】对话框,1. 操作步骤表格排序的操作步骤如下：(1) 在Dreamweav

17、er CS3中打开已有文件，在编辑界面中将光标置于任意一个单元格中。(2) 执行菜单栏中的【命令】【排序表格】命令，弹出【排序表格】对话框，如图6.28所示。,6.3 项目3：表格排序,图6.28 【排序表格】对话框,(3) 在【排序按】下拉列表中列出了选定表格的所有列，在【顺序】右侧的下拉列表中选择排序方式及排序方向；【再按】下拉列表中可以设置按另外的列进行次级排序。(4) 单击【应用】或者【确定】按钮，即完成表格排序。2. 相关知识点表格排序的方法。,1. 操作步骤用布局表格布局网页的操作步骤如下：(1) 在Dreamweaver CS3中新建一个页面，执行【查看】【表格模式】【布局模式】

18、命令，切换到布局模式，同时弹出【从布局模式开始】对话框，如图6.29所示。该对话框中显示使用布局模式的一些相关信息，选择【不要再显示此消息】单选按钮，下次切换到布局模式就不再显示该对话框。,6.4 项目4：用布局表格布局网页,图6.29 【从布局模式开始】对话框,(2) 选择【插入】面板【布局】工具栏中的【布局表格】按钮或者【布局单元格】按钮，如图6.30所示，光标变成形状。(3) 在需要绘制表格的位置上拖拽鼠标即可创建布局表格或布局单元格。需要注意的是，布局单元格不能存在于布局表格之外，如果绘制的布局单元格不在布局表格中，Dreamweaver CS3会自动创建一个布局表格作为该单元格的容器

19、。,图6.30 【布局】面板,(4) 每个表格的顶端都有布局表格标签，以帮助用户区分和选择。绘制完一个布局表格后，可以在该表格中拖拽嵌套绘制新的布局表格，但嵌套的布局表格大小不能超过包含它的布局表格，如图6.31所示。(5) 绘制布局表格后不能直接插入对象，还需绘制布局单元格。点击【插入】【布局】【布局表格】按钮进行绘制，如果要绘制多个布局单元格，可以一直按住Ctrl键进行拖拽，如图6.32所示。,图6.31 嵌套布局表格视图,图6.32 布局表格视图,(6) 可以任意移动布局表格中的布局单元格和嵌套布局表格，但不能超过它的上一层范围。选中布局表格或布局单元格，拖动控制手柄即可调整。(7) 设

20、置布局参数：执行【编辑】【首选参数】命令，弹出【首选参数】对话框，选择左侧的【布局模式】选项，如图6.33所示。,图6.33 【首选参数】对话框, 【自动插入间隔符】选项：设置Dreamweaver CS3是否应该在将列设置为【自动伸展】时自动插入间隔图像。 【站点的间隔图像】下拉列表：从该下拉列表中选择使用的间隔图像所在的站点。 【图像文件】文本框：单击【浏览】按钮，选择一个站点中存在的间隔图像文件；或者单击【创建】按钮，创建一个新的间隔图像文件。, 【单元格外框】：设置布局单元格边框的颜色，默认为蓝色。 【表格外框】：设置布局表格边框的颜色，默认为绿色。 【表格背景】：设置布局表格中没有布

21、局单元格区域的颜色，默认为灰色。(8) 设置布局表格属性：单击布局表格任意位置，选中布局表格，在【属性】面板中设置布局表格属性，如图6.34所示。,图6.34 表格【属性】面板设置, 【宽】双选按钮：选中【固定】项，在文本框中输入以像素为单位的宽度值，表格设置为绝对宽度。选中自动伸展项，布局表格宽度会自动延伸。 【高】文本框：设置以像素为单位的表格高度值。 【背景颜色】文本框：设置布局表格的背景颜色。 【填充】文本框：设置布局表格中的布局单元格边框与内容之间的间隔，单位为像素。 【间距】文本框：设置布局表格中布局单元格之间的间隔，单位为像素。,(9) 设置布局单元格属性：单击布局单元格任意位置

22、，选中布局单元格，在【属性】面板中设置布局单元格属性，如图6.35所示。 【宽】双选按钮：选中【固定】项，在文本框中输入以像素为单位的宽度值，单元格设置为绝对宽度。选中自动伸展项，布局单元格格宽度会自动延伸。 【高】文本框：设置以像素为单位的布局单元格值。 【背景颜色】文本框：设置布局单元格的背景颜色。,图6.35 单元格【属性】面板设置, 【水平】下拉列表：设置单元格中内容的对齐方式，包括默认、左对齐、居中对齐和右对齐。 【垂直】下拉列表：设置单元格中内容的对齐方式，包括默认、顶端、居中、底部和基线。 【不换行】单选按钮：选中该项则在该布局单元格中输入文本时不会自动换行，随着文本的增加单元格的宽度逐渐变大。,2. 相关知识点布局表格和布局单元格的添加方法；布局表格和布局单元格属性的修改。,在课堂上完成以下练习：(1) 在Dreamweaver CS3中新建一个网页，插入一个3行3列的表格，宽度为760，边框为0。在属性面板中设置表格背景颜色为淡蓝色，十六进制颜色代码为#CAFBFF，如图6.36所示。(2) 合并第一行单元格，并在第一行内输入“使用按键精灵论坛金币兑换注册码”标题，设置文