职业技术学校《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：使