?一、課程描述及課程目標(biāo)

（一）課程描述

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

（二）課程目標(biāo)

本課程為計(jì)算機(jī)類專業(yè)的專業(yè)基礎(chǔ)課程,，要求學(xué)生能夠應(yīng)用網(wǎng)站設(shè)計(jì)的基本知識(shí)及技能解決實(shí)際問(wèn)題,，通過(guò)本課程的學(xué)習(xí)，學(xué)生應(yīng)達(dá)到下列學(xué)習(xí)目標(biāo):

1.掌握HTML5移動(dòng)WEB開(kāi)發(fā)基本知識(shí)及技能,，核心能力1.1,。

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

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

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

5.能夠?qū)?shí)驗(yàn)結(jié)果,，通過(guò)文字、圖,、表的形式撰寫(xiě)實(shí)驗(yàn)報(bào)告,，從而能夠完整表達(dá)對(duì)實(shí)驗(yàn)原理及實(shí)驗(yàn)內(nèi)容的理解，核心能力4.1,。

6.了解移動(dòng)WEB開(kāi)發(fā)所涉及到的新技術(shù)和方法及在實(shí)際項(xiàng)目中的應(yīng)用,，核心能力6.1。

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

8.在教師的指導(dǎo)下,，通過(guò)綜合實(shí)驗(yàn)訓(xùn)練遵守職業(yè)規(guī)范和道德,，訓(xùn)練嚴(yán)謹(jǐn)?shù)膶I(yè)學(xué)習(xí)及工作習(xí)慣，核心能力7.1,。

二,、課程內(nèi)容

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

主要知識(shí)點(diǎn):

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

1.2 移動(dòng)WEB開(kāi)發(fā)概述

1.2.1 移動(dòng)開(kāi)發(fā)的幾種方式

1.2.2 移動(dòng)WEB開(kāi)發(fā)與PC端WEB開(kāi)發(fā)的區(qū)別

1.3 移動(dòng)端的WEB瀏覽器

1.4 基于HTML5的移動(dòng)WEB開(kāi)發(fā)

教學(xué)要求:通過(guò)本章的學(xué)習(xí)，使學(xué)生了解什么是移動(dòng)WEB開(kāi)發(fā),，了解移動(dòng)端的WEB瀏覽器和HTML5為移動(dòng)WEB開(kāi)發(fā)提供的技術(shù),。

重點(diǎn):移動(dòng)端的WEB瀏覽器和HTML5為移動(dòng)WEB開(kāi)發(fā)提供的技術(shù)

采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)

講授學(xué)時(shí):1學(xué)時(shí)

實(shí)踐學(xué)時(shí):0學(xué)時(shí)

（二）第2章 基于HTML5的移動(dòng)WEB應(yīng)用（上）

主要知識(shí)點(diǎn):

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

2.1.1　Web Storage簡(jiǎn)介

2.1.2　localStorage

2.1.3　sessionStorage

2.1.4　Storage 事件監(jiān)聽(tīng)

2.2 移動(dòng)Web離線應(yīng)用

2.2.1　離線應(yīng)用簡(jiǎn)介

2.2.2　 Application Cache的基本應(yīng)用

2.2.3　 application Cache 對(duì)象

2.2.4　離線緩存更新

2.3 HTML5畫(huà)布

2.3.1　初識(shí)canvas

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

2.3.3　 利用canvas 繪制圓形

2.3.4　 利用canvas 繪制圖片

2.3.5　 利用canvas 其他方法

教學(xué)要求:通過(guò)本章的學(xué)習(xí)，使學(xué)生了解什么是 HTML5 網(wǎng)絡(luò)存儲(chǔ),，了解什么是移動(dòng) Web 離線應(yīng)用,，熟悉 localStorage 和 sessionStorage 的區(qū)別，掌握 localStorage 和 sessionStorage 的使用方法,，掌握 Application Cache 的使用方法,。

重點(diǎn):掌握 localStorage 和 sessionStorage 的使用方法、掌握 Application Cache 的使用方法

采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)

講授學(xué)時(shí):3學(xué)時(shí)

實(shí)踐學(xué)時(shí):2學(xué)時(shí)

（三）第3章 基于HTML5的移動(dòng)Web應(yīng)用（下）

主要知識(shí)點(diǎn):

3.1 視頻與音頻

3.1.1　 標(biāo)簽的使用

3.1.2　 HTML DOM Video 對(duì)象

3.1.3　 標(biāo)簽的使用

3.1.4　 HTML DOM Audio 對(duì)象

3.2 Geolocation地理定位

3.2.1　Geolocation簡(jiǎn)介

3.2.2　獲取當(dāng)前位置

3.2.3　調(diào)用百度地圖

3.3 拖曳

3.4 文件操作

3.4.1　選擇文件

3.4.2　操作文件

教學(xué)要求:通過(guò)本章的學(xué)習(xí),，使學(xué)生掌握標(biāo)簽和標(biāo)簽的使用,、掌握 Geolocation API 的使用、掌握 HTML5 的拖曳操作,、掌握文件操作,。

重點(diǎn):標(biāo)簽和標(biāo)簽、Geolocation API 的使用,、HTML5 的拖曳操作,、文件操作。

難點(diǎn):Geolocation API 的使用,、HTML5 的拖曳操作

采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)

講授學(xué)時(shí):2學(xué)時(shí)

實(shí)踐學(xué)時(shí):1學(xué)時(shí)

（四）第 4 章 移動(dòng)端頁(yè)面布局和常用事件

主要知識(shí)點(diǎn):

4.1 流式布局

4.2 視口

4.2.1　理解視口

4.2.2　移動(dòng)端的3種視口

4.3 移動(dòng)端常用事件

4.3.1　Touch事件簡(jiǎn)介

4.3.2　Touch事件的應(yīng)用

4.3.3　 過(guò)渡和動(dòng)畫(huà)結(jié)束 事件

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

重點(diǎn):掌握使用標(biāo)簽設(shè)置布局視口的方法,、 掌握 Touch 事件的使用方法,、掌握過(guò)渡和動(dòng)畫(huà)結(jié)束事件的使用方法。

難點(diǎn):視口布局的方法,、touch事件的使用方法

采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)

講授學(xué)時(shí):2學(xué)時(shí)

實(shí)踐學(xué)時(shí):1學(xué)時(shí)

（五）第 5 章 綜合項(xiàng)目-黑馬掌上商城

主要知識(shí)點(diǎn):

5.1 項(xiàng)目簡(jiǎn)介

5.1.1　項(xiàng)目功能展示

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

5.1.3　項(xiàng)目開(kāi)發(fā)流程

5.2 商城首頁(yè)

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

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

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

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

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

5.3 商品分類頁(yè)

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

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

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

5.4 購(gòu)物車頁(yè)面

5.4.1　 【任務(wù)9】 購(gòu)物 車頁(yè)面

5.4.2　 【任務(wù)10】 彈出 框動(dòng)畫(huà)

5.5 Zepto.js

5.5.1　Zepto 模塊

5.5.2　Zepto的使用

教學(xué)要求:通過(guò)本章的學(xué)習(xí),，使學(xué)生了解項(xiàng)目的整體結(jié)構(gòu)，能夠參考教材完成項(xiàng)目代碼,，掌握項(xiàng)目中使用的重點(diǎn)知識(shí),。

重點(diǎn):視口和流式布局、移動(dòng)端事件,、過(guò)渡和動(dòng)畫(huà)結(jié)束事件,、 Gesture 事件、全屏單頁(yè)面布局,、Zepto.js 的使用,。

難點(diǎn):移動(dòng)端事件、Gesture 事件,、全屏單頁(yè)面布局,、Zepto.js 的使用

采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)

講授學(xué)時(shí):4學(xué)時(shí)

實(shí)踐學(xué)時(shí):2學(xué)時(shí)

（六）第 6 章 跨平臺(tái)移動(dòng) Web 技術(shù)

主要知識(shí)點(diǎn):

6.1 響應(yīng)式Web設(shè)計(jì)

6.1.1　 響應(yīng)式Web設(shè)計(jì) 簡(jiǎn)介

6.1.2　 響應(yīng)式Web設(shè)計(jì) 相關(guān)技術(shù)

6.2 媒體查詢

6.3 柵格系統(tǒng)

6.4 彈性盒布局

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

重點(diǎn):掌握 CSS3 媒體查詢的使用,、掌握彈性盒布局。

難點(diǎn): 彈性盒布局

采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)

講授學(xué)時(shí):2學(xué)時(shí)

實(shí)踐學(xué)時(shí):1學(xué)時(shí)

（七）第 7 章 使用 Bootstrap 進(jìn)行移動(dòng) Web 開(kāi)發(fā)

主要知識(shí)點(diǎn):

7.1 初識(shí)Bootstrap

7.1.1　Bootstrap簡(jiǎn)介

7.1.2　Bootstrap下載

7.1.3　 Bootstrap基本 模板

7.2 Bootstrap常用布局

7.2.1　布局容器

7.2.2　柵格系統(tǒng)

7.2.3　響應(yīng)式工具

7.3 Bootstrap常用樣式

7.3.1　導(dǎo)航欄

7.3.2　表單

7.3.3　按鈕

7.3.4　標(biāo)簽頁(yè)

7.3.5　輪播插件

教學(xué)要求:通過(guò)本章的學(xué)習(xí),，使學(xué)生掌握 Bootstrap 的安裝和配置,、掌握 Bootstrap 的布局工具、掌握 Bootstrap 的樣式工具

重點(diǎn): Bootstrap 的安裝和配置,、Bootstrap 的使用

采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)

講授學(xué)時(shí):4學(xué)時(shí)

實(shí)踐學(xué)時(shí):2學(xué)時(shí)

（八）第 8 章 綜合項(xiàng)目-黑馬財(cái)富

主要知識(shí)點(diǎn):

8.1 項(xiàng)目簡(jiǎn)介

8.1.1　項(xiàng)目功能展示

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

8.1.3　項(xiàng)目開(kāi)發(fā)流程

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

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

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

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

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

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

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

教學(xué)要求:通過(guò)本章的學(xué)習(xí),，使學(xué)生了解項(xiàng)目的整體結(jié)構(gòu)，能夠參考教材完成項(xiàng)目代碼,，掌握項(xiàng)目中使用的重點(diǎn)知識(shí)

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

難點(diǎn):Bootstrap 響應(yīng)式工具、Bootstrap 柵格系統(tǒng)

采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)

講授學(xué)時(shí):4學(xué)時(shí)

實(shí)踐學(xué)時(shí):2學(xué)時(shí)

（九）課程設(shè)計(jì)

主要知識(shí)點(diǎn):教材的所有知識(shí)點(diǎn)

教學(xué)要求:通過(guò)本次課程設(shè)計(jì),，使學(xué)生綜合運(yùn)用HTML5移動(dòng)WEB開(kāi)發(fā)的相關(guān)技術(shù),，開(kāi)發(fā)一個(gè)基于HTML5的WEB移動(dòng)應(yīng)用。

采用的教學(xué)方法:任務(wù)驅(qū)動(dòng)式教學(xué)

實(shí)踐學(xué)時(shí):3學(xué)時(shí)

三,、課程的預(yù)期學(xué)習(xí)成果

在本門(mén)課程結(jié)束時(shí),，學(xué)生應(yīng)該能夠:

1、熟悉HTML5移動(dòng)WEB開(kāi)發(fā)的開(kāi)發(fā)流程

2,、掌握常用的HTML5移動(dòng)WEB開(kāi)發(fā)技術(shù),。

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

四,、課程要求

（一）出勤

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

（二）閱讀資料

學(xué)生應(yīng)認(rèn)真進(jìn)行課前預(yù)習(xí),，閱讀教材和指定參考書(shū)及重要的參考文獻(xiàn)。

（三）課堂展示

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

（四）課外實(shí)踐

本課程是實(shí)踐類課程，不單獨(dú)安排課外實(shí)踐,。

（五）小考與期末考

無(wú)小考,，期末以課程設(shè)計(jì)的方式進(jìn)行考核。

（六）課程論文

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

（七）學(xué)術(shù)誠(chéng)信

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

（八）剽竊的定義以及相應(yīng)的懲罰

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

五,、課程資料

（一）教科書(shū)-必讀

黑馬程序員. HTML5 移動(dòng)Web開(kāi)發(fā)[M].中國(guó)鐵道出版社.2017

（二）教科書(shū)-強(qiáng)烈推薦

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

[2] 鄭婭峰、張永強(qiáng). 鄭婭峰,、張永強(qiáng).清華大學(xué)出版社.2016.01

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

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

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

（三）文章-必讀

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

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

（四）文章-強(qiáng)烈推薦

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

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

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

（五）其他參考資料

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

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

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

六,、教學(xué)活動(dòng)以及對(duì)于預(yù)期學(xué)習(xí)成果的評(píng)估

（一）教學(xué)活動(dòng)

1、個(gè)人預(yù)習(xí)

2,、課堂講授

3,、課堂問(wèn)答

4,、實(shí)驗(yàn)講解

5、案例討論

6,、課后實(shí)驗(yàn)

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

（二）對(duì)預(yù)期學(xué)習(xí)成果的考察

七、評(píng)估的程序和方法

（一）評(píng)分體系

1,、出勤率: 20%

2,、課堂參與: 加分

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

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

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

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

1. HTML5移動(dòng)WEB開(kāi)發(fā)的基本語(yǔ)法知識(shí)及使用（核心能力1.1）,；

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

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

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

5. 能夠根據(jù)課程要求,，通過(guò)文字、圖,、表的形式撰寫(xiě)實(shí)驗(yàn)報(bào)告,，并進(jìn)行簡(jiǎn)單的分析（核心能力4.1、6.2）,；

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

八,、教學(xué)進(jìn)度與學(xué)時(shí)分配表

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