《HTML5与微网站开发》课程标准.docx

《《HTML5与微网站开发》课程标准.docx》由会员分享，可在线阅读，更多相关《《HTML5与微网站开发》课程标准.docx（6页珍藏版）》请在第一文库网上搜索。

1、HTML5与微网站开发课程标准一、课程概述1 .课程性质HTML5与微网站开发是移动互联应用技术专业针对移动互联应用开发企业的Web前端开发岗位，经过对企业岗位典型工作任务的调研和分析后，归纳总结出来的为适应具备Web前端开发能力要求而设置的一门专业核心课程。2 .课程任务HTML5与微网站开发课程通过与Web前端开发相关的实际项目学习，增强学生对专业Web前端开发知识运用的认识，让他们熟练掌握流式布局的方法，熟练掌握视口概念、媒体查询方法、栅格系统的原理及应用方法，熟练掌握弹性布局的方法，熟悉Bootstrap前端框架的使用方法，从而满足企业相应岗位的职业能力需求。3 .课程要求通过理实一体

2、的课程学习，培养学生Web前端开发方面的岗位职业能力，养成良好的职业道德、职业素养、法律意识，养成质量意识、环保意识、安全意识、信息素养、工匠精神、创新精神，养成勇于奋斗、乐观向上，能够进行有效的人际沟通和协作，与社会、自然和谐共处，具有职业生涯规划的意识，具有较强的集体意识和团队合作精神，为从事Web前端开发岗位打下坚实的基础。二、教学目标4 .知识目标(1)掌握HTML5音频与视频处理技术；(2)掌握HTML5拖曳技术；(3)掌握HTML5Canvas绘制图形技术；(4) 了解HTML5Web存储技术；(5)熟悉移动端页面布局和常用事件；(6)掌握视口概念；(7)掌握流式布局技术；(8)掌

3、握媒体查询技术；(9)掌握响应式布局技术；(10)掌握响应式布局中栅格系统原理；(11)掌握Flex弹性布局技术；(12)掌握微网站开发的技术。5 .能力目标(1)能使用HTML5音频与视频技术处理音视频；(2)能使用HTML5拖曳方法拖曳文件；（3）能使用HTML5Canvas绘制图形；（4）能设置视口；（5）能进行流式布局；（6）会使用媒体查询技术；（7）能进行响应式布局；（8）能在网页布局中使用栅格系统；（9）能使用Flex弹性布局技术；（10）能开发简单的微网站。6 .素质目标（1）培养学生良好的自我表现、与人沟通能力；（2）培养学生的团队协作精神；（3）培养学生分析问题、解决问题的能

4、力；（4）培养学生勇于创新、敬业乐业的工作作风；（5）培养学生的质量意识、安全意识；（6）培养学生诚实、守信、坚忍不拔的性格；（7）培养学生自主、开放的学习能力。三、与前后课程的联系1 .与前续课程的联系网页设计与制作课程使学生熟悉了HTML语言和CSS的基本知识，系统学习了文本网页、列表网页、导航栏、表单网页等制作方法和使用CSS个性化页面的方法，具备了网页设计与制作的能力。2 .与后继课程的关系本课程的后续课程是综合技能训练实训，该课程的学习要以本课程所学习的流式布局、视口、媒体查询、栅格系统、弹性布局为基础，如学生能通过本课程的学习，具备一定的Web前端开发和Bootstrap前端框架的

5、使用能力，将对学生学通这些课程起到很好的促进作用。四、教学内容与学时分配表1课程项目结构与学时分配表序号教学单元名称主要教学内容教学目标建议学时备注1HTML5Web存储K1-1移动互联网的发展K1-2什么是移动Web开发Kl-3基于HTML5的移动Web开发01-1了解移动互联网的发展01-2了解什么是移动Web开发01-3熟悉基于HTML5的移动Web开发01-4/解WebStorage简介01-5了解localstorage的使用方法4理实一体K1-4WebStorage简介KI-5localStorageKl-6sessionStorageKl-7Storage事件监听01-6了解se

6、ssionStorage的使用方法01-7了解Storage事件监听2HTML5Canvas绘图K2-1canvas绘制线条K2-2canvas绘制三角形K2-3canvas绘制与清除矩形K2-4canvas绘制圆K2-5canvas绘制圆弧02-1掌握使用canvas绘制线条的方法02-2掌握使用canvas绘制三角形的方法02-3掌握使用canvas绘制与清除矩形的方法02-4掌握使用canvas绘制圆的方法02-5掌握使用canvas绘制圆弧的方法6理实一体3HTML5音频与视频播放K3lvideo标签K3-2HTMLDOMVideo对象K3-3audio标签K3-4HTMLDOMAud

7、io对象03-1学会video标签的使用03-2了解HTMLDOMVideo对象03-3学会audio标签的使用03-4了解HTMLDOMAudio对象4理实一体4HTML5拖曳K4-1draggable属性K4-2ondragstart事件K4-3ondragleave事件K4-4ondragend事件K4-5ondragenter事件K4-6ondragover事件K4-7ondrop事件K4-8dataTransfer.setData(,)K4-9dataTransfer.getData()04-1掌握设置元素为可拖曳的方法04-2掌握拖曳元素的ondragstartondragendo

8、ndragleave事件的使用方法04-3掌握目标元素的ondragenter、ondragoverondragoverondrop事件的使用方法04-4掌握dataTransfer对象的setData(,)sgetData。的使用方法04-5熟悉文件拖曳操作6理实一体5移动端页面布局和事件处理K5-1HTML5新增语义标签K5-2CSS子元素选择器K5-3固定布局K5-4流式布局K5-5视口K5-6Touch事件简介K5-7Touch事件的应用K5-8过渡结束事件K5-9CSS3animation属性K5-10CSS3keyframes规则K5-11动画结束事件05-1熟悉HTML5新增语义

9、标签05-2掌握CSS子元素选择器的应用05-3掌握流式布局的方法05-4熟悉移动端的三种视口05-5掌握使用标签设置视口的方法05-6掌握Touch事件的使用方法05-7掌握keyframes规则和animation属性的使用方法05-8掌握过渡和动画结束事件的使用方法12理实一体6媒体杳询与栅格系统应用K6-1响应式Web设计K6-2CSS3媒体查询K6-3栅格系统06-1了解什么是响应式Web设计06-2掌握CSS3媒体查询的使用方法06-3掌握栅格系统原理及应用方法4理实一体7Flex弹性布局K7-lflex弹性盒模型原理K7-2flex-direction属性K7-3flex-wra

10、p属性07-1了解弹性盒模型072认识主轴和交叉轴07-3掌握flex-direction属性使用方10理实一体K7-4flex-flow属性K7-5flex-grow属性K7-6flex-shrink属性K7-7flex-basis属性K7-8flex属性K7-9order属性K7-1Ojustify-content属性法07-4掌握flex-wrap属性使用方法07-5掌握flex-flow属性使用方法07-6掌握flex-grow属性使用方法07-7掌握flex-shrink属性使用方法07-8掌握flex属性使用方法07-9掌握order属性使用方法07-10掌握justify-con

11、tent属性使用方法8微网站综合项目开发K8-1项目简介及开发流程K8-2无序列表及属性K8-3appearance属性K8-4CSS3box-sizing属性K8-5固定定位K8-6overflow属性K8-7display属性K8-8CSS子元素选择器,K8-9选择器:first-of-type:last-of-type:nth-last-of-type()K8-10flex弹性布局K8-11浮动、清除浮动属性08-1初步了解项目开发流程08-2熟练掌握无序列表及属性的应用08-3掌握使用固定定位的应用08-4熟练掌握相对定位、绝对定位的应用08-5掌握CSS3box-sizing属性的应

12、用08-6掌握overflowdisplay属性的应用08-7熟悉appearance属性08-8掌握CSS子元素选择器,应用08-9熟悉选择器:first-of-type、：last-of-type、:nth-last-of-type（）08-10应用弹性布局08-11使用浮动属性进行布局12理实一体9期末考试项目学习内容，检测学习情况2合计60五、教材的选用1 .教材选取的原则教材选取遵循“适用、实用、够用”的原则。（1）适用。教材要以HTML5移动Web开发为基础，符合移动Web开发、移动Web页面美工、微网站开发等岗位的移动Web开发能力要求。（2）实用。教材应以真实项目为主线，按照高

13、职学生认识规律，将知识点序化在各个教学任务中，编写教材内容。强调理论与实践的结合，便于实现“教、学、做”三位一体。符合高职数字媒体应用技术学生特点。（3）够用。教材的内容主要包括移动Web开发的基本知识和响应式Web设计相关技术。以案例为主，不涉及太多、太深的纯理论性知识。2 .推荐教材（1）HTML5移动Web开发M.北京：中国铁道出版社,2017（2）移动Web开发从入门到精通M.北京：人民邮电出版社,2019.六、教师要求1 .具有丰富的HTML5、CSS3知识和网站开发经验。2 .具备丰富的移动Web开发和微网站开发经验。3 .具备较丰富的教学经验和较强课堂组织能力。4 .能打破传统的

14、教学模式，注意教学方法的灵活性，建立多种教学媒体综合运用的运行机制，逐步建立适合学生个别化自主学习的支持服务体系和质量保证体系。5 .项目课程在培训职业能力和和传授相应知识的同时，必须重视职业道德和职业意识教育的渗透，帮助学生养成良好的个人品格和行为习惯，培养爱岗敬业精神、团队协作精神和创业精神，帮助学生树立质量意识、节约意识、安全意识、环保意识、文明施工等职业意识。七、学习场地、设施要求该课程要求在理论实践一体化教室完成，以实现教、学、做、评合一，要求安装多媒体教学软件，方便下发教学任务和收集学生课堂实践结果，同时安装HTML5的Web开发工具HBuilder等软件。八、课程资源的开发与利用积极开发和利用网络教学资源：课程标准、实训指导书、授课计划、电子教案、教学资源库等教学文件，及多媒体教学课件、习题、案例库、试题库、在线开放课程等资源。建立互动交流网络平台。九、考核方式与标准职业教育培养高素质技术技能型人才，不但要重视学生职业技能和