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










小結(jié)　206
習(xí)題　207

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