《Web前端開發實訓案例教程（初級）》是電子工業出版社出版的圖書，作者是北京新奧時代科技有限責任公司。
基本介紹
- 中文名：Web前端開發實訓案例教程（初級）
- 作者：北京新奧時代科技有限責任公司
- 出版時間：2023年3月
- 出版社：電子工業出版社
- 頁數：232 頁
- 字數：400千字
- ISBN：9787121453045
- 開本：16 開
內容簡介,圖書目錄,
內容簡介
本書是根據《Web前端開發職業技能等級標準2.0版》（初級）編寫的配套的實踐教程，其中涉及的項目代碼使用HBuilder開發工具編譯，並且均可在主流瀏覽器中運行。 本書將中職、高職院校及套用型本科院校的計算機套用、軟體技術等相關專業開設的Web前端開發方向的課程體系，與企業Web前端開發崗位能力模型相結合，依據《Web前端開發職業技能等級標準2.0版》（初級）的技能要求，形成三位一體的Web前端開發技術知識地圖。本書以實踐能力為導向，以開發企業真實套用為目標，遵循企業軟體工程標準和技術開發要求，採用任務驅動方式，將Web前端開發（初級）所涉及的HTML+HTML5、CSS+CSS3、JavaScript、jQuery相關知識單元，充分融入實際案例和套用環境中。本書對《Web前端開發職業技能等級標準2.0版》（初級）涉及的重要知識單元都進行了詳細的介紹，幫助讀者掌握Web前端開發的技術技能要求。 本書依託實驗項目對知識單元進行介紹，並且針對不同的知識單元設計了多個實驗項目，幫助讀者掌握每個知識單元的核心內容。 本書適合作為《Web前端開發職業技能等級標準2.0版》（初級）實踐教學的參考用書，也可作為有意成為Web前端開發工作者的學習指導用書。
圖書目錄
第1章 實踐概述 1
1.1 實踐目標 1
1.2 實踐知識地圖 2
1.3 實施安排 7
第2章 開發環境：HBuilder開發工具 9
2.1 實驗目標 9
2.2 實驗任務 9
2.3 設計思路 10
2.4 實驗實施（跟我做） 10
2.4.1 步驟一：下載和安裝HBuilder 10
2.4.2 步驟二：啟動HBuilder 11
2.4.3 步驟三：創建Web項目 12
2.4.4 步驟四：創建HTML檔案 13
2.4.5 步驟五：編輯HTML檔案 14
2.4.6 步驟六：運行HTML檔案 14
第3章 HTML/HTML5：文庫網站 15
3.1 實驗目標 15
3.2 實驗任務 15
3.3 設計思路 17
3.4 實驗實施（跟我做） 17
3.4.1 步驟一：創建首頁和文檔
詳情頁 17
3.4.2 步驟二：添加首頁的內容 18
3.4.3 步驟三：添加文檔詳情頁的
內容 21
第4章 HTML/HTML5：網址導航 24
4.1 實驗目標 24
4.2 實驗任務 25
4.3 設計思路 25
4.4 實驗實施（跟我做） 26
4.4.1 步驟一：創建項目，搭建頁面
主體結構 26
4.4.2 步驟二：添加form表單內容 27
4.4.3 步驟三：創建大分類導航 28
4.4.4 步驟四：製作分類詳情頁 28
4.4.5 步驟五：使用iframe載入
分類詳情頁 31
第5章 HTML/HTML5：影評網 34
5.1 實驗目標 34
5.2 實驗任務 35
5.3 設計思路 35
5.4 實驗實施（跟我做） 36
5.4.1 步驟一：適配移動端視口 36
5.4.2 步驟二：搭建頁面主體結構 37
5.4.3 步驟三：創建影評網首頁的
頁頭 37
5.4.4 步驟四：創建影評網首頁的正文
部分 38
5.4.5 步驟五：創建影評網首頁的
頁腳 40
5.4.6 步驟六：創建提交評論頁面 40
第6章 HTML/HTML5：音樂網站 43
6.1 實驗目標 43
6.2 實驗任務 44
6.3 設計思路 44
6.4 實驗實施（跟我做） 45
6.4.1 步驟一：創建項目，搭建頁面
的主體結構 45
6.4.2 步驟二：創建正文部分 46
6.4.3 步驟三：搭建頁腳 49
第7章 HTML/HTML5+CSS/CSS3：
招聘網站 50
7.1 實驗目標 50
7.2 實驗任務 51
7.3 設計思路 52
7.4 實驗實施（跟我做） 54
7.4.1 步驟一：創建項目 54
7.4.2 步驟二：連結外部樣式檔案 55
7.4.3 步驟三：搭建導航欄 55
7.4.4 步驟四：搭建正文部分的框架 57
7.4.5 步驟五：設定公司簡介板塊 58
7.4.6 步驟六：設定招聘職位板塊 59
7.4.7 步驟七：設定招聘流程板塊 60
7.4.8 步驟八：搭建頁腳 61
第8章 HTML/HTML5+CSS/CSS3：
旅遊網站 63
8.1 實驗目標 63
8.2 實驗任務 64
8.3 設計思路 64
8.4 實驗實施（跟我做） 66
8.4.1 步驟一：創建檔案 66
8.4.2 步驟二：連結外部樣式檔案 66
8.4.3 步驟三：設定導航欄樣式 66
8.4.4 步驟四：添加頁面標語 69
8.4.5 步驟五：搭建遊客點評欄 69
8.4.6 步驟六：搭建頁腳 72
第9章 HTML/HTML5+CSS/CSS3：
企業入口網站 73
9.1 實驗目標 73
9.2 實驗任務 74
9.3 設計思路 74
9.4 實驗實施（跟我做） 75
9.4.1 步驟一：創建企業入口網站的
首頁 75
9.4.2 步驟二：添加CSS樣式 77
第10章 HTML/HTML5+CSS/CSS3：
動物園網站 83
10.1 實驗目標 83
10.2 實驗任務 83
10.3 設計思路 84
10.4 實驗實施（跟我做） 85
10.4.1 步驟一：搭建頁面主體結構 85
10.4.2 步驟二：製作場館子頁面 86
10.4.3 步驟三：使用＜iframe＞標籤
導入子頁面 88
10.4.4 步驟四：創建場館列表 88
10.4.5 步驟五：添加CSS樣式 89
第11章 HTML/HTML5+CSS/CSS3：
開源社區 94
11.1 實驗目標 94
11.2 實驗任務 94
11.3 設計思路 95
11.4 實驗實施（跟我做） 96
11.4.1 步驟一：創建項目 96
11.4.2 步驟二：搭建頁面主體結構 97
11.4.3 步驟三：搭建頁頭 98
11.4.4 步驟四：搭建正文 99
11.4.5 步驟五：搭建頁腳 104
第12章 HTML/HTML5+CSS/CSS3：
動漫視頻網站 105
12.1 實驗目標 105
12.2 實驗任務 106
12.3 設計思路 106
12.4 實驗實施（跟我做） 107
12.4.1 步驟一：創建項目 107
12.4.2 步驟二：搭建頁面主體結構 108
12.4.3 步驟三：創建熱播視頻列表 109
12.4.4 步驟四：創建分類視頻列表 111
12.4.5 步驟五：製作CSS3動畫 113
12.4.6 步驟六：定義自定義字型 114
第13章 HTML/HTML5+CSS/CSS3：
外賣網 115
13.1 實驗目標 115
13.2 實驗任務 116
13.3 設計思路 117
13.4 實驗實施（跟我做） 119
13.4.1 步驟一：創建項目 119
13.4.2 步驟二：搭建頁面主體結構 119
13.4.3 步驟三：搭建頁頭 120
13.4.4 步驟四：搭建Banner圖 121
13.4.5 步驟五：搭建產品分類列表 122
13.4.6 步驟六：搭建產品列表 122
13.4.7 步驟七：搭建頁腳 124
第14章 HTML/HTML5+CSS/CSS3：
攝影網站 126
14.1 實驗目標 126
14.2 實驗任務 126
14.3 設計思路 127
14.4 實驗實施（跟我做） 128
14.4.1 步驟一：創建網站首頁 128
14.4.2 步驟二：添加CSS樣式 129
第15章 HTML/HTML5+CSS/CSS3：
線上點單網站 133
15.1 實驗目標 133
15.2 實驗任務 133
15.3 設計思路 134
15.4 實驗實施（跟我做） 135
15.4.1 步驟一：創建網站首頁 135
15.4.2 步驟二：添加CSS樣式 137
第16章 HTML/HTML5+CSS/CSS3：
魔方相冊 142
16.1 實驗目標 142
16.2 實驗任務 142
16.3 設計思路 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 實驗目標 147
17.2 實驗任務 147
17.3 設計思路 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 實驗目標 150
18.2 實驗任務 151
18.3 設計思路 151
18.4 實驗實施（跟我做） 152
18.4.1 步驟一：創建個人部落格首頁 152
18.4.2 步驟二：添加CSS樣式 154
第19章 JavaScript+jQuery：
Banner輪播圖 158
19.1 實驗目標 158
19.2 實驗任務 159
19.3 設計思路 159
19.4 實驗實施（跟我做） 161
19.4.1 步驟一：HTML布局 161
19.4.2 步驟二：添加CSS樣式 162
19.4.3 步驟三：Banner廣告圖的
切換 164
19.4.4 步驟四：改變導航指示項 165
第20章 JavaScript+jQuery：
商品選項卡 167
20.1 實驗目標 167
20.2 實驗任務 168
20.3 設計思路 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 實驗目標 177
21.2 實驗任務 178
21.3 設計思路 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：
大轉盤抽獎 187
22.1 實驗目標 187
22.2 實驗任務 187
22.3 設計思路 188
22.4 實驗實施（跟我做） 190
22.4.1 步驟一：構建頁面 190
22.4.2 步驟二：下載和使用jQuery 191
22.4.3 步驟三：定義全局變數 192
22.4.4 步驟四：設定click事件 192
22.4.5 步驟五：創建operation()方法
執行抽獎操作 192
22.4.6 步驟六：關閉彈窗 194
第23章 JavaScript+jQuery：
網頁便簽 195
23.1 實驗目標 195
23.2 實驗任務 195
23.3 設計思路 196
23.4 實驗實施（跟我做） 197
23.4.1 步驟一：HTML布局 197
23.4.2 步驟二：添加CSS樣式 197
23.4.3 步驟三：使用JavaScript控制
網頁便簽 199
第24章 JavaScript+jQuery：拼圖 201
24.1 實驗目標 201
24.2 實驗任務 201
24.3 設計思路 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 實驗目標 208
25.2 實驗任務 209
25.3 設計思路 209
25.4 實驗實施（跟我做） 210
25.4.1 步驟一：HTML布局 210
25.4.2 步驟二：添加CSS樣式 210
25.4.3 步驟三：實現彈幕功能 211
25.4.4 步驟四：擴展彈幕功能 212
第26章 JavaScript+jQuery：
網頁調色器 215
26.1 實驗目標 215
26.2 實驗任務 216
26.3 設計思路 216
26.4 實驗實施（跟我做） 217
26.4.1 步驟一：HTML布局 217
26.4.2 步驟二：添加CSS樣式 218
26.4.3 步驟三：JavaScript調色 220
