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

目 錄




第1章 實踐概述 1
1.1 實踐目標(biāo) 1
1.2 實踐知識地圖 2
1.3 實施安排 7
第2章 開發(fā)環(huán)境：HBuilder開發(fā)工具 9
2.1 實驗?zāi)繕?biāo) 9
2.2 實驗任務(wù) 9
2.3 設(shè)計思路 10
2.4 實驗實施（跟我做） 10
2.4.1 步驟一：下載和安裝HBuilder 10
2.4.2 步驟二：啟動HBuilder 11
2.4.3 步驟三：創(chuàng)建Web項目 12
2.4.4 步驟四：創(chuàng)建HTML文件 13
2.4.5 步驟五：編輯HTML文件 14
2.4.6 步驟六：運行HTML文件 14
第3章 HTML/HTML5：文庫網(wǎng)站 15
3.1 實驗?zāi)繕?biāo) 15
3.2 實驗任務(wù) 15
3.3 設(shè)計思路 17
3.4 實驗實施（跟我做） 17
3.4.1 步驟一：創(chuàng)建首頁和文檔
詳情頁 17
3.4.2 步驟二：添加首頁的內(nèi)容 18
3.4.3 步驟三：添加文檔詳情頁的
內(nèi)容 21
第4章 HTML/HTML5：網(wǎng)址導(dǎo)航 24
4.1 實驗?zāi)繕?biāo) 24
4.2 實驗任務(wù) 25
4.3 設(shè)計思路 25
4.4 實驗實施（跟我做） 26
4.4.1 步驟一：創(chuàng)建項目，搭建頁面
主體結(jié)構(gòu) 26
4.4.2 步驟二：添加form表單內(nèi)容 27
4.4.3 步驟三：創(chuàng)建大分類導(dǎo)航 28
4.4.4 步驟四：制作分類詳情頁 28
4.4.5 步驟五：使用iframe加載
分類詳情頁 31
第5章 HTML/HTML5：影評網(wǎng) 34
5.1 實驗?zāi)繕?biāo) 34
5.2 實驗任務(wù) 35
5.3 設(shè)計思路 35
5.4 實驗實施（跟我做） 36
5.4.1 步驟一：適配移動端視口 36
5.4.2 步驟二：搭建頁面主體結(jié)構(gòu) 37
5.4.3 步驟三：創(chuàng)建影評網(wǎng)首頁的
頁頭 37
5.4.4 步驟四：創(chuàng)建影評網(wǎng)首頁的正文
部分 38
5.4.5 步驟五：創(chuàng)建影評網(wǎng)首頁的
頁腳 40
5.4.6 步驟六：創(chuàng)建提交評論頁面 40
第6章 HTML/HTML5：音樂網(wǎng)站 43
6.1 實驗?zāi)繕?biāo) 43
6.2 實驗任務(wù) 44
6.3 設(shè)計思路 44
6.4 實驗實施（跟我做） 45
6.4.1 步驟一：創(chuàng)建項目，搭建頁面
的主體結(jié)構(gòu) 45
6.4.2 步驟二：創(chuàng)建正文部分 46
6.4.3 步驟三：搭建頁腳 49
第7章 HTML/HTML5+CSS/CSS3：
招聘網(wǎng)站 50
7.1 實驗?zāi)繕?biāo) 50
7.2 實驗任務(wù) 51
7.3 設(shè)計思路 52
7.4 實驗實施（跟我做） 54
7.4.1 步驟一：創(chuàng)建項目 54
7.4.2 步驟二：鏈接外部樣式文件 55
7.4.3 步驟三：搭建導(dǎo)航欄 55
7.4.4 步驟四：搭建正文部分的框架 57
7.4.5 步驟五：設(shè)置公司簡介板塊 58
7.4.6 步驟六：設(shè)置招聘職位板塊 59
7.4.7 步驟七：設(shè)置招聘流程板塊 60
7.4.8 步驟八：搭建頁腳 61
第8章 HTML/HTML5+CSS/CSS3：
旅游網(wǎng)站 63
8.1 實驗?zāi)繕?biāo) 63
8.2 實驗任務(wù) 64
8.3 設(shè)計思路 64
8.4 實驗實施（跟我做） 66
8.4.1 步驟一：創(chuàng)建文件 66
8.4.2 步驟二：鏈接外部樣式文件 66
8.4.3 步驟三：設(shè)置導(dǎo)航欄樣式 66
8.4.4 步驟四：添加頁面標(biāo)語 69
8.4.5 步驟五：搭建游客點評欄 69
8.4.6 步驟六：搭建頁腳 72
第9章 HTML/HTML5+CSS/CSS3：
企業(yè)門戶網(wǎng)站 73
9.1 實驗?zāi)繕?biāo) 73
9.2 實驗任務(wù) 74
9.3 設(shè)計思路 74
9.4 實驗實施（跟我做） 75
9.4.1 步驟一：創(chuàng)建企業(yè)門戶網(wǎng)站的
首頁 75
9.4.2 步驟二：添加CSS樣式 77
第10章 HTML/HTML5+CSS/CSS3：
動物園網(wǎng)站 83
10.1 實驗?zāi)繕?biāo) 83
10.2 實驗任務(wù) 83
10.3 設(shè)計思路 84
10.4 實驗實施（跟我做） 85
10.4.1 步驟一：搭建頁面主體結(jié)構(gòu) 85
10.4.2 步驟二：制作場館子頁面 86
10.4.3 步驟三：使用＜iframe＞標(biāo)簽
導(dǎo)入子頁面 88
10.4.4 步驟四：創(chuàng)建場館列表 88
10.4.5 步驟五：添加CSS樣式 89
第11章 HTML/HTML5+CSS/CSS3：
開源社區(qū) 94
11.1 實驗?zāi)繕?biāo) 94
11.2 實驗任務(wù) 94
11.3 設(shè)計思路 95
11.4 實驗實施（跟我做） 96
11.4.1 步驟一：創(chuàng)建項目 96
11.4.2 步驟二：搭建頁面主體結(jié)構(gòu) 97
11.4.3 步驟三：搭建頁頭 98
11.4.4 步驟四：搭建正文 99
11.4.5 步驟五：搭建頁腳 104
第12章 HTML/HTML5+CSS/CSS3：
動漫視頻網(wǎng)站 105
12.1 實驗?zāi)繕?biāo) 105
12.2 實驗任務(wù) 106
12.3 設(shè)計思路 106
12.4 實驗實施（跟我做） 107
12.4.1 步驟一：創(chuàng)建項目 107
12.4.2 步驟二：搭建頁面主體結(jié)構(gòu) 108
12.4.3 步驟三：創(chuàng)建熱播視頻列表 109
12.4.4 步驟四：創(chuàng)建分類視頻列表 111
12.4.5 步驟五：制作CSS3動畫 113
12.4.6 步驟六：定義自定義字體 114
第13章 HTML/HTML5+CSS/CSS3：
外賣網(wǎng) 115
13.1 實驗?zāi)繕?biāo) 115
13.2 實驗任務(wù) 116
13.3 設(shè)計思路 117
13.4 實驗實施（跟我做） 119
13.4.1 步驟一：創(chuàng)建項目 119
13.4.2 步驟二：搭建頁面主體結(jié)構(gòu) 119
13.4.3 步驟三：搭建頁頭 120
13.4.4 步驟四：搭建Banner圖 121
13.4.5 步驟五：搭建產(chǎn)品分類列表 122
13.4.6 步驟六：搭建產(chǎn)品列表 122
13.4.7 步驟七：搭建頁腳 124
第14章 HTML/HTML5+CSS/CSS3：
攝影網(wǎng)站 126
14.1 實驗?zāi)繕?biāo) 126
14.2 實驗任務(wù) 126
14.3 設(shè)計思路 127
14.4 實驗實施（跟我做） 128
14.4.1 步驟一：創(chuàng)建網(wǎng)站首頁 128
14.4.2 步驟二：添加CSS樣式 129
第15章 HTML/HTML5+CSS/CSS3：
線上點單網(wǎng)站 133
15.1 實驗?zāi)繕?biāo) 133
15.2 實驗任務(wù) 133
15.3 設(shè)計思路 134
15.4 實驗實施（跟我做） 135
15.4.1 步驟一：創(chuàng)建網(wǎng)站首頁 135
15.4.2 步驟二：添加CSS樣式 137
第16章 HTML/HTML5+CSS/CSS3：
魔方相冊 142
16.1 實驗?zāi)繕?biāo) 142
16.2 實驗任務(wù) 142
16.3 設(shè)計思路 143
16.4 實驗實施（跟我做） 143
16.4.1 步驟一：HTML布局 143
16.4.2 步驟二：搭建魔方相冊主體 143
16.4.3 步驟三：添加CSS樣式 144
第17章 HTML/HTML5+CSS/CSS3：
簡易地球儀 147
17.1 實驗?zāi)繕?biāo) 147
17.2 實驗任務(wù) 147
17.3 設(shè)計思路 148
17.4 實驗實施（跟我做） 148
17.4.1 步驟一：HTML布局 148
17.4.2 步驟二：搭建簡易地球儀的
外部容器 148
17.4.3 步驟三：添加CSS樣式 148
第18章 HTML/HTML5+CSS/CSS3：
個人博客 150
18.1 實驗?zāi)繕?biāo) 150
18.2 實驗任務(wù) 151
18.3 設(shè)計思路 151
18.4 實驗實施（跟我做） 152
18.4.1 步驟一：創(chuàng)建個人博客首頁 152
18.4.2 步驟二：添加CSS樣式 154
第19章 JavaScript+jQuery：
Banner輪播圖 158
19.1 實驗?zāi)繕?biāo) 158
19.2 實驗任務(wù) 159
19.3 設(shè)計思路 159
19.4 實驗實施（跟我做） 161
19.4.1 步驟一：HTML布局 161
19.4.2 步驟二：添加CSS樣式 162
19.4.3 步驟三：Banner廣告圖的
切換 164
19.4.4 步驟四：改變導(dǎo)航指示項 165
第20章 JavaScript+jQuery：
商品選項卡 167
20.1 實驗?zāi)繕?biāo) 167
20.2 實驗任務(wù) 168
20.3 設(shè)計思路 169
20.4 實驗實施（跟我做） 170
20.4.1 步驟一：HTML布局 170
20.4.2 步驟二：添加CSS樣式 172
20.4.3 步驟三：切換商品列表 173
20.4.4 步驟四：自動切換 175
第21章 JavaScript+jQuery：
盲盒小游戲 177
21.1 實驗?zāi)繕?biāo) 177
21.2 實驗任務(wù) 178
21.3 設(shè)計思路 179
21.4 實驗實施（跟我做） 180
21.4.1 步驟一：HTML布局 180
21.4.2 步驟二：添加CSS樣式 181
21.4.3 步驟三：切換選中的盲盒 182
21.4.4 步驟四：開啟盲盒 184
第22章 JavaScript+jQuery：
大轉(zhuǎn)盤抽獎 187
22.1 實驗?zāi)繕?biāo) 187
22.2 實驗任務(wù) 187
22.3 設(shè)計思路 188
22.4 實驗實施（跟我做） 190
22.4.1 步驟一：構(gòu)建頁面 190
22.4.2 步驟二：下載和使用jQuery 191
22.4.3 步驟三：定義全局變量 192
22.4.4 步驟四：設(shè)置click事件 192
22.4.5 步驟五：創(chuàng)建operation()方法
執(zhí)行抽獎操作 192
22.4.6 步驟六：關(guān)閉彈窗 194
第23章 JavaScript+jQuery：
網(wǎng)頁便簽 195
23.1 實驗?zāi)繕?biāo) 195
23.2 實驗任務(wù) 195
23.3 設(shè)計思路 196
23.4 實驗實施（跟我做） 197
23.4.1 步驟一：HTML布局 197
23.4.2 步驟二：添加CSS樣式 197
23.4.3 步驟三：使用JavaScript控制
網(wǎng)頁便簽 199
第24章 JavaScript+jQuery：拼圖 201
24.1 實驗?zāi)繕?biāo) 201
24.2 實驗任務(wù) 201
24.3 設(shè)計思路 202
24.4 實驗實施（跟我做） 202
24.4.1 步驟一：HTML布局 202
24.4.2 步驟二：添加CSS樣式 203
24.4.3 步驟三：使用JavaScript控制
拼圖 205
第25章 JavaScript+jQuery：視頻彈幕 208
25.1 實驗?zāi)繕?biāo) 208
25.2 實驗任務(wù) 209
25.3 設(shè)計思路 209
25.4 實驗實施（跟我做） 210
25.4.1 步驟一：HTML布局 210
25.4.2 步驟二：添加CSS樣式 210
25.4.3 步驟三：實現(xiàn)彈幕功能 211
25.4.4 步驟四：擴(kuò)展彈幕功能 212
第26章 JavaScript+jQuery：
網(wǎng)頁調(diào)色器 215
26.1 實驗?zāi)繕?biāo) 215
26.2 實驗任務(wù) 216
26.3 設(shè)計思路 216
26.4 實驗實施（跟我做） 217
26.4.1 步驟一：HTML布局 217
26.4.2 步驟二：添加CSS樣式 218
26.4.3 步驟三：JavaScript調(diào)色 220