计算机应用技术专业《H5+CSS3》课程标准

《HTML5+CSS3》课程标准

一、课程的性质

该课程是软件与信息服务专业的一门专业核心课程。该课程是一门具有很强的实践性和应用性的课程，主要培养学生面向基于HTML5+CSS开发跨平台Web应用HTML5工程师岗位的核心能力和职业素质；培养学生使用HTML5技术开发移动web应用，主要认识和掌握HTML5特性：语义特性、本地存储特性、设备兼容特性、性能与集成特性、连接特性、网页多媒体特性、三维、图形及特效特性、CSS3特性等。其前导课程为《程序设计基础》、《网页制作基础》、《数据库SQL》和《JavaScript程序设计》

二、课程设计理念

（一）课程设置的依据

该课程总体设计思路是以岗位面向为依据、以就业为导向、以能力培养为目标、以案例引领式教学为手段，依据当前HTML5的发展状况和web前端开发岗位所提出的新要求，既可以巩固前期所学web前端开发的理论知识和设计软件应用知识，还重在于给学生开拓新的专业知识面，认知一个新的设计领域--跨平台应用开发，从而拓展职业能力和就业选择面。

（二）课程内容确定依据

该门课程的总学时为108。以基于工作过程的课程开发理念为指导，以职业能力培养和职业素养养成为重点，根据技术领域和职业岗位（群）的任职要求，以学生就业为导向，在行业专家的指导下，对HTML5，web开发等专门化方向所涵盖的岗位进行任务与职业能力分析，以实际工作任务为引领，以创新能力培养为主线，将课程知识体系整合，在教学过程中注意体现学生设计和开发能力培养的循序渐进性。在教学内容和方法上贯彻“技能培养为主，知识够用为度”的教学思想，旨在培养学生的创新意识，提高岗位实践能力和适应能力，保证学生专业能力、方法能力和社会能力的全面培养。

（三）课程开发思路

根据高职教育的特点，按照学院“厚德强技”的校训，积极探索以实践能力考核为主的课程评价方法，从而提高学生的职业能力和就业竞争力，具体措施体现在以下几个方面：

第1页共10页

 基于典型工作过程分析，构建课程体系；

 职业能力培养为核心，设计教学内容；

 以提高学生职业能力和职业素养为目标，重视实践教学；

 融合职业资格标准，推行双证书制；

 校企合作，共建新型实践教学基地；

 校企合作，形成实践技能课主要由企业兼职教师讲授的机制。

三、课程目标

本课程的培养目标是通过这门课程的学习，主要培养HTML5跨平台移动应用开发的人才，重点培养学生移动web开发HTML5+CSS3+JavaScript的分析与设计能力。学生通过本课程的学习，具备应用HTML5开发技术解决移动移动web应用开发领域中的问题，具备编写多设备跨平台轻应用WebAPP代码的能力。

（一）知识目标

 理解移动WebAPP的开发流程和设计思路；

 掌握HTML5新元素；

 掌握HTML5表单的使用；

 掌握CSS3选择器的使用；

 掌握CSS3创建布局的方式；

 掌握CSS3边框和背景的应用；

 掌握CSS3文本样式的应用；

 掌握CSS3过渡、动画和变换的应用；

 掌握Ajax的应用；

 掌握HTML5高级功能——使用多媒体；

 掌握HTML5高级功能——使用canvas元素；

 掌握HTML5高级功能——使用地理定位；

 掌握HTML5高级功能——使用web储存；

 掌握HTML5高级功能——使用拖放

 掌握HTML5高级功能——创建离线web应用程序

（二）技能目标

 培养编程思想，熟悉基本程序设计方法；

第2页共10页

 能更好的利用HTML5高级开发技术解决移动应用开发领域中的问题；

 将HTML5+CSS3开发方法用于综合实训项目中，为就业实习奠定基础；

 能具备编写移动应用WebAPP代码的能力；

（三）素质目标

 培养良好的分析、设计和逻辑思维能力；

 培养良好的思想品德、心理素质；

 培养良好的职业道德，包括爱岗敬业、诚实守信、遵守相关的法律法规等；

 培养良好的团队协作、协调人际关系的能力；

 培养对新知识、新技能的学习能力与创新能力。

四、课程内容和要求

根据专业课程目标和涵盖的工作任务要求，确定课程内容和要求，说明学生应获得的知识、技能与态度。

教学

内容

工作任务、单元或模块

1.1HTML5历史

学时安排

知识要求

掌握HTML、XHTML和HTML5的发展历程；

掌HTML5新一代标准的形成；

技能要求

理论 实践

了解新一代HTML5是如何成型

HTML5+CSS3的新特性:语义特性、本地存储特性、设备兼容特性、性能与集成特性、连接特性、网页多媒体特性、三维、图形及特效特性、CSS3特性等

HTML5和CSS3浏览器的支持情况

1、HTML5背景知识

1.2 HTML5简介

了解HTML5+CSS3的新特性

2 2

1.3 HTML5发展现状

1.4 开发HTML5的准备工作

了解HTML5和CSS3浏览器的支持情况

挑选HTML5的浏览HTML5的浏览器、编辑器、器、编辑器、服务器，服务器 并且编写简单的HTML5网页

第3页共10页

2.1HTML5HTML5新增带有语义特性的标记文字 的文本元素

2、掌握HTML5新元素

2.2 HTML5的文档分节

HTML5新增带有语义特效的结构化元素

HTML5新增的表单元素和属性

CSS的新特性、新增选择器类型

掌握和使用HTML5新增带有语义特效的元素

掌握HTML5新增带有语义特效的结构化元素进行内容的分块和布局

掌握HTML5新增表单元素以及属性的应用

了解CSS的新特性

掌握CSS3新增选择器类型

理解盒子模型以及创建响应式布局的方式

掌握CSS3边框与背景属性的应用和样式设置，掌握圆角边框等常见样式的设置

掌握CSS3常见文本格式的样式设置

2 2

2 4

2.3 HTML5表单

2 4

3.1 CSS3新增选择器

3.2 CSS3创建布局

4 4

CSS3盒子模型、创建多列 2 4

3、CSS3

3.3 CSS3边框与背景

CSS3边框和背景属性 2 4

3.4 CSS3文本格式

3.5 CSS3过渡、动画和变换

CSS3文本格式属性 2 4

CSS3网页动画效果属性

掌握网页动画效果的制作

2 4

4.1 理解DOM元素、DOM（文档对象模型）对象对象与事件 与属性、事件响应机制

4、Ajax的应用

4.2 使用Ajax

能够理解DOM对象模型的使用与应用

2 4

能够理解Ajax异步Ajax异步传输机制、常见传输机制；掌握常见XML、HTML、JSON数据、数据包XML、Ajax发送和接收数据 HTML、JSON特点； 应用Ajax发送和请求数据

2 6

第4页共10页

5.1 HTML5使用多媒体；

HTML5新媒体video和audio元素、通过DOM操作自定义多媒体

使用video元素播放视频、使用audio播放音频、以及掌握掌握通过API方式操作多媒体。

2 2

5.2 HTML5使用canvas元素；

HTML5canvas元素、画布绘制图像和文字；

掌握使用canvas元素绘制图形、图像和文字

2 4

5.3 HTML5使用地理定位

5、 HTML5高级功能

5.4 HTML5使用web储存

地理定位方式和原理、监控位置；

熟练应用地理定位（Geolocation）API获取地理位置信息，以及获得位置更新

2 4

HTML5本地存储以及会话存储

掌握使用web存储数据，区分使用本地存储和会话存储两种方式

2 4

5.5 HTML5使用拖放

HTML5拖放的事件、对象以及对象方法

掌握HTML5拖放的方式;启用拖动功能、处理事件、使用DataTransfer对象以及方法

掌握HTML5创建多线程的方式和开发中的应用，掌握离线状态下访问web应用程序的方式和应用

2 6

5.6 HTML5创建离线web应用程序

HTML5多线程与离线应用缓存

2 6

理论 / 实践 课时合计

合计

36

108

72

五、课程实施和建议

（一） 课程的重点、难点及解决办法

第5页共10页

本课程是软件与信息服务的专业核心课程，重点是培养学生掌握移动webAPP的分析与设计能力，具备编写APP应用软件代码的能力。

本课程的教学难点是让学生掌握相关代码编写能力并应用到实际开发中。

解决办法是通过多种渠道加强与软件开发企业的沟通与合作，与企业合作建立校外实训基地，为学生实训提供条件；多种教学方法灵活运用，再配以课外作业等形式激发学生的学习动力，增强学生的学习兴趣，提高教学效果；不断完善现有的校内实训基地，尽可能地在教学过程中引用企业的一些实际项目进行项目式教学，增强学生的动手操作能力以及对企业更深层次的认识能力；建设和完善课程的网络资源，为学生的学习提供多种渠道的便利条件；加强任课教师实践能力的培养，增强其教学能力等。

（二）教学方法和教学手段

1、教学方法

本课程主要采用任务驱动法、案例教学法等多种教学方法。

任务驱动法：任务驱动法是指在学习的过程中，学生在教师的帮助下，紧紧围绕一个共同的任务活动中心，在强烈的问题动机的驱动下，通过对学习资源的积极主动应用，进行自主探索和互动协作的学习，并在完成既定任务的同时，引导学生产生一种学习实践活动。任务驱动的教与学的方式，能为学生提供体验实践的情境和感悟问题的情境，围绕任务展开学习，以任务的完成结果检验和总结学习过程等，改变学生的学习状态，使学生主动建构探究、实践、思考、运用、解决、高智慧的学习体系。

案例教学法：案例教学法就是在老师的指导下一种以案例为基础的教学法，案例教学方法有一个基本的假设前提，即学生能够通过对这些过程的研究与发现来进行学习，在必要的时候回忆出并应用这些知识与技能。通过案例的教学，可以鼓励学生独立思考，引导学生变注重知识为注重能力，重视双向交流。以案例的教学方式，让学生学会思考，学会解决问题的方法。通过案例教学，让学生通过经验的交流，可以取长补短，促进学生人际交流能力的提高。

多种教学方法的灵活应用，能够大大的激发学生的学习热情，从而增强该门课程的教学效果。

2、教学手段

多媒体教学：课堂教学以多媒体电子课件（PPT电子教案）为主，配合使用板书。充分利用多媒体的优势，用电子课件制作大量内容丰富的教案，在配以案例、习题等内容，以取第6页共10页

得较好的教学效果。

网络教学：利用多媒体一体化教室、校园网等资源优势，构建本课程的教学网站，通过网络提供丰富的教学资源。包括教学大纲、教学实施计划、电子教案、PPT课件、习题及答案、试卷、实习计划、案例、论文等。学生可以利用课下时间自主学习，开阔视野。

（三）教学评价

本课程的评价主要是阶段评价与最终评价相结合、理论评价与实践评价相结合的模式，突出过程与模块评价，结合课堂提问、操作技能、课后作业等手段，实践性考核比重大些，但要注重平时的评分汇集。平时的评分内容包括职业道德、学习能力、团队协作精神、沟通交际能力、写作能力、语言表达能力、知识的运用和掌握能力等方面的考核。 建议在教学中分任务模块评分，在课程结束时进行综合模块考核或者利用答辩的形式考察学生对所学知识的理解与掌握程度。这样多元化的评价体系得出的结果能够体现出本门课程的特殊性以及对学生的公平与公正。

各任务模块可参照下表进行评价：

学习情景 工作任务

1.1HTML5历史

评价目标

掌握HTML、XHTML和HTML5的发展历程；

掌HTML5新一代标准的形成；

评价方式

评价比重

2%

1.2 HTML5简介

HTML5+CSS3的新特性:语义特性、本地存储特性、设备兼容特性、性能与集成特性、连接特性、网页多媒体特性、三维、图形及特效特性、CSS3特性等

HTML5和CSS3浏览器的支持情况

HTML5的浏览器、编辑器、服务器

1、HTML5背景知识

过程性评价：提问、案例分析、课后作业；

总结性评价：一个完整的作品所涉及到的知识能够全部体现；

2%

1.3 HTML5发展现状

2%

1.4 开发HTML5的准备工作

2%

第7页共10页

2.1HTML5的标记文字

2.2 HTML5的文档分节

HTML5新增带有语义特性的文本元素

HTML5新增带有语义特效的结构化元素

HTML5新增的表单元素和属性

CSS的新特性、新增选择器类型

CSS3盒子模型、创建多列

CSS3边框和背景属性

2、掌握HTML5新元素

2.3 HTML5表单

过程性评价：操作熟练度、快捷操作熟练度、软件工具选择准确，操作流程合理、课后作业；

总结性评价：一个完整的作品所涉及到的知识能够全部体现

2%

6%

6%

3.1 CSS3新增选择器

3.2 CSS3创建布局

3、CSS3

3.3 CSS3边框与背景

3.4 CSS3文本格式

3.5 CSS3过渡、动画和变换

4.1 理解DOM元素、对象与事件

4%

CSS3文本格式属性

过程性评价：数据的基本操作、动手操作、案例分析、课后作业；

总结性评价：一个完整的作品所涉及到的的功能能够全部实现；

4%

4%

2%

CSS3网页动画效果属性 6%

4、Ajax的应用

过程性评价：线程的DOM（文档对象模型）对应用、线程的开启、象与属性、事件响应机制

线程的操作、动手操作、案例分析、课后作业；

Ajax异步传输机制、常见总结性评价：一个完4.2 使用Ajax XML、HTML、JSON数整的网站页面所涉及据、Ajax发送和接收数据

到数据传输的功能能够全部实现；

过程性评价：编写程序代码、动手操作、案例分析、课后作业；

总结性评价：一个完整的应用程序应用基本成型

4%

4%

5、 HTML5高级功能

5.1 HTML5使用多媒体；

HTML5新媒体video和audio元素、通过DOM操作自定义多媒体

6%

第8页共10页

5.2 HTML5使用canvas元素；

HTML5canvas元素、画布绘制图像和文字；

8%

5.3 HTML5使用地理定位

地理定位方式和原理、监控位置；

8%

5.4 HTML5使用web储存

HTML5本地存储以及会话存储

8%

5.5 HTML5使用拖放

HTML5拖放的事件、对象以及对象方法

8%

5.6 HTML5创建离线web应用程序

HTML5多线程与离线应用缓存

8%

合计 100%

说明：每个模块的考核主要考察学生的出勤情况、实际动手能力、理论知识的运用与掌握情况、完成作业的准确度、完整度、规范度等、分析问题、解决问题的能力、合作沟通能力、学习态度、总结报告（报告的内容、态度、写作水平等）等评定项目进行考核。

（四）教案编写建议

教案是教师依据课程标准的要求，结合个人教学实践和学生的认知水平设计、编写教学实施方案，教案的编写应充分体现“以学生为主体的”理念，以利于教学的组织和围绕学生知识的学习以及职业能力的培养开展教学。

一般包括以下几项：

第9页共10页

1．教学内容及教学组织

2．教学方法的选择

3．学习情景设计

4．课后作业与课外学习

（五） 教材编写

如果编写教材，那么必须依据本课程标准编写教材。教材的编写要充分体现案例课程设计思想，以案例为载体实施教学，案例的选取要科学、符合该门课程的工作逻辑、能形成系列，让学生在完成案例的过程中逐步提高职业能力，同时要考虑可操作性。教材内容要反映新形势下的移动webAPP开发的思路，要与企业合作开发，让企业具有丰富实践经验的人员参与进来，同时还要结合高职高专软件与信息服务专业教学的基本情况，以理论知识够用、注重实践能力的培养。

如果是选用教材，那么选用的教材一定要符合高职高专教学的要求，且为案例型教材，能够科学、合理的安排教材内容，帮助学生不断提高综合素质与职业能力。

（六）课程资源的开发与利用

1、教辅材料：要力求接近实践，最好是来源于实践的案例与情境，并开发课程的习题、参考文献等内容，向学生开放，以利于学生自主学习。

2、实训指导书：格式正确、内容全面，且能具体写明对学生的各项要求。

3、软件环境：校内实训最好安排专用实训室，引进一些实际项目用于教学。

4、硬件环境：希望能够加大对硬件实训内容的建设，加大对校外实训基地的建设，为学生的校外实践提供环境条件。

5、信息技术：充分的利用各种信息技术，例如网络、多媒体课件等，为学生提供学习的便利条件。例如加大课程的网络资源建设，把与课程有关的文献资料、教学大纲、电子教案、教学课件、习题、教学视频、与职业资格考试相关的资料、学生与教师的互动等都放到网上，充分的为学生的自主学习提供环境条件。

（七）师资和实训条件

要求任课教师必须具有丰富的项目开发能力和丰富的开发经验、基于学生能力培养的教学能力等，以利于教学和课程的改革。

第10页共10页

另外，本门课程的实训条件要求有教学做一体化的综合实训室，融教学与实训为一体，以及与课程相应的软件作支持。

六、其它说明

（1）本课程由XX学院开发。

（2）本课程标准的主要适用于高等职业技术院校。

第11页共10页