内容正文:
《网页设计与制作(Dreamweaver CC)》教案
课 题
12.3 实战演练
课 型
理论
课 时
2
授课班级
授课时间
授课教师
教材分析
该章节主要介绍了jQuery UI小部件的插入方法及其作用,包括滑块、按钮及按钮组、复选框按钮组及单选按钮组等常用小部件的详细操作步骤和属性设置。这一章节在《网页设计与制作(Dreamweaver CC)》教材中占据着重要的地位,它是学生掌握网页交互设计技能的关键一环。通过本章的学习,学生能够将所学的理论知识转化为实践能力,提升网页设计的交互性和用户体验。同时,该章节也为后续的网页高级开发和前端框架学习提供了必要的基础知识和实践经验,对于学生的全面发展和提高具有重要的促进作用。
学情分析
学生在学习该节内容前,已经对jQuery有了初步的了解,并掌握了网页设计与制作的基本技能。然而,对于jQuery UI小部件的插入方法及其作用,学生可能还缺乏深入的理解和实践经验。该章节的知识点,包括滑块、按钮及按钮组、复选框按钮组及单选按钮组等jQuery UI小部件的插入和编辑,是学生掌握网页交互设计的重要一环。学好这一章节,不仅能够提升学生的网页设计能力和用户体验,还能够为后续的网页高级开发和前端框架学习打下坚实的基础。因此,该章节对于学生学好这门课程具有重要的促进作用。
学习目标
知识目标:
掌握jQuery UI小部件的插入方法。
了解jQuery UI小部件(滑块、按钮及按钮组、复选框按钮组及单选按钮组等)的作用。
技能目标:
能够根据网页设计需求选择合适的jQuery UI小部件。
能够正确编辑jQuery UI小部件的属性以实现所需功能。
能够综合运用所学知识制作具有jQuery UI小部件的网页。
情感目标:
培养学生的创新意识和实践能力,为实现网络强国的梦想贡献自己的力量。
学习重难点
重点:
1.jQuery UI小部件的插入方法及其作用。
2.实战演练中jQuery UI小部件的应用。
3.网页布局和格式化的技巧。
难点:
1.确保jQuery UI小部件在网页中的正确运行和兼容性。
2.实战演练中,如何根据网站需求选择合适的jQuery UI小部件并进行有效的布局和美化。
教学方法
案例分析、讲授法、小组讨论法
课前准备
1.查找相应网站资料,课堂演示使用。
2.学生课前预习。
教学媒体
电子课件、多媒体视频
教学过程
教学环节
教师活动设计
学生活动设计
设计意图
活动一:
创设情境
生成问题
课程导入:
【知识点复习】
· “jQuery UI”小部件的插入方法及其作用。
· 包括括“jQuery UI”折叠面板、选项 卡面板、进度条、对话框、滑块、验证单选按钮组和复选框
12.3.1 实战效果
2.引导学生带着问题去课本寻找答案,明确本节课的学习内容。
3.展示本讲学习目标。
1. 问题导入
2. 接收并查看本节课堂任务书。
3. 想一想
4. 了解学习目标,带着目标进行学习。
5. 考一考
1.以提问的方式导入课程,让学生带着问题有针对性的进行学习。
2.通过任务实施,调动学生积极性。
活动二:
调动思维
探究新知
【想一想】
完成以上网站制作需要考虑哪些因素?
12.3.2制作要求
1)页面采用选项卡进行菜单切换
2)用表格进行基本布局
3)用CSS进行格式化
2.引导学生带着问题去课本寻找答案,明确本节课的学习内容。
3.展示本讲学习目标。
1. 教师讲解与演示
2. 知识点复习
3. 注意事项
1. 了解学生现有知识储备。
2. 巩固练习。
活动三:
调动思维
探究新知
12.3.3 制作提示
· 正确引用jQuery和jQuery UI库
· 注意jQuery UI小部件的初始化
· 兼容性问题
· 性能优化
· 备份和版本控制
【辩一辩】
在网页设计中,jQuery UI小部件的美化功能是否应该优先于其功能性?
1. 想一想
2. 问题思考
3. 归纳总结
4. 辩一辩
1. 引导学生主动思考,发散思维,参与课堂。
2. 培养学生发现问题,解决问题的能力。
3. 了解相关知识。
活动四:
巩固练习
素质提升
【练一练】
1) 什么是jQuery UI滑块(Slider)控件?
2) 在Dreamweaver中保存含有“jQuery UI”小部件的页面时,为什么会弹出“复制相关文件”对话框?
【做一做】
请参照实战效果图,根据制作要求,凭借制作注意事项提示,制作“jQuery基础课程学习网站”
5. 教师讲解
6. 练一练
7. 做一做
知识检测与巩固
课堂小结
作业布置
课堂小结
作业布置
复习本节课内容,预习下节课内容。
板书设计
实战效果
制作要求
制作提示
教学反思
原创精品资源学科网独家享有版权,侵权必究!
学科网(北京)股份有限公司
$$