62680-HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版）-教学大纲

《HTML5+CSS3Web前端开发技术（第2版）》课程教学大纲学分：4学分学时：学时64（其中：理论学时32实践学时：32）先修课程：图形图像处理、程序设计基础、Internet应用基础后续课程：Web前端技术(JavaScript)适用专业：计算机类相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3Web前端开发技术》是面向计算机相关专业的一门专业核心课，该课程的内容适应Web前端开发工作岗位群的实际要求。课程融入“1+X”Web前端开发技术技能等级证书的相关内容，对接互联网+大学生创新创业大赛，秉承“以赛促赛，赛证融合、以岗促赛，岗证融合、以创促课，专创融合”的思想，整合专业教育教学资源和内容，构建基于专业知识的模块化课程内容。通过本课程的学习，学生可以掌握网页设计领域核心知识和技能，了解静态网页工作原理、静态网页设计、静态网站构建和发布等内容。本课程是一门基于真实项目的课程，具有较强的职业性、实践性和技术性，学生在学习过程中既可以掌握与行业发展紧密结合的实用技能与知识，在操作实践中提升实战能力，同时又培养学生创新创造、团队协作、与人沟通的职业素质及岗位适应能力，对学生职业能力培养和职业素质养成起到支撑和促进作用，为职业能力的培养打下坚实的基础。二、教学条件要求操作系统：Windows7开发工具：HbuilderX三、课程的主要内容及基本要求学习单元一工作任务搭建项目开发环境学时2任务目标素质目标（1）培养学生树立远大的职业理想，以及为祖国信息技术事业做贡献的决心。（2）培养学生自主学习、终身学习的意识。知识目标（1）了解Web的相关概念。（2）了解当前主流Web浏览器与常用Web开发工具。（3）了解HTML5的优势。技能目标（1）掌握HBuilderX、Chrome浏览器的安装与使用。（2）掌握在HBuilderX中进行Web项目搭建的流程。知识点了解掌握重点难点Web概述√主流Web浏览器√常用Web开发工具√Web标准√√HTML5的优势√学习单元二工作任务制作课程基础页面学时2任务目标素质目标（1）培养学生的创新精神和合作意识。（2）培养学生编程的规范意识和职业素养。知识目标（1）掌握HTML5基础语法。（2）掌握HTML5基础标签。（3）掌握语义化结构标签。技能目标（1）能够使用规范的HTML5结构编写代码。（2）能够使用HTML5标签定义网页元素。（3）能够熟练地使用HBuilderX编写简单的HTML5页面。知识点了解掌握重点难点HTML5基础语法√HTML5语义化结构标签√√√HTML5常用标签√√HTML5实体字符√HTML5超链接、框架标签√√HTML5元素分类√学习单元三工作任务制作课程播放页面学时6任务目标素质目标（1）培养学生的创新精神。（2）培养学生的职业素养和服务意识。知识目标（1）掌握无序列表、有序列表和定义列表的定义与特点。（2）掌握表格元素与表格的基础结构。（3）掌握HTML5媒体元素。35技能目标（1）熟练使用无序列表制作页面内容。（2）熟练使用表格元素制作页面内容。（3）熟练使用HTML5媒体元素在页面中嵌入音、视频内容。知识点了解掌握重点难点HTML5列表√√HTML5表格√√HTML5媒体元素√√学习单元四工作任务使用表单制作页面学时6任务目标素质目标（1）培养学生的劳动精神和工匠精神。（2）培养学生适应时代要求、主动获取新知识和新技能的意识。知识目标（1）了解表单元素的定义。（2）掌握语义化表单的制作。（3）了解HTML5属性初步验证表单的功能。51技能目标（1）掌握使用表单元素制作用户登录页面基础内容的方法。（2）掌握使用表单元素的属性实现简单的表单验证功能的方法。知识点了解掌握重点难点表单概述√表单发送方式√常用表单控件√√表单验证的作用√表单验证的方法√√学习单元五工作任务在项目中引入CSS学时6任务目标素质目标（1）培养学生的红色精神。（2）提升学生的思想道德素质并培养学生的社会主义核心价值观。知识目标（1）掌握CSS3的外部样式、内部样式与行内样式。（2）掌握CSS3的语法规则。（3）掌握CSS3的基础选择器、层次选择器、结构伪类选择器、属性选择器。技能目标（1）掌握使用CSS对文本内容进行美化的方法。（2）掌握使用基础选择器进行页面元素选择和查找的方法。（3）掌握使用高级选择器进行页面元素选择和查找的方法。知识点了解掌握重点难点CSS3概述√CSS3基础语法√√CSS3引入方式√CSS3基础选择器√√CSS3高级选择器√√CSS3选择器权重问题√学习单元六工作任务使用CSS3美化页面学时6任务目标素质目标（1）培养学生主动学习以及分析和解决问题的能力。（2）培养学生的职业素养和职业道德。知识目标（1）了解常用的文字样式。（2）掌握超链接的不同状态样式。（3）掌握列表的样式。（4）掌握背景颜色的样式。（5）掌握背景图片的样式。（6）理解背景渐变色样式。98技能目标使用CSS3样式进行常见页面样式的美化。知识点了解掌握重点难点文字样式√√文本样式√√超链接样式√√√列表样式√√背景样式√√背景渐变√学习单元七工作任务使用盒子模型布局页面学时6任务目标素质目标（1）培养学生团队合作和勇于探索的精神。（2）培养学生不断创新、精益求精的工匠精神。知识目标（1）了解CSS中盒子模型的结构与特点。（2）了解盒子模型的尺寸计算。（3）了解CSS中两种标准的盒子模型。技能目标（1）熟练使用盒子模型进行常规页面布局。（2）熟练使用盒子模型进行块状元素水平居中布局。（3）熟练地进行圆角边框的头像制作。（4）掌握通过边框阴影增加立体效果的方法。知识点了解掌握重点难点盒子模型结构√盒子模型的组成√√计算盒子模型的尺寸√√IE盒子模型√√使用Chrome调试工具检查盒子尺寸√边框圆角√使用border-radius属性制作特殊图形√盒子阴影√学习单元八工作任务使用CSS3浮动布局页面学时6任务目标素质目标（1）培养学生的团队合作精神。（2）培养学生主动学习的能力和独立思考、分析及解决问题的能力。知识目标（1）了解display属性的4种状态。（2）了解浮动的特点。（3）了解如何清除浮动。（4）了解浮动导致塌陷的解决方法及方法的优缺点。技能目标（1）熟练使用浮动的方式对元素进行水平两端布局或者水平排列布局。（2）熟练解决由浮动导致的结构塌陷问题。知识点了解掌握重点难点标准文档流√display属性√浮动√√√清除浮动√√学习单元九工作任务使用CSS3定位布局页面学时6任务目标素质目标（1）培养学生的团队合作精神。（2）培养学生分析问题、解决问题的能力。知识目标（1）了解使用position属性实现的4种定位方式的特点。（2）了解如何使用z-index属性调整定位元素的堆叠方式。技能目标（1）掌握常见元素重叠覆盖效果的实现。（2）掌握使用页面固定定位实现功能按钮的方法。知识点了解掌握重点难点定位概述√相对定位√√√绝对定位√√√固定定位√√黏性定位√√z-index√学习单元十工作任务利用CSS3动画美化页面学时6任务目标素质目标（1）培养学生精益求精的工匠精神。（2）培养学生独立思考的能力和岗位意识。知识目标（1）了解实现2D变形的属性transform。（2）了解实现过渡动画的属性transition。（3）理解通过animation属性实现网页动画的过程。（4）了解轮播图的概念。技能目标（1）熟练使用变形与过渡制作常见的鼠标交互特效。（2）掌握使用动画制作简单的循环特效的方法。知识点了解掌握重点难点变形√√过渡√√动画√√学习单元十一工作任务使用CSS3弹性盒子布局页面学时6任务目标素质目标（1）培养学生的创新意识。（2）培养学生的职业素养。（3）培养学生与本专业发展相适应的劳动素养。知识目标（1）了解弹性盒子的特点与优势。（2）掌握弹性盒子布局。技能目标（1）掌握使用弹性盒子布局替换浮动布局的方法。（2）熟练使用弹性盒子布局。知识点了解掌握重点难点弹性盒子√√弹性盒子容器属性√√√弹性盒子项目属性√√√学习单元十二工作任务使用CSS3媒体查询实现页面响应式布局学时6任务目标素质目标（1）培养学生的探究能力和终身学习的意识。（2）培养学生的适应能力和与时俱进的意识。知识目标（1）了解页面媒体查询的原理。（2）掌握CSS3媒体查询。（3）掌握CSS3的主要页面样式尺寸单位。技能目标掌握使用媒体查询的方式将PC端Web网页改造为同时适应移动端与PC端的响应式页面的方法。知识点了解掌握重点难点媒体查询与响应式布局√√媒体查询语法√√√媒体查询的引入方式√em与rem√四、学时分配章目理论实践合计搭建项目开发环境1学时1学时2学时制作课程基础页面1学时1学时2学时制作课程播放页面3学时3学时6学时使用表单制作页面3学时3学时6学时在项目中引入CSS3学时3学时6学时使用CSS3美化页面3学时3学时6学时使用盒子模型布局页面3学时3学时6学时使用CSS3浮动布局页面3学时3学时6学时使用CSS3定位布局页面3学时3学时6学时利用CSS3动画美化页面3学时3学时6学时使用CSS3弹性盒子布局页面3学时3学时6学时使用CSS3媒体查询实现页面响应式布局3学时3学时6学时合计32学时32学时64学时五、教学效果评价及方式本课程为考试课程，根据课程特点采用多阶段、节点化、多方式的评价方式。构建了素质、知识和能力考核相结合，过程性考核和终结性考核相结合，理论考核和实践考核相结合，校内评价和校外评价相结合的四个结合；知识、能力、素质、思政的四个维度、教师、学生、工程师的三个主体，课前、课中、课后的