HTM移动开发教程 设计

课程教学设计（2025/2026学年第1学期）课程名称《移动Web高级开发》授课对象软件技术专业课程学分4总学时72课程特性职业通用能力必修课程所属系部软件与大数据学院设计人（团队）叶品菊审核人批准人

一、课程信息课程名称：移动Web高级开发课程编码：R00191263学分：4学时：72课程类型：职业通用能力必修课程授课对象：软件技术专业二年级学生先修课程：网页设计与制作、程序设计基础、web前端开发后续课程：PHP程序设计、微信小程序开发二、课程目标设计通过本课程的学习，使学生逐步建立和掌握Web客户端页面设计的思想方法，具有分析问题和解决问题的能力，能够使用HTML5、CSS3、Bootstrap等技术编写Web客户端页面解决实际问题，掌握WEB前端开发的基本思想，基本能胜任WEB前端开发工程师的岗位。通过本课程的学习，可以培养学生解决前端开发实际问题的能力；提高学生在沟通表达、自我学习和团队协作方面的能力；同时养成规范的编码习惯。1．总体目标通过本课程的学习，使学生逐步建立和掌握Web客户端页面设计的思想方法，具有分析问题和解决问题的能力，能够使用HTML5、CSS3、Bootstrap编写Web客户端页面解决实际问题，具备吃苦耐劳、团结协作的良好品质。2．能力目标能独立进行资料收集与整理、具备用户需求的理解能力和书面表达能力；能根据项目需求，具备项目页面的分析与设计能力；能熟练编写CSS3样式控制页面的各种元素，实现页面美化与布局；掌握网站发布与管理的基本技能；能够进行个人网站和商业网站的设计；具备获取知识能力，网页设计创意思维能力、色彩感悟能力；具备从事网站设计、网站编辑和网站维护等相关工作的能力。3．知识目标熟悉HTML5语言的作用和开发环境，能够编写HTML5代码；掌握常用的HTML5标签，能够实现基本的图文信息显示；理解HTML5页面框架的作用，能够针对需求进行框架的设计；掌握各类HTML5表单元素标签，能够进行表单设计；掌握各类HTML5多媒体元素标签，能够进行多媒体页面设计；掌握HTML5新增canvas画布标签；掌握CSS3控制页面元素的方法，能够应用CSS3样式美化页面；掌握CSS3网页布局的方法，能够设计2D和3D动画；掌握Bootstrap框架的用法，能够应用框架技术快速开发WEB网站；4．素质目标养成善于思考、深入研究的良好自主学习的习惯；通过项目与案例教学，培养学习者的分析问题、解决问题的能力；具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力；通过课外拓展训练，培养学习者的创新意识；具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。5．其他目标通过本课程的学习，学生可以参加以下职业资格证书考试。WEB前端开发工程师；软件UI设计师；网站设计开发工程师。三、课程内容设计根据课程标准确定HTML5语言、CSS3样式、响应式web设计、综合网站制作等教学模块的学习内容。知识体系结构如下表。表1《移动Web高级开发》课程内容设计序号篇名教学模块单元内容主要教学方法建议学时1基础语言篇模块1HTML5语言初始HTML5（1）启发式教学（2）案例教学（3）演示教学（4）案例教学82HTML5表单103网页图像和多媒体元素64图像及动画125小计366核心技术篇模块2CSS3样式文本类网页设计（1）演示教学（2）案例教学107图文展示类网页设计148小计249模块3响应式Web设计响应式Web设计（1）演示教学（2）案例教学810小计811综合应用篇模块4综合网站制作网站制作与项目答辩项目实践法4小计4合计72四、能力训练设计表2《移动Web高级开发》课程能力训练设计编号能力训练单元名称能力训练单元内容拟实现的能力目标相关支撑知识训练方式手段及步骤结果（可展示）1模块1HTML5语言初识HTML5能分析常见网站特效原理，实现技术；掌握在HTML5程序的编写方法。学习HTML5新的语法；能使用HTML5新增的结构元素；能使用HTML5新增的语义元素；能使用HTML5新增的属性。网页相关技术；HTML5技术。教师操作演示；学生体验；教师总结。学生电脑安装Hbuilder2HTML5表单掌握HTML5的INPUT类型；掌握HTML5的表单元素；掌握HTML5的表单属性。HTML标签；DIV+CSS；JavaScript基础。教师操作演示；学生动手实践；结果展示并点评。代码提交3网页图像和多媒体元素掌握HTML5的音频标签详解；掌握HTML5的视频标签详解。掌握拖放事件；掌握事件的执行顺序；掌握dataTransfer对象；掌握FileReader读取文件信息。Html基础；CSS基础;JavaScript基础。教师操作演示；学生动手实践；结果展示并点评。代码提交4图像及动画掌握HTML5画布的主要属性和方法；掌握canvas的API；掌握SVG创建2D图形。HTML标签；DIV+CSS。JavaScript基础。教师操作演示；学生动手实践；结果展示并点评。代码提交5模块2CSS3样式文本类网页设计CSS3发展史及性能预览；CSS3属性选择器；CSS3结构伪类选择器；CSS3UI伪类选择器；CSS3文本效果；CSS3新的颜色表示；CSS3字体；HTML标签；DIV+CSS；JavaScript语法基础。教师操作演示；学生动手实践；师生常见问题归纳；结果展示并点评。代码提交6图文展示类网页设计(1)CSS3背景；(2)CSS3边框图片属性；(3)CSS3圆角属性；(4)CSS3盒子阴影；(5)CSS3盒子倒影。(6)2D与3D变换；(7)自定义变换；(8)平滑过渡Transaction；(9)动画Animation。HTML标签；DIV+CSS；JavaScript基础。(1) 教师操作演示；(2) 学生动手实践；(3) 师生常见问题归纳；(4) 结果展示并点评。代码提交7模块3响应式Web设计响应式Web设计会下载和使用BootStrap框架；掌握Bootstrap网格系统；掌握Bootstrap排版；掌握Bootstrap表格；掌握Bootstrap表单和按钮；掌握Bootstrap图片。掌握Bootstrap字体图标；掌握Bootstrap下拉菜单；掌握Bootstrap导航元素；HTML5；DIV+CSS；JavaScript语法基础。教师操作演示；学生动手实践；师生常见问题归纳；结果展示并点评。代码提交8模块4综合网站制作网站制作与项目答辩会使用HTML5设计网站；会发布站点；能说明网站的设计思想，正确回答问题。Html5；CSS3样式；JavaScript编程BootStrap框架。教师操作演示；学生动手实践；师生常见问题归纳；结果展示并点评。提交作品项目答辩五、进程设计表3《移动Web高级开发》课程进程设计序号篇名能力训练单元名称能力训练单元内容能力目标知识目标学时其他内容1语言基础篇模块1HTML5语言模块初识HTML5(1) 能分析常见网站特效原理，实现技术；(1) 掌握在HTML5程序的编写方法。(2) 学习HTML5新的语法；(3) 能使用HTML5新增的结构元素；(4) 能使用HTML5新增的语义元素；(5) 能使用HTML5新增的属性。能分析常见网站特效原理，实现技术；掌握在HTML5程序的编写方法。掌握使用HTML5语法的改变；掌握HTML5新增的结构元素；掌握HTML5新增的语义元素；掌握HTML5新增的属性。8网站特效原理分析；职业能力要求；考核方案；常见技术论坛；自学视频；好的参考教程。2HTML5表单(1) 掌握HTML5的INPUT类型；(2) 掌握HTML5的表单元素；(3) 掌握HTML5的表单属性。(1) 掌握HTML5Input输入类型和属性；(2) 熟悉表单高级元素的使用；(3) 掌握通用表单属性；(4) JavaScript基础知识。(5) 表单验证。10职业素养训练；学生上台演示。3网页图像和多媒体元素(1) 掌握HTML5的音频标签详解；(2) 掌握HTML5的视频标签详解。(3) 掌握拖放事件；(4) 掌握事件的执行顺序；(5) 掌握dataTransfer对象；(6) 掌握FileReader读取文件信息。掌握HTML5的音频标签详；掌握HTML5的视频标签详解。掌握拖放事件；掌握事件的执行顺序；掌握dataTransfer对象。6职业素养训练；学生上台演示。4图像及动画(1) 掌握HTML5画布的主要属性和方法；(2) 掌握canvas的API；(3) 掌握SVG创建2D图形。掌握HTML5画布的主要属性和方法；掌握canvas的API；掌握SVG创建2D图形。12职业素养训练；学生上台演示。5核心技术篇模块2CSS3样式文本类网页设计CSS3发展史及性能预览；CSS3属性选择器；CSS3结构伪类选择器；CSS3UI伪类选择器。CSS3文本效果；CSS3新的颜色表示；CSS3字体；CSS3发展史及性能预览；CSS3属性选择器；CSS3结构伪类选择器；CSS3UI伪类选择器。CSS3文本效果；CSS3新的颜色表示；CSS3字体；10(1)职业素养训练；(2)学生上台演示。6图文展示类网页设计CSS3背景；CSS3边框图片属性；CSS3圆角属性；CSS3盒子阴影；CSS3盒子倒影。Transaction过渡；2D变换；3D变换；CSS3动画效果CSS3背景；CSS3边框图片属性；CSS3圆角属性；CSS3盒子阴影；CSS3盒子倒影。Transaction过渡；2D变换；3D变换；CSS3动画效果14(1)职业素养训练；(2)学生上台演示。7模块3响应式Web设计神器Bootstrap响应式Web设计掌握Bootstrap网格系统；掌握Bootstrap排版；掌握Bootstrap表格；掌握Bootstrap表单；掌握Bootstrap按钮;掌握Bootstrap图片掌握Bootstrap字体图标；掌握Bootstrap下拉菜单；掌握Bootstrap导航元素；会下载和使用BootStrap框架；掌握Bootstrap网格系统；掌握Bootstrap排版；掌握Bootstrap表格；掌握Bootstrap表单；掌握Bootstrap按钮；掌握Bootstrap图片。掌握Bootstrap字体图标；掌握Bootstrap下拉菜单；掌握Bootstrap导航元素；8(1)职业素养训练；(2)学生上台演示。8综合应用篇模块4综合网站制作网站制作会使用HTML5设计网站；会发布站点；能说明网站的设计思想，正确回答问题。会使用HTML5设计网站；会发布站点；能说明网站的设计思想，正确回答问题。4(1)提交作品；(2)项目答辩。六、考核方案设计该课程的考核改变单一的终结性评价方式，采用态度性考核、知识性考核、技能性考核相结合，与创新性评价附件分一并合计计算的形成性考核方式。其中态度性评价占20%，知识性评价占40%，技能型评价占40%，另外对于学生的创新性评价，总分不得超过10分，主要考核学生运用jQuery高级应用的掌握情况；理论部分考核学生对教学中各知识点综合应用的掌握情况。灵活多样的考核方式可以全面考核学生的学习效果。课程考核方式如表4所示。表4形成性考核一览表考核项目考核方法比例形成性评价态度性评价根据作业完成情况，课堂回答问题、实践完成情况，由教师综合评定学习态度的得分；根据上课考勤情况，由教师和学生干部评定纪律得分。20%知识性评价由教师评定成绩。40%技能型评价根据学生实践操作情况，根据完成的时间、功能的完善情况、是否有创新，由教师评价。40%创新性评价取得与本课程相关的竞赛、论文发表、技术服务等，由系部认定10%合计110%具体考核标准如下：1.态度性评价标准表5态度性评价标准一览表考核点考核比例评价标准优秀(86-100)良好(70-85)及格(60-69)课堂学习60%无缺勤情况；能积极主动向老师提问；能正确回答问题。缺勤5%以下；能向老师提问；回答问题。缺勤10%以下；能基本回答问题。课外学习40%能按时完成课外拓展训练；能积极参加网上讨论活动；能积极、主动进行自我学习。能按时完成80%课外拓展训练；能参加网上讨论活动；能进行自我学习。能按时完成60%课外拓展训练；能参加网上讨论。合计100%2.知识性评价标准表6知识性评价标准一览表序号教学单元名称考核知识点比例1单元1：初识HTML5能分析常见网站特效原理，实现技术；掌握在HTML5程序的编写方法。掌握使用HTML5语法的改变；掌握HTML5新增的结构元素；掌握HTML5新增的语义元素；掌握HTML5新增的属性。11%2单元2：文本类网页设计掌握CSS3发展史及性能预览；掌握CSS3属性选择器；掌握CSS3结构伪类选择器；掌握CSS3UI伪类选择器。掌握CSS3文本效果；掌握CSS3新的颜色表示；掌握CSS3字体；14%3单元3：图文展示类网页设计掌握CSS3背景的设置方法；掌握CSS3边框图片属性；掌握CSS3圆角属性；掌握CSS3盒子阴影；掌握CSS3盒子倒影的设计。掌握3D变换；掌握CSS3动画效果。掌握Transaction过渡；掌握2D变换。19%4单元4:HTML5表单掌握HTML5的INPUT类型；掌握HTML5的表单元素；掌握HTML5的表单属性。14%5单元5：网页图像和多媒体元素掌握HTML5的音频标签详；掌握HTML5的视频标签详解。8%6单元6：图像及动画掌握HTML5画布的主要属性和方法；掌握canvas的API；掌握SVG创建2D图形。17%7单元7：响应式Web设计神器Bootstrap(1) 掌握Bootstrap网格系统；(2) 掌握Bootstrap排版；(3) 掌握Bootstrap表格；(4) 掌握Bootstrap表单；(5) 掌握Bootstrap按钮;(6) 掌握Bootstrap图片(7) 掌握Bootstrap字体图标；(8) 掌握Bootstrap下拉菜单；(9) 掌握Bootstrap导航元素；(10) 掌握Bootstrap分页。(11) 掌握Bootstrap标签页；(12) 掌握Bootstrap轮播插件；11%8单元8：综合网站设计会使用HTML5设计网站；会发布站点；能说明网站的设计思想，正确回答问题。6%合计100%3.技能性评价标准表7技能性评价标准一览表任务名称：班级姓名学号考核点考核比例得分评价标准优秀(86-100)良好(70-85)及格(60-69)项目实现70%能综合运用相关教学知识单元很好完成实践项目；编写程序的功能达到设计目标，用户界面友好，编程逻辑清晰，程序代码规范；在规定时间内完成。能综合运用相关教学知识单元完成实践项目；编写程序的功能基本达到设计目标，用户界面友好，能完成基本功能代码编写；能在规定时间完成。能基本完成实践项目；编写的程序能基本达到设计目标，能编写简单模块的代码；能在规定时间内完成。创新能力15%能积极主动发现问题、分析问题、解决问题；有创新；采用优化方案。能发现问题并通过各种途径解决问题；有一定的创新。能发现问题并在他人的帮助下解决问题；具局部有创新。表达沟通15%能较清晰的表达程序的设计思路；答辩展示表现优秀；能辅导他人完成项目；能评述他人的设计。能表达程序的设计思路；答辩展示表现好；能与他人交流设计方法。能看懂别人的设计。能对项目实践过程进行讲解；答辩展示基本正确。合计4.创新性评价标准表8创新性评价标准一览表评价内容级别分值国家级省级院级系级论文发表10(市级以上刊物发表)竞赛获奖10/8/68/6/46/4/24/2/1专利/软件著作权10软件产品登记证书10技术服务由系部认定分值该课程的配套实训课程，主要考核学生在实训期间的态度纪律情况、创新能力、沟通表达能力、编程开发能力，具体标准见表9。表9综合实训考核标准一览表考核点考核比例评价标准优秀(86-100)良好(70-85)及格(60-69)态度纪律实训期间的出勤情况；学习态度情况；团队协作情况。15%没有缺勤情况；认真对待综合实训；听从教师安排；缺勤5%以下；认真对待综合实训；听从教师安排；缺勤10%以下；听从教师安排。创新能力主动发现和解决问题；是否有创新；是否优化。15%能独立分析、解决问题，分析问题透彻，解决问题高效；实训结果有创新。能够独立分析、解决问题，能借助常用工具获取有用信息。分析解决问题能力一般；能在他人的帮助下解决问题。表达沟通项目陈述情况；回答问题情况。20%表达能力强，条理清晰；能正确回答问题，思路敏捷。能够正确阐述实训作品，表达能力强；能够回答问题，没有原则性错误。表达能力一般；回答问题条理不清楚。项目程序设计网站的功能实现；网站的程序编写。50%用户界面美观；编程逻辑清晰，程序代码规范。用户界面友好；程序代码错误少。能全部完成项目功能的60%；程序代码错误少。合计100%七、课程教材选用叶品菊.《HTML5移动Web高级开发任务教程》，人民邮电出版社.2023年1月，第1版.选用原因：所选用的教材《HTML5移动Web高级开发任务教程》充分体现培养学生的职业能力为中心思想，以“教、学、做”为一