第三单元制作作品展示网页(高教版)PPT课件.ppt

Dreamweaver网页制作; 本单元通过“创建表格”、“编辑表格”、“添加表格内容”和“建立超级链接”四个任务，完成“幽幽我心的个人网站”中的“作品展示”网页的制作，学习如何使用表格来进行网页的布局。任务完成后效果如图所示。 ;第三单元 制作“作品展示”网页 ;任务一 创建表格; 要制作出漂亮的网页要有合理的布局结构。 在Dreamweaver 8中，表格是用于在页面上显示表格式数据及对文本和图像等元素进行布局的强用力的工具。 表格布局是目前最常见的网页布局方式之一，它灵活方便，比其他布局方式简单、易学。熟练地使用表格是对网页制作者的必须要求。; 分析网页布局; 自己动手： 1．创建目录结构 ; 2．表格的创建;　 A.使用菜单插入一个表格“table1” ，会出现下面的“表格”对话框：;大多数浏览器默认显示单元格边距、间距是多少？若要确保浏览器显示的表格没有边距和间距，必须把单元格边距和单元格间距设置为多少？; B.使用“插入”栏创建表格“table2”。 ; E.在“table1”中插入嵌套表格table1-1。 ; 任务总结： 1．创建表格 2．表格布局页面 3．表格在页面中的作用;　　举一反三： 创建网页“practice3-1.html”，在网页中插入一个6行5列的表格，宽500像素，边框粗细与单元格间距均为5像素，页眉选择“顶部”，标题为“产品信息”，保存并预览网页。 ;　　作业： 　　1．创建网页“practice3-2.html”，在网页中插入如图JYFS3-1所示的嵌套表格，保存并预览网页。 ;　2．创建网页“practice3-3.html”，在网页中插入如图JYFS3-2所示的嵌套表格，保存并预览网页。;任务二 编辑表格 ;这两个表格的形状、底色不同;表格“table1”处于选定状态; 2．编辑表格“table1” ;　　设置表格“table1”的第2行的单元格背景图像为“wkimages”文件夹下的dh．Jpg。如下图所示： 　　;　　3．编辑表格“table1-1” 　　设置表格“table1-1”宽500像素、高34像素、左对齐。把“table1-1”5个单元格宽度设为100像素。　　; 5．编辑表格“table3”及其中的嵌套表格 　　设置表格“table3”为“居中对齐”，背景颜色为“#FFFFFF”，第1列与第3列列宽均设置为17像素。 　　设置“table3-1”边框粗细为1像素，边框颜色为“#EFEFEF”。分别设置表格“table3-1”第一行、第三行和第五行单元格中嵌套的表格“web1”、“flash1”和“3D1”的属性：高30像素，对齐方式为左对齐，第1列列宽为30像素。 分别设置表格“table3-1”第二行、第四行和第六行单元格中嵌套的表格“web2”、“flash2”和“3D2”的属性：第1列和第5列的列宽均设置为40像素。　;　　6．编辑表格“table4” 　　设置表格“table4”对齐方式为居中对齐，背景颜色为“#FFFFFF”。将第2行行高设置为1像素、背景颜色设置为“#EFEFEF”，这样表格“table4”的第2行就显示为一条高1像素、颜色为“#EFEFEF”的细线。 　　注意：此时须在“代码”视图里将表格“table4”第2行单元格内的“nbsp;”删除，否则行高不会以1像素显示。如下图所示： 　　;删除表格“table4”第2行中的“nbsp;”标记; 至此，完成了“作品展示”网页中所有表格的编辑工作。完成 后的效果如下图：;任务小结; 举一反三;　　作业： 1．创建网页“practice3-5.html”，插入如图JYFS3-4所示表格并按要求设置其属性：宽400像素、高100像素、单元格间距为5像素、边框粗细为3像素、边框颜色为“#FF0000”。表格第1、3列宽100像素、单元格的边框颜色为“#00FF00”，第2列宽100像素、单元格的边框颜色为“#0000FF”。 ; 　　2．创建网页“practice3-6.html”，插入一个4行3列的表格，按图JYFS3-5所示，对单元格进行合并与拆分。设置表格边框粗细为1像素、颜色为“#000000”，将表格第1行的背景颜色设置为“#3399CC”，第2行与第3行的第一列单元格、第4行第1、2列单元格的背景颜色设置为“#FFFFCC”。;　3．创建网页“practice3-7.html”，插入5个表格，设置表格对齐属性及单元格