Web前端開(kāi)發(fā)實(shí)訓(xùn)案例教程（初級(jí)）
定 價(jià)：55 元
- 作者：北京新奧時(shí)代科技有限責(zé)任公司
- 出版時(shí)間：2023/3/1
- ISBN：9787121453045
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP393.092.2
- 頁(yè)碼：232
- 紙張：
- 版次：01
- 開(kāi)本：16開(kāi)
本書(shū)是根據(jù)《Web前端開(kāi)發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)2.0版》（初級(jí)）編寫(xiě)的配套的實(shí)踐教程，其中涉及的項(xiàng)目代碼使用HBuilder開(kāi)發(fā)工具編譯，并且均可在主流瀏覽器中運(yùn)行。 本書(shū)將中職、高職院校及應(yīng)用型本科院校的計(jì)算機(jī)應(yīng)用、軟件技術(shù)等相關(guān)專業(yè)開(kāi)設(shè)的Web前端開(kāi)發(fā)方向的課程體系，與企業(yè)Web前端開(kāi)發(fā)崗位能力模型相結(jié)合，依據(jù)《Web前端開(kāi)發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)2.0版》（初級(jí)）的技能要求，形成三位一體的Web前端開(kāi)發(fā)技術(shù)知識(shí)地圖。本書(shū)以實(shí)踐能力為導(dǎo)向，以開(kāi)發(fā)企業(yè)真實(shí)應(yīng)用為目標(biāo)，遵循企業(yè)軟件工程標(biāo)準(zhǔn)和技術(shù)開(kāi)發(fā)要求，采用任務(wù)驅(qū)動(dòng)方式，將Web前端開(kāi)發(fā)（初級(jí)）所涉及的HTML+HTML5、CSS+CSS3、JavaScript、jQuery相關(guān)知識(shí)單元，充分融入實(shí)際案例和應(yīng)用環(huán)境中。本書(shū)對(duì)《Web前端開(kāi)發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)2.0版》（初級(jí)）涉及的重要知識(shí)單元都進(jìn)行了詳細(xì)的介紹，幫助讀者掌握Web前端開(kāi)發(fā)的技術(shù)技能要求。 本書(shū)依托實(shí)驗(yàn)項(xiàng)目對(duì)知識(shí)單元進(jìn)行介紹，并且針對(duì)不同的知識(shí)單元設(shè)計(jì)了多個(gè)實(shí)驗(yàn)項(xiàng)目，幫助讀者掌握每個(gè)知識(shí)單元的核心內(nèi)容。 本書(shū)適合作為《Web前端開(kāi)發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)2.0版》（初級(jí)）實(shí)踐教學(xué)的參考用書(shū)，也可作為有意成為Web前端開(kāi)發(fā)工作者的學(xué)習(xí)指導(dǎo)用書(shū)。
北京新奧時(shí)代科技有限責(zé)任公司于2006年04月12日在石景山分局登記成立。公司經(jīng)營(yíng)范圍包括技術(shù)開(kāi)發(fā)、技術(shù)推廣、技術(shù)轉(zhuǎn)讓、技術(shù)咨詢、技術(shù)服務(wù)等。
目 錄
第1章 實(shí)踐概述 1
1.1 實(shí)踐目標(biāo) 1
1.2 實(shí)踐知識(shí)地圖 2
1.3 實(shí)施安排 7
第2章 開(kāi)發(fā)環(huán)境：HBuilder開(kāi)發(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 步驟二：?jiǎn)?dòng)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：文庫(kù)網(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)建首頁(yè)和文檔
詳情頁(yè) 17
3.4.2 步驟二：添加首頁(yè)的內(nèi)容 18
3.4.3 步驟三：添加文檔詳情頁(yè)的
內(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)目，搭建頁(yè)面
主體結(jié)構(gòu) 26
4.4.2 步驟二：添加form表單內(nèi)容 27
4.4.3 步驟三：創(chuàng)建大分類導(dǎo)航 28
4.4.4 步驟四：制作分類詳情頁(yè) 28
4.4.5 步驟五：使用iframe加載
分類詳情頁(yè) 31
第5章 HTML/HTML5：影評(píng)網(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 步驟一：適配移動(dòng)端視口 36
5.4.2 步驟二：搭建頁(yè)面主體結(jié)構(gòu) 37
5.4.3 步驟三：創(chuàng)建影評(píng)網(wǎng)首頁(yè)的
頁(yè)頭 37
5.4.4 步驟四：創(chuàng)建影評(píng)網(wǎng)首頁(yè)的正文
部分 38
5.4.5 步驟五：創(chuàng)建影評(píng)網(wǎng)首頁(yè)的
頁(yè)腳 40
5.4.6 步驟六：創(chuàng)建提交評(píng)論頁(yè)面 40
第6章 HTML/HTML5：音樂(lè)網(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)目，搭建頁(yè)面
的主體結(jié)構(gòu) 45
6.4.2 步驟二：創(chuàng)建正文部分 46
6.4.3 步驟三：搭建頁(yè)腳 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è)置公司簡(jiǎn)介板塊 58
7.4.6 步驟六：設(shè)置招聘職位板塊 59
7.4.7 步驟七：設(shè)置招聘流程板塊 60
7.4.8 步驟八：搭建頁(yè)腳 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 步驟四：添加頁(yè)面標(biāo)語(yǔ) 69
8.4.5 步驟五：搭建游客點(diǎn)評(píng)欄 69
8.4.6 步驟六：搭建頁(yè)腳 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)站的
首頁(yè) 75
9.4.2 步驟二：添加CSS樣式 77
第10章 HTML/HTML5+CSS/CSS3：
動(dòng)物園網(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 步驟一：搭建頁(yè)面主體結(jié)構(gòu) 85
10.4.2 步驟二：制作場(chǎng)館子頁(yè)面 86
10.4.3 步驟三：使用＜iframe＞標(biāo)簽
導(dǎo)入子頁(yè)面 88
10.4.4 步驟四：創(chuàng)建場(chǎng)館列表 88
10.4.5 步驟五：添加CSS樣式 89
第11章 HTML/HTML5+CSS/CSS3：
開(kāi)源社區(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 步驟二：搭建頁(yè)面主體結(jié)構(gòu) 97
11.4.3 步驟三：搭建頁(yè)頭 98
11.4.4 步驟四：搭建正文 99
11.4.5 步驟五：搭建頁(yè)腳 104
第12章 HTML/HTML5+CSS/CSS3：
動(dòng)漫視頻網(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 步驟二：搭建頁(yè)面主體結(jié)構(gòu) 108
12.4.3 步驟三：創(chuàng)建熱播視頻列表 109
12.4.4 步驟四：創(chuàng)建分類視頻列表 111
12.4.5 步驟五：制作CSS3動(dòng)畫(huà) 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 步驟二：搭建頁(yè)面主體結(jié)構(gòu) 119
13.4.3 步驟三：搭建頁(yè)頭 120
13.4.4 步驟四：搭建Banner圖 121
13.4.5 步驟五：搭建產(chǎn)品分類列表 122
13.4.6 步驟六：搭建產(chǎn)品列表 122
13.4.7 步驟七：搭建頁(yè)腳 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)站首頁(yè) 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)站首頁(yè) 135
15.4.2 步驟二：添加CSS樣式 137
第16章 HTML/HTML5+CSS/CSS3：
魔方相冊(cè) 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 步驟二：搭建魔方相冊(cè)主體 143
16.4.3 步驟三：添加CSS樣式 144
第17章 HTML/HTML5+CSS/CSS3：
簡(jiǎn)易地球儀 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 步驟二：搭建簡(jiǎn)易地球儀的
外部容器 148
17.4.3 步驟三：添加CSS樣式 148
第18章 HTML/HTML5+CSS/CSS3：
個(gè)人博客 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)建個(gè)人博客首頁(yè) 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 步驟四：自動(dòng)切換 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 步驟四：開(kāi)啟盲盒 184
第22章 JavaScript+jQuery：
大轉(zhuǎn)盤(pán)抽獎(jiǎng) 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)建頁(yè)面 190
22.4.2 步驟二：下載和使用jQuery 191
22.4.3 步驟三：定義全局變量 192
22.4.4 步驟四：設(shè)置click事件 192
22.4.5 步驟五：創(chuàng)建operation()方法
執(zhí)行抽獎(jiǎng)操作 192
22.4.6 步驟六：關(guān)閉彈窗 194
第23章 JavaScript+jQuery：
網(wǎng)頁(yè)便簽 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)頁(yè)便簽 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)頁(yè)調(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
書(shū)單推薦
