网页制作三剑客案例教程肖维明第3章.pptVIP

尚辅网 / 主 编：高志清 作 者：张 伟 中国水利水电出版社 网页制作三剑客案例教程 第3章 表格和层 ● 学习目标 熟悉插入表格和设置表格参数的方法。学习选择、添加、删除、拆分、合并表格行列、单元格的方法，能够正确设置表格内容的格式。学会用HTML代码设置表格的各种细节，从而更自由地控制表格的外观，了解层的用法，以及层和表格之间转换的方法。 u 创建表格及表格的属性设置 u 表格在HTML代码中的显示 u HTML代码 u 层 ● 学习内容 3-1创建表格及表格的属性设置 3-1-1插入表格 单击【常用】工具栏中的 【插入表格】按钮，可在页面中插入表格。 表格是由行、列以及单元格组成的，在单元格中可以放置文字和图像。下面介绍在Dreamweaver中创建表格的方法以及如何调整表格的大小、位置等属性。 表格宽度有两种设置方法： 设置为“像素”，这种设置方法是将表格设置为固定的尺寸； 设置为“百分比”，这种设置方法是相对的尺寸，也就是相对于网页的宽度而决定的。 调整表格的大小：向外侧拖动左下边角的调节点可放大表格。向内侧拖动边角的调节点可缩小表格 放大表格 缩小表格 3-1-2 设置表格属性 选择表格 设置表格属性 3-1-3 设置单元格属性 表格中的一个个小方块即为单元格。下面来学习如何设置单元格的属性。 将鼠标移至表格的边框线上，鼠标将变为水平或者垂直的双向向外的箭头时，单击鼠标左键就可以将表格选中。 ? 选择单元格：按住Ctrl键同时，单击单元格，可以选中单元格。 ? 选择多个单元格：按住Ctrl键，然后逐个单击欲选择的单元格。 ? 选择表格的行或列：将鼠标移至表格外边框处，当鼠标变为水平或者垂直方向的箭头时，单击鼠标左键可以选中一行或者一列表格。 ? 合并单元格：将要合并的单元格选择，单击【属性】面板中的 【合并单元格】按钮，便可将单元格合并。 ? 拆分单元格：选择单元格，单击【属性】面板中的 【拆分单元格】按钮，便可将单元格拆分。 拆分单元格 ? 设置单元格的其它属性：将光标置于单元格中，在【属性】面板中就可以设置此单元格的属性。 设置单元格属性 3-2 表格在HTML代码中的显示 3-2-1 添加表格 通过HTML代码的方式插入表格，可以使读者更加清晰的了解表格的结构。 3-2-2 在单元格中添加内容 在代码中将光标置于代码“td/td”之间，输入文字姓名”。复制代码“td姓名/td”，往下继续粘贴代码，再生成二个单元格。最后将后面两个单元格中的文字分别改为“年龄”和”性别”。 在表格中输入内容 生成两个单元格 更改后两个单元格中的文字 3-2-3 添加一行 将要添加的代码全部选中并进行复制，这代表了表格中的一行。将光标置于/tr的后面输入回车，将代码粘贴到下面。 选中一行的代码 添加一行后的表格 3-2-4 为表格添加边框并为表格设定宽度和背景色 为表格添加边框： 将光标置于table的后面，输入空格，此时会出现Dreamweaver的代码提示，在代码提示中可以找到“border”。如右图所示。 出现代码提示框 找到 “border” 双击这个代码提示，它就出现在了代码中，设置一个数值“1”，此时的表格如右图所示。 表格框在代码中的显示 返回到代码中，在如左图所示的位置处输入空格，在出现的Dreamweaver的代码提示中找到“width”，双击插入并设置表格的宽度为“200”。 设定光标的位置 设定表格的宽度 设置表格的背景： 在如右图所示的位置处输入空格，在出现的Dreamweaver的代码提示中找到“bgcolor”，双击插入并设置颜色值为“#FFFFCC”，效果如右图所示。 设定光标的位置 设定表格的背景色 3-2-5 设置行的颜色 上面的实例我们设置了整个表格的颜色，下面通过代码改变行的颜色： 返回到代码中，将光标置于tr的后面并输入空格。在出现的Dreamweaver的代码提示中找到“bgcolor”，双击插入并设置颜色值为“#33CCFF”即可改变行的颜色。 3-3 HTML代码 上节中讲到了通过HTML代码制作表格并改变表格的属性的方法，这一节中我们重点地再将HTML语法讲解一下，读者通过这些HTML知识会对表格的各个属性有更加深刻的了解。 表格HTML的基本语法 表格标记的常用属性 表格Frame属性的值 表格Rules属性的值 3-4 层 用表格定位网页中的元素，不能相互叠加在一起。但是使用层功能，无论将其放置到网页文档的任何一个位置，都可以随意移动，并且页面元素放入图层之中时，还可以控制哪个显示在前面、哪个显示在后面、哪个显示、哪个隐藏，可见，层的优点是很明显的。 之所以在网页文档中使用层，是为了自由地安排图