《网页制作三剑客案例教程教学课件肖维明第3章》由会员分享，可在线阅读，更多相关《网页制作三剑客案例教程教学课件肖维明第3章（16页珍藏版）》请在金锄头文库上搜索。
1、主 编：高志清 作 者：张 伟,中国水利水电出版社,网页制作三剑客案例教程,第3章 表格和层, 学习目标,熟悉插入表格和设置表格参数的方法。学习选择、添加、删除、拆分、合并表格行列、单元格的方法，能够正确设置表格内容的格式。学会用HTML代码设置表格的各种细节，从而更自由地控制表格的外观，了解层的用法，以及层和表格之间转换的方法。,u 创建表格及表格的属性设置 u 表格在HTML代码中的显示 u HTML代码 u 层, 学习内容,3-1创建表格及表格的属性设置,3-1-1插入表格,单击【常用】工具栏中的 【插入表格】按钮，可在页面中插入表格。,表格是由行、列以及单元格组成的，在单元格中可以放置
2、文字和图像。下面介绍在Dreamweaver中创建表格的方法以及如何调整表格的大小、位置等属性。,表格宽度有两种设置方法： 设置为“像素”，这种设置方法是将表格设置为固定的尺寸； 设置为“百分比”，这种设置方法是相对的尺寸，也就是相对于网页的宽度而决定的。,调整表格的大小：向外侧拖动左下边角的调节点可放大表格。向内侧拖动边角的调节点可缩小表格,放大表格,缩小表格,3-1-2 设置表格属性,选择表格,设置表格属性,3-1-3 设置单元格属性,表格中的一个个小方块即为单元格。下面来学习如何设置单元格的属性。,将鼠标移至表格的边框线上，鼠标将变为水平或者垂直的双向向外的箭头时，单击鼠标左键就可以将表
3、格选中。, 选择单元格：按住键同时，单击单元格，可以选中单元格。 选择多个单元格：按住键，然后逐个单击欲选择的单元格。 选择表格的行或列：将鼠标移至表格外边框处，当鼠标变为水平或者垂直方向的箭头时，单击鼠标左键可以选中一行或者一列表格。 合并单元格：将要合并的单元格选择，单击【属性】面板中的 【合并单元格】按钮，便可将单元格合并。 拆分单元格：选择单元格，单击【属性】面板中的 【拆分单元格】按钮，便可将单元格拆分。,拆分单元格, 设置单元格的其它属性：将光标置于单元格中，在【属性】面板中就可以设置此单元格的属性。,设置单元格属性,3-2 表格在HTML代码中的显示,3-2-1 添加表格,通过H
4、TML代码的方式插入表格，可以使读者更加清晰的了解表格的结构。,3-2-2 在单元格中添加内容,在代码中将光标置于代码“”之间，输入文字姓名”。复制代码“姓名”，往下继续粘贴代码，再生成二个单元格。最后将后面两个单元格中的文字分别改为“年龄”和”性别”。,在表格中输入内容,生成两个单元格,更改后两个单元格中的文字,3-2-3 添加一行,将要添加的代码全部选中并进行复制，这代表了表格中的一行。将光标置于的后面输入回车，将代码粘贴到下面。,选中一行的代码,添加一行后的表格,3-2-4 为表格添加边框并为表格设定宽度和背景色,为表格添加边框： 将光标置于table的后面，输入空格，此时会出现Drea
5、mweaver的代码提示，在代码提示中可以找到“border”。如右图所示。,出现代码提示框,找到 “border”,双击这个代码提示，它就出现在了代码中，设置一个数值“1”，此时的表格如右图所示。,表格框在代码中的显示,返回到代码中，在如左图所示的位置处输入空格，在出现的Dreamweaver的代码提示中找到“width”，双击插入并设置表格的宽度为“200”。,设定光标的位置,设定表格的宽度,设置表格的背景： 在如右图所示的位置处输入空格，在出现的Dreamweaver的代码提示中找到“bgcolor”，双击插入并设置颜色值为“#FFFFCC”，效果如右图所示。,设定光标的位置,设定表格的
6、背景色,3-2-5 设置行的颜色,上面的实例我们设置了整个表格的颜色，下面通过代码改变行的颜色：,返回到代码中，将光标置于tr的后面并输入空格。在出现的Dreamweaver的代码提示中找到“bgcolor”，双击插入并设置颜色值为“#33CCFF”即可改变行的颜色。,3-3 HTML代码,上节中讲到了通过HTML代码制作表格并改变表格的属性的方法，这一节中我们重点地再将HTML语法讲解一下，读者通过这些HTML知识会对表格的各个属性有更加深刻的了解。,表格HTML的基本语法 表格标记的常用属性 表格Frame属性的值 表格Rules属性的值,3-4 层,用表格定位网页中的元素，不能相互叠加在
7、一起。但是使用层功能，无论将其放置到网页文档的任何一个位置，都可以随意移动，并且页面元素放入图层之中时，还可以控制哪个显示在前面、哪个显示在后面、哪个显示、哪个隐藏，可见，层的优点是很明显的。 之所以在网页文档中使用层，是为了自由地安排图像等网页构成元素表现特殊效果。大家可以将层理解为文档窗口内的又一个文档窗口。像在普通文档窗口中进行操作一样，在层中可以输入文字，也可以插入图像、动画、表格、多媒体等，对其进行编辑。,插入图像,插入表格,插入Flash动画,插入插件,3-4-1 创建层并插入图像,创建一个新文件，在【布局】工具栏中单击 【绘制层】按钮，然后在文档窗口中拖动鼠标，在适当位置释放鼠标
8、，便可创建层。 图层绘制好后就可以在层内插入内容了。在层内定位光标，单击 【插入图像】按钮，出现对话框之后，选择一张图片插入即可。,下面介绍的是在网页文档中创建层之后，再插入图像的方法。,3-4-2 调整层的大小和位置,选择层，当光标指向上、下（左、右）边框的控制点时，光标变为上、下（左、右）双向箭头，按下左键拖拽鼠标，可修改图层的高度（宽度）；当光标指向四个角端的控制点时，光标变为斜向双向箭头，按下左键拖拽鼠标，可修改整个图层的大小。,调整层的大小,调整层的大小,为了移动层，在单击层控制手柄的状态下，将其移动到指定位置，释放鼠标，层便移动到指定位置,向右拖动层的控制手柄,3-4-3 选择层,
9、单击层上方的四边形控制手柄或层的框架，就可以选择相应层。 执行菜单栏中的【窗口】/【层】命令，可以打开【层】面板。在【层】面板中单击所要选择的层名称，就能选择相应的层。,3-4-4 层与表格的相互转换,层和表格是可以相互转换的。层和表格的相互转换，便于网页版面的安排。,3-4-4-1将层转换为表格,选择图层，移动鼠标到菜单栏选择【修改】/【转换】/【层到表格】命令，在弹出的【转换层为表格】对话框中选择相应的选项即可。,3-4-4-2将表格转换为层,执行菜单栏中的【修改】/【转换】/【表格到层】命令，在弹出的【将表格转换为层】对话框中选择相应的选项即可。,3-6 本章小结,本章内容讲解完毕，本章讲解了如何插入表格、单元格。表格是网站中最基本也是最重要的元素，读者一定要多多练习，熟练掌握这些知识点。,
