第十二课 用表格为网页布局 教学设计
1教学目标
1、培养学生的环保意识。
2、通过设置学生为网页开发程序员角色,提高学生的学习兴趣。
3、通过玩游戏环节,使学生体验、了解网页布局的作用是排版。
4、通过知识讲解,使学生理解网页布局的类型及方法。
5、通过设置对比实验,让学生了解表格在网页制作中的作用是定位对象。
6、通过设置任务让学生掌握SharePoint2007中表格的操作。
7、通过课堂拓展任务,学生自主创作、思考,掌握嵌套表格的作用及操作。
2学情分析
~学生已经掌握使用Word、PowerPoint等软件制作多媒体作品的方法,对于网页制作有一定的借鉴作用。SharePoint Designer2007中的表格与Word和PowerPoint有类似的操作,对于表格操作的方法没有技术难点,表格的知识可以利用知识迁移来完成学习。
3重点难点
~重点:1、掌握网页布局的方法。 2、 SharePoint2007中表格的操作。 难点:1、网页布局的作用 2、表格在网页制作中的地位
4教学过程
活动1【导入】情境导入
(手在空中抓空气的动作)请同学们猜猜我手中有什么东西?(什么都没有,空气。。。)我给你们讲一个小故事,你再猜猜我手里有什么东西? 2007年2月份我在广东东莞的一家学校上了三天班,每天都要早上出门到城区街道上摆摊招生。早上出门都把脸洗的干干净净的,可是过了一个多小时后,用纸巾擦脸,你会发现纸巾上都是黑黑的一层。那我此时也在空中抓了一下,同学们猜猜我手上有什么?(空气、灰尘。。。)针对这个故事,谈谈你的想法。 今天我就请同学们做一次网页设计师,《以环境保护》为主题,设计一个网页的页面。
活动2【活动】网页表格布局
~2、游戏教学
教师:各位设计师,我先给大家玩一个游戏。 请大家先双击打开桌面上的《拼图游戏.swf》。我给大家准备了很多关于环境保护的图片资料,大家等下根据自己的想法,将这些图片放到你想放的位置。操作方法是将鼠标放在图片的左上角时,你就可拖动图片,松开鼠标,图片就停住。给你们2分钟的时间,完成拼图。
设计意图:通过设计游戏环节,让学生在不知不觉中完成网页布局的操作,能实现可视化布局效果,还能展示学生不同的布局方式与效果;增强课堂的趣味性。 (教师巡视全班,并找出学生设计的不同效果的布局图)
教师:请设计师们停住,我们一起来看看各位设计大师的作品。谁愿意分享你的作品?(展示2-3个不同类型效果)
设计意图:鼓励学生展示、表达自己的想法与成果,培训学生的自信。
教师:你为什么要这样设计?
学生:这样排比较好看,方便浏览、使用方便。
教师:刚才同学们展示了自己的成果并表述了自己的想法,那就是设计页面的目的是美观、简洁、方便使用。这就是这节课要学习的内容网页排版——布局。 设计意图:由学生总结网页布局的作用是排版,目的是使页面简洁、美观、方便使用。体现以学生为中心,教师为主导的教学思想。
教师:现在我们来一起学习一下常见的网页布局的类型及其效果(以此主题为例,展示四种不同的布局类型,使学生对网页布局有更加深刻的认识)。那是不是只有这四种类型呢?其实还有其他的类型,请看效果图。
活动总结:网页布局的作用:排版。但是网页没有特定的布局,只要达到界面简洁、美观、方便使用的效果即是好的布局。
任务一、在白纸上画出网页布局图 要求:1、按照你刚才拼图游戏中拼出的效果,画出布局图。 2、将标题、导航栏、网页等信息标注在布局图的相应位置,如图1布局图所示。 (学生动手画草图、老师选取几种草图拍照上传到QQ展示、并评价学生的布局,都能画出自己的效果图,并选取一个布局图,将其画在黑板上)。
设计意图:老师通过手机拍照并上传至QQ,体现了手机与QQ等生活工具在教学中的应用,还能引导学生学会将手机与QQ等生活工具用于学习。及时展现、反馈学生的作品,提高课堂资源的利用。
老师:设计师们,这是我们同学的一个布局草图,这个草图他是一个不规则的图形,看我怎么用魔法将他变成我们常见的图形(老师通过将学生的布局图添加几条辅助线,使其转变成常见的规则的几行几列表格)。
设计意图:将学生的作品当成课堂教学资源,更加有说服力。通过使用“魔法”一次,可以吸引学生的注意力,还能引起学生的思考。
教师:当我将这个布局图的添加几条线,不规则的图形变成了什么?如图2格布局图所示。
学生:表格。
设计意图:引出表格概念就比较自然、平稳。像数学题一样,可以通过添加辅助线的形式将不规则图形转变成规则图形,激发学生的创造性思维,让学生懂得学科之间是有关联的。
教师:你的布局图能够转换成几行几列呢?请同学们在布局图上画一画。
学生:老师,我们在Word、PowerPoint多媒体作品设计过程中,没有用到表格,那网站能不能不用表格?)
设计意图:这个问题是预设的,事先安排学生在适当的时候提出这个问题,引出课堂知识冲突,为下一环节做好铺垫。能吸引学生的注意与思考,及时调整学生的学习状态。
教师:这位设计师,你真棒,很会思考,为我们这位设计师鼓掌。
设计意图:通过及时夸赞学生的积极思考行为,引导、鼓励学生积极参与,敢于质疑。
活动3【练习】绘制表格
~3、实验教学
教师:这位大设计师,为了验证你的想法是不是正确的,我这里提供了一个实验,请你来验证一下。
教师:(打开实验链接,将网页bg1.htm打开)请你将这个页面中的文字和图片排列整齐。(学生试不出来效果,再打开bg2.htm)现在请你将图片和文字分别放到表格中,看看效果。
教师:大设计师,你得出了什么结论?
学生:用表格后,可以很方便的将文字与图片排列整齐。
教师:说的很好,表格的作用就是将网页中的文字、图片等素材对象进行定位。网页都是用表格来进行布局的,请看两个范例(展示网页的表格)。
设计意图:通过设计一个对比实验,突出表格在网页制作的中地位与作用。用实验验证学生的想法,让学生总结实验结论,培养学生的钻研、思考、解决问题的能力。
教师:(展示PPT)(布置任务二)(半屏控制学生屏幕并演示操作过程)插入表格之前,我为了编辑的方便,我们通常要先设置网页大小,(在菜单栏下找到“视图——网页大小”命令)在通常情况下,我们一般将网页大小设置成默认状态的“当前网页大小”。站点都打开了吗?都设置好了吗?
教师:好,接下来各位设计师在此页面下按照你的布局草图的行列数,插入表格,插入表格后将相应的文字信息填写到表格中,请看图3作品效果图所示。
设计意图:通过演示法讲解、回顾打开网站站点的技巧与方法、网页大小设置方法,快速进入任务二的学习中。
教师(2分钟后):各位设计师,几行几列的表格插入好的请举手举手。(环顾学生)若有不会的,请一个设计师演示。各位都会了吗?好继续完成任务,将文字信息填充至表格。
活动4【练习】表格的编辑与完善
~看教材完成自主学习
【表格的操作】表格的合并与拆分,请设计师演示如何合并与拆分单元格。 【调整表格大小】设计师回忆一下WORD中的表格操作,思考并完成将网页中的表格设置合适大小。
设计意图:关于表格的插入、拆分、合并单元格等操作已经在Word、PowerPoint设计多媒体作品时学过,学生可以凭已有的知识完成,也可以参照教材的步骤完成,培养学生的自学能力与意识。
【作品提交与展示】要求所有设计师保存提交作品,展示1-2个设计师作品,并做好评价。
设计意图:及时评价与反馈学生的作品,能够鼓励和督促学生认真完成作品的设计。
【课堂拓展练习】如图4课堂提高练习所示,在第二行调整导航栏这一行单元格列宽使他们平均 分布时,不影响第三列图片这一行?按照教材的阅读材料一提供的方法试一试。
设计意图:结合教材阅读材料,通过设计课堂拓展练习,能使学习有余力的学生在课堂上有充分发挥,培养其自学能力。
活动5【活动】课堂总结
~各位设计师,今天我们一起回顾一下今天所学的知识。课堂小结内容如图5所示。
