网页设计与制作 教学课件 作者 王海军网页设计与制作-6.ppt

《网页设计与制作 教学课件 作者 王海军网页设计与制作-6.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作教学课件第6章表格本章主要内容：（1）创建表格（2）设置表格属性（3）表格应用实训（4）表格调整实训6.1任务一：表格的创建及属性的设置6.1.1创建表格在DreamweaverMX2004中，创建表格文件可执行下列操作方法之一：1、在文档的设计视图中，将光标放置到要插入表格的位置，执行【插入】→【表格】命令。2、在文档设计视图中，将光标放置到要插入表格的位置，打开【插入】插入工具栏的【常用】面板，单击【表格】按钮。6.1任务一：表格的创建及属性的设置6.1.2表格及其元素的选择1、选定整行2、选定整列3、选定整个

2、表格4、选择单个单元格5、选择一行或矩形单元格块6、选择不相邻的单元格6.1任务一：表格的创建及属性的设置6.1.3设置表格的基本属性1、在Dreamweaver中，利用【属性】面板可以设置表格属性。选定表格后，设置【表格属性】面板。2、在Dreamweaver中，还可以单独设置单元格属性，将光标放置到单元格中，【单元格属性】面板。6.2表格应用实训6.2.1实训目的通过实训应掌握创建表格的两个基本操作和插入表格对话框的使用；学会设置表格及其单元格的行宽、列高、填充和间距、边框和对齐等属性；掌握表格及单元格的背景颜色及图片的使用

3、。6.2.2实训准备本例用的单元格的背景图片为title-news.gif6.2表格应用实训6.2.3实训步骤1、DreamweaverMX2004中运行【插入】→【表格】菜单命令，弹出表格属性设置窗口，对插入的表格作初步定义，在设置窗口中作如下设置：行数为4，列数为3，边框粗细为0像素，其他采用默认设置。2、单击窗口中的【确定】按钮之后，即可在DreamweaverMX2004中新建一个表格，而且通过窗口下部的属性面板还可以对其进行诸如表格线条的颜色、表格的背景色、单元格的对齐方式等参数进行的调整。6.2表格应用实训3、在表格

4、的第一列的上面两个单元格中按下并拖动鼠标，此时可以选中两个单元格。接着单击属性模板中的【合并所选单元格，使用跨度】按钮。按同样的方法，在将表格的第一行右侧的两个单元格合并为一个单元格。4、将表格第一列的三个单元格全部选中，再将属性面板中的背景颜色一项设置为“＃FFFF00”，这样表格第一列中的单元格背景全部为黄色。5、在表格中输入相应的文本。为了美观可以在属性面板中进行居中设置。6.2表格应用实训6、为使单元格产生立体效果，可以将整个表格选中，然后在属性面板中设定表格边框的宽度为7并将边框颜色设置为“＃3399FF”，宽度调整3

5、60像素，高度为150像素，在第一行第二列的单元格中插入一背景图片（titil-news.gif）。设置完成后的效果如图6–8所示。6.2表格应用实训6.2.4实训建议及注意事项1、在本例中基本包括了表格的一些基本属性的设置。其中表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义，比如设置宽度为窗口宽度的60％，那么当浏览器的窗口大小变化时表格的宽度也随之变化；而如果设置宽度为400像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。2、表格的背景图像与表格的插入图像不同，背景图像上可以加入文字信息，但插入的

6、图像只能在旁边加文字。3、注意表格背景、单元格背景、网页背景之间的区别。6.3任务二：表格调整6.3.1表格和单元格大小调整1、选择整个表格。2、拖动一个选择手柄，沿相应方向调整表格的大小。拖动右下角的手柄，可在两个方向上调整表格的大小。6.3.2行列的增删1、在表格中添加一行有两种操作方法：将光标放置到单元格内，执行【修改】→【表格】→【插入行】命令。6.3任务二：表格调整将光标放置到单元格内，然后单击鼠标右键，在弹出的快捷菜单中选择【表格】→【插入行】命令。2、在表格中添加一列有两种操作方法将光标放置到单元格内，执行【修改】

7、→【表格】→【插入列】命令。将光标放置到单元格内，然后单击鼠标右键，在弹出的快捷菜单中选择【表格】→【插入列】命令。6.3任务二：表格调整3、在表格中添加多行或多列4、删除行或列删除行：将光标放置到单元格内，执行【修改】→【表格】→【删除行】命令，或者单击鼠标右键，在弹出的快捷菜单中选择【表格】→【删除行】命令，即可删除行。删除列：将光标放置到单元格内，执行【修改】→【表格】→【删除列】命令，或者单击鼠标右键，在弹出的快捷菜单中选择【表格】→【删除列】命令，即可删除列。选定整行或整列，按【Delete】键也可以删除行或列。6.3

8、任务二：表格调整6.3.3单元格的合并与拆分1、单元格的合并2、单元格的拆分。6.3.4自动套用格式6.3.5表格排序6.4表格的调整实训6.4.1实训目的：通过对已有表格参数的调整，套用表格的自动套用格式，掌握格式化表格的一般方法。6.4.2实训步骤：1、选择