Web前端開發(fā)實訓(xùn)案例教程（初級）

第1章 概述 （1）
1．1 實踐目標 （1）
1．2 技術(shù)專題設(shè)計 （1）
1．3 案例設(shè)計 （4）
第2章 開發(fā)環(huán)境：第一個HTML5程序 （10）
2．1 技能和知識點 （10）
2．2 需求簡介 （10）
2．3 設(shè)計思路 （10）
2．4 實現(xiàn) （11）
2．4．1 下載安裝Chrome （11）
2．4．2 下載安裝HBuilder （13）
2．4．3 創(chuàng)建Web項目并運行 （15）
第3章 HTML5表單―注冊頁面 （19）
3．1 技能和知識點 （19）
3．2 需求簡介 （20）
3．3 設(shè)計思路 （20）
3．4 實現(xiàn) （21）
3．4．1 創(chuàng)建注冊頁面 （21）
3．4．2 搭建頭部和正文結(jié)構(gòu) （22）
3．4．3 編寫頭部 （22）
3．4．4 編寫正文 （23）
第4章 HTML5頁面增強：資訊網(wǎng)站 （25）
4．1 技能和知識點 （25）
4．2 需求簡介 （25）
4．3 設(shè)計思路 （26）
4．4 實現(xiàn) （27）
4．4．1 創(chuàng)建資訊詳情頁面 （27）
4．4．2 搭建頭部和正文結(jié)構(gòu) （27）
4．4．3 編寫頭部 （28）
4．4．4 編寫正文 （28）
第5章 HTML5全局屬性：通信錄 （30）
5．1 技能和知識點 （30）
5．2 需求簡介 （30）
5．3 設(shè)計思路 （31）
5．4 實現(xiàn) （32）
5．4．1 創(chuàng)建通信錄頁面 （32）
5．4．2 搭建頭部和正文結(jié)構(gòu) （32）
5．4．3 編寫頭部 （33）
5．4．4 編寫正文 （33）
第6章 HTML5多媒體：HTML5播放音頻 （37）
6．1 技能和知識點 （37）
6．2 需求簡介 （37）
6．3 設(shè)計思路 （38）
6．4 實現(xiàn) （38）
6．4．1 搭建頁面結(jié)構(gòu) （38）
6．4．2 設(shè)置標題 （39）
6．4．3 創(chuàng)建音樂列表 （39）
第7章 HTML5多媒體：HTML5播放視頻 （41）
7．1 技能和知識點 （41）
7．2 需求簡介 （41）
7．3 設(shè)計思路 （42）
7．4 實現(xiàn) （42）
7．4．1 搭建頁面結(jié)構(gòu) （42）
7．4．2 設(shè)置標題 （43）
7．4．3 創(chuàng)建視頻列表 （43）
第8章 HTML5語義化元素：音樂內(nèi)容頁 （45）
8．1 技能和知識點 （45）
8．2 需求簡介 （45）
8．3 設(shè)計思路 （46）
8．4 實現(xiàn) （47）
8．4．1 搭建頁面結(jié)構(gòu) （47）
8．4．2 制作頁頭 （47）
8．4．3 創(chuàng)建正文結(jié)構(gòu) （48）
8．4．4 創(chuàng)建音樂內(nèi)容 （48）
8．4．5 操作按鈕 （49）
8．4．6 制作頁腳 （49）
第9章 CSS+CSS3：微博網(wǎng)站首頁 （50）
9．1 技能和知識點 （50）
9．2 需求簡介 （50）
9．3 設(shè)計思路 （51）
9．4 實現(xiàn) （52）
9．4．1 搭建頁面結(jié)構(gòu) （52）
9．4．2 制作頁頭 （53）
9．4．3 制作正文導(dǎo)航欄 （56）
9．4．4 制作正文微博列表 （58）
第10章 CSS+CSS3：技術(shù)論壇系統(tǒng)首頁 （61）
10．1 技能和知識點 （61）
10．2 需求簡介 （61）
10．3 設(shè)計思路 （62）
10．4 實現(xiàn) （63）
10．4．1 搭建頁面結(jié)構(gòu) （63）
10．4．2 制作頁頭 （64）
10．4．3 添加標題動畫 （65）
10．4．4 制作正文分類列表 （66）
10．4．5 制作正文帖子列表 （67）
第11章 移動端：電商列表頁 （70）
11．1 技能和知識點 （70）
11．2 需求簡介 （70）
11．3 設(shè)計思路 （71）
11．4 實現(xiàn) （72）
11．4．1 搭建頁面結(jié)構(gòu) （72）
11．4．2 設(shè)置視口 （72）
11．4．3 制作頁頭 （73）
11．4．4 創(chuàng)建商品列表 （74）
第12章 移動端：視頻網(wǎng)站 （77）
12．1 技能和知識點 （77）
12．2 需求簡介 （77）
12．3 設(shè)計思路 （78）
12．4 實現(xiàn) （79）
12．4．1 搭建頁面結(jié)構(gòu) （79）
12．4．2 設(shè)置視口 （79）
12．4．3 創(chuàng)建視頻播放控件 （79）
12．4．4 創(chuàng)建評論列表 （80）
12．4．5 創(chuàng)建發(fā)布評論表單 （81）
12．4．6 頁面優(yōu)化 （83）
第13章 JavaScript基礎(chǔ)語法：日期計算器 （85）
13．1 技能和知識點 （85）
13．2 需求簡介 （85）
13．3 設(shè)計思路 （86）
13．4 實現(xiàn) （86）
13．4．1 編寫頁面 （86）
13．4．2 獲取日期值 （87）
13．4．3 創(chuàng)建日期對象 （88）
13．4．4 計算并顯示結(jié)果 （88）
第14章 面向?qū)ο螅簩W生信息管理 （90）
14．1 技能和知識點 （90）
14．2 需求簡介 （90）
14．3 設(shè)計思路 （91）
14．4 實現(xiàn) （91）
14．4．1 創(chuàng)建文件 （91）
14．4．2 創(chuàng)建構(gòu)造函數(shù) （92）
14．4．3 添加原型方法 （92）
14．4．4 實例化對象 （92）
第15章 DOM操作：學生信息列表 （94）
15．1 技能和知識點 （94）
15．2 需求簡介 （94）
15．3 設(shè)計思路 （95）
15．4 實現(xiàn) （96）
15．4．1 編寫頁面 （96）
15．4．2 生成學生信息表格 （97）
15．4．3 新增學生信息 （98）
15．4．4 刪除學生信息 （100）
第16章 jQuery：目錄頁面生成 （101）
16．1 技能和知識點 （101）
16．2 需求簡介 （101）
16．3 設(shè)計思路 （102）
16．4 實現(xiàn) （102）
16．4．1 引入jQeury （102）
16．4．2 搭建頁面 （103）
16．4．3 定義數(shù)組 （104）
16．4．4 顯示目錄內(nèi)容 （104）
16．4．5 單擊目錄顯示內(nèi)容 （105）
第17章 案例：在線視頻課程網(wǎng)站 （107）
17．1 需求和設(shè)計 （107）
17．1．1 項目背景 （107）
17．1．2 項目目標 （107）
17．1．3 項目功能 （108）
17．1．4 開發(fā)環(huán)境 （109）
17．1．5 程序結(jié)構(gòu)設(shè)計 （109）
17．2 界面設(shè)計 （111）
17．2．1 頁面類型 （111）
17．2．2 頁面整體布局 （112）
17．2．3 用戶登錄頁面設(shè)計 （112）
17．2．4 首頁設(shè)計 （112）
17．2．5 課程列表頁面設(shè)計 （113）
17．2．6 移動端首頁設(shè)計 （113）
17．3 第一階段HTML5：首頁 （114）
17．3．1 功能簡介 （114）
17．3．2 設(shè)計思路 （114）
17．3．3 實現(xiàn) （115）
17．4 第一階段HTML5：用戶注冊 （118）
17．4．1 功能簡介 （118）
17．4．2 設(shè)計思路 （119）
17．4．3 實現(xiàn) （119）
17．5 第一階段HTML5：用戶登錄 （122）
17．5．1 功能簡介 （122）
17．5．2 設(shè)計思路 （123）
17．5．3 實現(xiàn) （124）
17．6 第一階段HTML5：課程詳情 （127）
17．6．1 功能簡介 （127）
17．6．2 設(shè)計思路 （127）
17．6．3 實現(xiàn) （128）
17．7 第一階段HTML5：視頻播放 （135）
17．7．1 功能簡介 （135）
17．7．2 設(shè)計思路 （135）
17．7．3 實現(xiàn) （136）
17．8 第一階段HTML5：后臺課程管理 （141）
17．8．1 功能簡介 （141）
17．8．2 設(shè)計思路 （141）
17．8．3 實現(xiàn) （142）
17．9 第二階段CSS3：首頁 （146）
17．9．1 功能簡介 （146）
17．9．2 設(shè)計思路 （147）
17．9．3 實現(xiàn) （148）
17．10 第二階段CSS3：用戶注冊 （162）
17．10．1 功能簡介 （162）
17．10．2 設(shè)計思路 （163）
17．10．3 實現(xiàn) （163）
17．11 第二階段CSS3：用戶登錄 （168）
17．11．1 功能簡介 （168）
17．11．2 設(shè)計思路 （168）
17．11．3 實現(xiàn) （169）
17．12 第二階段CSS3：課程詳情 （171）
17．12．1 功能簡介 （171）
17．12．2 設(shè)計思路 （172）
17．12．3 實現(xiàn) （173）
17．13 第二階段CSS3：章節(jié)目錄 （178）
17．13．1 功能簡介 （178）
17．13．2 設(shè)計思路 （179）
17．13．3 實現(xiàn) （180）
17．14 第二階段CSS3：視頻播放 （191）
17．14．1 功能簡介 （191）
17．14．2 設(shè)計思路 （191）
17．14．3 實現(xiàn) （192）
17．15 第二階段CSS3：后臺課程管理首頁 （200）
17．15．1 功能簡介 （200）
17．15．2 設(shè)計思路 （201）
17．15．3 實現(xiàn) （202）
17．16 第三階段JavaScript+jQuery：章節(jié)目錄頁面交互效果 （213）
17．16．1 功能簡介 （213）
17．16．2 設(shè)計思路 （214）
17．16．3 實現(xiàn) （214）
17．17 第三階段JavaScript+jQuery：視頻播放頁面交互效果 （215）
17．17．1 功能簡介 （215）
17．17．2 設(shè)計思路 （216）
17．17．3 實現(xiàn) （216）
17．18 第三階段JavaScript+jQuery：后臺課程管理首頁交互效果 （218）
17．18．1 功能簡介 （218）
17．18．2 設(shè)計思路 （219）
17．18．3 實現(xiàn) （219）
17．19 第四階段移動端：首頁 （222）
17．19．1 功能簡介 （222）
17．19．2 設(shè)計思路 （223）
17．19．3 實現(xiàn) （224）
17．20 第四階段移動端：用戶登錄 （233）
17．20．1 功能簡介 （233）
17．20．2 設(shè)計思路 （233）
17．20．3 實現(xiàn) （234）