HTML5应用开发课程标准

1、HTML5应用开发-软件开发方向课 程标准课程类别专业核心课程课程代码总学时108学分开设学期第三学期适用专业软件技术专业授课方式教学做一体化教学合作开发企业山东浪潮集团有限公司执笔人夏道春、李美芹 邓所春审核人制定时间一、课程概述（一）课程性质本课程是软件技术专业的一门专业核心课，该课程始终贯彻“工学 结合、项目导向”课程教学模式，以“实用、够用、必需”为原则，培 养学生的实际应用能力，取得了良好的教学效果。通过本课程的学习，使学生掌握网页设计的基本技术，建立网站并 规划网站；使学生掌握多种类型网站的设计技巧与注意事项，能比较 熟 练地规划个人网站、企业网站、门户网站、娱乐网站、游戏网站、

2、教学网站等各种不同主题的不同风格效果，促进学生创新意识和综合 职业能力的形成。（二）课程基本理念HTML5应用开发是体现以学生为主体的、基于工作过程导向的的学 习领域课程，在学习过程中，学生首先要获得的是关于职业内容和工 作环境的感性认识，进而获得与职业相关的专业知识和技能。即强 调以学生直接经验的形式一一典型网页的设计与制作，来掌握融合于实践行动中的新知识、新技能，而不是以往仅完成网页各独立元素的 设计与制作，真正落实教、学、做一体化课程的实施，切实提高人才 培养质量。对于学习领域课程，按照工作过程对课程内容进行序化，将陈述 性知识与过程性知识整合、理论知识学习与实践技能训练整合、专 业能力

3、培养与职业素质培养整合、工作过程与学生认知心理过程整 合，通过科学的教学设计，将学习领域细化成具体的学习情境。因此，MOOC在线学习主要通过视频讲解来获取专业基础知识，并通 过在线测试、答疑讨论完成知识点的掌握，翻转课堂中主要通过技能 实战训练达到巩固在线学习中所学的知识点，进一步提升专业实践水 平，通过面对面解决核心问题。（三）课程设计思路HTML5应用开发学习领域课程通过前一阶段前导课程的学习， 学习者已对网页设计与制作的基本部分，如网页色彩搭配、网页布局、 Photoshop网页图像设计工具等有了初步认识。网页设计与制作这一 典型工作任务仅靠已有的网页界面知识和技能已无法完成，这里要将

4、网页设计与制作作为重点来学习。学习者必须首先分析网页设计任 务，确定网页设计与制作过程中的主要问题，才能进一步作好网页 设计、制作的工作实施计划。同时，学习者应对电脑、网页设计工具 软件、脚本语言等有较深入的知识，对电脑、网页设计工具软件等有 较熟练的操作技能。教学过程要实现课堂案例教学放到M00C线上学习，翻转课堂中重 点进行相关类似项目案例制作与答疑，从教学过程和形式上体现“线 上”和“向下”的紧密结合。课程以项目为主线，通过问题、项目导入（实践）T学生思考、分 析、回答、教师评议、总结（理论）T扩展应用（实践）的方式进行， 使授课内容与工作实际紧密结合。（四）先修后续课程本门课程的先修课

5、程是数据结构、C语言程序设计、操 作系统，后续课程是JSP程序设计、Android程序设 计、顶岗实习等。二、课程目标（一）总目标通过本课程学习，使学生能熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架元素标志及属性设计出多窗口网页、 动态网页；掌握Dreamweaver进行网站的导入、规划 管理 发布的 相关技术及网页制作的操作技能；掌握JAVASCRIPT脚本编程语言的 基本 语法知识，HTML中JAVASCR I PT程序的嵌入方法，对象的概念 及使用JAVASCR I PT来进行开发、维护、管理和设置WEB应用程序； 能独立设计小型WEB站点。（二）具体目标通过本课

6、程的学习，学生要达到以下目标：1.职业能力目标能熟练运用Dreamweaver应用软件；熟练掌握使用绝对和相对 URL,创建超链接，图像链接，图像映射的建立方法；学会运用HTML语言中的标记设置颜色、文本格式和列表，熟 练掌握颜色值的配置和背景图案的设置方法，熟练掌握字符、链接颜 色的设置方法； 掌握在网页中添加css、嵌入图像、声音、多媒体信息的方法； 熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架 制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会 利用表单建立交互式页面； 掌握JavaScript语言的语法； 掌握在HTML语言代码中嵌入JavaScript代码的方法，

7、能看懂 JavaScript特效网页源代码； 能够按网页设计技术要求修改和调试JavaScript代码； 学会使用JavaScript语言实现网页特效。2.知识目标 了解WEB站点的工作原理； 了解WW、WHTTP、HTML、CSS的定义，概念和作用； 掌握HTML语言中的各种文本格式、字符格式、段落设置、列 表、表单、框架、多媒体标记的作用； 掌握Dreamweaver应用软件的使用功能； 掌握表格、表单的使用；理解对象的定义，及含义；理解事件的 概念；理解属性与方法的概念；了解面向对象程序设计思想。3.职业素质目标具有勤奋学习的态度，严谨求实、创新的工作 作风；具有良好的心理素质和职业道德

8、素养；具有高度责任 心和良好的团队合作精神；具有科学思维方式和一定的唯物辩证 法思想；具有较强的网页设计创意思维、艺术设计素质。三、内容标准与要求序号教学项目教学内容与教学要求教学活动设计建议参考课时1HTML5离线应 用熟悉HTML5的新特性、HTML5 网页结构；熟悉JavaScript的基本语 法；了解HTML5离线应用、缓 存的工作机制等基本概念；熟 悉manifest文件的结构和 作 用，能够搭建离线应用程序； 使用JavaScript技术实现离 线缓存更新、存储事件监听等 功能；以多媒体课件讲解基本概 念的基础上，以案例演 示的方式来加强学生对知 识难点的理解；采用讲 练结合的方式

9、让学生掌 握 HTML5离线应用的开发技 术。102HTML5 WebWorkers 多 线程处理理解Web Workers多线程工作 机制；熟悉Web Workers成员概念； 创建Web Workers ,使用多任 务并发处理等技术实现与Web Workers 通信；该部分理论性较强，内容 比较抽象，教师需要采用 多媒体课件进行基本概念 的讲解，以案例教学法 进行基本概念和理论的详 细演示，学生上机实现 Web Workers多线程应用 并展示。63HTML5Geo I ocation 地理位置理解 HTML5 GeoIocat ion 地 理 位置基本概念；掌握常用的 Geo 1 oca

10、tion API的功能和调 用方法，能够使用相关API获 取、处理相关位置信息；该部分内容实践性很强， 在采用多媒体课件讲解基 本概念的基础上，采用“学教做” 一体化的教学 方式，以教师为主导，带 领学生边学边做，完成地 理位置典型案例设计。84CSS3概述掌握CSS3的编码规范；了解CSS3的新增特性；应用CSS3 设计网页界面；本部分内容实践性很强， 在采用多媒体课件讲解基 本概念的基础上，采用 案例教学法，教师为辅， 学生自主完成CSS3案例 设计。10序号教学项目教学内容与教学要求教学活动设计建议参考课时5CSS3选择器了解选择器的基本概念；掌握CSS3属性选择器、结构伪类选 择器、U

11、I伪类选择器的定义 和使用方法；本部分内容实践性很强， 在多媒体课件讲解的基础 上，以案例教学法进行知 识点的详细讲解并带领学 生进行上机操作。学生自 主完成采用CSS3技术的 网页界面设计106文本、字体与 颜色掌握设计文本阴影；掌握定义文 本样式；掌握设计颜色样式；本部分内容实践性很强， 在多媒体课件讲解的基础 上，以案例教学法进行知 识点的详细讲解并带领学 生进行上机操作。学生自 主完成网页文本的样式和 颜色设计87背景与边框掌握多色边框设计概念并能实现 多色边框；掌握设计圆角、设计阴影、设计 背景的基本技术。本部分内容实践性很强， 在多媒体课件讲解的基础 上，采用讲练结合的方 式，进行

12、知识点的详细讲 解并带领学生上机实现。882D变形了解简单的动画变形概念；掌握Transform、2D变形技术实 现自定义变形和较复杂的变 形；本部分内容实践性很强， 教师须在多媒体课件讲解 的基础上，以案例教学法 带领同学进行上机操作， 同学按照任务进行上机练 习并进行总结。69设计动画掌握平滑过渡设计实现；掌握设 计各种渐变效果；本部分内容实践性很强， 教师以案例教学法进行详 细讲解，并带领同学进行 上机操作，同学按照任务 进行上机练习并进行总 结。6合计72四、实施建议(-)教学建议从HTML5应用开发的实际问题出发，精心准备各种典型案例， 构建课程的宏观教学设计。例如，公司网站、网上鲜

13、花直销、个人网站 精选、书籍专卖等。以若干个案例为载体，形成循序渐进、种类多样的 项目群，构建完整的教学设计布局。1.教学采用“四阶段教学法”，将“教、学、练、做”融为一体。教学体现“教师为主导，学生为主体，训练为主线”的原则，课堂上可以采用“四阶段教学法” o第1个阶段，案例引入，提出问题。根据MOOC视频学习的知识点，案例演示，提出问题，讲解案例应用 背景，给学生一个切入点，建立感性认识。目的是激发学生的学习兴 趣、让学生感到学有所用，从而明确本次课的教学目标。第2个阶段，学生自主学习，尝试解决问题。充分利用我校以及互联网网络教学资源，引导学生自主学习，找到 解决问题的方法和操作技能，培养

14、学生的自主学习意识和学习方法。 学生在学习和尝试解决问题过程中，发现问题，提出问题，在问题 的引导下学习相关的知识和操作技能。第3个阶段，归纳总结，引申提高。在每次课结束前，引导学生进行归纳总结。对本次课的实际意义、 重点、难点、容易出错处等及时进行总结。并针对案例的不足之处，进 行引申和提高。注意在这个阶段，强调的是“引导”学生，而不是老师 讲解。第4个阶段，举一反三、学以致用案例源于生活，最终要应用于生活。为了使学生能学以致用、举一 反三、触类旁通，每次教学结束时及时布置相关的课后练习，使学 生在课后进一步复习巩固，并且将课后作业纳入形成性考核的内容之 -0同时给出下一次课的学习内容，提示

15、学生在课下完成视频学习和 在线测试。2.充分利用现代化教学手段，提高教学效果教学中采用电子演示文稿、大屏幕多媒体联机演示、网络教学等各 种先进的教学手段，使课堂教学生动活泼、引人入胜，提高了教学 效果，同时提高了教学效率。包括：(1)利用多媒体教学系统广播教学。把学生的共同问题(需要提示 的重点)通过“广播教学”，边讲边演示，使学生即时看到操作效果。(2)利用网络将课堂教学延伸到课外，学生根据需要通过网络学 习有关的内容，并进行在线答疑和讨论。教师的课件和教学用资料 都已都上传到教学资源下载中心，方便学生课外学习和复习。(-)项目实施建议在教学实施过程中采取企业式教学分组方法，具体做法如下：一

16、个 班级分成若干个项目组，每个项目组由若干个学生组成，每个学生均 被“任免”相应的公司职务。1.学生的角色设计。每个班级由6-7人组成一个小组，即“项 目组”。确定项目组名称和组织架构，确定好每位同学在“项目 组”中担任的职务。根据岗位，学生各司其职，按老师的要求完成指 定的工作任务。2.教师的角色设计。教师根据自己的教学设计在不同的时期担任 不同角色，引导学生的学习。项目经理：作为项目经理，对各个项目 组提出“任务要求(学习目标的要求)”，并定期检查成果；客户：在课堂,作为客户，将课程的学习任务作为“业务”，让班级内的各个项目 组通过积极的学习来获得相应的任务，由教转为导。表二项目教学实施内

17、容表项目1企业宜传类网站设计与实现教室理实一体化教室具体描述制作个人简介、学校宣传类、公司介绍类网站1.网站需求分析和模块划分步骤2.首页面设计3.页面调试与兼容处理1. Windows桌面操作系统工具与设备2. WebStorm3. Photoshop教学方法任务驱动、小组讨论、头脑风暴、案例讲解、角色扮演1.具有自主学习、分析问题和解决问题的能力态度、素质2.具备良好的团队协作能力3.具备良好的职业规范和职业素质考核标准完成任务过程中表现出来的能力和任务方案的质量10%；工单考评20%；实操考评40% （包括成果转30%；素质考评项目2视频音频类网站设计教室理实一体化教室具体描述通过HTM

18、L5音频视频制作多种视频宣传网站1.视频界面设计2.页面布局规划步骤3.测试与运行1. Windows桌面操作系统2. WebStorm工具与设备3. Photoshop、 fI ash教学方法任务驱动、小组讨论、头脑风暴、案例讲解、角色扮演1.具有自主学习、分析问题和解决问题的能力2.具备良好的团队协作能力态度、素质3.具备良好的职业规范和职业素质考核标准完成任务过程中表现出来的能力和任务方案的质量 30%；素质考评10%； 工单考评20%；实操考评40% （包括成果转化）项目3学生成绩管理系统教室理实一体化教室具体描述运用HTML5本地数据库完成学生成绩管理系统1.需求分析2.数据库设计步

19、骤3.单元调试1. Windows桌面操作系统2. WebStorm工具与设备3. Photoshop、 fI ash教学方法任务驱动、小组讨论、头脑风暴、案例讲解、角色扮演1.具有自主学习、分析问题和解决问题的能力2.具备良好的团队协作能力态度、素质3.具备良好的职业规范和职业素质考核标准完成任务过程中表现出来的能力和任务方案的质量 30%；素质考评10%； 工单考评20%；实操考评40% （包括成果转化）项目4坦克大战游戏教室理实一体化教室具体描述综合应用HTML5绘图功能完成小游戏制作1 游戏总体架构搭建2.游戏模型构建步骤3.编码实现与单元测试1. Windows桌面操作系统2. We

20、bStorm工具与设备3. Photoshop、fI ash教学方法任务驱动、小组讨论、头脑风暴、案例讲解、角色扮演1.具有自主学习、分析问题和解决问题的能力2.具备良好的团队协作能力态度、素质3.具备良好的职业规范和职业素质考核标准完成任务过程中表现出来的能力和任务方案的质量 30%；素质考评 10%；（三）考核评价建议教学实施后的教学评价方法与思路：考核主体：体现多主体性，包括教师评价、小组评价、自我评价、同学互评；考核内容：包括课堂表现、课下项目任务完成情况、项目成果质成果转化情况等；考核方式：包括课堂提问、宣传栏展示、成果交流、模拟答辩、项 目成果转化等。评价因素：基于以下几个方面的考

21、虑，建设性地利用课堂时间完成 作业（个人得分）；学生的成果质量（小组得分）；对参考资料的运用 （小组得分）；课堂发言的逻辑性、创见性（小组及个人得分）；与组 员合作、平等、分享（个人得分）。表三课程教学评价表项目好50%一般 30%差20%按时完成任务自主学习能力项目实施能力独立工作能力报告书面表达项目具体指标好40%一般 30%差20%成果内容较好地表现了项目实施的要求。项目功能项目功能的运行与维护项目设计项目的整体规划设计有新意，启发性强。2）综合评价70%考评项II自我评估小组互评教师评估备注工作纪律3工作作风3素质考评10协作精神4工单考评20工具使用5实操考评40任务方案10实施过程20完成情况5其他合计70综合评价70（四） 教材编写建议1.依据本课程标准编写教材，教材应充分体现以工作任务为中心 组织课程内容和课程教学的设计思想。2.教材应将本专业职业活动，分解成若干典型的学习情境，每个情 境由若干学习单元实施完成，按完成工作任