职业技术学校《HTML5与CSS3网页设计》课程标准0512

课程标准课程名称：HTML5与CSS3网页设计专业大类：电子信息大类HTML5与CSS3网页设计课程代码：0311124课程名称：HTML5与CSS3网页设计课程性质：必修课程类别：职业技术基础课程适用专业：计算机应用技术、软件技术、移动互联应用技术开设学期：第一学期授课学时：48（理实一体）+16学时项目强化一、课程定位《HTML5与CSS3网页设计》是计算机应用技术、软件技术、移动互联应用技术专业的一门职业技术基础课程，由浅入深地讲解了CSS3新特性的语法及使用技巧，涵盖了CSS3的众多功能模块，如CSS3选择器、边框模块、文本模块、颜色模块、UI界面模块、动画模块、响应式设计等，通过理论、图解、实战的方式阐释CSS3的特性功能。通过学习本门课程，学生能更好地掌握CSS3的特性，并且将新技术运用到实际的开发当中，提高自己开发Web程序的水平。二、课程设计以就业为导向，以能力为本位，不局限于单纯的技能训练，在培养学生职业岗位能力的基础上，围绕高素质复合型技术技能型人才专业培养目标，培养学生的终身学习的能力和职业生涯发展所需的综合素养。课程建设优化传统HTML网页设计类课程教学内容，设计教学情境，开发课程案例，建设课程教学资源，实施基于混合式教学的“教学做”一体化教学方式，采用过程式考核方式，提高课程教学质量。课程教学按照：“提出工程实际案例、分析案例所需知识、知识准备、师生共同完成案例、布置任务、学生自主完成任务、小组交流、教师点评”的步骤进行。将课程基本知识点融于案例中，围绕着案例来开展课堂教学活动，引导学生参与分析、讨论，让学生在具体的问题情境中，积极思考，主动探索。课程教学内容符合职业技能培养要求，注重实践环节，实践性教学内容占课程内容的60﹪以上，课程既具有针对性、又具有技术性和综合性，有效地培养了学生复杂静态页面的设计与开发能力。三、课程目标（一）课程总目标通过基于工作过程的教学实施，使学生能够根据工作任务和要求，按网站设计的基本流程、需求规范，运用相关工具，独立自主完成基于HTML5和CSS3技术的静态复杂页面的设计与制作。同时对接行业标准和岗位要求强化学生的职业道德意识和职业素质养成意识；通过小组合作学习，培养学生团队合作、协议沟通能力；为后续Web前端开发打下坚实的基础。（二）课程具体目标1.知识目标（1）掌握CSS3的选择器的使用；（2）掌握CSS3的边框、背景、文本、颜色等基础特性；（3）掌握CSS3基础盒模型；（4）掌握CSS3的渐变、变形、过渡及动画功能。2.能力目标（1）能够设计、制作和调试复杂静态页面；（2）能合理规划、管理静态站点；（3）能综合使用HTML5标签设计静态页面内容和结构；（4）能综合使用CSS3美化页面元素；（5）能综合使用CSS3实现渐变、变形、过渡和动画效果；3.素质目标（1）培养学生良好的语言表达能力；（2）培养学生自主学习习惯和团队合作能力，身心参与、手脑并用的劳动意识；（3）培养学生严谨细致的学习态度和追求完美的工匠精神；（4）树立坚定的理想信念，厚植爱国主义情怀；四、课程内容及学习情境根据Web前端开发工程师职业岗位的要求，遴选课程内容，课程内容打破学科体系，进行解构和重构。以真实的项目和任务为载体，基于Web前端开发的设计、开发与维护岗位的工作流程设置四个情境：1.CSS3，2.CSS基础应用，3.网页布局设计，4.项目强化。课程的主要内容和要求见表1。表1课程内容和学习情境表序号学习情境学习载体主要学习内容学习目标学时1学习情境1CSS3基本属性“环保企业网站”首页任务1：使用伪类选择器美化页面项目任务：完成首页基本框架和顶部内容1.掌握动态伪类选择器；2.掌握目标伪类选择器；3.掌握否定伪类选择器；4.掌握结构伪类选择器；4任务2：使用CSS3边框美化页面项目任务：完成首页顶部logo和搜索表单1.掌握边框颜色属性；2.掌握图片边框属性；3.掌握圆角边框属性；4.掌握盒子阴影属性；4任务3：使用CSS3背景美化页面项目任务：实现LOGO背景图片填充文本效果1.掌握背景原点属性；2.掌握背景裁切属性；3.掌握背景尺寸属性；4.掌握多背景属性；4任务4：使用CSS3文本美化页面项目任务：完成首页关于我们模块1.掌握文本阴影属性；2.掌握溢出文本属性；3.掌握文本换行；4任务5：使用CSS3颜色特性美化页面项目任务：完成顶部导航部分1.掌握网页中的色彩特性；2.掌握透明属性opacity；3.掌握颜色模式RGBA/HSLA；42学习情境2CSS3盒子模型“环保企业网站”首页任务6：使用CSS3盒子模型项目任务：首页顶部banner，设置文字垂直居中，面包屑导航内容部分1.理解盒子模型属性；2.掌握内容溢出属性；3.掌握自由缩放属性；4.掌握外轮廓属性；43学习情境3CSS3进阶属性“环保企业网站”首页任务7：使用CSS3渐变美化页面项目任务：完成首页四大优势模块1.掌握线性渐变；2.掌握径向渐变；3.掌握重复渐变；4任务8：使用CSS3变形美化页面一项目任务：完成首页产品中心模块1.掌握变形相关属性；2.掌握2D变形；3.掌握3D变形；4任务9：使用CSS3变形美化页面二项目任务：制作首页产品翻转动画效果1.掌握多重变形；2.制作产品信息展示综合案例4任务10：使用CSS3过渡项目任务：完成首页成功案例模块，添加过渡效果1.掌握过渡子属性；2.掌握触发过渡方法；3.掌握过渡技巧；4.制作导航效果综合案例；4任务11：使用CSS3动画一项目任务：完成首页底部版权模块1.动画简介2.掌握动画关键帧；3.掌握动画应用；4任务12：使用CSS3动画二项目任务：定义通用动画样式，并为首页元素添加动画效果1.掌握动画子属性；2.制作全屏Slidershow效果综合案例；44学习情境4项目强化“同学会”网站任务1：制作公司简介页面1.套用网站通用部分2.使用标签完成页面内容设计3.完成公司简介文字和动画动画4.完成荣誉资质、员工风采、精彩瞬间手风琴显示效果4任务2：制作产品中心页面1.套用网站通用部分2.使用标签完成页面内容设计3.完成产品立体翻转效果4.完成分页样式效果2任务3：制作产品详情页面1.套用网站通用部分2.使用标签完成页面内容设计3.完成产品图片和文字样式及动画效果4.完成详情部分样式5.完成产品采购部分表单样式2任务4：制作新闻中心页面1.套用网站通用部分2.使用标签完成页面内容设计3.完成新闻列表图片及文字样式，设置动画效果4.完成分页样式效果2任务5：制作服务案例页面1.套用网站通用部分2.使用标签完成页面内容设计3.完成案例列表样式4.设置主题图片样式5.完成全屏Slidershow效果2任务6：完成在线留言页面1.套用网站通用部分2.使用标签完成页面内容设计3.完成留言表单样式4.完成留言列表样式2任务7：制作联系我们页面1.套用网站通用部分2.使用标签完成页面内容设计3.使用多重变形为地图添加翻转动画效果2五、教学设计学习情境一：CSS3基本属性项目名称：“同学会”网站学时：8教学目标掌握CSS3伪类选择器掌握CSS3边框属性掌握CSS3背景属性掌握CSS3文本属性掌握CSS3颜色属性掌握CSS3颜色模式教学重点掌握CSS3伪类选择器掌握CSS3边框属性掌握CSS3背景属性掌握CSS3文本属性掌握CSS3颜色属性学习难点掌握CSS3伪类选择器掌握CSS3背景属性子任务主要教学内容任务1：使用伪类选择器美化页面1.使用动态伪类选择器，美化页面按钮；2.使用目标伪类选择器，实现首页名字列表手风琴效果3.使用否定伪类选择器，实现特殊图片效果4.使用结构伪类选择器，实现圆角表格等效果美化日程表项目任务：完成首页基本框架和顶部内容任务2：使用CSS3边框美化页面1.使用边框颜色属性，实现立体渐变边框；2.使用图片圆角边框及盒子阴影属性，实现圆角阴影按钮3.使用圆角边框属性，制作特殊图形效果4.制作立体搜索菜单项目任务：完成首页顶部logo和搜索表单任务3：使用CSS3背景美化页面1.使用背景原点属性background-origin；2.使用背景裁切属性background-clip；3.使用背景尺寸属性background-size，实现全屏背景4.使用多背景属性，实现花边边框项目任务：完成首页顶部导航等内容任务4：使用CSS3边框美化页面1.使用文本阴影属性，实现立体文本；2.使用溢出文本属性，实现固定区域列表3.使用文本换行属性项目任务：完成首页关于我们模块任务5：使用CSS3颜色特性美化页面1.掌握网页中的色彩特性；2.使用透明属性opacity，制作透明过渡色块3.使用颜色模式RGBA/HSLA，制作颜色色块项目任务：完成首页色块进度条教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境二：CSS3盒子模型项目名称：“同学会”网站学时：12教学目标1.理解盒子模型属性；2.掌握内容溢出属性；3.掌握自由缩放属性；4.掌握外轮廓属性；教学重点1.理解盒子模型属性；2.掌握内容溢出属性；3.掌握自由缩放属性；学习难点1.掌握外轮廓属性；子任务主要教学内容任务6：使用CSS3盒子模型1.理解盒子模型属性；2.使用内容溢出属性box-sizing3.使用自由缩放属性overflow4.使用外轮廓属性outline模仿边框项目任务：美化首页banner及文字教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境三：CSS3进阶属性项目名称：“同学会”网站学时：28教学目标1.掌握CSS3渐变属性2.掌握CSS3变形属性3.掌握CSS3过渡属性4.掌握CSS3动画属性教学重点1.掌握CSS3渐变属性2.掌握CSS3变形属性3.掌握CSS3过渡属性4.掌握CSS3动画属性学习难点1.掌握CSS3变形属性2.掌握CSS3动画属性子任务主要教学内容任务7：使用CSS3渐变美化页面1.使用线性渐变，制作渐变按钮；2.使用径向渐变，制作圆形图标按钮；3.使用重复渐变，制作记事本纸张效果；项目任务：完成首页四大优势模块任务8：使用CSS3变形美化页面（1）1.掌握变形相关属性，制作旋转和缩放的按钮；2.使用2D变形，实现2D变形图片和2D矩阵；3.使用3D变形，实现3D变形图片和3D矩阵；项目任务：完成首页产品中心模块任务9：使用CSS3变形美化页面（2）1.使用多重变形，自作立方体；2.综合案例：使用变形制作产品信息展示；项目任务：制作首页产品翻转动画效果任务10：使用CSS3过渡1.掌握过渡子属性；2.掌握触发过渡方法；3.掌握过渡技巧；4.综合案例：纯CSS3制作CSSDock导航效果完成首页成功案例模块，添加过渡效果任务11：使用CSS3动画（1）1.掌握动画关键帧；2.掌握浏览器兼容性；3.应用动画项目任务：完成首页底部版权模块任务12：使用CSS3动画（2）1.掌握动画子属性2.综合案例：全屏Slidershow效果；项目任务：为首页元素添加动画效果教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境四：项目强化项目名称：“同学会”网站学时：16教学目标1.掌握站点的建立，能够建立规范的站点2.完成网站页面的制作，并能够CSS实现对应页面效果3.掌握网页中不同的效果和功能的实现4.能够合理规划网站的风格、栏目结构、目录结构和链接结构教学重点1.搭建网站框架、规划网站结构2.HTML基本标签3.CSS常用效果学习难点1.HTML基本标签2.CSS常用效果子任务主要教学内容任务1：制作网站通用部分1.使用DIV+CSS进行页面整体布局2.使用边框、渐变背景等效果美化导航部分3.增加立体搜索表单效果4.使用边框、文本属性美化页面标题任务2：制作网站首页1.套用网站通用部分2.使用标签完成页面内容设计3.使用边框和盒子阴影美化合照4.使用手风琴效果优化合照姓名展示任务3：制作邀请函页面1.套用网站通用部分2.使用标签完成页面内容设计3.使用伪元素美化邀请函文字内容4.为邀请函温馨提示和组织小组内容添加渐变背景任务4：制作日程表页面1.套用网站通用部分2.使用标签完成页面内容设计3.使用圆角表格等风格美化日程表表格4.在日程表中默认隐藏溢出文本任务5：制作往昔岁月页面和活动详情页面1.套用网站通用部分2.使用标签完成页面内容设计3.使用否定伪类选择器改变往昔岁月图片展示效果4.使用边框和盒子阴影美化详情图片展示任务6：完成联系我们页面1.套用网站通用部分2.使用标签完成页面内容设计3.使用多重变形为地图添加翻转动画效果任务7：制作校园风光1.套用网站通用部分2.使用标签完成页面内容设计3.使用过渡技巧优化校园风光图片展示任务8：制作在线留言页面1.套用网站通用部分2.使用标签完成页面内容设计3.美化留言表单文本域样式教学方法建议以理论讲解、演示为主，学生按照教学内容进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结，采用任务驱动教学。备注六、实施建议（一）教材选用与编写根据专业人才培养方案和课程教学目标选用理论实践一体化或项目课程教材。推荐教材1.HTML5+CSS3HTML5与CSS3网页设计，黑马程序员，人民邮电出版社，2019参考书：1.工业和信息化部教育与考试中心.Web前端开发（初级）上册北京:电子工业出版社,20192.工业和信息化部教育与考试中心.Web前端开发（初级）下册北京:电子工业出版社,20193.北京新奥时代科技有限责任公司.Web前端开发实训案例教程（初级）北京:电子工业出版社,20194.网站5.MDN网站（二）课程资源的开发与利用1.开发课件、微课等教学资源；2.选用符合教学要求的录像、课件、视频、资料文献等资源辅助教学；3.依托学校职教云教学平台进行课程资源建设。（三）教学基本条件1．专业教师的要求（1）具有前端新知识、新技能的学习能力和创新创业能力；（2）具备前端架构设计能力；（3）具备移动端开发能力；（4）具备前端组件化能力；（5）具备网站性能优化能力（6）具有较强的工作过程系统课程教学设计能力；（7）具有较强的行动导向教学组织与实施能力。2．学习场地、设施的要求为保证项目、任务的实施与完成，本课程必须在实践理论一体化教室完成教学过程。（四）教学建议1.本课程以实际的典型应用为基础构建学习载体，建议在每个学习情境的教学实施中，完全采用项目引导、任务驱动的行动导向教学，并以小组协作方式完成各项工作任务。2.以Web项目的设计、实现作为驱动主线，实现理论实践一体化教学。学生通过感性认识，理性思维，动手操作，完成Web项目的分析、设计、编码、调试和运行，在做中学，在学中做，最终达到真正听得懂，学得会，做得好，切实提高动手能力和分析问题、解决问题的综合素质。3.在教学过程中，要创设工作情景，同时应加大实践实操的容量，要紧密结合职业技能等级证书的考证，加强考证的实操项目的训练，在实践实操过程中，使学生掌握HTML静态页面设计与制作应有的技能，提高学生的岗位适应能力。4.在教学过程中，要尽量应用多媒体、动画视频、演示等教学资源辅助教学，帮助学生理解相关概念。5.在教学过程中，在教学过程中，关注软件产业发展新业态、新模式，对接新技术、新工艺、新规范发展趋势，贴近生产现场。为学生提供职业生涯发展的空间，努力培养学生参与社会实践的创新精神和职业能力。6.教学过程中教师应积极引导学生提升职业素养，培养职业道德。七、教学评价（一）成绩构成本课程主要以过程考核为主，考核涵盖学习情境全过程，既评价学生专业能力，也评价学生交流沟通、团队协作、自主学习、问题的分析与处理等非专业能力，以促进学生综合职业能力的养成。课程总评成绩=项目成绩（70%）+作业成绩（10%）+考勤（10%）+课堂活动成绩（10%）（二）项目成绩评价指标项目总分100分，项目考核由指导教师对每个小组进行综合考核，考核内容分为三个部分：第一部分是项目的设计和制作，占评价成绩的70%，第