第1章 Web網(wǎng)站初體驗 1
1．1　揭秘Web前端　2
1．1．1　Web是什么　2
1．1．2　網(wǎng)頁核心技術　3
1．2　走進HTML5　6
1．2．1　標簽、元素、文件結構概述　6
1．2．2　HTML5的基本標簽　7
1．3　使用WebStorm編寫HTML5代碼　9
1．3．1　下載和安裝　9
1．3．2　創(chuàng)建HTML5工程和文件，
運行HTML5程序　11
小結　12
習題　13
第2章　搭建網(wǎng)站雛形　14
2．1　【案例1】制作第一個H5案例　15
2．1．1　案例描述　15
2．1．2　技術準備　15
2．1．3　案例實現(xiàn)　17
2．1．4　動手試一試　19
2．2　【案例2】多圖展示合作伙伴　19
2．2．1　案例描述　19
2．2．2　技術準備　20
2．2．3　案例實現(xiàn)　22
2．2．4　動手試一試　23
2．3　【案例3】通過外鏈實現(xiàn)友情鏈接　23
2．3．1　案例描述　23
2．3．2　技術準備　23
2．3．3　案例實現(xiàn)　24
2．3．4　動手試一試　26
2．4　【案例4】分組標簽制作聯(lián)系方式　26
2．4．1　案例描述　26
2．4．2　技術準備　27
2．4．3　案例實現(xiàn)　28
2．4．4　動手試一試　29
小結　29
習題　29
第3章　用CSS3裝飾網(wǎng)站　30
3．1　【案例1】圖文混排展示新書速遞　31
3．1．1　案例描述　31
3．1．2　技術準備　31
3．1．3　案例實現(xiàn)　32
3．1．4　動手試一試　34
3．2　【案例2】時間軸方式的直播預告　35
3．2．1　案例描述　35
3．2．2　技術準備　35
3．2．3　案例實現(xiàn)　39
3．2．4　動手試一試　41
3．3　【案例3】美化學習興趣分類頁面　41
3．3．1　案例描述　41
3．3．2　技術準備　42
3．3．3　案例實現(xiàn)　44
3．3．4　動手試一試　47
3．4　【案例4】打造多彩網(wǎng)站主題背景　47
3．4．1　案例描述　47
3．4．2　技術準備　48
3．4．3　案例實現(xiàn)　49
3．4．4　動手試一試　50
小結　51
習題　51
第4章　HTML5多媒體實現(xiàn)
網(wǎng)站“家庭影院”　52
4．1　【案例1】網(wǎng)頁中的H5視頻播放器　53
4．1．1　案例描述　53
4．1．2　技術準備　53
4．1．3　案例實現(xiàn)　54
4．1．4　動手試一試　55
4．2　【案例2】動態(tài)文字彈幕　56
4．2．1　案例描述　56
4．2．2　技術準備　56
4．2．3　案例實現(xiàn)　57
4．2．4　動手試一試　58
4．3　【案例3】神奇的在線聽書功能　59
4．3．1　案例描述　59
4．3．2　技術準備　59
4．3．3　案例實現(xiàn)　60
4．3．4　動手試一試　61
4．4　【案例4】定制專屬視頻播放器　62
4．4．1　案例描述　62
4．4．2　技術準備　62
4．4．3　案例實現(xiàn)　63
4．4．4　動手試一試　66
小結　66
習題　66
第5章　通過HTML5表單與
用戶交互　67
5．1　【案例1】表單實現(xiàn)用戶注冊頁面　68
5．1．1　案例描述　68
5．1．2　技術準備　68
5．1．3　案例實現(xiàn)　70
5．1．4　動手試一試　74
5．2　【案例2】申請個人講師　74
5．2．1　案例描述　74
5．2．2　技術準備　75
5．2．3　案例實現(xiàn)　76
5．2．4　動手試一試　78
5．3　【案例3】好友留言　79
5．3．1　案例描述　79
5．3．2　技術準備　79
5．3．3　案例實現(xiàn)　80
5．3．4　動手試一試　82
5．4　【案例4】帶附件的用戶反饋　83
5．4．1　案例描述　83
5．4．2　技術準備　83
5．4．3　案例實現(xiàn)　85
5．4　4 動手試一試　87
小結　87
習題　87
第6章　列表與表格—
讓網(wǎng)站更規(guī)整　88
6．1　【案例1】圖文結合顯示課程列表　89
6．1．1　案例描述　89
6．1．2　技術準備　89
6．1．3　案例實現(xiàn)　90
6．1．4　動手試一試　92
6．2　【案例2】制作導航菜單特效　93
6．2．1　案例描述　93
6．2．2　技術準備　93
6．2．3　案例實現(xiàn)　94
6．2．4　動手試一試　95
6．3　【案例3】有序列表讓招聘信息
更清晰　96
6．3．1　案例描述　96
6．3．2　技術準備　96
6．3．3　案例實現(xiàn)　97
6．3．4　動手試一試　100
6．4　【案例4】表格設計訂單頁面　100
6．4．1　案例描述　100
6．4．2　技術準備　100
6．4．3　案例實現(xiàn)　102
6．4．4　動手試一試　105
小結　106
習題　106
第7章　CSS3布局與動畫　107
7．1　【案例1】布局積分兌獎頁面　108
7．1．1　案例描述　108
7．1．2　技術準備　108
7．1．3　案例實現(xiàn)　110
7．1．4　動手試一試　112
7．2　【案例2】鼠標指針經(jīng)過時的
圖片特效　113
7．2．1　案例描述　113
7．2．2　技術準備　113
7．2．3　案例實現(xiàn)　115
7．2．4　動手試一試　119
7．3　【案例3】為導航菜單添加
動畫特效　119
7．3．1　案例描述　119
7．3．2　技術準備　120
7．3．3　案例實現(xiàn)　122
7．3．4　動手試一試　124
7．4　【案例4】CSS3實現(xiàn)網(wǎng)頁輪播圖　124
7．4．1　案例描述　124
7．4．2　技術準備　124
7．4．3　案例實現(xiàn)　127
7．4．4　動手試一試　128
小結　128
習題　128
第8章　JavaScript編程應用　129
8．1　【案例1】實現(xiàn)將課程分類　130
8．1．1　案例描述　130
8．1．2　技術準備　130
8．1．3　案例實現(xiàn)　133
8．1．4　動手試一試　136
8．2　【案例2】個性化的智能搜索　136
8．2．1　案例描述　136
8．2．2　技術準備　136
8．2．3　案例實現(xiàn)　138
8．2．4　動手試一試　140
8．3　【案例3】使用jQuery實現(xiàn)
輪播圖廣告　141
8．3．1　案例描述　141
8．3．2　技術準備　141
8．3．3　案例實現(xiàn)　143
8．3．4　動手試一試　144
8．4　【案例4】讓用戶為你建言獻策　144
8．4．1　案例描述　144
8．4．2　技術準備　145
8．4．3　案例實現(xiàn)　147
8．4．4　動手試一試　150
小結　150
習題　150
第9章　JavaScript事件處理　151
9．1　【案例1】實現(xiàn)抽獎頁面　152
9．1．1　案例描述　152
9．1．2　技術準備　152
9．1．3　案例實現(xiàn)　153
9．1．4　動手試一試　155
9．2　【案例2】限時大搶購　156
9．2．1　案例描述　156
9．2．2　技術準備　156
9．2．3　案例實現(xiàn)　157
9．2．4　動手試一試　160
9．3　【案例3】網(wǎng)頁刮刮卡　160
9．3．1　案例描述　160
9．3．2　技術準備　161
9．3．3　案例實現(xiàn)　161
9．3．4　動手試一試　164
9．4　【案例4】模擬12306圖片驗證碼　164
9．4．1　案例描述　164
9．4．2　技術準備　165
9．4．3　案例實現(xiàn)　166
9．4．4　動手試一試　169
小結　170
習題　170
第10章　手機響應式開發(fā)（上）　171
10．1　【案例1】手機端展示圖文列表　172
10．1．1　案例描述　172
10．1．2　技術準備　172
10．1．3　案例實現(xiàn)　173
10．1．4　動手試一試　177
10．2　【案例2】手機端的用戶登錄　177
10．2．1　案例描述　177
10．2．2　技術準備　178
10．2．3　案例實現(xiàn)　179
10．2．4　動手試一試　181
10．3　【案例3】手機端聊天界面　182
10．3．1　案例描述　182
10．3．2　技術準備　182
10．3．3　案例實現(xiàn)　184
10．3．4　動手試一試　189
10．4　【案例4】在手機端播放視頻　190
10．4．1　案例描述　190
10．4．2　技術準備　190
10．4．3　案例實現(xiàn)　191
10．4．4　動手試一試　192
小結　192
習題　192
第11章　手機響應式開發(fā)（下）　193
11．1　【案例1】添加響應式圖片　194
11．1．1　案例描述　194
11．1．2　技術準備　194
11．1．3　案例實現(xiàn)　195
11．1．4　動手試一試　196
11．2　【案例2】使用第三方插件升級
視頻功能　196
11．2．1　案例描述　196
11．2．2　技術準備　197
11．2．3　案例實現(xiàn)　197
11．2．4　動手試一試　199
11．3　【案例3】響應式導航菜單　200
11．3．1　案例描述　200
11．3．2　技術準備　200
11．3．3　案例實現(xiàn)　200
11．3．4　動手試一試　203
11．4　【案例4】表格“變形記”　204
11．4．1　案例描述　204
11．4．2　技術準備　204
11．4．3　案例實現(xiàn)　204
11．4．4　動手試一試　206










小結　206
習題　207

第12章　綜合案例—
在線教育平臺　208
12．1　案例分析　209
12．1．1　案例概述　209
12．1．2　系統(tǒng)功能結構　209
12．1．3　文件夾組織結構　209
12．2　技術準備　210
12．2．1　實現(xiàn)過程分析　210
12．2．2　Amaze UI的使用　213
12．2．3　登錄頁面實現(xiàn)技巧　215
12．3　主頁設計與實現(xiàn)　215
12．3．1　主頁概述　215
12．3．2　主頁設計　216
12．3．3　代碼實現(xiàn)　216
12．4　登錄頁設計與實現(xiàn)　223
12．4．1　登錄頁概述　223
12．4．2　登錄頁設計　223
12．4．3　代碼實現(xiàn)　224
12．5　課程列表頁設計與實現(xiàn)　227
12．5．1　課程列表頁概述　227
12．5．2　課程列表頁設計　228
12．5．3　代碼實現(xiàn)　229
12．6　課程詳情頁設計與實現(xiàn)　234
12．6．1　課程詳情頁概述　234
12．6．2　課程詳情頁設計　235
12．6．3　代碼實現(xiàn)　235
小結　242