网页基础与制作 9

第1章PHP开篇PAGE16《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第11章综合项目实战：摄影·开课吧计划课时7课时教学引入在深入学习了网页的相关知识后，相信读者已经熟练掌握了HTML、CSS和JavaScript，能够为网页进行排版和添加动画效果。为了及时巩固所学的知识，本项目将运用前面所学的知识内容，搭建“摄影·开课吧”的部分页面。教学目标使学生熟悉网站设计规划的基本流程，能够描述网站设计规划的基本流程使学生熟悉项目的开发流程，能够归纳总结项目的开发步骤使学生掌握首页的搭建，能够独立完成首页的代码编写使学生掌握注册页的搭建，能够独立完成注册页的代码编写使学生掌握个人中心页的搭建，能够独立完成个人中心页的代码编写使学生掌握视频播放页的搭建，能够独立完成视频播放页的代码编写教学重点首页制作注册页制作个人中心页制作视频播放页制作教学难点首页制作个人中心页制作视频播放页制作教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（确定网站主题、规划网站结构、收集素材、设计网页效果图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在网站建设之前，需要对网站进行一个整体的设计规划。本节课将从确定网站主题、规划网站结构、收集素材、制作网页效果图四个方面对“摄影·开课吧”网站做详细的设计规划。三、新课讲解知识点1-确定网站主题教师通过PPT的方式讲解确定网站主题。网站定位网站色调网站风格知识点2-规划网站结构教师通过PPT的方式讲解规划网站结构。为什么规划网站结构“摄影·开课吧”网站框架首页原型图知识点3-收集素材教师通过PPT的方式讲解收集素材。文本素材图片素材知识点4-设计网页效果图教师通过PPT的方式讲解设计网页效果图。首页注册页个人中心页视频播放页四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（首页效果图分析、首页制作）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在上面的小节中，完成了制作网页所需的相关准备工作，本节课将带领大家分析效果图，并完成首页的制作。三、新课讲解知识点1-首页效果图分析教师通过PPT的方式讲解首页效果图分析。HTML结构分析CSS样式分析JavaScript特效分析知识点2-首页制作教师通过PPT结合实际操作的方式讲解首页制作。页面布局定义公共样式制作首页的头部和导航制作banner制作主体内容制作底部版权信息部分四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（注册页效果图分析、注册页制作）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课注册页的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。本节课将讲解注册页的制作方法。三、新课讲解知识点1-注册页效果图分析教师通过PPT的方式讲解注册页效果图分析。注册页和首页的导航栏对比注册页内容结构知识点2-注册页制作教师通过PPT结合实际操作的方式讲解注册页制作。复制文件修改引入的样式表修改内容区域的HTML代码编写样式表四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机：（考察知识点为：首页制作、注册页制作）形式：单独完成具体要求：完成首页的制作。完成注册页的制作。第五课时（个人中心页效果图分析、个人中心页制作）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课个人中心页作为用户信息的汇总，集结了所有与个人信息相关的管理模块，各管理模块以单元的形式分块显示在一个页面上。在个人中心页上，用户可以清楚知晓自身所有信息的概况，并且进行相关管理与操作。本节课将讲解个人中心页的制作方法。三、新课讲解知识点1-个人中心页效果图分析教师通过PPT的方式讲解个人中心页效果图分析。用户信息用户管理模块导航内容详情知识点2-个人中心页制作教师通过PPT结合实际操作的方式讲解个人中心页制作。复制文件修改引入的样式表修改内容区域的HTML代码编写样式表四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第六课时（视频播放页效果图分析、视频播放页制作）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课视频播放页面主要用于播放网站中的视频，以及展示视频播放的列表。本节课将讲解视频播放页的制作方法。三、新课讲解知识点1-视频播放页效果图分析教师通过PPT的方式讲解视频播放页效果图分析。视频播放区域视频列表评论信息活动知识点2-视频播放页制作教师通过PPT结合实际操作的方式讲解视频播放页制作。复制文件修改引入的样式表修改内容区域的HTML代码编写样式表四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第七课时（上机练习）