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

课程标准课程名称：HTM1.5与CSS3网页设计专业大类：电子信息大类HTM1.5与CSS3网页设计课程代码：0311124课程名称：HTM1.5与CSS3网页设计课程性质：必修课程类别：职业技术基础课程适用专业：计兑机应用技术、软件技术、移动互联应用技术开设学期：第一学期授课学时：48（理实一体）+16学时项目强化一、课程定位HTM1.5与CSS3网页设计是计算机应用技术、软件技术、移动互联应用技术专业的一门职业技术基础课程，由浅入深地讲解了CSS3新特性的语法及使用技巧，涵盖J'CSS3的众多功能模块，如CSS3选择器、边框模块、文本模块,颜色模块、UI界面模块、动画模块、响应式设计等，通过理论、图解、实战的方式阐释CSS3的特性功能。通过学习本门课程，学生能更好地掌握CSS3的特性，并且将新技术运用到实际的开发当中，提而自己开发WCb程序的水平.二、课程设计以就业为导向，以能力为本位，不局限于单纯的技能训练，在培养学生职业岗位能力的基础上，围绕高素质第合型技术技能型人才专业培养目标，培养学生的终身学习的能力和职业生涯发展所需的综合素养。课程建设优化传统Hn1.1.网页设计类课程教学内容，设计教学情境，开发课程案例，建设课程教学资源，实施基于混合式教学的“教学做”一体化教学方式，采用过程式考核方式，提高课程教学质星。课程教学按照：“提出工程实际案例、分析案例所需知识、知识准备、师生共同完成案例、布置任务、学生自主完成任务、小组交流、教加点评”的步骤进行。将课程基本知识点融于案例中，闱绕着案例来开展课堂教学活动,引导学生参与分析、讨论，让学生在具体的问题情境中，枳极思考，主动探索。课程教学内容符合职业技能培养要求，注重实践环节，实践性教学内容占课程内容的60%以上，课程既具有针对性、又具有技术性和综合性，有效地培养了学生复杂静态页面的设计与开发能力。三、课程目标(一)课程总目标通过基于工作过程的教学实施，使学生能够根据工作任务和要求，按网站设计的基本流程、需求规范，运用相关工具，独立自主完成基于HTH1.5和CSS3技术的铮态更杂页面的设计与制作。同时对接行业标准和岗位要求强化学生的职业道德意识和职业素质养成意识；通过小组合作学习，培养学生团队合作、协议沟通能力：为后续Web前端开发打卜坚实的基础。(二)课程具体目标1 .知识目标(1)掌握CSS3的选择落的使用：(2)掌握CSS3的边框、背景、文本、颜色等基础特性：(3)掌握CSS3基础盒模型：(4)掌握CSS3的渐变、变形、过渡及动画功能。2 .能力目标(1)能膨设计、制作和调试或杂静态页面：(2)能合理规划、管理铮态站点；(3)能综合使用Hn1.1.5标签设计静态页面内容和结构：(4)能综合使用CSS3美化页面元素：(5)能综合使用CSS3实现渐变、变形、过渡和动画效果：3 .素质目标(1)培养学生良好的语言表达能力：(2)培养学生自主学习习惯和团队合作能力，身心参与、手脑并用的劳动意识:(3)培养学生严谨细致的学习态度和追求完美的工匠精神：(!)树立坚定的理想信念，厚植爱国主义情怀；四、课程内容及学习情境根据Wcb前端开发工程师职业岗位的要求，遴选课程内容，课程内容打破学科体系，进行解构和重构。以真实的项目和任务为载体,基于Web前端开发的设计、开发与维护岗位的工作流程设置四个情境：1.CSS3,2.CSS基础应用,3.网页布局设计，4.项目强化。课程的主要内容和要求见表1。表1课程内容和学习情境表序号学习情境学习,体主要学习内容学习目标学时1学习情境1CSS3基本属性“环保企业网站”首页任务1：使用伪类选择器美化页面项目任务：完成首页基本框架和顶部内容I.掌握动态伪类选择器：2.掌握11标伪类选择案：3.掌握否定伪类选择器：4.拿娓结构伪类选择器：4任务2；使用CSS3边框美化页面项目任务：完成首页顶部1.ogo和搜索表单1 .掌押边框颜色属性：2 .掌旌图片边框税性：3 .掌提网角边框属性：4 .掌握盒子阴影典性；4任务3：使用CSS3背景美化页面项目任务I实现1.OGO背景图片填充文本效果I.掌握背景原点出性：2.察握背景或切同性；3.掌棍背景尺寸属性:4.安提多背景属性：4任务4：使用CSS3文本美化页面项目任务：完成首页关于我们模块1.掌旌文本阴影属性：2 .擎维溢出文本属性：3 .掌握文本按行；4任务5：使用CSS3颜色特性美化页面项目任务：完成顶部导航部分1 .掌握网页中的色彩特性：2 .掌握透明属性OPaCiIy：3 .掌旌颜色模式RGBAHS1.A：42学习情境2CSS3盒子模型“环保企业网站”首页任务6：使用CSS3盒子模型项目任务：首页顶部banner,设置文字垂真居中.面包屑导航内容部分1.埋解食子模型属性：2.掌握内容流HUK性；3.掌握自由能放属性:4.掌娓外轮肺屈性：43学习情境3CSS3进阶属性“环保企业网站”首页任务7：使用CSS3渐变美化页面项目任务：完成首页四大优势模块1 .掌提线性渐变:2 .掌握径向渐变：3 .掌捏流复渐变;4任务8：使用CSS3变形美化页面一项目任务，首页产M中心模块1 .擎提变形相关限性:2 .掌握2D变形：3 .掌提3D变形:4任务9：使用CSS3变形美化页面二项目任务：制作首页产品朝转动图效果1.掌握多型变形:2.制作产品信息展示踪合案例4任务10：使用CSS3过渡项目任务；完成首页成功窠例模块，添加过披效果I.掌握过渡予属性：2 .掌握触发过渡方法：3 .掌握过渡技巧：I.制作导肮效果综合案例；4任务11：使用CSS3动IUi一攻目任务：完成首页底部版权模块1.动i简介2 .掌握动画关键帧：3 .掌握动画应用：4任务12：使用CSS3动v(:项目任务：定义通用动画样式.并为首页元素添加动国效果I.掌握动画子属性：2.制作全屏S1.idershow效果嫁合案例：44学习情境4项目强化“同学会”网站任务1：制作公司简介页面I.套用网站通用部分2 .使用标签完成页面内容设计3 .完成公司筒介文字和动画动画4 .完成荣誉资质、员工风栗、精彩瞬间手风号显示效果4任务2：制作产品中心页面I.套用网站通用部分2 .使用标签完成页面内容设计3 .完成产品立体an转效果4 .完成分页样式效果2任务3：制作产品详情页面1.套用网站通用部分2 .使用标签完成页面内容设计3 .完成产品图片和文字祥式及动画效果4 .完成详情部分样式5 .完成产品采照部分我总样式2任务4：制作新闻中心页面1.套用网站通用部分2 .使用标签完成页面内容设计3 .完成新闻列去图片及文字样式，设置动画效果4 .完成分页样式效果2任务5：制作服务案例页面1 .套用网站通用部分2 .使用标签完成页面内容设i+3 .完成案例列入样式4 .设置主题图片样式25.完成全屏S1.idershow效果任务6：完成在俄留言页面1 .套用网站通用部分2 .使用标签完成页面内容设计3 .完成用言表单样式4 .完成留吉列表样式2任务7：制作联系我们页面1 .套用网站通用部分2 .使用标签完成页面内容设计3 .使用多盅变形为地图添加翻转动画效果2五、教学设计学习情境一ICSS3基本属性项目名称：“同学会”网站学时,8教学目标1 .掌握CSS3伪类选择涔2 .掌握CSS3边框属性3 .掌握CSS3背景属性1.掌握CSS3文本属性5 .掌握CSS3颜色属性6 .掌握CSS3颜色模式教学重点1 .掌握CSS3伪类选择器2 .掌握CSS3边框属性3 .掌握CSS3背景属性4 .掌握CSS3文本属性5 .掌握CSS3颜色属性学习难点1 .掌握CSS3伪类选择器2 .掌握CSS3背景属性子任务主要教学内容任务1：使用伪类选择器美化页面1 .使用动态伪类选择器,美化页面按钮：2 .使用H标伪类选择器，实现首页名字列表手风等效果3 .使用否定伪类选择器，实现特殊图片效果4 .使用结构伪类选择器,实现例角表格等效果美化日程表项目任务：完成首页域本框架和顶部内容任务2:使用CSS3边推美化页面1.使用边框酸色属性，实现立体渐变边框：2 .使用图片圆角边框及盒子阴影属性，实现圆角阴影按钮3 .使用网角边框属性，制作特殊图形效果1.制作立体搜索菜单项目任务:完成苜页顶部1.og。和搜索表单任务3:使用CSS3背景美化页面1.使用背景原点属性background-origin；2.使用背景裁切底性background-c1.ip：3,使用背景尺寸属性backgr。Und-SiZe,实现全屏背景1.使用多背景属性,实现花边边框项目任务：完成首页顶部导航等内容任务4:使用CSS3边框美化页面1.使用文本阴影属性，实现立体文本：2.使用溢出文本属性，实现固定区域列表3,使用文本换行属性项目任务:完成首页关于我们模块任务5：使用CSS3颜色特性美化页面1 .掌握网页中的色彩特性：2 .使用透明属性OPaCity,制作透明过渡色块3 .使用颜色模式RGBHS1.,制作颜色色块项目任务：完成首页色块进度条教学方法建议任务骈动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境二；CSS3盒子模型项目名称I“同学会”网站学时I12教学目标1.理解盒子模型属性：2.掌握内容溢出局性；3.掌握自由缩放属性；4.掌握外轮廓属性：敦学学点1.理解盒子模型属性：2 .掌握内容溢出属性；3 .掌握自由缩放属性：学习难点1.掌握外轮廓属性：子任务主要教学内容任务6：使用CSS3盒子模型1.理解盒子模里属性；2 .使用内容溢出属性box-sizing3 .使用自由缩放属性。Verf1.OW4 .使用外轮廓属性out1.ine模仿边框项目任务：美化首页banner及文字教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境三，CSS3进阶属性项目名称I“同学会”网站学时I28教学目标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动画1.掌握动画了属性2.综合案例：全屏S1.iderShOW效果：项目任务：为首页元素添加动R效果教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老加按照每个小组的完成情况对小组进行评分并总结。备注学习情境四：项目强化项目名称：“同学会”网站学时：16敦学目标1 .掌握站点的建立，能够建立规范的站点2 .完成网站页面的制作，并能够CSS实现对应页面效果3 .掌握网页中不同的效果和功能的实现4 .能膨合理规划网站的风格、栏目结构、目录结构和链接结构教学重点I.搭建网站框架、规划网站结构2.ItTM1.基本标签3CSS常用效果学习难点1.HTM1.基本标签2.CSS常用效果子任务主要教学内容任务1：制作网站通用部分1 .使用D1V+CSS进行页面整体布局2 .使用边框、渐变背景等效果美化导航部分3 .增加立体搜索去单效果4 .使用边框、文本属性美化页面标题任务2：制作网站首页1.套用网站通用部分2 .使用标签完成页面内容设计3 .使用边框和盒子阴影关化合照4 .使用手风琴效果优化合照姓名展示任务3：制作邀请函页面1 .套用网站通用部分2 .使用标签完成页面内容设计3 .使用伪元素美化邀请函文字内容4 .为邀请南温馨提示和组织小组内容窗加渐变背景任务4：制作日程表页面I,食用网站通用部分2 .使用标签完成页面内容设计3 .使用网角表格等风格美化日程表表格4 .在日程表中默认陷藏溢出文本任务5：制作往昔岁月页面和活动详情页面1 .套用网站通用部分2 .使用标签完成页面内容设计3 .使用否定伪类选择器改变往皆岁月图片展示效果4 .使用边框和盒子阴影美化详情图片展示任务6：完成联系我们页面1 .套用网站通用部分2 .使用标签完成页面内容设计3 .使用多重变形为地图添加翻转动而效果任务7：制作校园风光1 .套用网站通用部分2 .使用标签完成页面内容设计3 .使用过渡技巧优化校园风光图片展示任务8：制作在级留言页面I.套用网站通用部分2 .使用标彩完成页面内容设计3 .美化用吉表单文本域样式教学方法建议以理论讲解、演示为主，学生按照教学内容进行实操并进行自我评价以及小组互评，老如按照每个小组的完成情况对小组进行评分并总结，采用任务驱动教学。备注六、实施建议（一）教材选用与编写根据专业人才培养方案和课程教学目标选用理论实践一体化或项目课程教材。推荐教材1.HTM1.5+CSS3HT皿5与CS与网页设计,黑马程序员，人民邮电出版社，2019参考书：1 .工业和信息化部教育与考试中心.Web前端开发（初级）上册北京：电子工业出版社,20192 .工业和信息化部教育与考试中心.Web前端开发（初级）卜.册北京：电子工业出版社，20193 .北京新奥时代科技有限贵任公司.呢b前端开发实训案例教程（初级）北京：电子工业出版社,20194 网站5 .MDN网站（二）课程资源的开发与利用1 .开发课件、做课等教学资源：2 .选用符合教学要求的录像、课件、视频、资料文献等资源辅助教学：3 .依托学校职教云教学平台进行课程资源建设。（=）教学基本条件1 .专业教师的要求（1）具有前端新知识、新技能的学习能力和创新创业能力：（2）具备前端架构设计能力；（3）具备移动端开发能力：C4）具备前端组件化能力：（5）具备网站性能优化能力（6）具有较强的工作过程系统课程教学设计能力：（7）具有较强的行动导向教学组织与实施能力。2 .学习场地、设施的要求为保证项目、任务的实施与完成，本课程必须在实践理论体化教室完成教学过程。（四）教学建议1 .本课程以实际的典型应用为基础构建学习我体，建议在每个学习情境的教学实施中，完全采用项目引导、任务驱动的行动导向教学，并以小组协作方式完成各项工作任务。2 .以Web项目的设计、实现作为驱动生线，实现理论实践体化教学。学生通过感性认识，理性思维，动手操作，完成Web项目的分析、设计、编码、调试和运行，在做中学，在学中做，最终达到真正听得懂，学得会,做得好，切实提高动手能力和分析问题、解决问题的综合素质。3 .在教学过程中，要创设工作情景，同时应加大实践实操的容量，要索密结合职业技能等级证书的考证，加强考证的实操项目的训练,在实践实操过程中，使学生掌握HTM1.静态页面设计与制作应有的技能，提高学生的向位适应能力。4 .在教学过程中，要尽量应用多媒体、动画视频、演示等教学资源辅助教学，帮助学生理解相关概念。5 .在教学过程中，在教学过程中，美注软件产业发展新业态、新模式，对接新技术、新工艺、新规范发展趋势，贴近生产现场。为学生提供职业生涯发展的空间，努力培养学生参与社会实践的创新精神和职业能力。6 .教学过程中教师应积极引导学生提升职业素养，培养职业道德。七、教学评价（一）成绩构成本课程主要以过程考核为主，考核涵盖学习情境全过程，既评价学生专业能力，也评价学生交流沟通、团队协作、自主学习、问题的分析与处理等非专业能力，以促进学生综合职业能力的养成。课程总评成绩=项目成绩（70%）+作业成绩10%）+考勤（10Q+课堂活动成绩（10%）（二）项目成绩评价指标项目总分100分，项目考核由指导教师对每个小组进行综合考核，考核内容分为三个部分：第部分是项目的设计和制作，占评价成绩的70斩第二部分是项目总结报告，占评价成绩的10¾第三部分是团队合作和语言表达,占评价成统10缸第四部分是职业操守，占评价成绩的10具体号核标准见表2。*2项目考核标准考核内容（满分100分）评分占满分的100%80占满分的8060%占满分的6佻以下“同学会”网站的设计与制作（70网页通用部分实现（10分）能够独立完成页面设计与制作可以通过其他人帮助下，能够完成页面设计与制作不能完成页面设计与制作首页（10分）能够独立完成页面设计与制作可以通过其他人帮助下，能绣完成页面设计与制作不能完成页面设计与制作分）邀谙函（5分）能够独立完成页面设计与制作可以通过其他人帮助下，能够完成页面设计与制作不能完成页面设计与制作日程表（5分）能够独立完成页面设计与制作可以通过其他人帮助下，能够完成页面设计与制作不能完成页面设计与制作往昔岁月（10分）能够独立完成页面设计与制作可以通过其他人帮助下，能够完成页面设计与制作不能完成页面设计与制作校园风光（10分）能够独立完成页面设计与制作可以通过其他人帮助下，能够完成页面设计与制作不能完成页面设计与制作在线留言（10分）能够独立完成页面设计与制作可以通过其他人帮助下,能够完成页面设计与制作不能完成页面设计与制作联系我们（10分）能够独立完成页面设计与制作可以通过其他人帮助下,能够完成页面设计与制作不能完成页面设计与制作总结报告（10分）格式符合要求,内容完整正确格式基本符合要求，内容部分正确内容未写清楚团队合作和语言表达（10分）有很强的团队合作精神，在团队中起主要作用，能够清晰地表述项目实现原理有一定的团队合作精神,在团队中起次耍作用,能够表述项目实现原理没有团队合作意识，基本未发挥作用，问题表述不清楚职业操守QO分）代码规范、命名规范、有注释、代码格式清晰代码可读性不高代码比较混乱