第十二课
用表格为网页布局
教学设计
1教学目标
<知识与技能>:
1.
学会并熟练掌握插入表格的技能。
2.
学会并掌握设置表格属性、合并、拆分单元格等表格编辑技能。
3.
能利用表格合理的布局网页页面。
<过程与方法>:
1.
展示两组素材相同而布局不同的网页,让学生进行比较认知。
2.
利用多媒体教学网进行“利用表格布局网页页面”的教学演示。
3.
学生实践练习并交流展示及评价。
4.
通过项目活动教学法学会知识技能培养能力。
<情感态度与价值>:
1.
锻炼学生“利用表格合理的布局网页页面”知识技能。
2.
培养学生的审美能力、设计和组织能力、语言表达能力、小组合作能力。
3.
使学生在活动完成后获得成功的体验,激发更大的网站制作的学习兴趣。
2学情分析
在此课之前,学生接触到网页制作的相关知识还比较少,所有的知识也只能通过WORD进行衍生。为了区别WORD和PPT等曾经排版方法,在学习网页排版时,创设一种情境能让学生对于网页对象能自然的用表格进行页面布局。通过这种教学方式,能让学生觉得网页表格排版理所当然,利用情境也大大提高了操作兴趣,在操作中掌握了技能。
3重点难点
重
点
:学生自主的设计表格并布局网页
难点:利用表格合理布局网页
4教学过程
一、导入
以《最美是我家》视频导入
(设计意图:吸引学生注意力,提高学生课堂兴趣)
师:刚才看到同学们对课前的视频很有兴趣,我也被那些衢州美景吸引住了。请问同学们,衢州有哪些美景和美食你感兴趣,说说看,在座的老师都很感兴趣的哦。
生:回答(举例)
师:我们衢州是一座美丽的城市,衢州美美就美在好山水。
“烂柯”围棋传神话,
“江郎”山峰天下奇。钱江源头流水潺潺,信安湖水面碧波荡漾。这节课我们就尝试设计下以“最美是我家”为主题的个人网站,让更多的朋友通过网站分享和了解衢州。了解衢州的美丽山水,了解衢州的美食。把衢州最美的一面展示给全国的朋友看。
(设计意图:通过课前视频引出衢州美景相关主题)
二、布局
师:(提问学生)以“最美是我家”为主题,如果你是这个网站的负责人,你想展示些什么内容给大家看
(示意学生举手)
生:回答,介绍各地美景等
+分
师:(根据学生回答变化)
师:网站内容可真丰富,那如果叫你给你网站取个名字会叫什么
生:回答
师:真好,如果是我,我肯定会喜欢你的网站。
(设计意图:通过交流使学生有个概念,对自己网站的主题和内容进行确定)
师:根据刚才那位同学的说法,他的网页可能是这样的:板书
(这里是标题,他对内容进行了分类,有衢州的山、衢州的水、衢州的美食等,这样我浏览这些内容就很方便了,我们把它称为导航,下面的就是分类的具体内容,我们称之为栏目。标题、导航,栏目都有了,对了,同学们现在知识产权很重要,在网站上要加上版权。
板书:标题:。。。。。。。。
导航:。。。。。。。。
栏目:。。。。。。。。
版权:。。。。。。。
通过我们两人的配合,咱们的网站的布局设计已经出来了。
师:同学们,网页都是这样的吗 根据你的上网经历,有的网页标题不一定在最上面,导航也好像不一定是横着的,对吧 我们看看其它优秀网站都是怎么布局的。(展示普通布局网页,进行主题和布局的讲解)
(设计意图:一、使学生了解布局的多样性,二、使学生在脑海中形成自己的主题和布局)
师:同学们,你们的主题想好了吗 分类也想好了吗 下面5分钟时间同学也在白纸上简单画一下,你的小吃美食网站的布局。不过老师这边有个要求
要求:
1、在白纸上画出标题、导航、栏目内容、版权说明的位置。
2、在标题位置写上你确定下来的标题,在导航位置写上导航名称。
3、其它位置稍微表示下你要放置的东西(要放图片的,就写上“图片”两字,文字的,就写上“文字”两字)。
4、
我们只画草图,不需美化,位置确定即可。
(提醒学生使用在线课堂寻求帮助,打开布局任务)
说明:最快的同学
+3分,创意最好的同学+3分,规定时间内
全部完成的小组,每组+5分。
任务中教师要做的:
1、
巡视,引导学生在脑子里形成主题和导航
2、
提醒同学可以通过老师、同学、教学网站三种方式获得帮助
3、
请一位同学在黑板上画出布局图,老师在边上帮助
请优秀同学,把自己布局设计到黑白板上。也加分
(设计意图:使学生明确自己目标,最快速度画出自己布局)
师:很多同学画好了,在规定时间完成的同学我们都给小组加5分
(设计意图:一、提高布局效率,二、加强竞争,提高学期兴趣。)
师:很多同学画的真漂亮(在幻灯机上展示学生布局,进行评价,主要从网页结构出发,提出建议)(没有幻灯机就用相机,接电脑直接展示)
(对黑板上的学生作品重点评价:布局
要素美观)
(设计意图:对学生布局进行纠正)
三、表格
师:在前面,我们在纸上设计好了布局,最重要的一步,就是要在网页编辑软件FrontPage的编辑区域表示出来,在电脑上用来表示布局的就是我们常见的“表格”。
师:我们来看下这个网站(输入网址,打开示例网页,选择编辑),这个虚线就是表格,我们网页都是用表格控制图片文字的位置,图片大的就给大的单元格,图片小的,就给小的单元格。只要在格子内,我们就能很好的控制位置了。
(设计意图:使学生了解表格在网页布局中的作用)
师:那表格插入,到底需要几行几列呢 我们来看这些优秀的布局,那怎么在FrontPage中表示出来啊 也就是说,怎么把它变成表格呢
师:一般来说,我们的表格行数或列数都是以导航为标准,导航的个数决定行数或列数(教师通过电子教鞭画线演示)
(设计意图:使学生清楚的理解从图纸到表格的转换)
师:好,我们来数一下 几行几列 对了,这样我们就能很清楚的知道,在frontpage中插入表格的行数和列数了。(教师演示右键打开任务二的index.htm,进行插入表格编辑)
提问:上面的这些格子怎么办 +分
生:合并
师:那你们能把图纸变成表格了吗 不然也跟老师这样,在图纸上面画画。请同学们完成任务二——表格任务!(点击学习网站的表格任务,不明白的,还可以有帮助哦)
要求:
1、
在自己的布局设计图上画出表格
2、
依照布局设计图画出的表格确定为几行几列的表格
3、
对标题栏等大块的布局进行单元格合并,有必要时可以单元格拆分
4、
用文字表示出标题和导航的位置
5、
保持,通过预览查看效果
(设计意图:使同学理解从布局到表格的演变,学习表格插入知识点)
四、作品点评
1、展示优秀作品,对学生进行鼓励,同时该给建议的给建议
2、评出最佳小组
评比标准:1、每次提问回答+1分
2、规定时间内完成任务一个小组+5分
3、上台演示+3分
五、总结
【教学设计说明】
《用表格为网页布局》是网页制作单元的第二课,本单元从十六课开始,一切的教学知识点都是围绕布局而展开的,所以本课,可以说是网站建设学习的基础。布局是网页制作的第一步,在本节教材中,先提出了规划布局,再进行表格定位,最后进行定位调整。这要求教学过程中需要对学生明确:对于网页中对象多而杂的情况,必需先规划、再定位,而用表格是一种很实用而有效的途径。
本课,我以学生的兴趣话题最美是我家引入,通过跟学生的交流,引出应该建立一个最美衢州网站供大家分享与了解衢州的想法。在进行布局前,先让学生确定自己的主题,通过分析学生熟悉的网站,了解常见的网站主页构成图的基本类型,居中型、半包围型、主题突出型、导航型。本节课是学生初学网页制作的相关知识,为了让了学生对主页构成图有快速直观的认识,先让学生在纸上画出自己的布局图,与同桌间进行相互交流,确定自己的布局是否与网站的主题相适应。在图纸完成布局之后,通过教师演示的方式,把图纸转变成表格的方法传授给同学,同时指出表格对布局的重要性,没有表格,我们的布局将不能成功,最后要求自己动手,将纸上的布局转换成FrontPage的表格。在表格的修改方面,通过引导学生迁移word中表格制作的知识来完成。本节课还通过引导学生间的相互评价,使学生在互动中互帮互学,感受成功、进步和发展的快乐。
五、教学反思:
项目
具体内容
原因(理由)
成功之举
任务设置/层层递进
以任务驱动来引领整节课
不足之处
小组合作不到位
学生差异大,不积极。
整改措施
加强小组合作
要有更多的激励措施。
我的困惑
如何体现差异化学习,实施起来难度大。