《HTML5網(wǎng)頁前端設(shè)計(jì)》教學(xué)大綱

1、HTML5網(wǎng)頁前端設(shè)計(jì)（零基礎(chǔ)56課時(shí)版）本教學(xué)大綱適用于零基礎(chǔ)入門學(xué)習(xí)，適用于未曾學(xué)習(xí)過WEB前端設(shè)計(jì)的前置課程的班級(jí)?？梢灾苯邮褂帽窘滩耐瓿蒞eb網(wǎng)頁前端設(shè)計(jì)的基礎(chǔ)入門和后續(xù)HTML5技術(shù)的學(xué)習(xí)。本教材配合以HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)作為實(shí)驗(yàn)輔導(dǎo)教材。內(nèi)容章節(jié)學(xué)習(xí)目標(biāo)理論課時(shí)上機(jī)課時(shí)建議基礎(chǔ)知識(shí)篇（14章）第1章緒論HTML5入門介紹20第2章HTML5基礎(chǔ)HTML5嵬本結(jié)構(gòu)HTML5保留的常用標(biāo)簽HTML5新增的常用標(biāo)簽22上機(jī)實(shí)驗(yàn)：1 .開發(fā)第一個(gè)Web頁而2 .使用HTML5新增標(biāo)簽豐富頁面內(nèi)容第3章CSS基礎(chǔ)CSS樣式表CSS選擇器CSS常用樣式CSS定位42上機(jī)實(shí)驗(yàn)（任選其一）：

2、HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第1章：1 .導(dǎo)航欄菜單的設(shè)計(jì)與實(shí)現(xiàn)2 .商務(wù)風(fēng)格表格的設(shè)計(jì)與實(shí)現(xiàn)第4章JavaScript基礎(chǔ)JavaScript變量、衰本數(shù)據(jù)類型JavaScript對(duì)象類型JavaScript 運(yùn)算符JavaScript條件語句和循環(huán)語句JavaScript 函數(shù)JavaScript DOM 和 BOM62上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第2章：1 .電子時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)2 .電子日歷的設(shè)計(jì)與實(shí)現(xiàn)重點(diǎn)篇（5-10 章）第5章HTML5拖放API掌握HTML5元素拖放功能22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第3章：1 .仿回收站效果的設(shè)計(jì)與實(shí)現(xiàn)2

3、.圖片相框展示的設(shè)計(jì)與實(shí)現(xiàn)第6章HTML5表單APIHTML表單基礎(chǔ)HTML5表單新增輸入類型HTML5表單新增元素標(biāo)簽HTML5表單新增屬性42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第4章：1 .用戶注冊(cè)頁面的設(shè)計(jì)與實(shí)現(xiàn)2 .問卷調(diào)查頁面的設(shè)計(jì)與實(shí)現(xiàn)第7章HTML5畫布APIHTML5畫布創(chuàng)建繪制路徑、矩形、圖片和文本顏色和樣式設(shè)置保存與恢復(fù)技術(shù) 變形與剪裁42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第5章：1 .手繪時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)2 .拼圖游戲的設(shè)計(jì)與實(shí)現(xiàn)第8章HTML5媒體APIHTML5音頻的應(yīng)用HTML5視頻的應(yīng)用HTML5媒體API的其他通用功能42上機(jī)實(shí)驗(yàn)（任

4、選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第6章：1 .音樂播放器的設(shè)計(jì)與實(shí)現(xiàn)2 .在線教學(xué)視頻的設(shè)計(jì)與實(shí)現(xiàn)第9章HTML5地理定位API經(jīng)緯度坐標(biāo)HTML5獲取當(dāng)前定位HTML5實(shí)時(shí)更新定位22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第7章：1 .運(yùn)動(dòng)數(shù)據(jù)記錄的設(shè)計(jì)與實(shí)現(xiàn)2 .運(yùn)動(dòng)軌跡記錄的設(shè)計(jì)與實(shí)現(xiàn)第 10 章 HTML5 Web存儲(chǔ) APIlocalstorage 和 sessionStorage 存儲(chǔ) 存儲(chǔ)、讀取數(shù)據(jù)、數(shù)據(jù)遍歷 刪除指定數(shù)據(jù)、清空所有數(shù)據(jù)22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第8章：1 .網(wǎng)頁主題設(shè)置的設(shè)計(jì)與實(shí)現(xiàn)2 .網(wǎng)頁日志本的設(shè)計(jì)與實(shí)現(xiàn)提高篇（11

5、章）第11章CSS3技術(shù)CSS3邊框和背景效果CSS3文本和字體效果CSS3變形與動(dòng)畫效果CSS3多列42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第9章:1 .特殊字體效果的設(shè)計(jì)與實(shí)現(xiàn)2 .動(dòng)畫放大菜單的設(shè)計(jì)與實(shí)現(xiàn)總計(jì)3620HTML5網(wǎng)頁前端設(shè)計(jì)（零基礎(chǔ)64課時(shí)版）本教學(xué)大綱適用于零基礎(chǔ)入門學(xué)習(xí)，適用于未曾學(xué)習(xí)過WEB前端設(shè)計(jì)的前置課程的班級(jí)?？梢灾苯邮褂帽窘滩耐瓿蒞eb網(wǎng)頁前端設(shè)計(jì)的基礎(chǔ)入門和后續(xù)HTML5技術(shù)的學(xué)習(xí)。本教材配合以HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)作為實(shí)驗(yàn)輔導(dǎo)教材，內(nèi)容章節(jié)學(xué)習(xí)目標(biāo)理論課時(shí)上機(jī)課時(shí)建議基礎(chǔ)知識(shí)篇（1-4 章）第1章緒論HTML5入門介紹20第2章HTML5基

6、礎(chǔ)HTML5基本結(jié)構(gòu)HTML5保留的常用標(biāo)簽HTML5新增的常用標(biāo)簽22上機(jī)實(shí)驗(yàn)：3 .開發(fā)第一個(gè)Web頁而4 .使用HTML5新增標(biāo)簽豐富頁而內(nèi)容第3章CSS基礎(chǔ)CSS樣式表CSS選擇器CSS常用樣式CSS定位42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第1章：1 .導(dǎo)航欄菜單的設(shè)計(jì)與實(shí)現(xiàn)2 .商務(wù)風(fēng)格表格的設(shè)計(jì)與實(shí)現(xiàn)第4章JavaScript基礎(chǔ)JavaScript變量、基本數(shù)據(jù)類型JavaScript對(duì)象類型JavaScript 運(yùn)算符JavaScript條件語句和循環(huán)語句JavaScript 函數(shù)JavaScript DOM 和 BOM62上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前

7、端設(shè)計(jì)實(shí)戰(zhàn)第2章：1 .電子時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)2 .電子日歷的設(shè)計(jì)與實(shí)現(xiàn)重點(diǎn)篇（5-10 章）第5章HTML5拖放API掌握HTML5元素拖放功能22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第3章：1 .仿回收站效果的設(shè)計(jì)與實(shí)現(xiàn)2 .圖片相框展示的設(shè)計(jì)與實(shí)現(xiàn)第6章HTML5表單APIHTML表單基礎(chǔ)HTML5表單新增輸入類型HTML5表單新增元素標(biāo)簽HTML5表單新增屬性42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第4章：1 .用戶注冊(cè)頁面的設(shè)計(jì)與實(shí)現(xiàn)2 .問卷調(diào)查頁面的設(shè)計(jì)與實(shí)現(xiàn)第7章HTML5畫布APIHTML5畫布創(chuàng)建繪制路徑、矩形、圖片和文本顏色和樣式設(shè)置保存與恢復(fù)技術(shù)

8、變形與剪裁42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第5章：1 .手繪時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)2 .拼圖游戲的設(shè)計(jì)與實(shí)現(xiàn)第8章HTML5媒體APIHTML5音頻的應(yīng)用HTML5視頻的應(yīng)用HTML5媒體API的其他通用功能42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第6章：1 .音樂播放器的設(shè)計(jì)與實(shí)現(xiàn)2 .在線教學(xué)視頻的設(shè)計(jì)與實(shí)現(xiàn)第9章HTML5地理定位API經(jīng)緯度坐標(biāo)HTML5獲取當(dāng)前定位HTML5實(shí)時(shí)更新定位22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第7章：1 .運(yùn)動(dòng)數(shù)據(jù)記錄的設(shè)計(jì)與實(shí)現(xiàn)2 .運(yùn)動(dòng)軌跡記錄的設(shè)計(jì)與實(shí)現(xiàn)第 10 章 HTML5 Web存儲(chǔ) APIlocals

9、torage 和 sessionStorage 存儲(chǔ) 存儲(chǔ)、讀取數(shù)據(jù)、數(shù)據(jù)遍歷 刪除指定數(shù)據(jù)、清空所有數(shù)據(jù)22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第8章：1 .網(wǎng)頁主題設(shè)置的設(shè)計(jì)與實(shí)現(xiàn)2 .網(wǎng)頁日志本的設(shè)計(jì)與實(shí)現(xiàn)提高篇（11 章）第11章CSS3技術(shù)CSS3邊框和背景效果CSS3文本和字體效果CSS3變形與動(dòng)畫效果CSS3多列42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第9章：1 .特殊字體效果的設(shè)計(jì)與實(shí)現(xiàn)2 .動(dòng)畫放大菜單的設(shè)計(jì)與實(shí)現(xiàn)綜合篇綜合應(yīng)用設(shè)計(jì)實(shí)例通過對(duì)完整項(xiàng)目實(shí)例的解析與實(shí)現(xiàn)， 提高開發(fā)者項(xiàng)目分析能力以及強(qiáng)化 對(duì)于 HTML5、CSS3 與 JavaScript

10、 的綜 合應(yīng)用能力44上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第10章：1 .貪吃蛇游戲的設(shè)計(jì)與實(shí)現(xiàn)2 . Web網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)總計(jì)4024HTML5網(wǎng)頁前端設(shè)計(jì)（有Web基礎(chǔ)56課時(shí)版）本教學(xué)大綱適用于學(xué)習(xí)過WEB前端設(shè)計(jì)的前置課程的班級(jí)（包括HTML、CSS和JavaScript技術(shù)）?？梢允褂帽窘滩耐瓿珊罄m(xù)HTML5和CSS3技術(shù)的學(xué)習(xí)。本教材配合以HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)作為實(shí)驗(yàn)輔導(dǎo)教材。內(nèi)容章節(jié)學(xué)習(xí)目標(biāo)理論課時(shí)上機(jī)課時(shí)建議基礎(chǔ)知識(shí)篇（1-4 章）第1章緒論HTML5入門介紹20第2章HTML5基礎(chǔ)HTML5顯本結(jié)構(gòu)HTML5保留的常用標(biāo)簽HTML5新增的常用標(biāo)簽22上機(jī)實(shí)

11、驗(yàn)：5 .開發(fā)第一個(gè)Web頁而6 .使用HTML5新增標(biāo)簽豐富頁面內(nèi)容第3章CSS基礎(chǔ)（根據(jù)前置課程內(nèi)容選講）CSS樣式表CSS選擇器CSS常用樣式CSS定位22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第1章：1 .導(dǎo)航欄菜單的設(shè)計(jì)與實(shí)現(xiàn)2 .商務(wù)風(fēng)格表格的設(shè)計(jì)與實(shí)現(xiàn)重點(diǎn)篇（5-10 章）第4章JavaScript基礎(chǔ)（根據(jù)前置課程內(nèi)容選講）JavaScript變量、基本數(shù)據(jù)類型JavaScript對(duì)象類型JavaScript 運(yùn)算符JavaScript條件語句和循環(huán)語句JavaScript 函數(shù)JavaScript DOM 和 BOM22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)

12、戰(zhàn)第2章：1 .電子時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)2 .電子日歷的設(shè)計(jì)與實(shí)現(xiàn)第5章HTML5拖放API掌握HTML5元素施放功能42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第3章：1 .仿回收站效果的設(shè)計(jì)與實(shí)現(xiàn)2 .圖片相框展示的設(shè)計(jì)與實(shí)現(xiàn)第6章HTML5表單APIHTML表單基礎(chǔ)HTML5表單新增輸入類型HTML5表單新增元素標(biāo)簽HTML5表單新增屬性42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第4章：1 .用戶注冊(cè)頁面的設(shè)計(jì)與實(shí)現(xiàn)2 .問卷調(diào)查頁面的設(shè)計(jì)與實(shí)現(xiàn)第7章HTML5畫布APIHTML5畫布創(chuàng)建繪制路徑、矩形、圖片和文本顏色和樣式設(shè)置保存與恢復(fù)技術(shù) 變形與剪裁42上機(jī)實(shí)驗(yàn)（任選其

13、一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第5章：1 .手繪時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)2 .拼圖游戲的設(shè)計(jì)與實(shí)現(xiàn)第8章HTML5媒體APIHTML5音頻的應(yīng)用HTML5視頻的應(yīng)用HTML5媒體API的其他通用功能42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第6章：1 .音樂播放器的設(shè)計(jì)與實(shí)現(xiàn)2 .在線教學(xué)視頻的設(shè)計(jì)與實(shí)現(xiàn)提高篇 （11 章）第9章HTML5地理定位API經(jīng)緯度坐標(biāo)HTML5獲取當(dāng)前定位HTML5實(shí)時(shí)更新定位22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第7章：1 .運(yùn)動(dòng)數(shù)據(jù)記錄的設(shè)計(jì)與實(shí)現(xiàn)2 .運(yùn)動(dòng)軌跡記錄的設(shè)計(jì)與實(shí)現(xiàn)第 10 章 HTML5 Web 存儲(chǔ) APIlocalstora

14、ge 和 sessionStorage 存儲(chǔ) 存儲(chǔ)、讀取數(shù)據(jù)、數(shù)據(jù)遍歷 刪除指定數(shù)據(jù)、清空所有數(shù)據(jù)42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第8章：1 .網(wǎng)頁主題設(shè)置的設(shè)計(jì)與實(shí)現(xiàn)2 .網(wǎng)頁日志本的設(shè)計(jì)與實(shí)現(xiàn)第11章CSS3技術(shù)CSS3邊框和背景效果CSS3文本和字體效果CSS3變形與動(dòng)畫效果CSS3多列62上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第9章：1 .特殊字體效果的設(shè)計(jì)與實(shí)現(xiàn)2 .動(dòng)畫放大菜單的設(shè)計(jì)與實(shí)現(xiàn)總計(jì)3620HTML5網(wǎng)頁前端設(shè)計(jì)（有Web基礎(chǔ)64課時(shí)版）本教學(xué)大綱適用于學(xué)習(xí)過WEB前端設(shè)計(jì)的前置課程的班級(jí)（包括HTML、CSS和JavaScript技術(shù)）?？?/p>

15、以使用本教材完成后續(xù)HTML5和CSS3技術(shù)的學(xué)習(xí)。本教材配合以HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)作為實(shí)驗(yàn)輔導(dǎo)教材。內(nèi)容章節(jié)學(xué)習(xí)目標(biāo)理論課時(shí)上機(jī)課時(shí)建議基礎(chǔ)知識(shí)篇第1章緒論HTML5入門介紹20（14章）第2章HTML5基礎(chǔ)HTML5基本結(jié)構(gòu)HTML5保留的常用標(biāo)簽HTML5新增的常用標(biāo)簽22上機(jī)實(shí)驗(yàn)：7 .開發(fā)第一個(gè)Web頁而8 .使用HTML5新增標(biāo)簽豐富頁而內(nèi)容重點(diǎn)篇（510章）第3章CSS基礎(chǔ)（根據(jù)前置課程內(nèi)容選講）CSS樣式表 css選擇器 css常用樣式 CSS定位22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第1章：1 .導(dǎo)航欄菜單的設(shè)計(jì)與實(shí)現(xiàn)2 .商務(wù)風(fēng)格表格的設(shè)計(jì)與實(shí)現(xiàn)第4章J

16、avaScript基礎(chǔ)（根據(jù)前置課程內(nèi)容選講）JavaScript變量、基本數(shù)據(jù)類型JavaScript對(duì)象類型JavaScript 運(yùn)算符JavaScript條件語句和循環(huán)語句JavaScript 函數(shù)JavaScript DOM 和 BOM22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第2章：1 .電子時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)2 .電子日歷的設(shè)計(jì)與實(shí)現(xiàn)第5章HTML5拖放API掌握HTML5元素施放功能42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第3章：1 .仿回收站效果的設(shè)計(jì)與實(shí)現(xiàn)2 .圖片相框展示的設(shè)計(jì)與實(shí)現(xiàn)第6章HTML5表單APIHTML表單嶷礎(chǔ)HTML5表單新增輸入類型HT

17、ML5表單新增元素標(biāo)簽HTML5表單新增屬性42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第4章：1 .用戶注冊(cè)頁面的設(shè)計(jì)與實(shí)現(xiàn)2 .問卷調(diào)查頁面的設(shè)計(jì)與實(shí)現(xiàn)第7章HTML5畫布APIHTML5畫布創(chuàng)建繪制路徑、矩形、圖片和文本顏色和樣式設(shè)置保存與恢復(fù)技術(shù)變形與剪裁42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第5章：1 .手繪時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)2 .拼圖游戲的設(shè)計(jì)與實(shí)現(xiàn)提高篇（11 章）第8章HTML5媒體APIHTML5音頻的應(yīng)用HTML5視頻的應(yīng)用HTML5媒體API的其他通用功能42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第6章：1 .音樂播放器的設(shè)計(jì)與實(shí)現(xiàn)2 .在線教學(xué)視頻的設(shè)計(jì)與實(shí)現(xiàn)第9章HTML5地理定位API經(jīng)緯度坐標(biāo)HTML5獲取當(dāng)前定位HTML5實(shí)時(shí)更新定位22上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第7章：1 .運(yùn)動(dòng)數(shù)據(jù)記錄的設(shè)計(jì)與實(shí)現(xiàn)2 .運(yùn)動(dòng)軌跡記錄的設(shè)計(jì)與實(shí)現(xiàn)第 10 章 HTML5 Web 存儲(chǔ) APIlocalstorage 和 sessionStorage 存儲(chǔ) 存儲(chǔ)、讀取數(shù)據(jù)、數(shù)據(jù)遍歷 刪除指定數(shù)據(jù)、清空所有數(shù)據(jù)42上機(jī)實(shí)驗(yàn)（任選其一）：HTML5網(wǎng)頁前端設(shè)計(jì)實(shí)戰(zhàn)第8章：1 .