注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

13zjsj的博客

 
 
 

日志

 
 

【转载】《设计网站首页》教学设计  

2013-12-15 10:54:48|  分类: 教育 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自yinqiquan@126《《设计网站首页》教学设计》
《设计网站首页》教学设计

  一、教学设计部分

 

?教学内容分析

 

  R本课的主要内容与地位

 

  本节课学习的内容是设计网站的首页。首页如同一本书的封面、一个戏曲人物的脸谱,应该能够反映出整个网站的整体风格和特色,让访问者通过网站首页就能对整个网站有所了解。所以,网站首页的设计是整个网站设计的重点。

 

  R本课与前后内容的关系

 

  本课是在第一课的规划设计基础之上进行的学习活动。首页的设计一定要按照规划进行。本节中涉及的知识点(编辑网页:文字输入和编辑、插入图片、插入水平线;保存、预览和新建网页)是网站制作过程中需要反复用到的,所以学生应熟练掌握。

 

?教学目标分析

 

 

  R知识目标/技能目标

 

  ·知识目标

 

  ⑴认识网页的工作原理;

 

  ⑵了解网页编辑的一般过程。

 

  ·技能目标

 

  ⑴熟练掌握在网页中输入文字、插入图片、插入水平线的操作;

 

  ⑵掌握网页的新建、预览和保存。

 

  R过程与方法目标

 

  ⑴对网页操作中基本概念(首页、网页、网页标题等)有清晰的认识;

 

  ⑵在操作中体会网页中图文混排遇到的困难,探索解决之道,为下一节课──用表格布局网页的学习埋下伏笔。

 

  R情感态度与价值观目标

 

  感受身边版面设计的素材:广告、报刊、课本,学以致用,将其用于网页设计中。

 

  R本课的重难点

 

  重点:插入图片和水平线。

 

  难点:图片和水平线属性的设置、嵌入式文件的保存。

 

  R本课的课时分配建议

 

  1课时

 

?教学策略设计建议

 

  R教法建议

 

  FrontPage与学生之前学习的WordExcel同属微软的Office家庭软件,在操作上有许多相同或相似之处,所以在教学过程中,教师应鼓励学生对照Word中的操作完成文字的输入与编辑、插入与编辑图片等操作;采用分组设置、对比效果的形式探究“水平线属性”对话框中各参数的含义,从而加深学生对水平线的理解;在网页保存环节中,嵌入式文件的保存是学生从来没有接触过的知识点,教师应安排学生将不同的网页素材保存在站点中的不同文件夹中,以此达到强化的目的;组织学生进行网页预览时,提醒学生注意站点文件夹中文件的变化和HTML窗口中代码的变化;讲解新建网页时,可以让学生尝试使用其它网页格式新建网页,拓展学生网页设计的思路。

 

  R学法建议

 

  对照以前学过的Word中的操作,总结FrontPage与其在操作上的不同,大胆尝试以不同的方式和途径完成老师交给的任务。

 

?教学资源与环境建议

 

  R本课教学资源索引

 

  教师应为学生提供足够多的各种格式、各种大小的图片素材。

 

  R教学环境准备建议

 

?教学评价建议

 

 

  R自评、互评、师评要注意的问题

 

  学生在设计网站首页时是否能对照Word完成相似的操作,是否能对新网页中的素材进行灵活的设置。

 

?教学过程参考案例

 

 

  第一阶段:导入新课,明确学习目标

教学环节

教师活动

学生活动

设计理念

导入新课

播放《说唱脸谱》音乐。

 

师:脸谱能准确反映出人物的性格,一个网站的“脸”是什么?

 

师:我们如何给我们的网站设计脸谱呢?这就是本节课我们要学习的内容──设计网站首页(出示课件)。

学生讨论答案──网站首页。

 

 

结合第一节课的规划,讨论如何设计首页。

通过脸谱联想到首页,激发学生学习网页设计的热情。

 

  第二阶段:范例精讲,学生自主探究,完成范例

教学环节

教师活动

学生活动

设计理念

学习与探究

任务一:输入文字

 

出示网页输入文字后的效果。

 

任务二:插入图片

 

出示插入图片后的效果,并提示图片存放位置。

 

要求学生分别使用控制柄和设置图片属性的方法调整图片大小。

 

任务三:插入水平线

 

根据教材提示,使用默认值插入水平线,然后分组修改“水平线属性”对话框各参数。

 

将前面输入的“=”组成的线替换为水平线。

 

任务四:保存网页

 

出示任务,由学生探索嵌入式文件保存的技巧。

 

任务五:预览网页

 

分组尝试两种预览网页的方法,并作比较。

 

任务六:添加新网页

 

根据教材提示为网站添加新网页。

对比老师出示网页效果进行文字的输入和编辑,比较与Word中操作的异同。

 

  

 

根据样例插入相应图片。

 

  

 

尝试操作并比较说明二者的区别。

 

 

分组实验,填写表1-2-1。

 

  

 

操作并体验二者在表现效果上的差异。

 

  

 

预览网页。

 

  

 

  

 

完成操作,并探索新建网页的其它方法。比较它们的优缺点。

前两个任务与Word操作大同小异,让学生通过对比强化记忆。

 

  

 

  

 

  

 

  

 

通过学生自己实践理解水平线对话框的设为方法。

 

  

 

  

 

网页制作中的学用操作,应熟练掌握。

 

  第三阶段:知识、情感拓展

教学

环节

教师活动

学生活动

设计理念

知识与情感

师:请大家回想一下,你从小到现在,你的妈妈给你洗了多少次脚?你为她洗过多少次呢?

 

师:如果还没有做,就从今天开始吧!

 

请同学们课下完成体验任务,根据自己的感受设计网页Feeling1htm

生:记不清。

 

生:还没有。

 

放学后完成这一体验活动,并将感受以网页的形式表达出来。

让学生通过这一活动体验感受父母对自己的爱。能够以网页的形式表达自己的感受。

 

  第四阶段:综合实践,巩固与提高,自由创作,迁移运用

教学环节

教师活动

学生活动

设计理念

实践与创新

师:本节课的学习内容基本结束,但我们探索的路还有很长,请大家完成二级网页Parentshtm的设计。

 

教师巡视学生制作的情况,并进行指导。

 

师:预览网页,调整浏览器窗口,你能发现网页的变化吗?怎样才解决这个问题呢?

根据图1-1-6b)设计网页。

 

 

操作并观察片面的变化。

在学习与探究基础上进行自主的网页创作。

 

设疑,为下一节课“网页中表格”作知识铺垫。

 

同时,制作的二级网页也是为第五课准备超链接的网页素材。

 

  第五阶段:教学总结,设疑激趣,为下一节课作好铺垫

教学

环节

教师活动

学生活动

设计理念

课堂小结

课堂小结本节课的学习内容。

 

师:请同学们通过浏览器预览自己刚刚制作的网页,然后任意改变浏览器窗口的大小,看看网页中已经排好的版面是不是发生了变化?有防止这种现象的发生的办法吗?

 

预览网页,观察版面的变化,思考解决的方法。

 

承上启下,激发学生进一步学习网页制作的兴趣。

 

 

?教学反思

 

 

  本节课的知识点与之前学过的Word有很多相同或相似之处,所以在教学过程中尽量把学习知识的过程交给学生,由他们通过自己的实验和比对,掌握相应知识的要点和操作方法。并在本节课结束前设疑,为下一节课的学习作好准备。

  评论这张
 
阅读(23)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017