一、课程描述及课程目标

（一）课程描述

《HTML5编程技术》是面向计算机相关专业的一门专业必修课，从前端移动 Web 开发的角度合理选取教学内容， 涉及内容有移动互联中的 Web 应用、 基于 HTML5 的移动 Web 技术、 移动端页面布局和常用事件、 跨平台的移动 Web技术等。通过本课程的学习，学生能够掌握 HTML5 以及 Bootstrap 框架在移动Web 开发中应用， 在做案例过程中， 提高实践操作能力。

（二）课程目标

本课程为计算机类专业的专业基础课程，要求学生能够应用网站设计的基本知识及技能解决实际问题，通过本课程的学习，学生应达到下列学习目标:

1.掌握HTML5移动WEB开发基本知识及技能，核心能力1.1。

2.具备使用HTML5移动WEB开发相关技术进行网页程序设计的能力，核心能力2.1。

3.具备选择合适的开发平台进行程序设计的能力，核心能力2.2。

4.具备初步的计算机应用程序的设计能力，核心能力3.1。

5.能够将实验结果，通过文字、图、表的形式撰写实验报告，从而能够完整表达对实验原理及实验内容的理解，核心能力4.1。

6.了解移动WEB开发所涉及到的新技术和方法及在实际项目中的应用，核心能力6.1。

7.能够主动做好课前预习和课后实践，养成自主学习的意识和提高不断学习的能力，核心能力6.2。

8.在教师的指导下，通过综合实验训练遵守职业规范和道德，训练严谨的专业学习及工作习惯，核心能力7.1。

二、课程内容

（一）第1章 移动互联中的WEB应用

主要知识点:

1.1 移动互联网的发展

1.2 移动WEB开发概述

1.2.1 移动开发的几种方式

1.2.2 移动WEB开发与PC端WEB开发的区别

1.3 移动端的WEB浏览器

1.4 基于HTML5的移动WEB开发

教学要求:通过本章的学习，使学生了解什么是移动WEB开发，了解移动端的WEB浏览器和HTML5为移动WEB开发提供的技术。

重点:移动端的WEB浏览器和HTML5为移动WEB开发提供的技术

采用的教学方法:任务驱动式教学

讲授学时:1学时

实践学时:0学时

（二）第2章 基于HTML5的移动WEB应用（上）

主要知识点:

2.1 HTML5的网络存储

2.1.1　Web Storage简介

2.1.2　localStorage

2.1.3　sessionStorage

2.1.4　Storage 事件监听

2.2 移动Web离线应用

2.2.1　离线应用简介

2.2.2　 Application Cache的基本应用

2.2.3　 application Cache 对象

2.2.4　离线缓存更新

2.3 HTML5画布

2.3.1　初识canvas

2.3.2　 利用canvas 绘制 矩形和清除矩形

2.3.3　 利用canvas 绘制圆形

2.3.4　 利用canvas 绘制图片

2.3.5　 利用canvas 其他方法

教学要求:通过本章的学习，使学生了解什么是 HTML5 网络存储，了解什么是移动 Web 离线应用，熟悉 localStorage 和 sessionStorage 的区别，掌握 localStorage 和 sessionStorage 的使用方法，掌握 Application Cache 的使用方法。

重点:掌握 localStorage 和 sessionStorage 的使用方法、掌握 Application Cache 的使用方法

采用的教学方法:任务驱动式教学

讲授学时:3学时

实践学时:2学时

（三）第3章 基于HTML5的移动Web应用（下）

主要知识点:

3.1 视频与音频

3.1.1　 标签的使用

3.1.2　 HTML DOM Video 对象

3.1.3　 标签的使用

3.1.4　 HTML DOM Audio 对象

3.2 Geolocation地理定位

3.2.1　Geolocation简介

3.2.2　获取当前位置

3.2.3　调用百度地图

3.3 拖曳

3.4 文件操作

3.4.1　选择文件

3.4.2　操作文件

教学要求:通过本章的学习，使学生掌握标签和标签的使用、掌握 Geolocation API 的使用、掌握 HTML5 的拖曳操作、掌握文件操作。

重点:标签和标签、Geolocation API 的使用、HTML5 的拖曳操作、文件操作。

难点:Geolocation API 的使用、HTML5 的拖曳操作

采用的教学方法:任务驱动式教学

讲授学时:2学时

实践学时:1学时

（四）第 4 章 移动端页面布局和常用事件

主要知识点:

4.1 流式布局

4.2 视口

4.2.1　理解视口

4.2.2　移动端的3种视口

4.3 移动端常用事件

4.3.1　Touch事件简介

4.3.2　Touch事件的应用

4.3.3　 过渡和动画结束 事件

教学要求:通过本章的学习，使学生了解什么是流式布局，熟悉移动端的三种视口，掌握使用标签设置布局视口的方法，掌握 Touch 事件的使用方法，掌握过渡和动画结束事件的使用方法。

重点:掌握使用标签设置布局视口的方法、 掌握 Touch 事件的使用方法、掌握过渡和动画结束事件的使用方法。

难点:视口布局的方法、touch事件的使用方法

采用的教学方法:任务驱动式教学

讲授学时:2学时

实践学时:1学时

（五）第 5 章 综合项目-黑马掌上商城

主要知识点:

5.1 项目简介

5.1.1　项目功能展示

5.1.2　 项目目录和文件 结构

5.1.3　项目开发流程

5.2 商城首页

5.2.1　 【任务1】 项目 搭建

5.2.2　 【任务2】 页面主体和头部搜索

5.2.3　【任务3】 轮播图

5.2.4　【任务4】 导航栏

5.2.5　【任务5】 商品

5.3 商品分类页

5.3.1　 【任务6】 顶部 通栏

5.3.2　【任务7】 左侧栏

5.3.3　【任务8】 右侧栏

5.4 购物车页面

5.4.1　 【任务9】 购物 车页面

5.4.2　 【任务10】 弹出 框动画

5.5 Zepto.js

5.5.1　Zepto 模块

5.5.2　Zepto的使用

教学要求:通过本章的学习，使学生了解项目的整体结构，能够参考教材完成项目代码，掌握项目中使用的重点知识。

重点:视口和流式布局、移动端事件、过渡和动画结束事件、 Gesture 事件、全屏单页面布局、Zepto.js 的使用。

难点:移动端事件、Gesture 事件、全屏单页面布局、Zepto.js 的使用

采用的教学方法:任务驱动式教学

讲授学时:4学时

实践学时:2学时

（六）第 6 章 跨平台移动 Web 技术

主要知识点:

6.1 响应式Web设计

6.1.1　 响应式Web设计 简介

6.1.2　 响应式Web设计 相关技术

6.2 媒体查询

6.3 栅格系统

6.4 弹性盒布局

教学要求:通过本章的学习，使学生了解什么是响应式 Web 设计、掌握 CSS3 媒体查询的使用、 熟悉什么是栅格系统、掌握弹性盒布局。

重点:掌握 CSS3 媒体查询的使用、掌握弹性盒布局。

难点: 弹性盒布局

采用的教学方法:任务驱动式教学

讲授学时:2学时

实践学时:1学时

（七）第 7 章 使用 Bootstrap 进行移动 Web 开发

主要知识点:

7.1 初识Bootstrap

7.1.1　Bootstrap简介

7.1.2　Bootstrap下载

7.1.3　 Bootstrap基本 模板

7.2 Bootstrap常用布局

7.2.1　布局容器

7.2.2　栅格系统

7.2.3　响应式工具

7.3 Bootstrap常用样式

7.3.1　导航栏

7.3.2　表单

7.3.3　按钮

7.3.4　标签页

7.3.5　轮播插件

教学要求:通过本章的学习，使学生掌握 Bootstrap 的安装和配置、掌握 Bootstrap 的布局工具、掌握 Bootstrap 的样式工具

重点: Bootstrap 的安装和配置、Bootstrap 的使用

采用的教学方法:任务驱动式教学

讲授学时:4学时

实践学时:2学时

（八）第 8 章 综合项目-黑马财富

主要知识点:

8.1 项目简介

8.1.1　项目功能展示

8.1.2　 项目目录和文件 结构

8.1.3　项目开发流程

8.2　 【任务1】 index.html页面 结构搭建

8.3　 【任务2】 顶部通栏 模块

8.4　【任务3】 导航栏模块

8.5　【任务4】 轮播图模块

8.6　 【任务5】 信息和预约模块

8.7　【任务6】 产品模块

8.8　 【任务7】 新闻和合作 伙伴模块

教学要求:通过本章的学习，使学生了解项目的整体结构，能够参考教材完成项目代码，掌握项目中使用的重点知识

重点:视口和媒体查询、Bootstrap 响应式工具、Bootstrap 布局容器、Bootstrap 栅格系统、Bootstrap 轮播图、undersocre、Bootstrap 标签页、Touch 事件

难点:Bootstrap 响应式工具、Bootstrap 栅格系统

采用的教学方法:任务驱动式教学

讲授学时:4学时

实践学时:2学时

（九）课程设计

主要知识点:教材的所有知识点

教学要求:通过本次课程设计，使学生综合运用HTML5移动WEB开发的相关技术，开发一个基于HTML5的WEB移动应用。

采用的教学方法:任务驱动式教学

实践学时:3学时

三、课程的预期学习成果

在本门课程结束时，学生应该能够:

1、熟悉HTML5移动WEB开发的开发流程

2、掌握常用的HTML5移动WEB开发技术。

3、掌握各种移动WEB网站的制作。

四、课程要求

（一）出勤

学生应积极参与课堂教学并完成相关的作业、实验内容。

（二）阅读资料

学生应认真进行课前预习，阅读教材和指定参考书及重要的参考文献。

（三）课堂展示

根据时间及课堂班人数，在可能的情况下安排小组实验课程讨论与效果演示。

（四）课外实践

本课程是实践类课程，不单独安排课外实践。

（五）小考与期末考

无小考，期末以课程设计的方式进行考核。

（六）课程论文

以平时作业为主，安排小案例实验作为期中检查。

（七）学术诚信

按中山大学南方学院相关规定执行。

（八）剽窃的定义以及相应的惩罚

剽窃是严重违反学校规章制度的行为。一经发现，将上报相关部门，并受到包括开除学籍在内的严厉处罚。

五、课程资料

（一）教科书-必读

黑马程序员. HTML5 移动Web开发[M].中国铁道出版社.2017

（二）教科书-强烈推荐

[1] 黑马程序员.网页设计与制作项目教程（HTML+CSS+Javascript）.人民邮电出版社.2017.1.1

[2] 郑娅峰、张永强. 郑娅峰、张永强.清华大学出版社.2016.01

[3] 传智播客高教产品研发部. HTML5+CSS3网站设计基础教程[M]. 人民邮电出版社, 2016.

[4] 黄睿. 网站设计项目化教程[M]. 人民邮电出版社, 2015.

[5] 黑马程序员.响应式WEB开发项目教程（HTML5+CSS3+Bootstrap）[M].人民邮电出版社.2017

（三）文章-必读

[1] 狐狸不归.网站建设步骤详解.http://jingyan.baidu.com/article/c35dbcb0270a0e8917fcbc7f.html.2011.12.16

[2] 戴宏明. 营销型网站规划六步法[J]. 现代计算机, 2013(6):55-57.

（四）文章-强烈推荐

[1] HTML5移动端开发总结. https://www.cnblogs.com/yingcaiyi/p/6405932.html

[2] 2017web前端之html5开发中常用的开发工具.https://www.cnblogs.com/zx111/p/5689911.html

[3] 最好用的10种HTML5应用开发工具推荐.http://www.php.cn/html5-tutorial-360161.html

（五）其他参考资料

[1] [美] 达科特（Jon Duckett） 著；刘涛，陈学敏 译.Web设计与前端开发秘籍:HTML CSS Javascript jQuery 构建网站（套装共2册）.北京.清华大学出版社.2015.06

[2] 刘西杰，张婷 著. HTML CSS Javascript 网页制作从入门到精通 第3版.北京.人民邮电出版社.2016.07

[3] HTML系列教程.http://www.w3school.com.cn/

六、教学活动以及对于预期学习成果的评估

（一）教学活动

1、个人预习

2、课堂讲授

3、课堂问答

4、实验讲解

5、案例讨论

6、课后实验

7、期末课程设计

（二）对预期学习成果的考察

七、评估的程序和方法

（一）评分体系

1、出勤率: 20%

2、课堂参与: 加分

3、课堂实验及作业: 30%

4、期末课程设计: 50%

（二）考试内容及要求

考试包含以下内容:

1. HTML5移动WEB开发的基本语法知识及使用（核心能力1.1）；

2. 能够选用合适的程序开发工具（核心能力2.2）；

3. 能够根据实际问题，对开发环境进行环境的配置（核心能力2.2）；

4. 根据实际问题的需求，设计并完成综合实验（核心能力3.1）；

5. 能够根据课程要求，通过文字、图、表的形式撰写实验报告，并进行简单的分析（核心能力4.1、6.2）；

6. 能够按照综合实验要求，按时完成综合实验，并培养良好的职业习惯（核心能力7.1）。

八、教学进度与学时分配表

注:此表一式三份，于开学两周内填好，一份送教务与科研部，一份开课单位留存，一份自留。