《HTML5移动Web开发任务教程（慕课版）教学大纲 教学整体设计.docx》由会员分享，可在线阅读，更多相关《HTML5移动Web开发任务教程（慕课版）教学大纲 教学整体设计.docx（14页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML5移动Web开发任务教程（慕课版）教学大纲整体教学设计（ 学年第1学期）课程名称授课对象软件技术专业课程学分0总学时 96课程特性职业通用能力必修课程单位.知识性评价标准表6知识性评价标准一览表序号教学单元名称考核知识点比例1单元1:初识HTML5(1)能分析常见网站特效原理，实现技术；(2)掌握在HTML5程序的编写方法。(3)掌握使用HTML5语法的改变：(4)掌握HTML5新增的结构元素：(5)掌握HTML5新增的语义元素； 掌握HTML5新增的屈性。8%2单元2：CSS基础(1)掌握CSS3发展史及性能侦览；(2)掌握CSS3属性选择器：(3)掌握CSS3结构伪类选择器；(4)
2、掌握CSS3UI伪类选择器。(5)掌握CSS3文本效果；(6)掌握CSS3新的颜色表示：(7)掌握CSS3字体；11%3单元3：CSS3常用样式(1)掌握CSS3背景的设置方法；(2)掌握CSS3边框图片属性：(3)掌握CSS3圆角属性；(4)掌握CSS3盒子阴影；(5)掌握CSS3盒子倒影的设计。8%单元4：CSS3高级应用(1)掌握2D变换；(2)掌握CSS3动画效果。(3)掌握 Transaction 过渡：(4)掌握2D变换。11%4单元5:HTML5智能表单(1)掌握HTML5的INPUT类型：(2)掌握HTML5的表单元素：(3)掌握HTML5的表单属性。12.5%5单元6：基于H
3、TML5的移动Web应用(上)(1)掌握HTML5的音频标签详；(2)掌握HTML5的视频标签详解.15%6单元7：基于HTML5的移动Web 应用(下)(1)掌握HTML5 Canvas的上耍属性和方法。(2)掌握操作与使用图像的方法。15%7(3)掌握渐变、图案和阴影的绘制方法。(4)掌握SVG的主要属性和方法。单元8：响应式Web设计神器Bootstrap(1)掌握Bootstrap网格系统；(2)掌握 Bootstrap 排版；(3)掌握 Bootstrap 表格：(4)掌握 Bootstrap 表单：(5)掌握 Bootstrap 按钮；(6)掌握Bootstrap图片(7)掌握Bo
4、otstrap字体图标；(8)掌握Bootstrap卜拉菜单；(9)掌握Bootstrap导航元素：(10)掌握 Bootstrap 分页。(11)掌握Boots叩标签页：(12)掌握Bootstrap轮播插件；15%8单元9：网站制作与项目答辩(1)会使用HTML5设计网站：(2)会发布站点；(3)能说明网站的设计思想，正确回答问题。4%合计100%2 .技能性评价标准表7技能性评价标准一览表任务名 称：班级姓名学号考核点考核得分评价标准比例优秀(86-100)良好(70.85)及格(60-69)项目实现70%能综合运用相关教学 知识单元很好完成实 践项目：编写程序的功能达到 设计目标，用户
5、界面友 好，编程逻辑清晰，程 序代码规范；在规定时间内完成。能综合运用相关教学知 识单元完成实践项目：编写程序的功能基本达 到设计目标，用户界面友 好，能完成基本功能代码 编写：能在规定时间完成。能基本完成实践项 目：编写的程序能基本 达到设计目标，能 编写简单模块的代 码；能在规定时间内完 成。创新能力15%能积极主动发现问题、 分析问题、解决问题： 有创新：采用优化方案。能发现问题并通过各种途径解决问题；有一定的创新。能发现问题并在他 人的帮助下解决问 题：具局部有创新。达沟通15%能较清晰的表达程序 的设计思路；能表达程序的设计思路； 答辩展不表现好；能对项目实践过程 进行讲解；能与他人
6、交流设计方法。能看懂别人的设计。能与他人交流设计方法。能看懂别人的设计。答辩展示基本正 确。合计4.创新性评价标准答辩展示表现优秀： 能辅导他人完成项目; 能评述他人的设计。表8创新性评价标准一览表评价内容级别分值1国家级省级院级系级_论文发表_10（市级以上刊物发表）竞赛获奖10/8/68/6/46/4/24/2/1专利/软件著作权10软件产品登记证书10技术服务由系部认定分值该课程的配套实训课程，主要考核学生在实训期间的态度纪律情况、创新能力、沟通表达能力、编程开发能力，具体标准见表9。表9综合实训考核标准一览表考核点考核评价标准|比例优秀(86-100)良好(70-85)及格(60-69
7、)态度纪律实训期间的出勤情况： 学习态度情况：团队协 作情况。15%没有缺勤情况； 认真对待综合实训： 听从教师安排；缺勤5%以下； 认真对待综合实训； 听从教师安排；缺勤10%以下:听从教师安排。创新能力主动发现和解决问题： 是否有创新：是否优化。15%能独立分析、解决问题， 分析问题透彻，解决问题 高效；实训结果有创新。能够独立分析、解决问 题，能借助常用工具获取 有用信息。分析解决问题能力一 般：能在他人的帮助卜解 决问题。表达沟通项目陈述情况；回答问 题情况。20%表达能力强，条理清晰； 能正确回答问题，思路敏 捷。能够正确阐述实训作品，表达能力强；能够回答问题，没有原则 性错误。表达
8、能力一般； 回答问题条理不清 楚。项目程序设计网站的功能实现： 网站的程序编写。50%用户界面美观；编程逻辑清晰，程序代码 规范。用户界面友好：程序代码错误少。能全部完成项目功能 的 60%：程序代码错误少。合计100%七、课程教材选用黑马程序员.响应式Web开发项FI教程(HTML5+CSS3+Bootstrap)，人民邮电出版社. 2018年6月，第1版.选用原因：所选用的教材响应式Web开发项目教程HTML5+CSS3+Bootstrap充分体现培养学 生的职也能力为中心思想，以“教、学、做”为一体组织课堂内容，注重理论与实践相结 合、教材内容与行业标准要求相结合，强调理论在实践过程中的
9、应用。八、课程教学参考资料.参考教材(1) HTML5基础开发教程范立锋，人民邮电出版社，2016(2)WEB表单设计-创建高可用性的网页表单，人民邮电出版社，箭淑桢译；(3)征服Ajax WEB2.0快速入门与项目实践.人民邮电出版社，张桂元，贾燕枫， 姜波编著：(4)HTML5+CSS3Web前端设计基础教程，黑马程序员，人民邮电出版社，2020 年I月，第1版2.其他学习资源移动web应用开发网络课程；(2)国家软件技术专业资源库网站-Web应用开发课程；(3)移动Web开发视频-张孝祥；(4)中国开源社区 http:。九、课程实施必备的教学条件.任课教师要求担任本课程的主讲教师需要具有
10、Web前端开发经验，了解门户网站的特效原理和实现 方法，同时要求对后续课程比较熟悉，把握前端开发系列课程的培养H标及要求。在教学组 织能力方面，本课程的主讲教师应具备基本的设计能力，即根据本课程的整体设计制定详细 的授课计划，对每一堂课的教学过程精心设计，做到详细、具体的安排；还应具备较强的施 教能力，在教学过程中具备一定的课堂控制能力和应变能力。对教师的技术要求主要包括：(1)具有DIV+CSS布局的基础；(2)具有JavaScript语言的基础理论知识：(3)具备一定调试程序能力。1 .学习场地、设施要求(1)教学做一体化的教室；(2) Hbuilderl.O以上软件环境。十、第一节课设计
11、(1)介绍网页设计与制作课程学习的三块知识点：HTML5、CSS3、BOOTSTRAP,介绍这 三块内容在网站设计中的应用现状，分析门户网站特效原理；(2)介绍课程的总体目标及总体安排，课程的考核方式。(3)项目演示。对教学中的项目作简单演示和介绍。(4)介绍课程考核方案和作业提交方式。(5)介绍相关课程网络资源，告诉学生充分利用网络平台，自主学习web技术。(6)进入正题。十一、其他说明的问题无。一、课程信息课程名称：移动Web开发课程编码：学分:6学时：96课程类型：职业通用能力必修课程授课对象：软件技术专业二年级学生先修课程：网页设计与制作、程序设计基础、Web前端开发后续课程：PHP程
12、序设计、JAVAEE企业 案例应用二、课程目标设计通过本课程的学习，使学生逐步建立和掌握Web客户端页面设计的思想方法，具有分析问题和解决问 题的能力，能够使用HTML5、CSS3、Bootstrap等技术编写Web客户端页面解决实际问题，掌握WEB前端 开发的基本思想，基本能胜任WEB前端开发工程师的岗位。通过本课程的学习，可以培养学生解决前端开 发实际问题的能力；提高学牛.在沟通表达、自我学习和团队协作方面的能力；同时养成规范的编码习惯。L总体目标通过本课程的学习，使学生逐步建立和掌握Web客户端页面设计的思想方法，具有分析问题和解决 问题的能力，能够使用HTML5、CSS3、Bootst
13、rap编写Web客户端页面解决实际问题，具备吃苦耐劳、团 结协作的良好品质。1 .能力目标能独立进行资料收集与整理、具备用户需求的理解能力和书面表达能力； 能根据项目需求，具备项目页面的分析与设计能力；能熟练编写CSS3样式控制页面的各种元素，实现页面美化与布局； 掌握网站发布与管理的基本技能；能够进行个人网站和商业网站的设计； 具备获取知识能力，网页设计创意思维能力、色彩感悟能力；具备从事网站设计、网站编辑和网站维护等相关工作的能力。3 .知识目标熟悉HTML5语言的作用和开发环境，能够编写HTML5代码； 掌握常用的HTML5标签，能够实现基本的图文信息显示；理解HTML5页面框架的作用，
14、能够针对需求进行框架的设计： 掌握各类HTML5表单元素标签，能够进行表单设计；掌握各类HTML5多媒体元素标签，能够进行多媒体页面设计； 掌握HTML5新增canvas画布标签；掌握CSS3控制页面元素的方法，能够应用CSS3样式美化页面； 掌握CSS3网页布局的方法，能够设计2D和3D动画；掌握Bootstrap框架的用法，能够应用框架技术快速开发WEB网站；4 .素质目标养成善于思考、深入研究的良好自主学习的习惯； 通过项目与案例教学，培养学习者的分析问题、解决问题的能力；具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力； 通过课外拓展训练，培养学习者的创新意识；具有爱岗敬业、遵守职业
15、道德规范、诚实、守信的高尚品质。5 .其他目标通过本课程的学习，学生可以参加以下职业资格证书考试。1 . WEB前端开发工程师；.软件UI设计师；2 .网站设计开发工程师。三、课程内容设计根据课程标准确定HTML5语言、CSS3样式、响应式web设计、综合网站制作等教学模块的学习内 容。知识体系结构如下表。表1移动Web开发课程内容设计合计篇名教学模块单元内容主要教学方法建议学时1初始HTML5（1）启发式教82HTML5智能表单学123基础语言篇模块1HTML5语言基于HTML5的移动Web应用（上）（3）演示教学（4）案例教学144基于HTML5的移动Web应用（下）147小计488核心技
16、术篇模块2CSS3样式CSS3基础（1）演示教学（2）案例教学1089CSS3常用样式CSS3高级应用1010小计2811模块3响应式Web设计响应式Web设计神器Bootstrap（1）演示教学（2）案例教学1612小计1613综合应用篇模块4综合网站制作英语学习网站项目实践法4小计496四、能力训练设计表2移动Eeb开发课程能力训练设计能力训练单元名称能力训练单元内容拟实现的能力目标相关支撑知识训练方式手段及步臊结果(可展示)1模块1 HTML5语言模块2 CSS3样式初识HTM15(1)能分析常见网站特效原理,实现技术；(1)掌握在HTML5程序的编巧方法.(2)学习HTML5新的语法；
17、(3)能使用HTML5新增的结构元素；(4)能使用HTML5新增的语义元素；5)能使用HTML5新加的属性.(1)网页相关技术：(2) HTML5 技术.(1)枚伸操作演示；(2)学生体抬；(3)教师总结.学生电脑安装Hbuilder2HTML5智能及单(1)拿握HTML5的INPUT类型：(2)常握HTM15的发雉元太：(3)学握HTML5的表单眼性.(1) HTML 标签：(2) DIV*CSS：(3) JavaScript 电础.(1)教师操作演示：(2)学生动手实践：(3)结果展示并点评.代码提交3基于HTML5的移动Web应用(上)(1)掌握HTM15的古版标签详解：(2)掌探HTM
18、15的视嫉标笠洋褥.(3)掌褥施放事件：4)学探事件的执行顺序 掌褥dataTransfer对象：(6)学褥FileReader读取文件侑息.(1) Html 基础：(2) CSS 基础；(3) JavaScript 基础.(1)教师操作演示；(2)学生动手实践：(3)结果照示并点评.代码提交5基于HTMLS的移动Web应用(下)(1)掌相;HTML5 Canvas的主要属性和方法。12)掌嘏操作与使用图像的方法.13)掌握渐变、图案和阴影的拴制方法。14)掌握SVG的主委屈性和方法.(1) HTML 标稻(2) DIV*CSSt(3) JavaScript 菽础,(1)救肺操作演示；(2)学
19、生动手实践；(3)结果展示并点钾。代码提交5CSS3热础(1) CSS3发展史及性能预览；(2) CSS3附性选择器；(3) CSS3结构伪类选样器；(4) CSS3 UI伪类送并器；(1) HTML 标卷； DIV*CSS；(3) JavaScript 语法将阳,(1)救他操作演示,(2)学生动手实践；(3)师生常见问题归纳；(4)结果展示并点评，代码提交(5) CSS3文本效果1(6) CSS3新的颜色表示；(7) CSS3 字体：6CSS3常用样式(DCSS3 背景；2)CSS3边框图片属性；(3)CSS3BI 角属性;(4) 03盒子阴影:(5)CSS3盒子例影.(1) HTMI 标御
20、(2) DIV*CSS:(3) JavaScript 旗础,(1)教肺操作演示；(2)学生动手实践；(3)师生常见问题归纳：(4)结果展示并点评。代码提交7模块3响应式Web设计CSS3高级应用(1) 2D与3D变换：(2)自定义变换：(3)平滑过渡Transaction：(4)动画 Animation.(1) HTML标签(2) DIV4CSS：(3) Javascript 基础.(1)教师操作演示(2)学生动手实践：(3)师生常见问题归纳(4)结果照示并点评.代码提交8响应式Web设计神器 Bootstrap(1)会下就和使用Bootstrap枢架：(2)掌握Bootstrap网格系统：
21、掌抑Bootstrap排版：(4)掌握 Bootstrap 农格：(S)掌握Bootstrap衣单和按钿： 掌握Bootstrap图片.(7)掌握Bootstrap字体图玩：8)掌握Bootstrap下拉菜单：(9)掌拼Bootstr叩导航元;K：(10)掌梆 Bootstrap 分贝.|11)掌握Bootstrap标维如(12)掌握Bootstrap轮播插件：(13)掌榔 Bootstrap 折会.(1) HTML5：(2) DIV*CSS：(3) JavaScript 语法基础.(1)教师桃作演示：(2)学生动手实践：(3)你士常见何超归纳：(4)结果展示并点评.代码提交9模块1综合网站制
22、作网站制作与顶口答疳(1)会使用HTML5设计网站；(2)会发布站点：(3)能说明网站的设计思想，正确回答问魄.(1) Html5；(2) CSS3 样式：(3) JavaSenpt 编程(4) Bootstrap 框架.(1)枚伸操作演示：(2)学生动手实践；(3)师生常见问脑归纳：(4)结果展示并点评.提交作乩项F1答抑五、进程设计表3移动Web开发课程进程设计序 号篇名能力训练 单元名称能力训练 单元内容能力目标知识目标学时其他内容1语言 基础 篇模块1 HTML5 谙吉模块初识HTML5(1)能分析常见网站特效娓理,实现 技术(1)掌握在HTMLS程序的编写方 法.(2)学习HTML5
23、新的语法： 能使用HTML5新用的结构元素： 能使用HTML5篇增的语义元 素：(S能使用HTML5新增的属性。(11能分析常见网站特效原理,实现 技术：(21学解在HTMLS程序的纲写方法.3学握使用HTML5语法的改变；(4|掌握HTM15新增的结构元素；(5|掌握HTM15新增的谙义元素：(6)掌握HTM15新增的属性。8(1)网站特效库理分析：(2)职业能力要求：(3)考核方案：(4)常见技术论在：(5)自学视蝴(6)好的参考教程.2HTML5智能表单 掌握HTML5的INPUT类型I(2)学樨HTML5的表单元素： 掌握HTML5的表单属性.(11掌握HTML5 Input怕入类型和
24、属性；(2)熟悉表单高级元索的使用；(3)掌握诩用表单属性：(4| JavaScript 基础知识.(S)表单险证.12(1)职业素养调练：(2)学生上台演示.3茎于HTML5的移动Web应用() 学褥HTMLS的净疑标签详解：(2)掌握HTMLS的视城标签详曲.(3)学握施放事件：(4)学握事件的执行顺用 学探dataTransfer时象：(6)学握FileReader读取文件信恩.1掌位HTMLS的音痂标签详：(2|常提HTMLS的视频标签详解.(3|挈握施放事件：(4)挈攫事件的执行顺序：(S)农提 dataTransfer 对象“1!(1)职业素养训纵： (2)学生h台演示.4就J H
25、TM15的移动Web应用(下)(U 京握HTM15 Canvas的主妾属性 和方法。(2)掌握操作与使用图像的方法.(3)掌握渐变、图案和阴账的绘制方 法,(4J 掌握SVG的主要属性和方法. 掌握HTML5两布的主要属性和方法；(2)掌握 canvas 的 API：(31掌握SVG创建2D图形.14职业素养训练；学生上台演示.5核心 技术篇模块2CSS3样式CSS3君础(1) CSS3发展史及性能预览；(2) CSS3展性选杆器：(3 CSS3结构伪类选抖器；(4) CSS3UI伪类遥扑器,(5) CSS3文木效果；(6) CSS3新的颇色表示；CSS3字体；(1) CSS3发掘史及性能预览
26、；(2) CSS3属性选朴器；(3) CSS3结构伪类选拜器；(4| CSS3UI伪类选杆器，(5| CS53文本效果；(6) CS53新的颜色表示：(7| CSS3 字体；10(1)职业素养调练：(2)学生上台演示.6CS53常用样式(1) CSS3 背景；(2) CSS3边框图片属性；(3) CSS3I词附届性；14) CSS3盒子阴影；(5) CSS3盒子倒影,CSS3背景；(2) CSS3边框图片属性：(3) CSS3 M角属性；(4| CSS3盒子阴彰；(5) CSS3盒子倒影.10(1)职业素养调练：(2)学生上台演示.7CSS3高段应用(1) Transaction 过渡；(2)
27、 2D变换； 3D变换；(4) CSS3动而效果 Transaction 过渡；(2) 2D变换： 3D变换；(4)CSS3动画效果14(1)职业索养调练;(2)学生上台演示。8模块3响应式Web设计 神 器Bootstrap响应式Web设计神器Bootstrap(1)鸵握Bootstrap网格系统：(2)掌握 Bootstrap 搏版：(3)孥枷 Bootstrap 表格：(4)竽报 Bootstrap 衣单：(5)里报 Bootstrap 按钮；(6)掌提Bootstrap图片(7)竽提Bootstrap字体图标： (8)竽振Bootstrap下拉菜於： (9)掌提Bootstrap导航元
28、素： (10)掌提 Bootstrap 分页.(11)蒙握Bootstrap标签页:(12)掌折Bootstrap轮播插件：(11会下栽和使用Bootstrap框架；(2)挈抵Bootstrap网格系统：(3)学握 Bootstrap 排版：(4| 掌握 Bootstrap 我格：(5)掌握 Bootstrap 我单： 学揖Bootstrap按钮：(7)平揖 Bootstrap 图片.(8)掌据Bootstrap字体图标：(9)学据Bootstrap下拉菜单：(10)学界Bootstrap导航元索:(11)常琼 Bootstrap 分页.(12)窜握Bootstrap标签页:(13)掌据Boo
29、tstrap轮搭插件：16职业素养调练：(2)学生上台演示.9琼合 应用篇模块4 场合网站IM作网站制作与项目答辨(1公使用HTML5设计忖站：(2)会发布站点；能说明网站的设计思想,正确问 答问您.(1)公使用HTML5设计网站；(2)会发布站点；(3)能说明网站的设计思想,正确问答问就，4(1)提交作品:(2)项目答咐.六、考核方案设计该课程的考核改变单一的终结性评价方式，采用态度性考核、知识性考核、技能性考核 相结合，与创新性评价附件分一并合计计算的形成性考核方式。其中态度性评价占20%,知 识性评价占40%,技能型评价占40%,另外对于学生的创新性评价，总分不得超过10分， 主要考核学
30、生运用HTML、CSS3和Bootstrap高级应用的掌握情况；理论部分考核学生对教 学中各知识点综合应用的掌握情况。灵活多样的考核方式可以全面考核学生的学习效果。课 程考核方式如表4所示。表4形成性考核一览表考核项目考核方法比例形 成 性态度性评价根据作业完成情况，课堂回答问题、实践完成 情况，由教师综合评定学习态度的得分； 根据上课考勤情况，由教师和学生干部评定 纪律得分。20%知识性评价由教师评定成绩。40%评 价技能型评价根据学生实践操作情况，根据完成的时间、功 能的完善情况、是否有创新，由教师评价。40%取得与本课程相关的竞赛、论文发表、技术版创新性评价务等，由系部认定10%合计110%具体考核标准如下:1.态度性评价标准表5态度性评价标准一览表考核点考核比例评价标准优秀(86-100)良好(70-85)及格(60-69)课堂学习60%无缺勤情况；能枳极主动向老师提问： 能正确回答问题。缺勤5%以下； 能向老师提问； 回答问题。缺勒10%以下：能基本回答问题。课外学习40%能按时完成课外拓展训练； 能积极参加网上讨论活动： 能积极、主动进行自我学习。能按时完成80%课外拓展训练：能参加网h讨论活动；能进行自我学习:能按时完成60%课外拓 展训练：能参加网上讨论。合计100%