资源简介

第2节 制作网站——应用表格布局网页
【教学目标】
知识与技能目标
（1）了解表格在网页设计中的作用。
（2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。
（3）能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。
过程与方法
比较——>分析——>实践（规划、充实、美化、预览、调整……）——>总结，参考样图，联系“WPS表格”中表格的制作方法，小组协作，完成任务操作和知识的小结。
情感态度与价值观
通过对比学习使学生体验软件学习的一般方法和规律，提高学生自主学习的能力；通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，体验创造的快乐；通过“动物——人类的朋友”网站的设计与制作，激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。
【教学重点】
1、了解表格在网页设计中的重要作用和功能。
2、掌握插入、编辑表格的方法及表格的属性设置。
3、掌握表格嵌套的作用及嵌套方法，恰当设计表格。
【教学难点】
恰当使用表格的嵌套设计；表格中的文字排版、表格间距的设定。
【教学方法】
对比教学法、探究学习、模仿学习、小组协作学习。
【课时安排】
1～2课时
【教学过程】
教学环节 教师活动 学生活动 设计意图
一、导入 【网页表格布局的作用】 1、对比：两种形式的网页效果：一种是表格结构网页（未显示表格线biaoge.html），一种是简单结构网页(biaoge2.html)，再呈现另一张表格结构的网页（显示表格线biaoge1.html) 2、结论：对比之下，在制作网站页面时，利用表格结构可有效控制文字、图片等对象的位置，使网页的布局既紧凑又整齐美观 3、引题：运用表格布局网页结构（呈现学案中效果图） 对比观察 得出结论 明确任务。 激情、激趣 开门见山
二、新授 分析 对照学案中的样图，分析表格的行列数。 （二）制作 【表格布局】 1、制作一个外框单元格 任务:1：启动Dreamweaver软件，导入“d:\dongwu”站点文件夹，新建一张空白网页。单击“插入”——“表格”命令，打开“表格”对话框，设置行、列数为1行1列，表格宽度为“1000 像素”，边框粗细为“1”像素，其他参数默认，并设置“页面属性”中上边距为“0”像素，左边距也为“0”像素。并以“biaoge.html”为文件名进行网页的首次保存。 重要提点： 用表格来布局网页时，通常会在整个表格外部加上仅有一个单元格的表格，即形成表格嵌套，这样可以使整个网页的结构稳定。 制作表格并设置表格的结构 （表格布局2演示视频） 任务2：在单元格内，分别插入1行3列、1行5列及8行1列的三个表格，再在8行1列的表格相应的4个单元格内，分别插入1行2列的表格，表格宽度为“100% 百分比”，边框粗细为“1”像素，其他参数默认。 【表格充实】 任务3：参照样图效果，在表格相应的单元格中插入图片和输入文字，并进行适当的编辑，再次保存，预览效果。（注：素材的保存）。 重要提点： 文字、图片的编辑、保存方法，跟首页制作过程中的方法、注意点一致。 在插入图片与文字前需注意单元格中光标的定位问题，一般设置单元格属性窗口中“垂直”属性为“顶端”对齐。 3、单元格属性面板：（在即将编辑的单元格内单击，属性面板即可切换到如图所示） 【表格美化】 任务4：根据网页设计需要，参考样图，选择表格或单元格，修改其属性的“背景颜色”值，再对不需要显示的表格边框线，设置其“边框”值为“0”像素。保存网页，预览欣赏效果，如有欠缺，再有针对性地加以调整设置，并最后保存、预览。 重要提点： 表格属性面板：（选中整个表格，属性面板即可切换到如图所示） 最终效果如下图： （详见学案） 大致分析 在师适当的讲演引导下，生进行表格布局操作，落后的有问题的学生可以求助本组其他同学或直接参考视频帮助文件。 在以上第一步操作的基础上观看演示视频，自行完成这部分操作。 联系已有知识，结合教师提点，完成内容充实，尤其注意单元格属性面板的切换方法。 在教师引导下预览效果，发现问题，学习编辑的方法，调整，再预览、调整，反复修改，最终定稿，保存。 因为是模仿操作，所以，师带领学生先对页面结构做仔细分析，在此基础上，再由教师带领学生完成部分表格结构的布局，然后，放手让学生自己根据演示视频完成操作，教师巡视，适当提点，也可结合具体情况，请领先的学生下位帮助指导。 表格充实部分是学生已有的知识，教师只要稍作提点单元格对齐方式的设置即可放手让学生自己操作，有问题，可以随时提出来，大家一起解决。 美化表格，主要涉及到表格属性和单元格属性的设置问题，这里需要反复预览和修改，特别要适时指导学生切换表格和单元格属性面板的方法，有的放矢。 整个表格布局网页的初次制作，还是一个比较繁琐的过程，关键在于教师的引导和适当的指导，完成整个网页的制作任务，学生将会有一个质的提升。
三、展评 个别学生作品展示（优秀的，有典型问题的等） 师生适当点评 个别展示，修改和完善。 有做有评。
四、总结 1、表格布局（插入与编辑，尤其是表格的嵌套） 2、表格充实（图、文，对齐等） 3、表格美化（表格、单元格对象的边框、背景等） 根据学案及作品，自行小结。 归纳梳理。
教学后记

展开更多......

收起↑