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

目 錄




第1章 實(shí)踐概述 1
1.1 實(shí)踐目標(biāo) 1
1.2 實(shí)踐知識地圖 2
1.3 實(shí)施安排 7
第2章 開發(fā)環(huán)境：HBuilder開發(fā)工具 9
2.1 實(shí)驗(yàn)?zāi)繕?biāo) 9
2.2 實(shí)驗(yàn)任務(wù) 9
2.3 設(shè)計(jì)思路 10
2.4 實(shí)驗(yàn)實(shí)施（跟我做） 10
2.4.1 步驟一：下載和安裝HBuilder 10
2.4.2 步驟二：啟動HBuilder 11
2.4.3 步驟三：創(chuàng)建Web項(xiàng)目 12
2.4.4 步驟四：創(chuàng)建HTML文件 13
2.4.5 步驟五：編輯HTML文件 14
2.4.6 步驟六：運(yùn)行HTML文件 14
第3章 HTML/HTML5：文庫網(wǎng)站 15
3.1 實(shí)驗(yàn)?zāi)繕?biāo) 15
3.2 實(shí)驗(yàn)任務(wù) 15
3.3 設(shè)計(jì)思路 17
3.4 實(shí)驗(yàn)實(shí)施（跟我做） 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 實(shí)驗(yàn)?zāi)繕?biāo) 24
4.2 實(shí)驗(yàn)任務(wù) 25
4.3 設(shè)計(jì)思路 25
4.4 實(shí)驗(yàn)實(shí)施（跟我做） 26
4.4.1 步驟一：創(chuàng)建項(xià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 實(shí)驗(yàn)?zāi)繕?biāo) 34
5.2 實(shí)驗(yàn)任務(wù) 35
5.3 設(shè)計(jì)思路 35
5.4 實(shí)驗(yàn)實(shí)施（跟我做） 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 實(shí)驗(yàn)?zāi)繕?biāo) 43
6.2 實(shí)驗(yàn)任務(wù) 44
6.3 設(shè)計(jì)思路 44
6.4 實(shí)驗(yàn)實(shí)施（跟我做） 45
6.4.1 步驟一：創(chuàng)建項(xià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 實(shí)驗(yàn)?zāi)繕?biāo) 50
7.2 實(shí)驗(yàn)任務(wù) 51
7.3 設(shè)計(jì)思路 52
7.4 實(shí)驗(yàn)實(shí)施（跟我做） 54
7.4.1 步驟一：創(chuàng)建項(xià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 實(shí)驗(yàn)?zāi)繕?biāo) 63
8.2 實(shí)驗(yàn)任務(wù) 64
8.3 設(shè)計(jì)思路 64
8.4 實(shí)驗(yàn)實(shí)施（跟我做） 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 步驟五：搭建游客點(diǎn)評欄 69
8.4.6 步驟六：搭建頁腳 72
第9章 HTML/HTML5+CSS/CSS3：
企業(yè)門戶網(wǎng)站 73
9.1 實(shí)驗(yàn)?zāi)繕?biāo) 73
9.2 實(shí)驗(yàn)任務(wù) 74
9.3 設(shè)計(jì)思路 74
9.4 實(shí)驗(yàn)實(shí)施（跟我做） 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 實(shí)驗(yàn)?zāi)繕?biāo) 83
10.2 實(shí)驗(yàn)任務(wù) 83
10.3 設(shè)計(jì)思路 84
10.4 實(shí)驗(yàn)實(shí)施（跟我做） 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 實(shí)驗(yàn)?zāi)繕?biāo) 94
11.2 實(shí)驗(yàn)任務(wù) 94
11.3 設(shè)計(jì)思路 95
11.4 實(shí)驗(yàn)實(shí)施（跟我做） 96
11.4.1 步驟一：創(chuàng)建項(xià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 實(shí)驗(yàn)?zāi)繕?biāo) 105
12.2 實(shí)驗(yàn)任務(wù) 106
12.3 設(shè)計(jì)思路 106
12.4 實(shí)驗(yàn)實(shí)施（跟我做） 107
12.4.1 步驟一：創(chuàng)建項(xià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 實(shí)驗(yàn)?zāi)繕?biāo) 115
13.2 實(shí)驗(yàn)任務(wù) 116
13.3 設(shè)計(jì)思路 117
13.4 實(shí)驗(yàn)實(shí)施（跟我做） 119
13.4.1 步驟一：創(chuàng)建項(xià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 實(shí)驗(yàn)?zāi)繕?biāo) 126
14.2 實(shí)驗(yàn)任務(wù) 126
14.3 設(shè)計(jì)思路 127
14.4 實(shí)驗(yàn)實(shí)施（跟我做） 128
14.4.1 步驟一：創(chuàng)建網(wǎng)站首頁 128
14.4.2 步驟二：添加CSS樣式 129
第15章 HTML/HTML5+CSS/CSS3：
線上點(diǎn)單網(wǎng)站 133
15.1 實(shí)驗(yàn)?zāi)繕?biāo) 133
15.2 實(shí)驗(yàn)任務(wù) 133
15.3 設(shè)計(jì)思路 134
15.4 實(shí)驗(yàn)實(shí)施（跟我做） 135
15.4.1 步驟一：創(chuàng)建網(wǎng)站首頁 135
15.4.2 步驟二：添加CSS樣式 137
第16章 HTML/HTML5+CSS/CSS3：
魔方相冊 142
16.1 實(shí)驗(yàn)?zāi)繕?biāo) 142
16.2 實(shí)驗(yàn)任務(wù) 142
16.3 設(shè)計(jì)思路 143
16.4 實(shí)驗(yàn)實(shí)施（跟我做） 143
16.4.1 步驟一：HTML布局 143
16.4.2 步驟二：搭建魔方相冊主體 143
16.4.3 步驟三：添加CSS樣式 144
第17章 HTML/HTML5+CSS/CSS3：
簡易地球儀 147
17.1 實(shí)驗(yàn)?zāi)繕?biāo) 147
17.2 實(shí)驗(yàn)任務(wù) 147
17.3 設(shè)計(jì)思路 148
17.4 實(shí)驗(yàn)實(shí)施（跟我做） 148
17.4.1 步驟一：HTML布局 148
17.4.2 步驟二：搭建簡易地球儀的
外部容器 148
17.4.3 步驟三：添加CSS樣式 148
第18章 HTML/HTML5+CSS/CSS3：
個人博客 150
18.1 實(shí)驗(yàn)?zāi)繕?biāo) 150
18.2 實(shí)驗(yàn)任務(wù) 151
18.3 設(shè)計(jì)思路 151
18.4 實(shí)驗(yàn)實(shí)施（跟我做） 152
18.4.1 步驟一：創(chuàng)建個人博客首頁 152
18.4.2 步驟二：添加CSS樣式 154
第19章 JavaScript+jQuery：
Banner輪播圖 158
19.1 實(shí)驗(yàn)?zāi)繕?biāo) 158
19.2 實(shí)驗(yàn)任務(wù) 159
19.3 設(shè)計(jì)思路 159
19.4 實(shí)驗(yàn)實(shí)施（跟我做） 161
19.4.1 步驟一：HTML布局 161
19.4.2 步驟二：添加CSS樣式 162
19.4.3 步驟三：Banner廣告圖的
切換 164
19.4.4 步驟四：改變導(dǎo)航指示項(xiàng) 165
第20章 JavaScript+jQuery：
商品選項(xiàng)卡 167
20.1 實(shí)驗(yàn)?zāi)繕?biāo) 167
20.2 實(shí)驗(yàn)任務(wù) 168
20.3 設(shè)計(jì)思路 169
20.4 實(shí)驗(yàn)實(shí)施（跟我做） 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 實(shí)驗(yàn)?zāi)繕?biāo) 177
21.2 實(shí)驗(yàn)任務(wù) 178
21.3 設(shè)計(jì)思路 179
21.4 實(shí)驗(yàn)實(shí)施（跟我做） 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 實(shí)驗(yàn)?zāi)繕?biāo) 187
22.2 實(shí)驗(yàn)任務(wù) 187
22.3 設(shè)計(jì)思路 188
22.4 實(shí)驗(yàn)實(shí)施（跟我做） 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 實(shí)驗(yàn)?zāi)繕?biāo) 195
23.2 實(shí)驗(yàn)任務(wù) 195
23.3 設(shè)計(jì)思路 196
23.4 實(shí)驗(yàn)實(shí)施（跟我做） 197
23.4.1 步驟一：HTML布局 197
23.4.2 步驟二：添加CSS樣式 197
23.4.3 步驟三：使用JavaScript控制
網(wǎng)頁便簽 199
第24章 JavaScript+jQuery：拼圖 201
24.1 實(shí)驗(yàn)?zāi)繕?biāo) 201
24.2 實(shí)驗(yàn)任務(wù) 201
24.3 設(shè)計(jì)思路 202
24.4 實(shí)驗(yàn)實(shí)施（跟我做） 202
24.4.1 步驟一：HTML布局 202
24.4.2 步驟二：添加CSS樣式 203
24.4.3 步驟三：使用JavaScript控制
拼圖 205
第25章 JavaScript+jQuery：視頻彈幕 208
25.1 實(shí)驗(yàn)?zāi)繕?biāo) 208
25.2 實(shí)驗(yàn)任務(wù) 209
25.3 設(shè)計(jì)思路 209
25.4 實(shí)驗(yàn)實(shí)施（跟我做） 210
25.4.1 步驟一：HTML布局 210
25.4.2 步驟二：添加CSS樣式 210
25.4.3 步驟三：實(shí)現(xiàn)彈幕功能 211
25.4.4 步驟四：擴(kuò)展彈幕功能 212
第26章 JavaScript+jQuery：
網(wǎng)頁調(diào)色器 215
26.1 實(shí)驗(yàn)?zāi)繕?biāo) 215
26.2 實(shí)驗(yàn)任務(wù) 216
26.3 設(shè)計(jì)思路 216
26.4 實(shí)驗(yàn)實(shí)施（跟我做） 217
26.4.1 步驟一：HTML布局 217
26.4.2 步驟二：添加CSS樣式 218
26.4.3 步驟三：JavaScript調(diào)色 220