响应式页面
——导航的制作
尊敬的各位评委：大家上午好！
非常荣幸能在这里和大家分享我的教学理念。我今天说课的题目是《响应式页面-导航的制作》，授课对象是计算机专业的学生。我将从教材分析、学情分析、教学目标及重难点、教法与学法、教学过程、教学反思六个方面来说说这节课。
【教材分析】
《网页制作》课程是中等职业学校计算机专业学生必修的一门课程。本课程采用的教材《HTML+CSS网页设计与布局从入门到精通》，教材的部分内容已经过时，WEB技术更新换代较快，为使学生了解更多的新技术，与WEB发展同步，引入了教材外的一些新知识点，以案例教学的方式讲授给学生听，本次说课的内容“响应式页面”是其中之一。
由于本案例的知识点、内容较多，所以分为8课时讲授，分别为导航、内容布局、底部、手机模拟器等，本次说课的内容是“响应式页面-导航的制作”（2课时）。
【学情分析】
1、 学生对英语单词特别反感，很少同学能主动去记。（每个单词都翻译给学生，并让学生做好
笔记）
2、 学生对网页的代码有进一步的认识，但不熟悉。（利用编辑器的智能提示功能）
3、 很多学生对网页都很感兴趣，毕竟和计算机专业相关，但欠缺独立思考能力，没有实际的网
页制作经验。（通过案例教学法，提出问题，一步步引导学生独立思考，培养学生解决实际问题的能力）
【教学目标及重难点】
根据以上对教材的分析处理，以及所教学生的特点，制作如下教学目标，确定重、难点。
1、教学目标
知识与技能
了解本案例的实践效果
掌握横向导航的制作
掌握横向导航的.响应式变化的制作
情感态度与价值观
培养健康、良好的审美观
在共同探究、合作学习过程中，培养学生的独立思考能力，增强学生的合作与探索精神
2、重难点
重点：横向导航、横向导航的响应式变化
难点：横向导航的响应式变化
【教法与学法】
1、教法
情景法：通过设计情景，引出课题，激发学生学习兴趣。
演示法：通过广播软件，让学生掌握响应式页面导航的制作过程。
巡回指导法：通过巡回指导，对学生存在的问题及时跟进、解答，排除学生学习的障碍。 分层教学法：让学习好的学生主动辅导学生一般的学生，从而提高学生解决问题的能力，培养独立思考与合作学习的能力。
2、学法
知识是通过学生自己动手、动脑，积极思考、主动探索获得的，在课堂教学过程中学生运用分析归纳学习、主动探究学习、交流合作学习等方法掌握操作技能，注重引导学生体会探索知识的过程，培养学习的主动性。
【教学过程】
下面我介绍一下我整个教学过程，主要分成以下五步：
第一步：创设情景、导入课题（5分钟）
问题的提出：目前中国智能手机用户已达到5亿，网页的制作不能只是台式电脑下的显示效果，同时也要兼顾手机。那一份页面是否也要做成台式版和手机版呢？不是，响应式页面能帮我们解决这个问题，一个页面兼顾各个场合。
然后利用广播教学方式，根据制作“响应式页面”的小情景（视频），向学生展示响应式页面的效果（培养学生健康良好的审美观），激发学生学习响应式页面制作的兴趣，从而引出本课内容“响应式页面-导航的制作”。
第二步：演示操作、学生做笔记（10分钟）
仍然利用广播教学方式，向学生展示如何制作横向导航，包括导航的布局、CSS样式（培养学生横向导航的制作知识和技能）。在每个新单词、新知识点停顿片刻，提醒学生做好笔记，并观察学生学习的动态。
第三步：学生操作、教师巡回指导（20分钟）
结束广播教学方式，提供视频、图片、文字等素材给学生，让学生自己动手上机练习横向导航的制作。
教师巡视课堂，对课程内容有疑问的学生给与解答，并主动修正学生敲打代码的不良习惯，
提醒学生容易犯错误的地方。积累问题较多的部分，以便下次演示时反馈问题。
第四步：反馈问题、演示操作、学生做笔记（10分钟）
开始广播教学，首先对第一次巡视时积累的问题进行反馈，让学生注意，避免错误。然后再演示操作如何制作横向导航的响应式变化（培养学生横向导航的响应式变化的制作知识和技能），提醒学生做好笔记，并观察学生学习的动态。
第五步：学生操作、教师巡回指导（20分钟）
结束广播教学，让代码有错误的学生改正代码，并上机练习横向导航的响应式变化的制作。 教师巡视课堂，继续对课程内容有疑问的学生给与解答，提醒学生容易犯错误的地方。积累问题较多的部分，以便课堂小结时演示时反馈问题。
第六步：共同探究、合作学习（10分钟）
学生的学习能力、水平参差不齐，一小部分学习能力好的能提前完成任务，在课堂的最后十几分钟，让这些学生主动帮助能力差的学生，共同完成任务（提高学生解决问题的能力，培养独立思考与合作学习的能力）。
第七步：课堂小结（5分钟）
教师小结、归纳所需知识与操作技能；分析个别学生完成不好的原因，提出解决方法；使知识系统化，培养学生归纳知识的能力。
【教学反思】
1. 设置学生感兴趣的任务、案例。
2. 部分以学生合作、探索的方式完成；教师在学生的操作过程中发现问题，并帮助学生解决问题。
3. 运用多种方式，引导学生对代码感兴趣，增强学生的学习信心。
【网站设计说课稿】相关文章：
网站规划说课稿精选04-22
Dreamweaver CS5 企业网站设计说课稿11-02
网站设计的总结11-01
网站规划及站点建立的说课稿03-29
网站设计的制作合同07-14
网站设计制作合同07-14
网站设计开题报告06-17
网站设计实习报告11-01
网站设计的开题报告07-23