?一、課程描述及課程目標

（一）課程描述

《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）。

八、教學進度與學時分配表

注:此表一式三份，于開學兩周內填好，一份送教務與科研部，一份開課單位留存，一份自留。