HTML5应用开发案例教程课程标准

《HTML5应用》课程标准课程名称：HTML5应用适用专业：软件技术课程学分：3.0参考学时：60，其中，理论学时12，实践学时48课程类别：专业选修课课程属性：选修课课程类型：B类（理论＋实践）产教融合课程、校企合作课程：是£否√1课程定位CSS3设计构建网站的必备知识，是当下最流行的web前端开发技术之一。HTML5的API是新一代Web标准所涵盖的核心技术。《HTML5应用》是计算机学科专业中必修的一门专业技术基础技能课程。《HTML5应用》重在介绍CSS3和HTML5API理论和设计的方法，是软件专业基础课程之一，也是本专业的核心课程。其前序课程有《网页制作》，后续课程有《JavaWeb开发框架》等，其主要任务是理解CSS3相关的理论知识和应用，掌握利用HTML5API开发技术。本课程利用多个网络资源，培养学生创新能力，并引导和培养学生将学习过的知识应用到解决时间问题，并参加html5前端技能大赛等专业竞赛做好准备。2课程目标课程要突出较强的实践能力性，通过本课程的学习，学生将掌握使用HTML5进行API应用程序开发的知识，了解CSS3的属性和属性值的设置，在文字、边框、图片和背景等方面的修改,为后续专业课程学习打下必备的基础，同时将爱党爱过教育嵌入其中。2.1能力目标2.1.1具有分析问题、解决问题的能力2.1.2具有建立实验假设、探索查阅知识的能力2.1.3能够运用系统性思维分析和解决问题2.1.4具有学习的热情和兴趣，能进行自主学习和自我评价，具有良好的变通能力、一定的创造性思维和批判性思维2.1.5具备扎实的HTML与CSS开发基础2.1.6能够独立进行整体操作规划及规范编写2.1.7能负责地完成任务，具有严格的时间观念以及时间管理意识2.1.8本专业职业成长过程，并能做好个人的职业规划2.1.9将学习的知识引入到一个到两个创新项目中，培养学生创新能力，并引导和培养学生将学习过的知识应用到解决时间问题，并参加html5前端技能大赛等专业竞赛做好准备2.2知识目标2.2.1网页工作原理和工作流程，html5特点，开发工具和环境2.2.2HTML5页面构建，文本标签、表单标签、分组标签和嵌入式标签的使用2.2.3javascript发展历史，数据类型，运算，流程控制语句2.2.4DOM文档对象模型，JavaScript对DOM节点的控制，事件机制和处理模型2.2.5CSS3选择器的用法，CSS3边框背景的设置，文本和字体的设置，盒式布局和多栏布局，CSS3变换、渐变和动画效果的实现。2.2.6了解音频、视频格式，JavaScript控制音视频的API。2.2.7Canvas的形状、图像和文本的绘制和渐变设置。2.2.8HTML5游戏开发的基本知识和使用Canvas开发小游戏2.2.9响应式网页设计中的媒体查询，响应式页面的设计流程。2.3素质目标2.3.1培养学生的逻辑思维能力2.3.2培养学生拥有良好的自主学习、独立分析解决问题的能力2.3.3培养学生团队合作及协作学习能力评价2.3.4培养学生创新与设计能力3课程设计理念和思路3.1课程设计理念依据工学结合、思政设计与专业内容相结合的高职教育教学改革精神，在基于工作过程的课程教学改革思想的指导下，面向高职类计算机专业的学生，以“项目案例驱动”模式组织教学内容，展开知识点，遵循高职教育的“够用为度”课堂原则，以实践过程分解理论，采用多个小而精的经典的脚本程序项目，作为实践案例，引导学生循序渐进地、由粗到细地进行HTML5和CSS3应用，讲解其中的技巧、方法，总结经验，引导学生跟随教师，重复示范代码的练习。通过课后复习轻工在线的视频课程中程序项目，在项目演练的过程中，进一步提高页面制作能力。3.2课程设计思路以项目为载体，以技术应用为主线索，借助轻工在线学习平台，将企业项目实施环境融入教学环境，运用工程化思维，引导学生通过问题的分析与解决，掌握学习方法和知识技能，养成认真踏实的工作习惯。学生课后利用网络资源巩固知识，并有针对性地布置小案例作业（知识网站有大量的互联网应用案例）。分析当前行业流行技术，围绕CSS3前端开发的编程技术要素，引导学生深入地学习html5API扩展应用和CSS3扩展应用，从而为编写Web前端代码的商业应用项目打下坚实的基础。4教学设计（课程内容、教学要求与学时分配等）单元名称训练项目学习任务知识要求技能要求（含素质要求）教学方法与手段建议学时分配重点、难点实践场所（校内、校外）特色说明（含思政改革特色、双创教育特色、产教融合教学特色、技能竞赛）静态网页制作项目1：编写一个简单的html5页面任务1-1：html5基本结构1.网页工作原理2.开发工具和开发环境3.HTML5基本结构4.HTML5新增的结构标签。5.掌握CSS3的使用方法。1.网页工作原理2.开发工具和开发环境3.HTML5基本结构4.HTML5新增的结构标签。5.掌握CSS3的使用方法6.培养学生拥有良好的自主学习、独立分析解决问题的能力；7.培养学生逻辑思维能力；8.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站4重点：HTML5基本结构、HTML5新增的结构标签难点：HTML5新增的结构标签的理解和运用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。静态网页制作项目2：旅游网站介绍文字的制作任务1-1：文本标签的使用1.掌握文本相关的标签1.理解运用h5的文本标签。2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力；4.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：文本标签的理解和应用难点：文本标签的理解和应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。静态网页制作项目3：旅游网站登录和

注册页面制作任务1-1：表格标签1.表格标签的使用方法。1.理解运用h5表格标签。2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力；4.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：表格标签的理解和项目中的应用难点：表格标签的理解和项目中的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。静态网页制作项目4：旅游网站登录和

注册页面制作任务1-1：表单标签结构1.表单标签结构1.理解运用表单标签。2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力；4.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：表单标签的理解记忆难点：表单标签在项目中的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。静态网页制作项目5：旅游网站首页制作（一）任务1-1：分组标签结构1.分组标签结构1.理解运用分组标签。2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力；4.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：分组标签理解记忆难点：分组标签在项目中的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。静态网页制作项目6：旅游网站首页制作（二）任务1-1：嵌入标签结构1.分组标签结构1.理解运用嵌入标签。2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力；4.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：嵌入标签理解记忆难点：嵌入标签在项目中的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。结合JavaScript的交互式网页制作项目1：货币汇率兑换器任务1-1：JavaScript的基本语法1.掌握JavaScript使用方法2.掌握标识符、数据类型和运算符。1.JavaScript使用方法。2.掌握标识符、数据类型和运算符；3.培养学生逻辑思维能力；4.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：网页中如何引入使用JavaScript脚本；标识符、数据类型和运算符难点：数据类型校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。结合JavaScript的交互式网页制作项目2：旅游网站用户注册的合法性验证任务1-1：JavaScript程序构成1.掌握流程控制2.掌握函数。3.掌握对象的构造。1.流程控制的理解和应用。2.函数的定义和使用；3.对象的构造和使用；4.培养学生逻辑思维能力；5.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：选择语句和循环语句；对象的构造方法难点：对象的构造方法与应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。结合JavaScript的交互式网页制作项目3：旅游网站的景点查询动态生成页面制作任务1-1：JavaScript访问DOM节点1.掌握文档对象模型2.掌握DOM节点的基本操作；3.DOM事件机制4.JavaScript事件处理机制。1.掌握文档对象模型2.掌握DOM节点的基本操作；3.DOM事件机制4.JavaScript事件处理机制5.培养学生逻辑思维能力；6.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站4重点：掌握DOM节点的基本操作；avaScript事件处理机制难点：掌握DOM节点的基本操作；avaScript事件处理机制校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。CSS3界面美化项目1：旅游网站的后台订单管理页面制作任务1-1:CSS3选择器1.掌握CSS3选择器的用法。1.掌握CSS3选择器的用法；2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：CSS3关系属性和伪类选择器的用法；难点：CSS3关系属性和伪类选择器的用法；校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容CSS3界面美化项目2：CSS3旅游网站的旅游线路推广页制作任务1-1:CSS3边框和背景1掌握CSS3边框的设置；2.掌握CSS3背景的设置。1掌握CSS3边框的设置；2.掌握CSS3背景的设置；3.培养学生逻辑思维能力。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：CSS3边框属性的设置；背景属性的设置难点：CSS3边框属性的设置；背景属性的设置校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容CSS3界面美化项目3：CSS3文本和字体任务1-1:旅游网站的机票预订页面制作1.掌握CSS3文本设置和服务器字体的用法。1.掌握CSS3文本设置和服务器字体的用法；2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：CSS3文本设置和服务器字体难点：服务器字体校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容CSS3界面美化项目4：使用Flex布局构建网站首页任务1-1:盒式与多栏布局1.掌握CSS3弹性盒式布局的用法。1.掌握CSS3弹性盒式布局的用法；2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：CSS3弹性盒式布局的用法难点：CSS3弹性盒式布局的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容CSS3界面美化项目5：旅游网站的游记页面制作任务1-1:多栏布局1.掌握多栏布局的用法。1.掌握多栏布局的用法；2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：栏布局的用法难点：栏布局的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容CSS3界面美化项目5：升级改版旅游网站首页任务1-1:css32D变换与动画1.掌握2D变换用法。1.掌握2D变换用法；2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：css3的变换属性难点：结合项目的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容CSS3界面美化任务1-2:css32D过渡动画1.掌握过渡动画用法。1.掌握过渡动画用法；2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：过渡动画的属性设置难点：结合项目的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容CSS3界面美化任务1-3:css32D过渡动画1.掌握动画用法。1.掌握动画用法；2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：动画设置和调用的属性设置难点：结合项目的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容音频/视频特效网页制作项目1：带iPod播放器的旅游网站首页制作任务1-1:HTML5音频1.了解音频格式2.掌握音频播放的简单应用；3.音频播放的高级应用1.了解音频格式2.掌握音频播放的简单应用；3.音频播放的高级应用；4.培养学生拥有良好的自主学习、独立分析解决问题的能力；5.培养学生逻辑思维能力；6.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：js控制音频相关的API难点：结合项目的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容音频/视频特效网页制作项目2：随页面滚动自动切换视频的旅游广告页制作任务1-1:HTML5视频1.了解视频格式2.掌握视频播放的简单应用；3.视频播放的高级应用1.了解视频格式2.掌握视频播放的简单应用；3.视频播放的高级应用；4.培养学生拥有良好的自主学习、独立分析解决问题的能力；5.培养学生逻辑思维能力；6.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：js控制视频相关的API难点：结合项目的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容音频/视频特效网页制作项目3：全视频背景下的时尚主页设计任务1-1:HTML5视频1.视频播放的高级应用1.视频播放的高级应用；2.培养学生拥有良好的自主学习、独立分析解决问题的能力；3.培养学生逻辑思维能力；4.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：音视频结合项目的应用难点：音视频结合项目的应用校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容Canvas动画制作项目1：在HTML页面上绘制矩形任务1-1:Canvas的相关概念1.Canvas标签；2.渲染上下文；1.canvas标签的理解；2.上下文渲染；3.培养学生拥有良好的自主学习、独立分析解决问题的能力；4.培养学生逻辑思维能力；5.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：canvas标签的理解；上下文渲染难点：canvas标签的理解；上下文渲染校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容Canvas动画制作项目2：简易画板制作任务1-1:Canvas绘制简单图形1.绘制线条；2.绘制/填充矩形；3.绘制/填充圆弧和曲线；4.Canvas状态保存和恢复1.绘制线条；2.绘制/填充矩形；3.绘制/填充圆弧和曲线；4.Canvas状态保存和恢复；5.培养学生拥有良好的自主学习、独立分析解决问题的能力；6.培养学生逻辑思维能力；7.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：绘制线条；绘制/填充矩形；绘制/填充圆弧和曲线难点：绘制/填充圆弧和曲线校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容Canvas动画制作项目3：在线广告图插件制作任务1-1:绘制图像和文本1.绘制图像；2.绘制文本；1.绘制图像；2.绘制文本3.培养学生拥有良好的自主学习、独立分析解决问题的能力；4.培养学生逻辑思维能力；5.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：绘制图像；绘制文本难点：绘制图像；校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容Canvas动画制作项目4：滑动验证码制作任务1-1:绘制图像和文本1.绘制变形；2.绘制渐变；3.绘制阴影；1.绘制变形；2.绘制渐变；3.绘制阴影；4.培养学生拥有良好的自主学习、独立分析解决问题的能力；5.培养学生逻辑思维能力；6.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：绘制变形；绘制渐变；绘制阴影；难点：绘制变形；绘制渐变校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容HTML5游戏开发项目1：小黄人吃泡泡游戏任务1-1:游戏开发的实践1.Canvas动画的实现；2.鼠标键盘事件；1.Canvas动画的实现；2.鼠标键盘事件；3.培养学生拥有良好的自主学习、独立分析解决问题的能力；4.培养学生逻辑思维能力；5.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：Canvas动画的实现；鼠标键盘事件难点：Canvas动画的实现；鼠标键盘事件校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容HTML5游戏开发项目2：经典俄罗斯方块游戏任务1-1:游戏开发的实践1.Canvas动画的实现；2.鼠标键盘事件；3.元素碰撞检测和自由落体1.Canvas动画的实现；2.鼠标键盘事件；3.元素碰撞检测和自由落体；4.培养学生拥有良好的自主学习、独立分析解决问题的能力；5.培养学生逻辑思维能力；6.培养学生团队合作及协作学习能力评价。设问引入法、案例示范法、演练结合法、多媒体教学课件、专题网站2重点：元素碰撞检测和自由落体难点：元素碰撞检测和自由落体校内：软件专业实训室技能竞赛：html5前端技能大赛中的内容响应式网页制作项目1：响应式企业网站

首页制作任务1-1：响应式设计应用1.媒体查询2.响应式页面的设计流程1.媒体查询；2.响应式页面的设计流程；3.培养学生逻辑思维能力；4.培养学生团队合作及协作学习能力评价。需求驱动练习、探索教学法、多媒体教学课件、专题网站2重点：媒体查询；响应式页面的设计流程难点：响应式页面的设计流程校内：软件专业实训室思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。响应式网页制作项目1：响应式旅游网站页面制作任务1-1：响应式设计应用1.媒体查询2.响应式页面的设计流程1.媒体查询；2.响应式页面的设计流程；3.培养学生逻辑思维能力；4.培养学生团队合作及协作学习能力评价。需求驱动练习、探索教学法、多媒体教学课件、专题网站2重点：响应式页面的设计流程难点：响应式页面的设计流程的应用校内：软件专业实训室思政改革特色：通过掌握网页结构的相关知识，掌握其在新兴领域中的运用，实现价值引领、知识传授、能力培养的教育教学目标，充分发挥课堂主渠道作用，切实将正确的思想价值引领贯穿教育教学全过程和各环节。5教学实施建议5.1教材选用建议5.1.1主选教材5.1.2备选教材5.1.3参考教材在线资源：5.2教学场地1.要求机房教室2.课室以小组方式布置,便于小组讨论