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

《职业技术学校《HTML5与CSS3网页设计》课程标准0512.docx》由会员分享，可在线阅读，更多相关《职业技术学校《HTML5与CSS3网页设计》课程标准0512.docx（14页珍藏版）》请在优知文库上搜索。

1、课程标准课程名称：HTM1.5与CSS3网页设计专业大类：电子信息大类HTM1.5与CSS3网页设计课程代码：0311124课程名称：HTM1.5与CSS3网页设计课程性质：必修课程类别：职业技术基础课程适用专业：计兑机应用技术、软件技术、移动互联应用技术开设学期：第一学期授课学时：48（理实一体）+16学时项目强化一、课程定位HTM1.5与CSS3网页设计是计算机应用技术、软件技术、移动互联应用技术专业的一门职业技术基础课程，由浅入深地讲解了CSS3新特性的语法及使用技巧，涵盖JCSS3的众多功能模块，如CSS3选择器、边框模块、文本模块,颜色模块、UI界面模块、动画模块、响应式设计等，通过

2、理论、图解、实战的方式阐释CSS3的特性功能。通过学习本门课程，学生能更好地掌握CSS3的特性，并且将新技术运用到实际的开发当中，提而自己开发WCb程序的水平.二、课程设计以就业为导向，以能力为本位，不局限于单纯的技能训练，在培养学生职业岗位能力的基础上，围绕高素质第合型技术技能型人才专业培养目标，培养学生的终身学习的能力和职业生涯发展所需的综合素养。课程建设优化传统Hn1.1.网页设计类课程教学内容，设计教学情境，开发课程案例，建设课程教学资源，实施基于混合式教学的“教学做”一体化教学方式，采用过程式考核方式，提高课程教学质星。课程教学按照：“提出工程实际案例、分析案例所需知识、知识准备、师

3、生共同完成案例、布置任务、学生自主完成任务、小组交流、教加点评”的步骤进行。将课程基本知识点融于案例中，闱绕着案例来开展课堂教学活动,引导学生参与分析、讨论，让学生在具体的问题情境中，枳极思考，主动探索。课程教学内容符合职业技能培养要求，注重实践环节，实践性教学内容占课程内容的60%以上，课程既具有针对性、又具有技术性和综合性，有效地培养了学生复杂静态页面的设计与开发能力。三、课程目标(一)课程总目标通过基于工作过程的教学实施，使学生能够根据工作任务和要求，按网站设计的基本流程、需求规范，运用相关工具，独立自主完成基于HTH1.5和CSS3技术的铮态更杂页面的设计与制作。同时对接行业标准和岗位

4、要求强化学生的职业道德意识和职业素质养成意识；通过小组合作学习，培养学生团队合作、协议沟通能力：为后续Web前端开发打卜坚实的基础。(二)课程具体目标1 .知识目标(1)掌握CSS3的选择落的使用：(2)掌握CSS3的边框、背景、文本、颜色等基础特性：(3)掌握CSS3基础盒模型：(4)掌握CSS3的渐变、变形、过渡及动画功能。2 .能力目标(1)能膨设计、制作和调试或杂静态页面：(2)能合理规划、管理铮态站点；(3)能综合使用Hn1.1.5标签设计静态页面内容和结构：(4)能综合使用CSS3美化页面元素：(5)能综合使用CSS3实现渐变、变形、过渡和动画效果：3 .素质目标(1)培养学生良好

5、的语言表达能力：(2)培养学生自主学习习惯和团队合作能力，身心参与、手脑并用的劳动意识:(3)培养学生严谨细致的学习态度和追求完美的工匠精神：(!)树立坚定的理想信念，厚植爱国主义情怀；四、课程内容及学习情境根据Wcb前端开发工程师职业岗位的要求，遴选课程内容，课程内容打破学科体系，进行解构和重构。以真实的项目和任务为载体,基于Web前端开发的设计、开发与维护岗位的工作流程设置四个情境：1.CSS3,2.CSS基础应用,3.网页布局设计，4.项目强化。课程的主要内容和要求见表1。表1课程内容和学习情境表序号学习情境学习,体主要学习内容学习目标学时1学习情境1CSS3基本属性“环保企业网站”首页

6、任务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 .擎维溢出

7、文本属性：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 .掌捏流复渐变;

8、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(:项目任务：定义通用动画样式.并为首页元素添加动

9、国效果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.套用网站通

10、用部分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 .掌握C

11、SS3伪类选择涔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 .使用结构伪类选择器,实现例角表格等效果美化日程表项目任务：完成首页

12、域本框架和顶部内容任务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.使用溢出文本

13、属性，实现固定区域列表3,使用文本换行属性项目任务:完成首页关于我们模块任务5：使用CSS3颜色特性美化页面1 .掌握网页中的色彩特性：2 .使用透明属性OPaCity,制作透明过渡色块3 .使用颜色模式RGBHS1.,制作颜色色块项目任务：完成首页色块进度条教学方法建议任务骈动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境二；CSS3盒子模型项目名称I“同学会”网站学时I12教学目标1.理解盒子模型属性：2.掌握内容溢出局性；3.掌握自由缩放属性；4.掌握外轮廓属性：敦学学点1.理解盒子模

14、型属性：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：使