《HTML5前端开发》教学大纲
课程编号：20211201001
开课部门：XX系
学    分：X学分
学    时：32学时（其中理论学时：20学时  上机学时：12学时）
先修课程：计算机基础、计算机网络、计算机应用
后续课程：UI设计、 JavaScript与jQuery开发与设计、数据库应用、移动互联开发应用等
适用专业：信息技术及其计算机相关专业
01课程简介
HTML5网页前端设计是计算机专业一门重要的专业方向课程。HTML5网页前端设计是学习Web前端开发的必修课程。本课程介绍了开发Web前端网页应具备的基础知识，包括HTML5
、CSS3、JavaScript技术入门以及HTML5拖放、表单、画布、音频和视频、地理定位、Web存储的应用API等知识。通过理论教学和上机练习训练学生编写程序的熟练度和规范性；在项目经验的积累方面，通过完成项目案例，增加对实际软件项目开发的经验。
02课程目标及毕业要求指标点
知识目标：了解Web原理基础和前端新技术的由来，掌握HTML5+CSS3+JavaScript基础知识以及各类HTML5 API如拖放、表单、画布、音频和视频、地理定位、Web存储的应用。
技能目标：能综合应用HTML5、CSS3与JavaScript技术开发Web网站，能够在开发过程中熟练掌握HTML5新增文档结构元素的使用、CSS各类选择器的使用和样式的表达，提高开发者网页前端实战项目分析能力以及强化综合应用能力。
03教学要求
一、严格按照课表规定的时间、地点上课，不迟到、不早退。
二、根据大纲要求，认真备课完成教案与讲稿编写等各项课前准备工作；授课过程力求内容充实、概念准确、思路清晰、详略得当、逻辑性强、重难点突出，力戒平铺直叙、照本宣科，
三、重视对学生的学习方法指导和课堂教学效果信息的反馈，实现教与学的双向互动；
四、做好考核内容设计，并严格按照大纲要求做好出勤率统计、作业评价。
五、学生根据课程大纲要求制定本门课程学习计划，加强学业管理，严格自我要求，提升自主学习能力，主动适应课程学习要求。参与课堂教学活动不迟到、不早退，无正当理由不请假，上课认真听讲，不做任何与课堂教学无关事宜，不使用手机，积极与授课教师进行教学互动，同时利用课余时间做好预习、复习、课外书籍阅读等工作，主动与同学开展合作学习，认真完成任课教师布置的课程作业。
04教学内容
第1章 绪论：HTML5入门介绍。
第2章 HTML5基础：HTML5基本结构、HTML5保留的常用标签、HTML5新增的常用标签。
第3章 CSS基础：CSS样式表、CSS选择器、CSS常用样式、CSS定位。
第4章 JavaScript基础：JavaScript变量、基本数据类型、JavaScript对象类型、JavaScript运算符、JavaScript 条件语句、JavaScript函数、JavaScript DOM。
第5章 HTML5 拖放API：掌握HTML5元素拖放功能
第6章 HTML5 表单API：HTML表单基础、HTML5表单新增输入类型、HTML5表单新增元素标签、HTML5表单新增属性。
第7章 HTML5 画布API：HTML5画布创建，绘制路径、矩形、图片和文本，颜和样式设置，保存与恢复技术，变形与剪裁。
第8章 HTML5 媒体API：HTML5音频的应用、HTML5视频的应用、HTML5媒体API的其他通用功能。
第9章 HTML5 地理定位API：经纬度坐标、HTML5获取当前定位、HTML5实时更新定位。
第10章 HTML5 Web存储API：localStorage和sessionStorage存储，存储、读取数据、数据遍历，删除指定数据，清空所有数据。
第11章 CSS3技术：CSS3边框和背景效果、CSS3文本和字体效果、CSS3变形与动画效果、CSS3多列。
第12章 综合应用设计实例：综合应用HTML5、CSS3与JavaScript相关知识开发网页。
05实验环节
本课程建议课内上机18个学时，针对每章节知识点进行基础项目案例开发训练。教师可根据实际情况从配套的《HTML5网页前端设计实战》一书中选取上机的具体案例内容，该书基本每章节均提供2个案例对应主教材一个章节，教师可每次任选对应章节中一个案例作为上机课主题，另外一个案例留给学生选学。具体安排见下表。
章节
上机课时
实验内容
第1章 绪论
0
无
第2章 HTML5基础
1
上机实验：
1. 开发第一个Web页面
2. 使用HTML5新增标签丰富页面内容
第3章 CSS基础
1
上机实验（任选其一）：
《HTML5网页前端设计实战》第1章：
1. 导航栏菜单的设计与实现
2. 商务风格表格的设计与实现
第4章 JavaScript基础
1
上机实验（任选其一）：
《HTML5网页前端设计实战》第2章：
1. 电子时钟的设计与实现
2. 电子日历的设计与实现
第5章 HTML5 拖放API
1
上机实验（任选其一）：
《HTML5网页前端设计实战》第3章：
1. 仿回收站效果的设计与实现
2. 图片相框展示的设计与实现
第6章 HTML5 表单API
1
上机实验（任选其一）：
《HTML5网页前端设计实战》第4章：
1. 用户注册页面的设计与实现
2. 问卷调查页面的设计与实现
第7章 HTML5 画布API
1
上机实验（任选其一）：
《HTML5网页前端设计实战》第5章：
1. 手绘时钟的设计与实现
2. 拼图游戏的设计与实现
第8章 HTML5 媒体API
1
上机实验（任选其一）：
《HTML5网页前端设计实战》第6章：
1. 音乐播放器的设计与实现
2. 在线教学视频的设计与实现
第9章 HTML5 地理定位API
1
上机实验（任选其一）：
《HTML5网页前端设计实战》第7章：
1. 运动数据记录的设计与实现
2. 运动轨迹记录的设计与实现
第10章 HTML5 Web存储API
1
上机实验（任选其一）：
《HTML5网页前端设计实战》第8章：
1. 网页主题设置的设计与实现
2. 网页日志本的设计与实现
第11章 CSS3技术
1
上机实验（任选其一）：
《HTML5网页前端设计实战》第9章：
1. 特殊字体效果的设计与实现
2. 动画放大菜单的设计与实现
第12章 综合设计应用实例
2
上机实验（任选其一）：
《HTML5网页前端设计实战》第10章
《HTML5网页前端设计第2版-微课视频版》第12章
上机实验环节可以巩固学生对理论知识的理解，提高学生的实践操作能力和解决问题的逻辑思维能力，课后还可布置思考题培养学生的创新思维能力。根据学生在上机课的参与度、表现、操作熟练程度以及项目源代码等内容综合评定上机实践成绩，建议按总成绩的10%录入课程总分。
06建议学时
章节
理论课时
上机课时
第1章 绪论
1
0
第2章 HTML5基础
2
1
第3章 CSS基础
2
1
第4章 JavaScript基础
2
1
第5章 HTML5 拖放API
2
1
第6章 HTML5 表单API
2
1
第7章 HTML5 画布API
2
1
第8章 HTML5 媒体API
2
1
第9章 HTML5 地理定位API
2
1
第10章 HTML5 Web存储API
2
1
第11章 CSS3技术
1
1
第12章 综合应用设计实例
0
2
理论和上机学时：
20
12
课程总学时：
32
章节
理论课时
上机课时
第1章绪论
2
0
第2章 HTML5基础
2
2
第3章 CSS基础
4
2
第4章 JavaScript基础
4
2
第5章 HTML5 拖放API
2
1
第6章 HTML5 表单API
4
2
第7章 HTML5 画布API
2
1
第8章 HTML5 媒体API
2
1
第9章 HTML5 地理定位API
2
1
第10章 HTML5 Web存储API
2
1
第11章 CSS3技术
2
1
第12章综合应用设计实例
2
4
理论和上机学时：
30
18
课程总学时：
48
章节
理论课时
上机课时
第1章绪论
2
0
第2章 HTML5基础
2
2
第3章 CSS基础
4
网络前端需要学什么2
第4章 JavaScript基础
4
2
第5章 HTML5 拖放API
2
2
第6章 HTML5 表单API
4
2
第7章 HTML5 画布API
4
2
第8章 HTML5 媒体API
4
2
第9章 HTML5 地理定位API
2
2
第10章 HTML5 Web存储API
2
2
第11章 CSS3技术
4
2
第12章综合应用设计实例
2
4
理论和上机学时：
36
24
课程总学时：
60
07选用教材

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。