网页制作三剑客案例教程 第3章 表格和层

《网页制作三剑客案例教程 第3章 表格和层》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、主编：高志清作者：张伟网页制作三剑客案例教程第3章表格和层●学习目标熟悉插入表格和设置表格参数的方法。学习选择、添加、删除、拆分、合并表格行列、单元格的方法，能够正确设置表格内容的格式。学会用HTML代码设置表格的各种细节，从而更自由地控制表格的外观，了解层的用法，以及层和表格之间转换的方法。u创建表格及表格的属性设置u表格在HTML代码中的显示uHTML代码u层●学习内容3-1创建表格及表格的属性设置3-1-1插入表格单击【常用】工具栏中的【插入表格】按钮，可在页面中插入表格。表格是由行、列以及单元格组成的，在单元格中可以放置文字和图像。下面介绍在Dream

2、weaver中创建表格的方法以及如何调整表格的大小、位置等属性。表格宽度有两种设置方法：设置为“像素”，这种设置方法是将表格设置为固定的尺寸；设置为“百分比”，这种设置方法是相对的尺寸，也就是相对于网页的宽度而决定的。调整表格的大小：向外侧拖动左下边角的调节点可放大表格。向内侧拖动边角的调节点可缩小表格放大表格缩小表格3-1-2设置表格属性选择表格设置表格属性3-1-3设置单元格属性表格中的一个个小方块即为单元格。下面来学习如何设置单元格的属性。将鼠标移至表格的边框线上，鼠标将变为水平或者垂直的双向向外的箭头时，单击鼠标左键就可以将表格选中。选择单元格：按住

3、键同时，单击单元格，可以选中单元格。选择多个单元格：按住键，然后逐个单击欲选择的单元格。选择表格的行或列：将鼠标移至表格外边框处，当鼠标变为水平或者垂直方向的箭头时，单击鼠标左键可以选中一行或者一列表格。合并单元格：将要合并的单元格选择，单击【属性】面板中的【合并单元格】按钮，便可将单元格合并。拆分单元格：选择单元格，单击【属性】面板中的【拆分单元格】按钮，便可将单元格拆分。拆分单元格设置单元格的其它属性：将光标置于单元格中，在【属性】面板中就可以设置此单元格的属性。设置单元格属性3-2表格在HTML代码中的显示3-2-1添加

4、表格通过HTML代码的方式插入表格，可以使读者更加清晰的了解表格的结构。3-2-2在单元格中添加内容在代码中将光标置于代码“”之间，输入文字姓名”。复制代码“姓名”，往下继续粘贴代码，再生成二个单元格。最后将后面两个单元格中的文字分别改为“年龄”和”性别”。在表格中输入内容生成两个单元格更改后两个单元格中的文字3-2-3添加一行将要添加的代码全部选中并进行复制，这代表了表格中的一行。将光标置于的后面输入回车，将代码粘贴到下面。选中一行的代码添加一行后的表格3-2-4为表格添加边框并为表格设定宽度和背景色为表格添加边

5、框：将光标置于

6、设置颜色值为“#FFFFCC”，效果如右图所示。设定光标的位置设定表格的背景色3-2-5设置行的颜色上面的实例我们设置了整个表格的颜色，下面通过代码改变行的颜色：返回到代码中，将光标置于tr的后面并输入空格。在出现的Dreamweaver的代码提示中找到“bgcolor”，双击插入并设置颜色值为“#33CCFF”即可改变行的颜色。3-3HTML代码上节中讲到了通过HTML代码制作表格并改变表格的属性的方法，这一节中我们重点地再将HTML语法讲解一下，读者通过这些HTML知识会对表格的各个属性有更加深刻的了解。表格HTML的基本语法表格标记的常用属性表格Fram

7、e属性的值表格Rules属性的值3-4层用表格定位网页中的元素，不能相互叠加在一起。但是使用层功能，无论将其放置到网页文档的任何一个位置，都可以随意移动，并且页面元素放入图层之中时，还可以控制哪个显示在前面、哪个显示在后面、哪个显示、哪个隐藏，可见，层的优点是很明显的。之所以在网页文档中使用层，是为了自由地安排图像等网页构成元素表现特殊效果。大家可以将层理解为文档窗口内的又一个文档窗口。像在普通文档窗口中进行操作一样，在层中可以输入文字，也可以插入图像、动画、表格、多媒体等，对其进行编辑。插入图像插入表格插入Flash动画插入插件3-4-1创建层并插入图像创建

8、一个新文件，在【布局】工具栏中单击【绘