Web前端開(kāi)發(fā)實(shí)訓(xùn)案例教程（初級(jí)）
定 價(jià)：55 元
- 作者：北京新奧時(shí)代科技有限責(zé)任公司
- 出版時(shí)間：2019/11/1
- ISBN：9787121357664
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP393.092.2
- 頁(yè)碼：256
- 紙張：
- 版次：01
- 開(kāi)本：16開(kāi)
本書(shū)是按照《Web前端開(kāi)發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)》編寫的配套實(shí)踐教程，其中涉及的應(yīng)用技術(shù)專題和項(xiàng)目代碼均在主流瀏覽器中運(yùn)行通過(guò)。本書(shū)結(jié)合大學(xué)計(jì)算機(jī)相關(guān)專業(yè)Web前端開(kāi)發(fā)方向課程體系、企業(yè)Web前端開(kāi)發(fā)崗位能力模型和《Web前端開(kāi)發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)》，形成Web前端開(kāi)發(fā)三位一體知識(shí)地圖，以實(shí)踐能力為導(dǎo)向，以企業(yè)真實(shí)應(yīng)用為目標(biāo)，遵循企業(yè)軟件工程標(biāo)準(zhǔn)和技術(shù)，以任務(wù)為驅(qū)動(dòng)，針對(duì)HTML5、CSS3、JavaScript、jQuery等重要Web前端開(kāi)發(fā)中的知識(shí)單元，結(jié)合實(shí)際案例和應(yīng)用環(huán)境進(jìn)行分析與設(shè)計(jì)，并對(duì)每個(gè)重要知識(shí)單元進(jìn)行詳細(xì)的實(shí)現(xiàn)，使讀者能夠真正掌握這些知識(shí)在實(shí)際場(chǎng)景中的應(yīng)用。本書(shū)分為兩大部分：第一部分為實(shí)驗(yàn)，采用技術(shù)專題進(jìn)行知識(shí)單元訓(xùn)練，可以對(duì)應(yīng)課程練習(xí)或?qū)嶒?yàn)，針對(duì)不同的知識(shí)單元設(shè)計(jì)了實(shí)驗(yàn)項(xiàng)目，重點(diǎn)訓(xùn)練每個(gè)知識(shí)單元的內(nèi)容；第二部分為綜合實(shí)踐，可以對(duì)應(yīng)課程設(shè)計(jì)或綜合實(shí)踐，運(yùn)用一個(gè)電商網(wǎng)站項(xiàng)目貫穿Web前端開(kāi)發(fā)核心知識(shí)，完整訓(xùn)練核心知識(shí)單元在企業(yè)真實(shí)項(xiàng)目中的應(yīng)用。本書(shū)適合作為《Web前端開(kāi)發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)》實(shí)踐教學(xué)的參考用書(shū)，也可作為對(duì)Web前端開(kāi)發(fā)感興趣的學(xué)習(xí)者的指導(dǎo)用書(shū)。
北京大學(xué)無(wú)線電電子學(xué)系碩士畢業(yè)，曾在高科技企業(yè)從事辦公自動(dòng)化系統(tǒng)的開(kāi)發(fā)應(yīng)用，是國(guó)家計(jì)算機(jī)和通信專業(yè)技術(shù)資格考試標(biāo)準(zhǔn)的主要起草或?qū)彾ㄕ�，主持開(kāi)發(fā)過(guò)考務(wù)管理系統(tǒng)、上機(jī)考試系統(tǒng)、閱卷系統(tǒng)。
目 錄
第1章 實(shí)踐概述 1
1.1 實(shí)踐目標(biāo) 1
1.2 實(shí)踐知識(shí)地圖 1
1.3 實(shí)施安排 6
1.3.1 實(shí)驗(yàn)部分（技術(shù)專題） 6
1.3.2 綜合實(shí)踐部分 11
第2章 網(wǎng)頁(yè)設(shè)計(jì)與制作 19
2.1 實(shí)驗(yàn)?zāi)繕?biāo) 19
2.2 實(shí)驗(yàn)任務(wù) 19
2.3 設(shè)計(jì)思路 20
2.4 實(shí)驗(yàn)實(shí)施（跟我做） 20
2.4.1 步驟一：設(shè)計(jì)網(wǎng)頁(yè)原型 20
2.4.2 步驟二：設(shè)計(jì)頁(yè)面效果 21
2.4.3 步驟三：網(wǎng)頁(yè)切圖 22
2.4.4 步驟四：網(wǎng)頁(yè)設(shè)計(jì) 25
第3章 開(kāi)發(fā)工具（HBuilder） 26
3.1 實(shí)驗(yàn)?zāi)繕?biāo) 26
3.2 實(shí)驗(yàn)任務(wù) 26
3.3 設(shè)計(jì)思路 26
3.4 實(shí)驗(yàn)實(shí)施（跟我做） 27
3.3.1 步驟一：下載并安裝
HBuilder 27
3.3.2 步驟二：?jiǎn)?dòng)HBuilder 27
3.3.3 步驟三：創(chuàng)建工程 28
3.3.4 步驟四：創(chuàng)建HTML頁(yè)面 29
3.3.5 步驟五：編輯HTML文件 30
3.3.6 步驟六：運(yùn)行 30
第4章 網(wǎng)站服務(wù)器部署
（Apache服務(wù)器） 32
4.1 實(shí)驗(yàn)?zāi)繕?biāo) 32
4.2 實(shí)驗(yàn)任務(wù) 32
4.3 設(shè)計(jì)思路 32
4.4 實(shí)驗(yàn)實(shí)施（跟我做） 32
4.3.1 步驟一：下載Apache 32
4.3.2 步驟二：安裝Apache 34
4.3.3 步驟三：測(cè)試Apache 35
第5章 HTML制作靜態(tài)網(wǎng)頁(yè)
（新聞網(wǎng)站） 36
5.1 實(shí)驗(yàn)?zāi)繕?biāo) 36
5.2 實(shí)驗(yàn)任務(wù) 37
5.3 設(shè)計(jì)思路 37
5.4 實(shí)驗(yàn)實(shí)施（跟我做） 38
5.4.1 步驟一：創(chuàng)建“登錄”頁(yè)面 38
5.4.2 步驟二：添加“登錄”
頁(yè)面內(nèi)容 38
5.4.3 步驟三：創(chuàng)建新聞首頁(yè)和
二級(jí)頁(yè)面 39
5.4.4 步驟四：添加新聞頁(yè)面
內(nèi)容 39
5.4.5 步驟五：實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn) 42
第6章 CSS設(shè)計(jì)頁(yè)面樣式
（購(gòu)物網(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í)施（跟我做） 46
6.4.1 步驟一：創(chuàng)建文件 46
6.4.2 步驟二：鏈接到外部
樣式文件 46
6.4.3 步驟三：導(dǎo)航欄樣式 47
6.4.4 步驟四：左邊欄 48
6.4.5 步驟五：右邊欄 50
6.4.6 步驟六：底邊欄 51
第7章 JavaScript開(kāi)發(fā)交互效果頁(yè)面
（網(wǎng)頁(yè)計(jì)算器） 53
7.1 實(shí)驗(yàn)?zāi)繕?biāo) 53
7.2 實(shí)驗(yàn)任務(wù) 54
7.3 設(shè)計(jì)思路 54
7.4 實(shí)驗(yàn)實(shí)施（跟我做） 56
7.4.1 步驟一：HTML布局 56
7.4.2 步驟二：CSS添加樣式 57
7.4.3 步驟三：JavaScript計(jì)算 59
7.4.4 步驟四：擴(kuò)展功能
（驗(yàn)證正則表達(dá)式） 62
第8章 jQuery開(kāi)發(fā)交互效果頁(yè)面
（手機(jī)號(hào)抽獎(jiǎng)） 64
8.1 實(shí)驗(yàn)?zāi)繕?biāo) 64
8.2 實(shí)驗(yàn)任務(wù) 65
8.3 設(shè)計(jì)思路 65
8.4 實(shí)驗(yàn)實(shí)施（跟我做） 66
8.4.1 步驟一：頁(yè)面構(gòu)建 66
8.4.2 步驟二：下載并引用jQuery
和jQuery UI 67
8.4.3 步驟三：隨機(jī)生成10個(gè)
手機(jī)號(hào)碼 67
8.4.4 步驟四：抽獎(jiǎng) 68
8.4.5 步驟五：重置抽獎(jiǎng) 68
第9章 CSS3新特性開(kāi)發(fā)頁(yè)面樣式
（微博網(wǎng)站） 70
9.1 實(shí)驗(yàn)?zāi)繕?biāo) 70
9.2 實(shí)驗(yàn)任務(wù) 70
9.3 設(shè)計(jì)思路 71
9.4 實(shí)驗(yàn)實(shí)施（跟我做） 72
9.4.1 步驟一：搭建頁(yè)面主體
結(jié)構(gòu) 72
9.4.2 步驟二：搭建頁(yè)面主體
內(nèi)容 73
9.4.3 步驟三：添加正文內(nèi)容 73
9.4.4 步驟四：美化微博話題 75
9.4.5 步驟五：對(duì)微博話題的字體
進(jìn)行美化 76
9.4.6 步驟六：對(duì)微博話題的
背景色進(jìn)行美化 77
第10章 HTML標(biāo)簽美化頁(yè)面
（課程信息管理系統(tǒng)） 78
10.1 實(shí)驗(yàn)?zāi)繕?biāo) 78
10.2 實(shí)驗(yàn)任務(wù) 79
10.3 設(shè)計(jì)思路 80
10.4 實(shí)驗(yàn)實(shí)施（跟我做） 81
10.4.1 步驟一：搭建頁(yè)面主體結(jié)構(gòu)
和內(nèi)容 81
10.4.2 步驟二：創(chuàng)建form表單和
搜索框 82
10.4.3 步驟三：創(chuàng)建班級(jí)列表 82
10.4.4 步驟四：制作課程表
子頁(yè)面 82
10.4.5 步驟五：使用＜iframe＞標(biāo)簽
導(dǎo)入表格 84
10.4.6 步驟六：為課程添加超鏈接
進(jìn)入課程詳情頁(yè)面 85
第11章 CSS3新特性開(kāi)發(fā)動(dòng)態(tài)頁(yè)面樣式
（天氣網(wǎng)） 86
11.1 實(shí)驗(yàn)?zāi)繕?biāo) 86
11.2 實(shí)驗(yàn)任務(wù) 87
11.3 設(shè)計(jì)思路 87
11.4 實(shí)驗(yàn)實(shí)施（跟我做） 88
11.4.1 步驟一：創(chuàng)建HTML
文件 88
11.4.2 步驟二：搭建天氣預(yù)報(bào)
主體 88
11.4.3 步驟三：用CSS美化 89
11.4.4 步驟四：制作CSS3動(dòng)畫(huà) 91
11.4.5 步驟五：使用自定義字體 92
11.4.6 步驟六：使用彈性布局 92
11.4.7 步驟七：使用多列布局 92
第12章 HTML5制作移動(dòng)端靜態(tài)網(wǎng)頁(yè)
（房屋裝飾網(wǎng)站） 94
12.1 實(shí)驗(yàn)?zāi)繕?biāo) 94
12.2 實(shí)驗(yàn)任務(wù) 95
12.3 設(shè)計(jì)思路 95
12.4 實(shí)驗(yàn)實(shí)施（跟我做） 97
12.4.1 步驟一：適配移動(dòng)端視口 97
12.4.2 步驟二：搭建頁(yè)面主體結(jié)構(gòu)
和內(nèi)容 97
12.4.3 步驟三：創(chuàng)建搜索欄 97
12.4.4 步驟四：創(chuàng)建導(dǎo)航欄 98
12.4.5 步驟五：使用＜figure＞標(biāo)簽
創(chuàng)建房屋信息 98
12.4.6 步驟六：創(chuàng)建音樂(lè)播放欄 99
12.4.7 步驟七：頁(yè)腳按鈕 99
12.4.8 步驟八：創(chuàng)建房屋頁(yè)面 99
第13章 CSS3新特性開(kāi)發(fā)移動(dòng)端頁(yè)面
樣式（電商平臺(tái)網(wǎng)站） 101
13.1 實(shí)驗(yàn)?zāi)繕?biāo) 101
13.2 實(shí)驗(yàn)任務(wù) 101
13.3 設(shè)計(jì)思路 102
13.4 實(shí)驗(yàn)實(shí)施（跟我做） 103
13.4.1 步驟一：創(chuàng)建符合HTML5
的HTML文件 103
13.4.2 步驟二：使用viewport
屬性 103
13.4.3 步驟三：搭建網(wǎng)頁(yè)主體
結(jié)構(gòu) 103
13.4.4 步驟四：用CSS3美化 104
第14章 JavaScript開(kāi)發(fā)移動(dòng)端交互效果
頁(yè)面（項(xiàng)目提成計(jì)算器） 107
14.1 實(shí)驗(yàn)?zāi)繕?biāo) 107
14.2 實(shí)驗(yàn)任務(wù) 107
14.3 設(shè)計(jì)思路 108
14.4 實(shí)驗(yàn)實(shí)施（跟我做） 109
14.4.1 步驟一：創(chuàng)建項(xiàng)目主體 109
14.4.2 步驟二：用CSS美化 110
14.4.3 步驟三：編寫JavaScript 110
第15章 HTML5美化移動(dòng)端靜態(tài)網(wǎng)頁(yè)
（視頻網(wǎng)站） 113
15.1 實(shí)驗(yàn)?zāi)繕?biāo) 113
15.2 實(shí)驗(yàn)任務(wù) 113
15.3 設(shè)計(jì)思路 114
15.4 實(shí)驗(yàn)實(shí)施（跟我做） 115
15.4.1 步驟一：搭建頁(yè)面
主體結(jié)構(gòu) 115
15.4.2 步驟二：添加頁(yè)頭
部分內(nèi)容 116
15.4.3 步驟三：添加正文
部分內(nèi)容 116
15.4.4 步驟四：添加頁(yè)腳
部分內(nèi)容 118
第16章 CSS3新特性美化移動(dòng)端靜態(tài)
頁(yè)面（學(xué)院門戶網(wǎng)站） 119
16.1 實(shí)驗(yàn)?zāi)繕?biāo) 119
16.2 實(shí)驗(yàn)任務(wù) 119
16.3 設(shè)計(jì)思路 120
16.4 實(shí)驗(yàn)實(shí)施（跟我做） 120
16.4.1 步驟一：搭建頁(yè)面結(jié)構(gòu) 120
16.4.2 步驟二：添加頁(yè)頭Logo 121
16.4.3 步驟三：正文內(nèi)容樣式 122
16.4.4 步驟四：頁(yè)腳內(nèi)容效果 123
第17章 綜合實(shí)踐（跳蚤市場(chǎng)） 125
17.1 項(xiàng)目簡(jiǎn)介 125
17.2 實(shí)踐目標(biāo) 125
17.3 需求分析 126
17.4 界面設(shè)計(jì) 127
17.4.1 頁(yè)面類型 127
17.4.2 頁(yè)面整體布局 127
17.4.3 頁(yè)頭和頁(yè)腳 128
17.4.4 “注冊(cè)”頁(yè)面 128
17.4.5 首頁(yè) 128
17.4.6 “用戶中心”頁(yè)面 129
17.4.7 頁(yè)面效果 129
17.4.8 項(xiàng)目頁(yè)面匯總 131
17.5 第一階段HTML5基礎(chǔ)：
創(chuàng)建工程 132
17.5.1 工作任務(wù) 132
17.5.2 設(shè)計(jì)思路 132
17.5.3 實(shí)現(xiàn)（跟我做） 132
17.6 第一階段HTML5基礎(chǔ)：
首頁(yè) 136
17.6.1 工作任務(wù) 136
17.6.2 設(shè)計(jì)思路 137
17.6.3 實(shí)現(xiàn)（跟我做） 137
17.7 第一階段HTML5基礎(chǔ)：
注冊(cè)和登錄 139
17.7.1 工作任務(wù) 139
17.7.2 設(shè)計(jì)思路 139
17.7.3 實(shí)現(xiàn)（跟我做） 140
17.8 第一階段HTML5基礎(chǔ)：
用戶中心 142
17.8.1 用戶中心I 142
17.8.2 用戶中心Ⅱ 149
17.9 第二階段HTML5+CSS3+JS：
商品管理 154
17.9.1 發(fā)布商品 154
17.9.2 修改商品信息 158
17.9.3 刪除商品 162
17.9.4 商品分類列表 165
17.9.5 搜索商品 170
17.10 第二階段HTML5+CSS3+JS：
訂單管理 175
17.10.1 下訂單 175
17.10.2 支付 180
17.10.3 查詢訂單 184
17.11 第二階段HTML5+CSS3+JS：
留言管理 190
17.11.1 工作任務(wù) 190
17.11.2 設(shè)計(jì)思路 191
17.11.3 實(shí)現(xiàn)（跟我做） 192
17.12 第二階段HTML5+CSS3+JS：
系統(tǒng)管理 197
17.12.1 工作任務(wù) 197
17.12.2 設(shè)計(jì)思路 198
17.12.3 實(shí)現(xiàn)（跟我做） 199
17.13 第三階段CSS樣式進(jìn)階+jQuery：
網(wǎng)站樣式優(yōu)化 204
17.13.1 頁(yè)頭和頁(yè)腳樣式 204
17.13.2 首頁(yè)優(yōu)化 213
17.13.3 表單樣式優(yōu)化 223
17.13.4 菜單樣式優(yōu)化 224
17.13.5 表格樣式優(yōu)化 225
17.14 第四階段移動(dòng)端頁(yè)面HTML5+
CSS3：移動(dòng)端頁(yè)面設(shè)計(jì) 227
17.14.1 移動(dòng)端首頁(yè)設(shè)計(jì) 227
17.14.2 移動(dòng)端表單設(shè)計(jì) 232
17.14.3 移動(dòng)端列表設(shè)計(jì) 236
17.14.4 自適應(yīng)頁(yè)面設(shè)計(jì) 241
書(shū)單推薦
