Web编程基础（HTML+CSS）项目实战教程 教案-模块7 网站首页的设计制作.docx

模块7网站首页的设置制作课程名称Web编程基础课 时2课时授课班级软件技术、计算机应用、移动开发专业授课地点一体化教室授课形式做学教一体教学单元模块7-1 DIV+CSS页面布局教学目标知识目标掌握DIV+CSS页面布局。能力目标能够熟练使用DIV+CSS进行页面布局。素质目标激发学生学习兴趣引导学生团队合作教学重点难 点及措施教学重难点：使用DIV+CSS进行页面布局。措施：通过上机操作加强学习和补充案例进行巩固。教学方法做学教一体任务驱动线上线下混合教学教学任务使用DIV+CSS进行页面布局。任务1:使 用 DIV+CSS教学环节教学内容教学学生活动新课 引入通过启发、提问、设问等教学方法，导入新知讲授思考 参与 讨论进行 页面 布局。新知 讲解首页整体布局分析设计1 .整体布局分析2 .样式重置3 .全局CSS的定义知识讲解案例操作演示讲授 边讲 边操 作认真 听讲 做好 笔记课堂实践学生做中学，教师巡视逐个指导，并监督、验收。集中问题集体讲解、评估讨论实训任务实施过程；给出参考的解决方案；考核学生训练结果。教师 巡视 单独 指导动手 实践， 做中学小结巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识 点进行回顾。1 . DIV+CSS进行页面布局2 .页面初始化3 .全局CSS样式定义通过网络教学平台预习新内容通过网络教学资源平台，预习整体设计开发。演示 归纳 讲解认真 听取 教师 总结 评价布置作业学习平台完成线上预习、讨论、过程性考核教学反思模块7网站首页的设置制作课程名称Web编程基础课 时2课时授课班级软件技术、计算机应用、移动开发专业授课地点一体化教室授课形式做学教一体教学单元模块7-2整体设计开发过程教学目标知识目标掌握DIV+CSS页面布局。掌握整体设计开发过程。能力目标能够熟练使用DIV+CSS进行页面布局。能够熟练整体设计开发过程。素质目标激发学生学习兴趣引导学生团队合作教学重点难 点及措施教学重难点：整体设计。措施：通过上机操作加强学习和补充案例进行巩固。教学方法做学教一体任务驱动线上线下混合教学教学任务整体设计开发任务 1:整 体设 计开 发过教学环节教学内容教学学生活动新课 引入通过启发、提问、设问等教学方法，导入新知讲授思考 参与 讨论程新知 讲解1 .头部的实现2 . Logo的实现3 .顶部导航的实现4 .登录注册的实现5 .中间主体内容的实现6 .底部页脚版权的实现知识讲解案例操作演示讲授认真 听讲 做好 笔记课堂实践学生做中学，教师巡视逐个指导，并监督、验收。集中问题集体讲解、评估讨论实训任务实施过程；给出参考的解决方案；考核学生训练结果。教师 巡视 单独 指导动手 实践， 做中学小结巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识 点进行回顾。通过网络教学平台预习新内容通过网络教学资源平台，预习整体设计开发。演示 归纳 讲解认真 听取 教师 总结 评价布置作业学习平台完成线上预习、讨论、过程性考核教学反思