《HTML5应用开发案例教程课程标准.docx》由会员分享，可在线阅读，更多相关《HTML5应用开发案例教程课程标准.docx（26页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML5应用课程标准课程名称：HTML5应用适用专业：软件技术课程学分：3.0参考学时：60,其中，理论学时12,实践学时48课程类别：专业选修课课程属性：选修课课程类型：B类（理论+实践）产教融合课程、校企合作课程：是口 否J1课程定位CSS3设计构建网站的必备知识，是当下最流行的web前端开发技术之一。IITML5的API 是新一代Web标准所涵盖的核心技术。HTML5应用是计算机学科专业中必修的一门专业 技术基础技能课程。HTML5应用重在介绍CSS3和HTML5 API理论和设计的方法，是软 件专业基础课程之一，也是本专业的核心课程。其前序课程有网页制作，后续课程有Java Web开
2、发框架等，其主要任务是理解CSS3相关的理论知识和应用，掌握利用HTML5 API 开发技术。本课程利用多个网络资源，培养学生创新能力，并引导和培养学生将学习过的知 识应用到解决时间问题，并参加html5前端技能大赛等专业竞赛做好准备。2课程目标课程要突出较强的实践能力性，通过本课程的学习，学生将掌握使用HTML5进行API 应用程序开发的知识，了解CSS3的属性和属性值的设置，在文字、边框、图片和背景等方 面的修改,为后续专业课程学习打下必备的基础，同时将爱党爱过教育嵌入其中。2.1 能力目标2.1.1 具有分析问题、解决问题的能力2.1. 2具有建立实验假设、探索查阅知识的能力2.1. 3
3、能够运用系统性思维分析和解决问题析解决问题的 能力；3.培养学生逻 辑思维能力。CSS3 界 面美化项目4： 使用Flex 布局构建 网站首页任务1T : 盒式与多 栏布局1.掌握 CSS3弹性 盒式布局 的用法。1 .掌握CSS3 弹性盒式布局 的用法；2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；3 .培养学生逻 辑思维能力。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：CSS3 弹性盒式布 局的用法 难点：CSS3 弹性盒式布 局的应用校内：软件专 业实训室技能竞赛：html5前端技能大赛中 的内容CSS3 界 面美化项目5：旅 游网
4、站的 游记页面 制作任务1T : 多栏布局1.掌握多 栏布局的 用法。1 .掌握多栏布 局的用法；2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；3 .培养学生逻 辑思维能力。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：栏布局 的用法 难点：栏布局 的应用校内：软件专 业实训室技能竞赛：htm15前端技能大赛中 的内容CSS3 界 面美化项目5：升 级改版旅 游网站首 页任务 1-1:css3 2D变换与 动画1.掌握2D 变换用法。1 .掌握2D变 换用法；2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；3 .培养学生逻
5、 辑思维能力。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：css3 的变换属性 难点：结合项 目的应用校内：软件专 业实训室技能竞赛：htm15前端技能大赛中 的内容CSS3 界 面美化任务 l-2:css32D过渡动 画1.掌握过 渡动画用 法。1 .掌握过渡动 画用法；2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；3 .培养学生逻 辑思维能力。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：过渡动 画的属性设 置难点：结合项 目的应用校内：软件专 业实训室技能竞赛：html5前端技能大赛中 的内容CSS
6、3 界 面美化任务 l-3:css32D过渡动 画L掌握动 画用法。1 .掌握动画用 法；2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题2重点：动画设 置和调用的 属性设置 难点：结合项 目的应用校内：软件专 业实训室技能竞赛:html5前端技能大赛中 的内容能力；3.培养学生逻 辑思维能力。网站音频/ 视频特 效网页 制作项目1:带 iPod播放 器的旅游 网站首页 制作任务1T ：HTML5 音 频1 .了解音 频格式2 .掌握音 频播放的 简单应 用；3 .音频播 放的高级 应用1 . 了解音频格 式2 .掌握
7、音频播 放的简单应 用；3 .音频播放的 高级应用；4 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；5 .培养学生逻 辑思维能力；6 .培养学生团 队合作及协作 学习能力评 价。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：js控 制音频相关 的API难点：结合项 目的应用校内：软件专 业实训室技能竞赛：htm15前端技能大赛中 的内容音频/ 视频特 效网页 制作项目2：随 页面滚动 自动切换 视频的旅任务1-1 ：HTML5 视 频L 了解视 频格式2.掌握视 频播放的1 .了解视频格 式2 .掌握视频播 放的简单应设问引入 法、案例示 范
8、法、演练 结合法、多2重点：js控 制视频相关 的API难点：结合项校内：软件专 业实训室技能竞赛:html5前端技能大赛中 的内容游广告页 制作简单应用；3.视频播 放的高级 应用用；3 .视频播放的 高级应用；4 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；5 .培养学生逻 辑思维能力；6 .培养学生团 队合作及协作 学习能力评 价。媒体教学 课件、专题 网站目的应用音频/ 视频特 效网页 制作项目3：全 视频背景 下的时尚 主页设计任务1-1：HTML5 视 频1.视频播 放的局级 应用1 .视频播放的 高级应用；2 .培养学生拥 有良好的自主 学习、独立分 析解决问题
9、的 能力；3 .培养学生逻 辑思维能力；4 .培养学生团 队合作及协作 学习能力评设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：音视频 结合项目的 应用难点：音视频 结合项目的 应用校内：软件专 业实训室技能竞赛:html5前端技能大赛中 的内容价。Canvas 动画制 作项目1： 在 HTML 页面上绘 制矩形任务1-1:Canva s的相关 概念1. Canvas 标签；2.渲染上 下文；1 . canvas 标签 的理解；2 .上下文渲 染；3 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；4 .培养学生逻 辑思维能力；5 .培养学生团
10、队合作及协作 学习能力评 价。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：canvas 标签的理解； 上下文渲染 难点：canvas 标签的理解； 上下文渲染校内：软件专 业实训室技能竞赛：htm15前端技能大赛中 的内容Canvas 动画制 作项目2： 简易圆板制作任务1-1:Canva s绘制简 单图形1 .绘制线 条；2 .绘制/ 填充矩 形；3 .绘制/ 填充圆弧 和曲线；1.绘制线条； 2.绘制/填 充矩形；3 .绘制/填 充圆弧和曲 线.4 . Canvas 状 态保存和恢设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2
11、重点：绘制线 条；绘制/ 填充矩形；绘 制/填充圆 弧和曲线 难点：绘制/ 填充圆弧和 曲线校内：软件专 业实训室技能竞赛:html5前端技能大赛中 的内容4. Canvas 状态保存 和恢复复；5 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；6 .培养学生逻 辑思维能力；7 .培养学生团 队合作及协作 学习能力评 价。Canvas 动画制 作项目3：在线广告 图插件制 作任务1-1 ： 绘制图像 和文本1.绘制图像；2.绘制文 本；1 .绘制图像；2 .绘制文本3 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；4 .培养学生逻 辑思维能力；5 .培养学生团
12、队合作及协作 学习能力评 价。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：绘制图 像；绘制文本 难点：绘制图 像；校内：软件专 业实训室技能竞赛:htm15前端技能大赛中 的内容Canvas 动画制 作项目4：滑动验证 码制作任务1T : 绘制图像 和文本1.绘制变 形；2.绘制渐 变；3.绘制阴 影；1 .绘制变形；2 .绘制渐变；3 .绘制阴影；4 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；5 .培养学生逻 辑思维能力；6 .培养学生团 队合作及协作 学习能力评 价。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题
13、网站2重点：绘制变 形；绘制渐 变；绘制阴 影；难点：绘制变 形；绘制渐变校内：软件专 业实训室技能竞赛:html5前端技能大赛中 的内容HTML5 游戏开 发项目1：小 黄人吃泡 泡游戏任务1-1: 游戏开发 的实践1. Canvas 动画的实 现；2.鼠标键 盘事件；1 . Canvas 动 画的实现；2 .鼠标键盘事 件；3 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力：设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：Canvas 动画的实现； 鼠标键盘事 件难点：Canvas 动画的实现； 鼠标键盘事 件校内：软件专 业实训室技能竞赛：h
14、tm15前端技能大赛中 的内容4 .培养学生逻 辑思维能力；5 .培养学生团 队合作及协作 学习能力评 价。HTML5 游戏开 发项目2：经 典俄罗斯 方块游戏任务17 ： 游戏开发 的实践1 . Canvas 动画的实 现；2 .鼠标键 盘事件；3 .元素碰 撞检测和 自由落体1 . Canvas 动 画的实现；2 .鼠标键盘事 件；3 .元素碰撞检 测和自由落 体；4 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；5 .培养学生逻 辑思维能力；6 .培养学生团 队合作及协作 学习能力评 价。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点:元素
15、碰 撞检测和自 由落体难点：元素碰 撞检测和自 由落体校内：软件专 业实训室技能竞赛：htm15前端技能大赛中 的内容响应式 网页制 作项目1:响 应式企业 网站 首页制作任务1-1: 响应式设 计应用1.媒体查 询2.则应式 页面的设 计流程1.媒体查询； 2.响应式页 面的设计流 程；3 .培养学生逻 辑思维能力；4 .培养学生团 队合作及协作 学习能力评 价。需求驱动 练习、探索 教学法、多 媒体教学 课件、专题 网站2重点：媒体查 询；响应式 页面的设计 流程难点：响应式 页面的设计 流程校内：软件专 业实训室思政改革特色：通过掌握网页结 构的相关知识，掌握其在新兴领 域中的运用，实现
16、价值引领、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节。响应式 网页制 作项目1:响 应式旅游 网站页面 制作任务1_1: 响应式设 计应用1.媒体查 询2.响应式 页面的设 计流程1.媒体查询； 2.响应式页 面的设计流 程；3 .培养学生逻 辑思维能力；4 .培养学生团 队合作及协作 学习能力评 价。需求驱动 练习、探索 教学法、多 媒体教学 课件、专题 网站2重点：响应式 页面的设计 流程难点：响应式 页面的设计 流程的应用校内：软件专 业实训室思政改革特色：通过掌握网页结 构的相关知识，掌握其在新兴领 域中的运用，
17、实现价值引领、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节。5教学实施建议1教材选用建议5. 1. 1主选教材5.1 . 2备选教材5.2 .3参考教材在线资源：5. 2教学场地1 .要求机房教室2 .课室以小组方式布置，便于小组讨论及教师巡视指导。5. 3教学方法与手段5. 3. 1教学方法理论课堂利用项目任务驱动发、案例教学法和翻转课堂引导学生在项目学习中掌握知识 点。实训课堂以学生为主，教师为辅，利用翻转课堂，同时教师重引导，学生边学边练。5. 3. 2教学手段教师注重项目过程中，学生的技术掌握情况，推进节骤要适当，
18、课后要求学生按质按量 重新独立完成一次，教师通过查检作业完成情况，来决定课程的进度。课后通过微课对学习 的内容进行预习和复习，提高学习效率，巩固学习效果。5. 4师资要求专任教师师资要求：（1）熟悉HTML5+CSS3的知识体系；（2）有前端开发项目的实际 经验；（3）有软件工程的能力；（4）具有全国大学生计算机设计或类似竞赛指导经验更好。兼职教师师资要求：（1）有扎实、全面的专业理论基础知识；（2）具备相关行业经历 或企业项目开发的经验；（3）具有一定的软件技术方面的教学经验，能胜任本课程的教学 需要。5. 5考核评价5. 5. 1.考核形式2.L 4具有学习的热情和兴趣，能进行自主学习和自
19、我评价，具有良好的变通能力、 一定的创造性思维和批判性思维2. 1. 5具备扎实的HTML与CSS开发基础2.1. 6能够独立进行整体操作规划及规范编写2.1. 7能负责地完成任务，具有严格的时间观念以及时间管理意识2.1. 8本专业职业成长过程，并能做好个人的职业规划2. 1.9将学习的知识引入到一个到两个创新项目中，培养学生创新能力，并引导和培养 学生将学习过的知识应用到解决时间问题,并参加html5前端技能大赛等专业竞赛做好准备2. 2知识目标2.2. 1网页工作原理和工作流程，html5特点，开发工具和环境HTML5页面构建，文本标签、表单标签、分组标签和嵌入式标签的使用2.2.2 j
20、avascript发展历史，数据类型，运算，流程控制语句D0M文档对象模型，JavaScript对DOM节点的控制，事件机制和处理模型2.2.3 CSS3选择器的用法，CSS3边框背景的设置，文本和字体的设置，盒式布局和多栏 布局，CSS3变换、渐变和动画效果的实现。2.2.4 了解音频、视频格式，JavaScript控制音视频的API。2. 2. 7Canvas的形状、图像和文本的绘制和渐变设置。2. 2. 8HTML5游戏开发的基本知识和使用Canvas开发小游戏2. 2. 9响应式网页设计中的媒体查询，响应式页面的设计流程。2. 3素质目标2. 3.1培养学生的逻辑思维能力2. 3. 2
21、培养学生拥有良好的自主学习、独立分析解决问题的能力2. 3. 3培养学生团队合作及协作学习能力评价2. 3. 4培养学生创新与设计能力3课程设计理念和思路3.1课程设计理念依据工学结合、思政设计与专业内容相结合的高职教育教学改革精神，在基于工作过程 的课程教学改革思想的指导下，面向高职类计算机专业的学生，以“项目案例驱动”模式组 织教学内容，展开知识点，遵循高职教育的“够用为度”课堂原则，以实践过程分解理论, 采用多个小而精的经典的脚本程序项目，作为实践案例，引导学生循序渐进地、由粗到细地采用过程化考核+效果性考核总评二项目过程考核义60% +项目效果考核义40%平时成绩=学生互评平均分X 5
22、0% +教师评价分X 50%5. 5.2.考核评价表序号学习任务评价方式评分标准分数分配1CSS3注册页的 制作教师评价学生自评1 .实现案例规定的功能2 .解释标签的功能3 . CSS3新增标签的应用202购物网页教师评价学生自评1 .实现案例规定的功能2 .解释标签的功能3 . CSS3综合应用203Canvas卡通图教师评价学生自评1 .实现案例规定的功能2 .解释标签的功能3 .掌握网页中标签的结 构204Canvas游戏背 景设计教师评价学生自评1 .实现案例规定的功能2 .解释标签的功能3 .掌握文本和图像标签 的使用205Canvas在线画 板教师评价学生自评1 .实现案例规定的
23、功能2 .解释标签的功能3 .超级链接标签的使用20合计1005. 6课程资源的开发与利用5. 6.1课程资源的开发该课程资源主要包括：教材、讲义、授课计划、教学设计、项目案例、程序开发过程的 微视频，以课程标准为依据，依托几个教学案例，在内容组织上以工作过程主线，知识点难 度由浅入深进行安排。充分利用开源和学校提供的在线平台，如轻工在线平台，用于学生作、也提交、教学资料 的展示等。5. 6. 2课程资源的利用,课程资源（含电子课件、在线课程、微课等）：1 .数字电子资源（包括期刊、电子资源、外刊等，学习网址）：进行HTML5和CSS3应用，讲解其中的技巧、方法，总结经验，引导学生跟随教师，重
24、复示 范代码的练习。通过课后复习轻工在线的视频课程中程序项目，在项目演练的过程中，进一 步提高页面制作能力。2 . 2课程设计思路以项目为载体，以技术应用为主线索，借助轻工在线学习平台，将企业项目实施环境融 入教学环境，运用工程化思维，引导学生通过问题的分析与解决，掌握学习方法和知识技能, 养成认真踏实的工作习惯。学生课后利用网络资源巩固知识，并有针对性地布置小案例作业 （知识网站有大量的互联网应用案例）。分析当前行业流行技术，围绕CSS3前端开发的编 程技术要素，引导学生深入地学习htm15 Api扩展应用和CSS3扩展应用，从而为编写Web 前端代码的商业应用项目打下坚实的基础。4教学设计
25、（课程内容、教学要求与学时分配等）.单元名称训练项目学习任务知识要求技能要求（含素质要求）教学方法 与手段建 议学时分 配重点、难点实践场所（校内、校外）特色说明（含思政改革特色、双创教育特 色、产教融合教学特色、技能竞 赛）静态网 页制作项目1:编 写一个简 单的 htm15 页 面任务1-1： html5基本结构1 .网页工 作原理2 .开发工 具和开发 环境3 . HTML5 基本结构4 . HTML5 新增的结 构标签。5 .掌握 CSS3的使 用方法。1 .网页工作原 理2 .开发工具和 开发环境3 .1ITML5 基本 结构4 . HTML5 新增 的结构标签。5 .掌握CSS3
26、的使用方法6 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；7 .培养学生逻 辑思维能力；8 .培养学生团 队合作及协作 学习能力评 价。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站4重点:HTML5 基本结构、 HTML5新增 的结构标签 难点：HTML5 新增的结构 标签的理解 和运用校内：软件专 业实训室技能竞赛：htm15前端技能大赛中 的内容思政改革特色：通过掌握网页结 构的相关知识，掌握其在新兴领 域中的运用，实现价值引领、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节
27、。静态网项目2：旅任务1-1：1.掌握文1.理解运用h5设问引入2重点：文本标校内：软件专技能竞赛：html5前端技能大赛中页制作游网站介 绍文字的 制作文本标签 的使用本相关的 标签的文本标签。2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；3 .培养学生逻 辑思维能力；4 .培养学生团 队合作及协作 学习能力评 价。法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站签的理解和应用难点：文本标 签的理解和 应用业实训室的内容思政改革特色：通过掌握网页结 构的相关知识，掌握其在新兴领 域中的运用，实现价值引领、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠
28、道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节。静态网 页制作项目3：旅 游网站登 录和 注册页面 制作任务1-1： 表格标签1.表格标 签的使用 方法。1 .理解运用h5 表格标签。2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；3 .培养学生逻 辑思维能力；4 .培养学生团 队合作及协作 学习能力评 价设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：表格标 签的理解和 项目中的应 用难点：表格标 签的理解和 项目中的应 用校内：软件专 业实训室技能竞赛:html5前端技能大赛中 的内容思政改革特色：通过掌握网页结 构的相关知
29、识，掌握其在新兴领 域中的运用，实现价值引领、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节。静态网 页制作项目4：旅 游网站登 录和 注册页面 制作任务1-1： 表单标签 结构1.表单标 签结构1 .理解运用表 单标签。2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；3 .培养学生逻 辑思维能力；4 .培养学生团 队合作及协作 学习能力评 价。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：表单标 签的理解记 忆难点：表单标 签在项目中 的应用校内：软件专 业实训室技能竞赛
30、：html5前端技能大赛中 的内容思政改革特色：通过掌握网页结 构的相关知识，掌握其在新兴领 域中的运用，实现价值引领、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节。静态网 页制作项目5：旅 游网站首 页制作（一）任务1-1： 分组标签 结构1.分组标 签结构1 .理解运用分 组标签。2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；3 .培养学生逻 辑思维能力；4 .培养学生团 队合作及协作 学习能力评 价。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：分组标 签理解记忆
31、难点：分组标 签在项目中 的应用校内：软件专 业实训室技能竞赛：htm15前端技能大赛中 的内容思政改革特色：通过掌握网页结 构的相关知识，掌握其在新兴领 域中的运用，实现价值引领、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节。静态网 页制作项目6：旅 游网站首 页制作（二）任务1-1： 嵌入标签 结构1.分组标签 结构1 .理解运用嵌 入标签。2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；3 .培养学生逻 辑思维能力；4 .培养学生团 队合作及协作 学习能力评 价。设问引入 法、案例示 范法、演练 结
32、合法、多 媒体教学 课件、专题 网站2重点：嵌入标 签理解记忆难点：嵌入标 签在项目中 的应用校内：软件专 业实训室技能竞赛：html5前端技能大赛中 的内容思政改革特色：通过掌握网页结 构的相关知识，掌握其在新兴领 域中的运用，实现价值引领、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节。结合 JavaScr ipt的交 互式网 页制作项目1：货 币汇率兑 换器任务1-1： JavaScrip t的基本语 法1.掌握 JavaScrip t使用方法 2.掌握标 识符、数 据类型和 运算符。1 .JavaScript 使用方
33、法。2 .掌握标识 符、数据类型 和运算符；3 .培养学生逻 辑思维能力；4 .培养学生团 队合作及协作 学习能力评 价。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：网页中 如何引入使 用 JavaScript 脚本；标识 符、数据类 型和运算符 难点：数据类 型校内：软件专 业实训室技能竞赛：htm15前端技能大赛中 的内容思政改革特色：通过掌握网页结 构的相关知识，掌握其在新兴领 域中的运用，实现价值引领、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节。结合JavaScr项目2：旅 游
34、网站用任务11 ：JavaScrip1.掌握流 程控制1.流程控制的 理解和应用。设问引入法、案例示2重点：选择语 句和循环语校内：软件专 业实训室技能竞赛：html5前端技能大赛中 的内容ipt的交 互式网 页制作户注册的 合法性验 证1程序构成2.掌握函 数。3.掌握对 象的构造。2 .函数的定义 和使用；3 .对象的构造 和使用;4 .培养学生逻 辑思维能力；5 .培养学生团 队合作及协作 学习能力评 价。范法、演练 结合法、多 媒体教学 课件、专题 网站句；对象的构 造方法难点：对象的 构造方法与 应用思政改革特色：通过掌握网页结 构的相关知识，掌握其在新兴领 域中的运用，实现价值引领
35、、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节。结合 JavaScr ipt的交 互式网 页制作项目3：旅 游网站的 景点查询 动态生成 页面制作任务1-1： JavaScrip t访问DOM 节点1.掌握文 档对象模 型2.掌握 DOM节点的 基本操作；3. DOM事件 机制4. JavaScr ipt事件处 理机制。1 .掌握文档对 象模型2 .掌握DOM 节点的基本操 作；3 . DOM事件机 制4 .JavaScript 事件处理机制 5.培养学生逻 辑思维能力；6.培养学生团 队合作及协作 学习能力评 价。设问引
36、入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站4重点：掌握 DOM节点的基 本操作； avaScript 事 件处理机制 难点：掌握 DOM节点的基 本操作； avaScript 事 件处理机制校内：软件专 业实训室技能竞赛：html5前端技能大赛中 的内容思政改革特色：通过掌握网页结 构的相关知识，掌握其在新兴领 域中的运用，实现价值引领、知 识传授、能力培养的教育教学目 标，充分发挥课堂主渠道作用， 切实将正确的思想价值引领贯穿 教育教学全过程和各环节。CSS3 界 面美化项目1：旅 游网站的 后台订单 管理页面 制作任务 1-1:CSS3 选择器1.掌握 CSS3选择
37、 器的用法。1 .掌握CSS3 选择器的用 法；2 .培养学生拥 有良好的自主 学习、独立分 析解决问题的 能力；3 .培养学生逻 辑思维能力。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：CSS3 关系属性和 伪类选择器 的用法； 难点：CSS3 关系属性和 伪类选择器 的用法；校内：软件专 业实训室技能竞赛:htm15前端技能大赛中 的内容CSS3 界 面美化项目2：CSS3旅游 网站的旅 游线路推 广页制作任务 1-1:CSS3 边框和背 景1掌握CSS3 边框的设 置；2.掌握 CSS3背景 的设置。1掌握CSS3边 框的设置； 2.掌握CSS3 背景
38、的设置； 3.培养学生逻 辑思维能力。设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：CSS3 边框属性的 设置；背景属 性的设置 难点：CSS3 边框属性的 设置；背景属 性的设置校内：软件专 业实训室技能竞赛：htm15前端技能大赛中 的内容CSS3 界 面美化项目3： CSS3文本 和字体任务1-1: 旅游网站 的机票预 订页面制 作1.掌握 CSS3文本 设置和服 务器字体 的用法。1 .掌握CSS3 文本设置和服 务器字体的用 法；2 .培养学生拥 有良好的自主 学习、独立分设问引入 法、案例示 范法、演练 结合法、多 媒体教学 课件、专题 网站2重点：CSS3 文本设置和 服务器字体 难点：服务器 字体校内：软件专 业实训室技能竞赛:htm15前端技能大赛中 的内容