HTML5+CSS3Web前端开发技术（任务式）-教学大纲.docx

《HTML5+CSS3Web前端开发技术（任务式）-教学大纲.docx》由会员分享，可在线阅读，更多相关《HTML5+CSS3Web前端开发技术（任务式）-教学大纲.docx（8页珍藏版）》请在第一文库网上搜索。

1、HTM15+CSS3Web前端开发技术课程教学大纲学分：4学分学时：学时64(其中：理论学时32实践学时：32)先修课程：图形图像处理、程序设计基础、Intemet应用基础后续课程：Web前端技术(JaVaSCriPt)适用专业：计算机类相关专业开课部门：计算机系一、课程的性质与目标HTM15+CSS3Web前端开发技术是面向计算机相关专业的一门专业核心课，该课程的内容适应Web前端开发工作岗位群的实际要求。课程融入“1+X”Web前端开发技术技能等级证书的相关内容，对接互联网+大学生创新创业大赛，秉承“以赛促赛，赛证融合、以岗促赛，岗证融合、以创促课，专创融合”的思想，整合专业教育教学资源和

2、内容，构建基于专业知识的模块化课程内容。通过本课程的学习，学生可以掌握网页设计领域核心知识和技能，了解静态网页工作原理、静态网页设计、静态网站构建和发布等内容。本课程是一门基于真实项目的课程，具有较强的职业性、实践性和技术性，学生在学习过程中既可以掌握与行业发展紧密结合的实用技能与知识，在操作实践中提升实战能力，同时又培养学生创新创造、团队协作、与人沟通的职业素质及岗位适应能力，对学生职业能力培养和职业素质养成起到支撑和促进作用，为职业能力的培养打下坚实的基础。二、教学条件要求操作系统：Windows7开发工具：Hbui1derX三、课程的主要内容及基本要求学习单元一工作任务搭建项目开发环境学

3、时2任务目标素质目标(1)培养学生树立远大的职业理想，以及为祖日业做贡献的决心。(2)培养学生自主学习、终身学习的意识。知识目标(1) 了解Web的相关概念。(2) 了解当前主流Web浏览器与常用Web(3) 了解HTM15的优势。技能目标(1)掌握HBui1derX.Chrome浏览器的安装工(2)掌握在HBui1derX中进行Web项目搭5ja信息技术事开发工具。才吏用。E的流程。知识点了解掌握重点难点Web概述主流Web浏览器常用Web开发工具Web标准HTM15的优势学习单元二工作任务制作课程基础页面学时2任务目标素质目标(1)培养学生的创新精神和合作意识。(2)培养学生编程的规范意识

4、和职业素养。知识目标(1)掌握HTM15基础语法。(2)掌握HTM15基础标签。(3)掌握语义化结构标签。技能目标(1)能够使用规范的HTM15结构编写代码。(2)能够使用HTM15标签定义网页元素。(3)能够熟练地使用HBui1derX编写简单的HTM15页面。知识点了解掌握重点难点HTM15基础语法HTM15语义化结构标签HTM15常用标签HTM15实体字符HTM15超链接、框架标签HTM15元素分类学习单元三工作任务制作课程播放页面学时6任务目标素质目标(I)培养学生的创新精神。(2)培养学生的职业素养和服务意识。知识目标(1)掌握无序列表、有序列表和定义列表的定义与特点。(2)掌握表格

5、元素与表格的基础结构。(3)掌握HTM15媒体元素。35技能目标(1)熟练使用无序列表制作页面内容。(2)熟练使用表格元素制作页面内容。(3)熟练使用HTM15媒体元素在页面中嵌入音、视频内容。知识点了解掌握重点难点HTM15列表HTM15表格HTM15媒体元素学习单元四工作任务使用表单制作页面学时6任务目标素质目标(1)培养学生的劳动精神和工匠精神。(2)培养学生适应时代要求、主动获取新知识和新技能的意识。知识目标(1)了解表单元素的定义。(2)掌握语义化表单的制作。(3)了解HTM15属性初步验证表单的功能。51技能目标(1)掌握使用表单元素制作用户登录页面基础内容的方法。(2)掌握使用表

6、单元素的属性实现简单的表单验证功能的方法。知识点了解掌握重点难点表单概述表单发送方式常用表单控件表单验证的作用表单验证的方法学习单元五工作任务在项目中引入CSS学时6任务目标素质目标(I)培养学生的红色精神。(2)提升学生的思想道德素质并培养学生的社会主义核心价值观。知识目标(1)掌握CSS3的外部样式、内部样式与行内样式。(2)掌握CSS3的语法规则。(3)掌握CSS3的基础选择器、层次选择器、结构伪类选择器、属性选择器。技能目标(1)掌握使用CSS对文本内容进行美化的方法。(2)掌握使用基础选择器进行页面元素选择和查找的方法。(3)掌握使用高级选择器进行页面元素选择和查找的方法。知识点了解

7、掌握重点难点CSS3概述CSS3基础语法CSS3引入方式CSS3基础选择器CSS3高级选择器CSS3选择器权重问题学习单元六工作任务使用CSS3美化页面学时6任务目标素质目标(1)培养学生主动学习以及分析和解决问题的能力。(2)培养学生的职业素养和职业道德。知识目标(1)了解常用的文字样式。(2)掌握超链接的不同状态样式。(3)掌握列表的样式。(4)掌握背景颜色的样式。(5)掌握背景图片的样式。(6)理解背景渐变色样式。98技能目标使用CSS3样式进行常见页面样式的美化。知识点了解掌握重点难点文字样式文本样式超链接样式列表样式背景样式背景渐变学习单元七工作任务使用盒子模型布局页面学时6任务目标

8、素质目标(1)培养学生团队合作和勇于探索的精神。(2)培养学生不断创新、精益求精的工匠精神。知识目标(D了解CSS中盒子模型的结构与特点。(2) 了解盒子模型的尺寸计算。(3) 了解CSS中两种标准的盒子模型。技能目标(1)熟练使用盒子模型进行常规页面布局。(2)熟练使用盒子模型进行块状元素水平居中布局。(3)熟练地进行圆角边框的头像制作。(4)掌握通过边框阴影增加立体效果的方法。知识点了解掌握重点难点盒子模型结构盒子模型的组成计算盒子模型的尺寸IE盒子模型使用Chrome调试工具检查盒子尺寸边框圆角使用border-radius属性制作特殊图形盒子阴影学习单元八工作任务使用CSS3浮动布局页

9、面学时6任务目标素质目标(1)培养学生的团队合作精神。(2)培养学生主动学习的能力和独立思考、分析及解决问题的能力。知识目标(1)了解disp1ay属性的4种状态。(2) 了解浮动的特点。(3) 了解如何清除浮动。(4) 了解浮动导致塌陷的解决方法及方法的优缺点。技能目标(1)熟练使用浮动的方式对元素进行水平两端布局或者水平排列布局。(2)熟练解决由浮动导致的结构塌陷问题。知识点了解掌握重点难点标准文档流disp1ay属性浮动清除浮动学习单元九工作任务使用CSS3定位布局页面学时6任务目标素质目标（1）培养学生的团队合作精神。（2）培养学生分析问题、解决问题的能力。知识目标（1） 了解使用po

10、sition属性实现的4种定位方式的特点。（2） 了解如何使用z-index属性调整定位元素的堆叠方式。技能目标（1）掌握常见元素重叠覆盖效果的实现。（2）掌握使用页面固定定位实现功能按钮的方法。知识点了解掌握重点难点定位概述相对定位绝对定位固定定位黏性定位z-index学习单元十工作任务利用CSS3动画美化页面学时6任务目标素质目标（I）培养学生精益求精的工匠精神。（2）培养学生独立思考的能力和岗位意识。知识目标（1） 了解实现2D变形的属性transform.,（2） 了解实现过渡动河的属性transitiono（3）理解通过animation属性实现网页动画的过程。（4）了解轮播图的概念

11、。技能目标（1）熟练使用变形与过渡制作常见的鼠标交互特效。（2）掌握使用动画制作简单的循环特效的方法。知识点了解掌握重点难点变形过渡动画学习单元十一工作任务使用CSS3弹性盒子布局页面学时6任务目标素质目标（1）培养学生的创新意识。（2）培养学生的职业素养。（3）培养学生与本专业发展相适应的劳动素养。知识目标（1）了解弹性盒子的特点与优势。（2）掌握弹性盒子布局。技能目标（1）掌握使用弹性盒子布局替换浮动布局的方法。（2）熟练使用弹性盒子布局。知识点了解掌握重点难点弹性盒子弹性盒子容器属性弹性盒子项目属性学习单元十二工作任务使用CSS3媒体查询实现页面响应式布局学时6任务目标素质目标（1）培养

12、学生的探究能力和终身学习的意识。（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学时使用CS