响应式Web开发项目化教程（HTML5+CSS3）-教学大纲、授课计划

《响应式Web开发项目化教程（HTML5+CSS3）》教学大纲课程信息课程名称：响应式Web开发项目化教程（HTML5+CSS3）课程类别：素质选修课/专业基础课课程性质：选修/必修计划学时：64计划学分：4先修课程：无选用教材：《响应式Web开发项目化教程（HTML5+CSS3）》,孙晓娟、赵东明、冯颖主编，2020年，电子工业出版社。适用专业：本课程适用面广，既可作为高职院校、培训机构的Web前端开发课程，也可作为网页设计、网站开发、网页编程等课程。课程负责人：二、课程简介近年来，互联网在各个领域的普及，使Web前端开发技术的发展速度十分迅猛，而HTML5+CSS3更是己经成为Web前端开发技术的主流，从而使Web前端开发技术具备了更多新的功能特性。本课程从Web前端开发实际应用的角度出发，以企业实际项目为核心，由浅入深地讲解了HTML5、CSS3及响应式Web前端开发技术。本课程共10个项目，前9个项目从项目描述、前导知识、项目分析、项目实践、项目总结5个方面对各项目进行了系统的讲解，帮助学生快速理解并掌握各项目的重点知识，最后通过项目10的企业真实项目实战对响应式Web前端开发全过程进行梳理和讲解，全面提高学生分析问题、解决问题及动手操作的能力。本课程包含配套教学计划、教案、教学PPT、教学案例、源代码、课后习题等资源，学生可登录华信教育资源网(）注册后免费下载。三、课程教学要求序号专业毕业要求课程教学要求关联程度1工程知识HTML5、CSS3及响应式Web前端开发技术。L2问题分析近年来，互联网在各个领域的普及，使Web前端开发技术的发展速度十分迅猛，而HTML5+CSS3更是己经成为Web前端开发技术的主流，从而使Web前端开发技术具备了更多新的功能特性。H3设计/开发解决方案掌握HTMLDOMVideo对象和HTMLDOMAudio对象的使用；掌握基本的响应式编程。H4研究L5使用现代工具M6工程与社会学会将相应技术应用于实际生产和社会服务中，为社会做出贡献。L7环境和可持续发展L8职业规范L9个人和团队学会个人发展和团队合作，提高个人和团队的综合素质。H10沟通学会进行有效的沟通和表达，与客户、同事和上级保持良好的沟通和协作。M11项目管理L12终身学习学会进行终身学习和职业发展规划，不断拓展职业领域和发展空间。H注：“课程教学要求”栏中内容为针对该课程适用专业的专业毕业要求与相关教学要求的具体描述。“关联程度”栏中字母表示二者关联程度。关联程度按高关联、中关联、低关联三档分别表示为“H”“M”或“L”。“课程教学要求”及“关联程度”中的空白栏表示该课程与所对应的专业毕业要求条目不相关。四、课程教学内容章节名称主要内容重难点关键词学时类型1制作HBuiler百度页面HTML5的基本结构文本控制元素图像控制元素超链接元素列表元素结构元素分组元素内容交换元素了解HTML5基本概念；掌握HTML5的文本控制元素、图像控制元素以及超链接元素等。8理论+实操2制作化妆品展示列表页面CSS基础知识CSS基础选择器CSS3新增选择器的使用方法CSS的层叠样式、继承性和优先级了解CSS基本概念和作用；掌握CSS语法和样式；掌握CSS的基础选择器、伪元素选择器和结构化伪类选择器；掌握CSS的层叠性、继承性以及优先级。8理论+实操3制作电商主播排行榜页面盒模型的概念盒模型的相关属性、背景属性和渐变属性了解盒模型概念和作用；掌握盒子模型相关属性、背景属性和渐变属性。6理论+实操4制作家装行业产品展示页面CSS3变形属性CSS3动画属性掌握CSS3中的形属性；CSS3中的动画属性。4理论+实操5制作旅游网站的导航栏和banner元素的浮动属性float元素的清除浮动属性clear元素的位置定位属性position元素的类型转换理解元素的浮动属性；学会为元素设置浮动样式；掌握清除浮动的方法；学会为元素设置位置定位；学会转换元素类型的方法。6理论+实操6制作信息注册页面表单的概述表单元素及属性表单检验熟悉表单控件的类型和使用方法；掌握使用CSS伪类进行特殊的样式化的方法。4理论+实操7制作视频播放页面多媒体的格式支持视频和音频的浏览器嵌入视频HTMLDOMVideo对象嵌入音频HTMLDOMAudio对象视频、音频中的source元素了解HTML5支持的视频和音频格式；掌握HTML5中视频和音频的相关属性。8理论+实操8制作垃圾分类页面视口媒体查询百分比布局掌握媒体查询和百分比布局的作用和使用方法；理解二者在响应式设计中的应用原理4理论+实操9制作个人信息页面栅格系统弹性盒布局掌握弹性盒布局中各个属性的作用和使用方法；理解栅格系统和弹性盒布局在响应式设计中的应用。4理论+实操10制作物流公司响应式网站项目描述页面结构搭建顶部通栏导航栏轮播图关于我们模块我们的优势模块我们的服务模块运输物流模块最新资讯模块版尾项目总结理解响应式网页的原理；能够掌握媒体查询和弹性盒布局的应用。12实操五、考核要求及成绩评定序号成绩类别考核方式考核要求权重（%）备注1期末成绩期末考试大作业50百分制，60分为及格2平时成绩劳动实践9次40优、良、中、及格、不及格3平时表现出勤情况10两次未参加课程则无法获得学分注：此表中内容为该课程的全部考核方式及其相关信息。六、学生学习建议学习方法建议依据专业教学标准，结合岗位技能职业标准，通过案例展开学习，将每个项目分成多个任务，系统化地学习。进行练习和实践，提高自己的技能和应用能力，加深对知识的理解和记忆。通过师生之间的互动和合作，在自己“做”的实践中，使学生习得实践技能，掌握所学知识。学生课外阅读参考资料《响应式Web开发项目化教程（HTML5+CSS3）》,孙晓娟、赵东明、冯颖主编，2020年，电子工业出版社。七、课程改革与建设本课程在系统介绍理论知识的同时，还以“项目实践”“项目描述”等栏目丰富内容。本课程以Web前端开发工程师岗位需求为目标选取课程内容，采用以项目为导向和实践一体化的学习领域课程模式，以Web前端开发工程师岗位真实工作任务为载体，以具体的产品为载体内涵，以Web前端开发工程师职业资格为课程标准的依据，强调学生的主体作用，在基于职业学习情境中，通过师生之间的互动和合作，在自己“做”的实践中，使学生习得实践技能，掌握所学知识。平时对学生的考核内容包括出勤情况、学生的劳动实践、课堂讨论等方面，占期末总评的50%。期末考试成绩占期末总评的50%。制订人签字：教研室主任签字：院部负责人签字：修订时间：年月日响应式Web开发项目化教程（HTML5+CSS3）（20xx～20xx学年第x学期）开课学院开课专业讲授学时32课程名称响应式Web开发项目化教程（HTML5+CSS3）授课教师实践/实验学时32授课年级授课班级总学时64使用教材《响应式Web开发项目化教程（HTML5+CSS3）》参考书目《响应式Web开发项目化教程（HTML5+CSS3）》校历周次授课内容分章节题目第1周项目一制作HBuiler百度页面（4学时）前导知识：初始HTML5、HTML5基础、文本控制元素等（3学时）项目分析：页面结构分析、样式分析（1学时）第2周项目一制作HBuiler百度页面（4学时）项目实践：制作页面结构、定义CSS样式（3学时）项目总结（1学时）第3周项目二制作化妆品展示列表页面（4学时）前导知识：初始CSS、引入CSS样式与CSS语法格式、CSS选择器等（4学时）第4周项目二制作化妆品展示列表页面（4学时）项目分析：页面结构分析、样式分析（1学时）项目实践：制作页面结构、定义CSS样式（2学时）项目总结（1学时）第5周项目三制作电商主播排行榜页面（4学时）前导知识：初始盒模型、边框属性、边距属性等（3学时）项目分析：页面结构分析、样式分析（1学时）第6周项目三制作电商主播排行榜页面（2学时）项目实践：制作页面结构、定义CSS样式（1学时）项目总结（1学时）项目四制作家装行业产品展示页面（2学时）前导知识：CSS3动画属性、CSS3变形属性（1学时）项目分析：页面结构分析、样式分析（1学时）第7周项目四制作家装行业产品展示页面（2学时）项目实践：制作页面结构、定义CSS样式（1学时）项目总结（1学时）项目五制作旅游网站的导航栏和banner（2学时）前导知识：元素的浮动属性float、元素的清除浮动属性clear等（2学时）第8周项目五制作旅游网站的导航栏和banner（4学时）前导知识：元素的浮动属性float、元素的清除浮动属性clear等（2学时）项目分析：页面结构分析、样式分析（1学时）项目实践：制作页面结构、定义CSS样式（1学时）第9周项目六制作信息注册页面（4学时）前导知识：表单概述、表单元素及属性、表单校验（2学时）项目分析：页面结构分析、样式分析（1学时）项目实践：制作页面结构、定义CSS样式（1学时）第10周项目七制作视频播放页面（4学时）前导知识：多媒体格式、支持视频和音频的浏览、嵌入视频等（4学时）第11周项目七制作视频播放页面（4学时）前导知识：嵌入音频、HTMLDOMVideo对象、HTMLDOMAudio对象等（2学时）项目分析：页面结构分析、样式分析（1学时）项目实践：制作页面结构、定义CSS样式（1学时）第12周项目八制作垃圾分类页面（4学时）前导知识：视口、媒体查询、百分比布局（2学时）项目分析：页面结构分析、样式分析（1学时）项目实践：制作页面结构、定义CSS样式（1学时）第13周项目九制作个人信息页面（4学时）前导知识：栅格系统、弹性盒布局（2学时）项目分析：页面结构分析、样式分析（1学