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

《新编Dreamweaver CS3动态网页设计与制作教程第6章》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

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

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

4、续或者不连续的多个单元格。1)选择整个表格选择整个表格的方法有以下四种：(1)移动鼠标指针到表格的左上角，当鼠标变为形时，单击鼠标即可选中整个表格；或者在表格的单元格内边框、表格右边缘或者下边缘，当光标变为平行线光标时单击鼠标，选中整个表格。(2)将光标置于表格内任一单元格中，在编辑窗口左下角标签选择栏中单击

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

6、光标所在行。图6.5拖选多列视图图6.6【选择单行】视图(4)选择列：单击表格列宽度菜单中的小三角图标，在下拉菜单中执行【选择列】命令，如图6.7所示，选中该列。(5)使用热键选择：在单元格中连续执行两次【编辑】→【选择父标签】命令，或连续按两次Ctrl+[组合键，则选中光标所在行。图6.7选择列视图3)选择单元格选择单元格有以下三种方法：(1)将光标置于单元格中，按Ctrl+A或Ctrl+[组合键，或执行【编辑】→【选择父标签】命令，可选中单元格。(2)将光标置于单元格中，在编辑窗口左下角标签选择栏中单击

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