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

（一）課程描述

《HTML5編程技術(shù)》是面向計算機相關(guān)專業(yè)的一門專業(yè)必修課，從前端移動 Web 開發(fā)的角度合理選取教學內(nèi)容， 涉及內(nèi)容有移動互聯(lián)中的 Web 應用、 基于 HTML5 的移動 Web 技術(shù)、 移動端頁面布局和常用事件、 跨平臺的移動 Web技術(shù)等。通過本課程的學習，學生能夠掌握 HTML5 以及 Bootstrap 框架在移動Web 開發(fā)中應用， 在做案例過程中， 提高實踐操作能力。

（二）課程目標

本課程為計算機類專業(yè)的專業(yè)基礎(chǔ)課程，要求學生能夠應用網(wǎng)站設(shè)計的基本知識及技能解決實際問題，通過本課程的學習，學生應達到下列學習目標:

1.掌握HTML5移動WEB開發(fā)基本知識及技能，核心能力1.1。

2.具備使用HTML5移動WEB開發(fā)相關(guān)技術(shù)進行網(wǎng)頁程序設(shè)計的能力，核心能力2.1。

3.具備選擇合適的開發(fā)平臺進行程序設(shè)計的能力，核心能力2.2。

4.具備初步的計算機應用程序的設(shè)計能力，核心能力3.1。

5.能夠?qū)嶒灲Y(jié)果，通過文字、圖、表的形式撰寫實驗報告，從而能夠完整表達對實驗原理及實驗內(nèi)容的理解，核心能力4.1。

6.了解移動WEB開發(fā)所涉及到的新技術(shù)和方法及在實際項目中的應用，核心能力6.1。

7.能夠主動做好課前預習和課后實踐，養(yǎng)成自主學習的意識和提高不斷學習的能力，核心能力6.2。

8.在教師的指導下，通過綜合實驗訓練遵守職業(yè)規(guī)范和道德，訓練嚴謹?shù)膶I(yè)學習及工作習慣，核心能力7.1。

二、課程內(nèi)容

（一）第1章 移動互聯(lián)中的WEB應用

主要知識點:

1.1 移動互聯(lián)網(wǎng)的發(fā)展

1.2 移動WEB開發(fā)概述

1.2.1 移動開發(fā)的幾種方式

1.2.2 移動WEB開發(fā)與PC端WEB開發(fā)的區(qū)別

1.3 移動端的WEB瀏覽器

1.4 基于HTML5的移動WEB開發(fā)

教學要求:通過本章的學習，使學生了解什么是移動WEB開發(fā)，了解移動端的WEB瀏覽器和HTML5為移動WEB開發(fā)提供的技術(shù)。

重點:移動端的WEB瀏覽器和HTML5為移動WEB開發(fā)提供的技術(shù)

采用的教學方法:任務(wù)驅(qū)動式教學

講授學時:1學時

實踐學時:0學時

（二）第2章 基于HTML5的移動WEB應用（上）

主要知識點:

2.1 HTML5的網(wǎng)絡(luò)存儲

2.1.1　Web Storage簡介

2.1.2　localStorage

2.1.3　sessionStorage

2.1.4　Storage 事件監(jiān)聽

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 網(wǎng)絡(luò)存儲，了解什么是移動 Web 離線應用，熟悉 localStorage 和 sessionStorage 的區(qū)別，掌握 localStorage 和 sessionStorage 的使用方法，掌握 Application Cache 的使用方法。

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

采用的教學方法:任務(wù)驅(qū)動式教學

講授學時: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　調(diào)用百度地圖

3.3 拖曳

3.4 文件操作

3.4.1　選擇文件

3.4.2　操作文件

教學要求:通過本章的學習，使學生掌握標簽和標簽的使用、掌握 Geolocation API 的使用、掌握 HTML5 的拖曳操作、掌握文件操作。

重點:標簽和標簽、Geolocation API 的使用、HTML5 的拖曳操作、文件操作。

難點:Geolocation API 的使用、HTML5 的拖曳操作

采用的教學方法:任務(wù)驅(qū)動式教學

講授學時: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　 過渡和動畫結(jié)束 事件

教學要求:通過本章的學習，使學生了解什么是流式布局，熟悉移動端的三種視口，掌握使用標簽設(shè)置布局視口的方法，掌握 Touch 事件的使用方法，掌握過渡和動畫結(jié)束事件的使用方法。

重點:掌握使用標簽設(shè)置布局視口的方法、 掌握 Touch 事件的使用方法、掌握過渡和動畫結(jié)束事件的使用方法。

難點:視口布局的方法、touch事件的使用方法

采用的教學方法:任務(wù)驅(qū)動式教學

講授學時:2學時

實踐學時:1學時

（五）第 5 章 綜合項目-黑馬掌上商城

主要知識點:

5.1 項目簡介

5.1.1　項目功能展示

5.1.2　 項目目錄和文件 結(jié)構(gòu)

5.1.3　項目開發(fā)流程

5.2 商城首頁

5.2.1　 【任務(wù)1】 項目 搭建

5.2.2　 【任務(wù)2】 頁面主體和頭部搜索

5.2.3　【任務(wù)3】 輪播圖

5.2.4　【任務(wù)4】 導航欄

5.2.5　【任務(wù)5】 商品

5.3 商品分類頁

5.3.1　 【任務(wù)6】 頂部 通欄

5.3.2　【任務(wù)7】 左側(cè)欄

5.3.3　【任務(wù)8】 右側(cè)欄

5.4 購物車頁面

5.4.1　 【任務(wù)9】 購物 車頁面

5.4.2　 【任務(wù)10】 彈出 框動畫

5.5 Zepto.js

5.5.1　Zepto 模塊

5.5.2　Zepto的使用

教學要求:通過本章的學習，使學生了解項目的整體結(jié)構(gòu)，能夠參考教材完成項目代碼，掌握項目中使用的重點知識。

重點:視口和流式布局、移動端事件、過渡和動畫結(jié)束事件、 Gesture 事件、全屏單頁面布局、Zepto.js 的使用。

難點:移動端事件、Gesture 事件、全屏單頁面布局、Zepto.js 的使用

采用的教學方法:任務(wù)驅(qū)動式教學

講授學時:4學時

實踐學時:2學時

（六）第 6 章 跨平臺移動 Web 技術(shù)

主要知識點:

6.1 響應式Web設(shè)計

6.1.1　 響應式Web設(shè)計 簡介

6.1.2　 響應式Web設(shè)計 相關(guān)技術(shù)

6.2 媒體查詢

6.3 柵格系統(tǒng)

6.4 彈性盒布局

教學要求:通過本章的學習，使學生了解什么是響應式 Web 設(shè)計、掌握 CSS3 媒體查詢的使用、 熟悉什么是柵格系統(tǒng)、掌握彈性盒布局。

重點:掌握 CSS3 媒體查詢的使用、掌握彈性盒布局。

難點: 彈性盒布局

采用的教學方法:任務(wù)驅(qū)動式教學

講授學時:2學時

實踐學時:1學時

（七）第 7 章 使用 Bootstrap 進行移動 Web 開發(fā)

主要知識點:

7.1 初識Bootstrap

7.1.1　Bootstrap簡介

7.1.2　Bootstrap下載

7.1.3　 Bootstrap基本 模板

7.2 Bootstrap常用布局

7.2.1　布局容器

7.2.2　柵格系統(tǒng)

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 的使用

采用的教學方法:任務(wù)驅(qū)動式教學

講授學時:4學時

實踐學時:2學時

（八）第 8 章 綜合項目-黑馬財富

主要知識點:

8.1 項目簡介

8.1.1　項目功能展示

8.1.2　 項目目錄和文件 結(jié)構(gòu)

8.1.3　項目開發(fā)流程

8.2　 【任務(wù)1】 index.html頁面 結(jié)構(gòu)搭建

8.3　 【任務(wù)2】 頂部通欄 模塊

8.4　【任務(wù)3】 導航欄模塊

8.5　【任務(wù)4】 輪播圖模塊

8.6　 【任務(wù)5】 信息和預約模塊

8.7　【任務(wù)6】 產(chǎn)品模塊

8.8　 【任務(wù)7】 新聞和合作 伙伴模塊

教學要求:通過本章的學習，使學生了解項目的整體結(jié)構(gòu)，能夠參考教材完成項目代碼，掌握項目中使用的重點知識

重點:視口和媒體查詢、Bootstrap 響應式工具、Bootstrap 布局容器、Bootstrap 柵格系統(tǒng)、Bootstrap 輪播圖、undersocre、Bootstrap 標簽頁、Touch 事件

難點:Bootstrap 響應式工具、Bootstrap 柵格系統(tǒng)

采用的教學方法:任務(wù)驅(qū)動式教學

講授學時:4學時

實踐學時:2學時

（九）課程設(shè)計

主要知識點:教材的所有知識點

教學要求:通過本次課程設(shè)計，使學生綜合運用HTML5移動WEB開發(fā)的相關(guān)技術(shù)，開發(fā)一個基于HTML5的WEB移動應用。

采用的教學方法:任務(wù)驅(qū)動式教學

實踐學時:3學時

三、課程的預期學習成果

在本門課程結(jié)束時，學生應該能夠:

1、熟悉HTML5移動WEB開發(fā)的開發(fā)流程

2、掌握常用的HTML5移動WEB開發(fā)技術(shù)。

3、掌握各種移動WEB網(wǎng)站的制作。

四、課程要求

（一）出勤

學生應積極參與課堂教學并完成相關(guān)的作業(yè)、實驗內(nèi)容。

（二）閱讀資料

學生應認真進行課前預習，閱讀教材和指定參考書及重要的參考文獻。

（三）課堂展示

根據(jù)時間及課堂班人數(shù)，在可能的情況下安排小組實驗課程討論與效果演示。

（四）課外實踐

本課程是實踐類課程，不單獨安排課外實踐。

（五）小考與期末考

無小考，期末以課程設(shè)計的方式進行考核。

（六）課程論文

以平時作業(yè)為主，安排小案例實驗作為期中檢查。

（七）學術(shù)誠信

按中山大學南方學院相關(guān)規(guī)定執(zhí)行。

（八）剽竊的定義以及相應的懲罰

剽竊是嚴重違反學校規(guī)章制度的行為。一經(jīng)發(fā)現(xiàn)，將上報相關(guān)部門，并受到包括開除學籍在內(nèi)的嚴厲處罰。

五、課程資料

（一）教科書-必讀

黑馬程序員. HTML5 移動Web開發(fā)[M].中國鐵道出版社.2017

（二）教科書-強烈推薦

[1] 黑馬程序員.網(wǎng)頁設(shè)計與制作項目教程（HTML+CSS+Javascript）.人民郵電出版社.2017.1.1

[2] 鄭婭峰、張永強. 鄭婭峰、張永強.清華大學出版社.2016.01

[3] 傳智播客高教產(chǎn)品研發(fā)部. HTML5+CSS3網(wǎng)站設(shè)計基礎(chǔ)教程[M]. 人民郵電出版社, 2016.

[4] 黃睿. 網(wǎng)站設(shè)計項目化教程[M]. 人民郵電出版社, 2015.

[5] 黑馬程序員.響應式WEB開發(fā)項目教程（HTML5+CSS3+Bootstrap）[M].人民郵電出版社.2017

（三）文章-必讀

[1] 狐貍不歸.網(wǎng)站建設(shè)步驟詳解.http://jingyan.baidu.com/article/c35dbcb0270a0e8917fcbc7f.html.2011.12.16

[2] 戴宏明. 營銷型網(wǎng)站規(guī)劃六步法[J]. 現(xiàn)代計算機, 2013(6):55-57.

（四）文章-強烈推薦

[1] HTML5移動端開發(fā)總結(jié). https://www.cnblogs.com/yingcaiyi/p/6405932.html

[2] 2017web前端之html5開發(fā)中常用的開發(fā)工具.https://www.cnblogs.com/zx111/p/5689911.html

[3] 最好用的10種HTML5應用開發(fā)工具推薦.http://www.php.cn/html5-tutorial-360161.html

（五）其他參考資料

[1] [美] 達科特（Jon Duckett） 著；劉濤，陳學敏 譯.Web設(shè)計與前端開發(fā)秘籍:HTML CSS Javascript jQuery 構(gòu)建網(wǎng)站（套裝共2冊）.北京.清華大學出版社.2015.06

[2] 劉西杰，張婷 著. HTML CSS Javascript 網(wǎng)頁制作從入門到精通 第3版.北京.人民郵電出版社.2016.07

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

六、教學活動以及對于預期學習成果的評估

（一）教學活動

1、個人預習

2、課堂講授

3、課堂問答

4、實驗講解

5、案例討論

6、課后實驗

7、期末課程設(shè)計

（二）對預期學習成果的考察

七、評估的程序和方法

（一）評分體系

1、出勤率: 20%

2、課堂參與: 加分

3、課堂實驗及作業(yè): 30%

4、期末課程設(shè)計: 50%

（二）考試內(nèi)容及要求

考試包含以下內(nèi)容:

1. HTML5移動WEB開發(fā)的基本語法知識及使用（核心能力1.1）；

2. 能夠選用合適的程序開發(fā)工具（核心能力2.2）；

3. 能夠根據(jù)實際問題，對開發(fā)環(huán)境進行環(huán)境的配置（核心能力2.2）；

4. 根據(jù)實際問題的需求，設(shè)計并完成綜合實驗（核心能力3.1）；

5. 能夠根據(jù)課程要求，通過文字、圖、表的形式撰寫實驗報告，并進行簡單的分析（核心能力4.1、6.2）；

6. 能夠按照綜合實驗要求，按時完成綜合實驗，并培養(yǎng)良好的職業(yè)習慣（核心能力7.1）。

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

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