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

《前端开发技术（第版）》HTML5+CSS3Web2课程教学大纲学分4学分学时学时64（其中理论学时32实践学时32）先修课程图形图像处理、程序设计基础、Internet应用基础后续课程Web前端技术OavaScript）适用专业计算机类相关专业开课部门计算机系

一、课程的性质与目标《HTML5+CSS3Web前端开发技术》是面向计算机相关专业的一门专业核心课，该课程的内容适应Web前端开发工作岗位群的实际要求课程融入“1+X”Web前端开发技术技能等级证书的相关内容，对接互联网+大学生创新创业大赛，秉承“以赛促赛，赛证融合、以岗促赛，岗证融合、以创促课，专创融合”的思想，整合专业教育教学资源和内容，构建基于专业知识的模块化课程内容通过本课程的学习，学生可以掌握网页设计领域核心知识和技能，了解静态网页工作原理、静态网页设计、静态网站构建和发布等内容本课程是一门基于真实项目的课程，具有较强的职业性、实践性和技术性，学生在学习过程中既可以掌握与行业发展紧密结合的实用技能与知识，在操作实践中提升实战能力，同时又培养学生创新创造、团队协作、与人沟通的职业素质及岗位适应能力，对学生职业能力培养和职业素质养成起到支撑和促进作用，为职业能力的培养打下坚实的基础

二、教学条件要求操作系统Windows7开发工具HbuilderX

三、课程的主要内容及基本要求学习单元一工作任务搭建项目开发环境学时2素质目标1培养学生树立远大的职业理想，以及为祖国信息技术事业做贡献的决心2培养学生自主学习、终身学习的意识知识目标任务目标1了解Web的相关概念2了解当前主流Web浏览器与常用Web开发工具3了解HTML5的优势技能目标1掌握HBuiklerX、Chrome浏览器的安装与使用2掌握在HBuilderX中进行Web项目搭建的流程知识点难点了解掌握重点Web概述V主流Web浏览器V常用Web开发工具VWeb标准V VHTML5的优势V学习单元二工作任务制作课程基础页面学时2素质目标1培养学生的创新精神和合作意识2培养学生编程的规范意识和职业素养知识目标1掌握HTML5基础语法任务目标2掌握HTML5基础标签3掌握语义化结构标签技能目标1能够使用规范的HTML5结构编写代码2能够使用HTML5标签定义网页元素3能够熟练地使用HBuilderX编写简单的HTML5页面知识点了解掌握重点难点HTML5基础语法VHTML5语义化结构标签VHTML5常用标签V VHTML5实体字符VHTML5超链接、框架标签V VHTML5元素分类V学习单元三工作任务制作课程播放页面学时6素质目标

（1）培养学生的创新精神

（2）培养学生的职业素养和服务意识知识目标

（1）掌握无序列表、有序列表和定义列表的定义与特点任务目标

（2）掌握表格元素与表格的基础结构

（3）掌握HTML5媒体元素35技能目标

（1）熟练使用无序列表制作页面内容

（2）熟练使用表格兀素制作页面内容

（3）熟练使用HTML5媒体元素在页面中嵌入音、视频内容知识点了解掌握重点难点HTML5列表V VHTML5表格VHTML5媒体元素V V学习单元四工作任务使用表单制作页面学时6素质目标

（1）培养学生的劳动精神和工匠精神

（2）培养学生适应时代要求、主动获取新知识和新技能的意识知识目标

（1）了解表单元素的定义任务目标

（2）掌握语义化表单的制作

（3）了解HTML5属性初步验证表单的功能51技能目标

（1）掌握使用表单元素制作用户登录页面基础内容的方法

（2）掌握使用表单元素的属性实现简单的表单验证功能的方法知识点重点了解掌握难点表单概述V表单发送方式VV V常用表单控件表单验证的作用VV V表单验证的方法学习单元五工作任务在项目中引入CSS学时6素质目标1培养学生的红色精神2提升学生的思想道德素质并培养学生的社会主义核心价值观知识目标1掌握CSS3的外部样式、内部样式与行内样式任务目标2掌握CSS3的语法规则3掌握CSS3的基础选择器、层次选择器、结构伪类选择器、属性选择器技能目标1掌握使用CSS对文本内容进行美化的方法2掌握使用基础选择器进行页面元素选择和查找的方法3掌握使用高级选择器进行页面元素选择和查找的方法知识点了解掌握重点难点CSS3概述CSS3基础语法V VCSS3引入方式CSS3基础选择器V VCSS3高级选择器VCSS3选择器权重问题V学习单元六工作任务使用CSS3美化页面学时6素质目标1培养学生主动学习以及分析和解决问题的能力2培养学生的职业素养和职业道德知识目标1了解常用的文字样式2掌握超链接的不同状态样式任务目标3掌握列表的样式4掌握背景颜色的样式5掌握背景图片的样式6理解背景渐变色样式98技能目标使用CSS3样式进行常见页面样式的美化知识点了解掌握重点难点V V文字样式V V文本样式V V超链接样式V V列表样式V V背景样式V背景渐变学习单元七工作任务使用盒子模型布局页面学时6素质目标

（1）培养学生团队合作和勇于探索的精神

（2）培养学生不断创新、精益求精的工匠精神知识目标

（1）了解CSS中盒子模型的结构与特点任务目标

（2）了解盒子模型的尺寸计算

（3）了解CSS中两种标准的盒子模型技能目标

（1）熟练使用盒子模型进行常规页面布局

（2）熟练使用盒子模型进行块状元素水平居中布局

（3）熟练地进行圆角边框的头像制作

（4）掌握通过边框阴影增加立体效果的方法知识点了解掌握重点难点盒子模型结构V盒子模型的组成V V计算盒子模型的尺寸IE盒子模型V V使用Chrome调试工具检查盒子V尺寸V边框圆角V使用border-radius属性制作特殊图形V盒子阴影学习单元八工作任务使用CSS3浮动布局页面学时6素质目标

（1）培养学生的团队合作精神

（2）培养学生主动学习的能力和独立思考、分析及解决问题的能力知识目标

（1）了解display属性的4种状态任务目标

（2）了解浮动的特点

（3）了解如何清除浮动

（4）了解浮动导致塌陷的解决方法及方法的优缺点技能目标

（5）熟练使用浮动的方式对元素进行水平两端布局或者水平排列布局

（6）熟练解决由浮动导致的结构塌陷问题知识点了解掌握重点难点标准文档流Vdisplay属性VV V V浮动V V清除浮动学习单元九工作任务使用CSS3定位布局页面学时6素质目标

（1）培养学生的团队合作精神

（2）培养学生分析问题、解决问题的能力知识目标

（1）了解使用position属性实现的4种定位方式的特点任务目标

（2）了解如何使用z-index属性调整定位元素的堆叠方式技能目标

（1）掌握常见元素重叠覆盖效果的实现

（2）掌握使用页面固定定位实现功能按钮的方法知识点了解掌握重点难点V定位概述V V V相对定位V V V绝对定位V V固定定位V V黏性定位z-index V学习单元十工作任务利用CSS3动画美化页面学时6素质目标

（1）培养学生精益求精的工匠精神

（2）培养学生独立思考的能力和岗位意识知识目标

（1）了解实现2D变形的属性transformo任务目标

（2）了解实现过渡动画的属性transitiono

（3）理解通过animation属性实现网页动画的过程

（4）了解轮播图的概念技能目标

（1）熟练使用变形与过渡制作常见的鼠标交互特效

（2）掌握使用动画制作简单的循环特效的方法知识点了解掌握重点难点变形V V过渡动画VV工作任务使用CSS3弹性盒子布局页面学时6素质目标

（1）培养学生的创新意识

（2）培养学生的职业素养

（3）培养学生与本专业发展相适应的劳动素养知识目标任务目标

（1）了解弹性盒子的特点与优势

（2）掌握弹性盒子布局技能目标

（1）掌握使用弹性盒子布局替换浮动布局的方法

（2）熟练使用弹性盒子布局知识点了解掌握重点难点弹性盒子VVV弹性盒子容器属性VVV弹性盒子项目属性学习单元十二使用CSS3媒体查询实现页面学时6工作任务响应式布局素质目标

（1）培养学生的探究能力和终身学习的意识

（2）培养学生的适应能力和与时俱进的意识知识目标

（1）了解页面媒体查询的原理任务目标

（2）掌握CSS3媒体查询

（3）掌握CSS3的主要页面样式尺寸单位技能目标掌握使用媒体查询的方式将PC端Web网页改造为同时适应移动端与PC端的响应式页面的方法知识点了解掌握重点难点媒体查询与响应式布局V VVV媒体查询语法媒体查询的引入方式V章目理论实践合计搭建项目开发环境1学时1学时2学时、学时分配em与rem V犯学时学时学时一制作课程基础页面112学时学时学时制作课程播放页面336学时学时学时使用表单制作页面336学时学时学时在项目中引入CSS336学时学时学时使用CSS3美化页面336学时学时学时使用盒子模型布局页面336学时学时学时使用CSS3浮动布局页面336学时学时学时使用CSS3定位布局页面336学时学时学时利用CSS3动画美化页面336学时学时学时使用CSS3弹性盒子布局页面336学时学时学时使用CSS3媒体查询实现页面响应式布局336合计学时学时学时323264

五、教学效果评价及方式本课程为考试课程，根据课程特点采用多阶段、节点化、多方式的评价方式构建了素质、知识和能力考核相结合，过程性考核和终结性考核相结合，理论考核和实践考核相结合，校内评价和校外评价相结合的四个结合；知识、能力、素质、思政的四个维度、教师、学生、工程师的三个主体，课前、课中、课后的三个阶段的考评体系阶段性考核贯穿课前（占25%）、课中（占50%）、课后（占25%）整个评价过程

六、选用教材和主要参考书本大纲是根据教材《HTML5+CSS3Web前端开发技术（任务式）（微课版）（第2版）》所设计的

七、大纲说明本课程的授课模式为课堂讲授+上机实践，其中，课堂主要采用多媒体的方式进行授课，并通过课中测试、阶段性测试等了解学生的知识掌握程度；实践环节主要是进行网页设计和开发，要求学生动手完成指定的网页设计学习任务。