Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）
定 價(jià)：49.8 元
- 作者：汪嬋嬋
- 出版時(shí)間：2019/8/1
- ISBN：9787121365638
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP312.8；TP393.092.2
- 頁(yè)碼：264
- 紙張：
- 版次：01
- 開(kāi)本：16開(kāi)
本書(shū)以“采用網(wǎng)頁(yè)新標(biāo)準(zhǔn)技術(shù)、突破傳統(tǒng)知識(shí)體系結(jié)構(gòu)、基于工作能力培養(yǎng)、置身真實(shí)工作情境”為標(biāo)準(zhǔn)，通過(guò)任務(wù)驅(qū)動(dòng)的教學(xué)方式講解HTML5、CSS3、JavaScript等Web前端開(kāi)發(fā)技術(shù)。本書(shū)包含“8個(gè)知識(shí)單元、18個(gè)項(xiàng)目任務(wù)、36個(gè)實(shí)戰(zhàn)案例、18個(gè)課后實(shí)訓(xùn)”，每個(gè)項(xiàng)目任務(wù)又以“知識(shí)準(zhǔn)備→實(shí)戰(zhàn)演練→強(qiáng)化訓(xùn)練→課后實(shí)訓(xùn)”為主線，介紹了Web基礎(chǔ)知識(shí)、HTML5語(yǔ)言基礎(chǔ)、HTML5新增標(biāo)簽及屬性、CSS3基礎(chǔ)、盒子模型、HTML5表單的應(yīng)用、網(wǎng)頁(yè)多媒體和JavaScript基礎(chǔ)。本書(shū)將Web前端開(kāi)發(fā)技術(shù)貫穿所有的項(xiàng)目任務(wù)和實(shí)訓(xùn)中，深入剖析了網(wǎng)頁(yè)布局及樣式美化的思路和方法，使學(xué)生掌握Web前端核心技術(shù)，啟發(fā)并引導(dǎo)學(xué)生自主學(xué)習(xí)，并形成良好的職業(yè)素養(yǎng)。本書(shū)附有源代碼、電子課件、教案等教學(xué)資源。本書(shū)既可以作為高等院校、高等職業(yè)院校“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程的教材，也可以作為前端與移動(dòng)開(kāi)發(fā)的培訓(xùn)教材，還可以供網(wǎng)頁(yè)制作、網(wǎng)站開(kāi)發(fā)、網(wǎng)頁(yè)編程、美工設(shè)計(jì)等人員參考。
汪嬋嬋，副教授，2011年畢業(yè)于同濟(jì)大學(xué)計(jì)算機(jī)技術(shù)工程碩士。工作十多年來(lái)，一直從事網(wǎng)站設(shè)計(jì)類課程的教學(xué)，積累了一定的經(jīng)驗(yàn)。曾主持省課題一項(xiàng)，市課題一項(xiàng)，院課題多項(xiàng)。參與多項(xiàng)省部級(jí)課題、市廳級(jí)課題和院級(jí)課題。主編教材兩本，副主編一本。
第一單元 Web基礎(chǔ)知識(shí)
任務(wù)1 搭建開(kāi)發(fā)環(huán)境 1
1.1 知識(shí)準(zhǔn)備 1
1.1.1 Web與Internet 1
1.1.2 Web的工作原理 2
1.1.3 Web頁(yè)的類型 3
1.1.4 HTML5概述 3
1.2 實(shí)戰(zhàn)演練——搭建開(kāi)發(fā)環(huán)境 3
1.2.1 網(wǎng)頁(yè)編輯軟件的安裝 3
1.2.2 瀏覽器的安裝 5
1.3 強(qiáng)化訓(xùn)練——?jiǎng)?chuàng)建第一個(gè)HTML5頁(yè)面 5
1.3.1 創(chuàng)建和管理站點(diǎn) 5
1.3.2 創(chuàng)建和保存HTML5文檔 7
1.4 課后實(shí)訓(xùn) 8
第二單元 HTML5語(yǔ)言基礎(chǔ)
任務(wù)2 文字與段落排版 10
2.1 知識(shí)準(zhǔn)備 10
2.1.1 HTML5文檔格式 10
2.1.2 標(biāo)簽的屬性 11
2.1.3 文本標(biāo)簽 12
2.1.4 分隔標(biāo)簽 14
2.1.5 序列標(biāo)簽 16
2.2 實(shí)戰(zhàn)演練——制作“科技館參觀須知”網(wǎng)頁(yè) 18
2.2.1 網(wǎng)頁(yè)效果圖 18
2.2.2 制作過(guò)程 19
2.2.3 代碼分析 19
2.3 強(qiáng)化訓(xùn)練——制作“我家菜館”點(diǎn)菜單網(wǎng)頁(yè) 20
2.3.1 網(wǎng)頁(yè)效果圖 20
2.3.2 制作過(guò)程 20
2.3.3 代碼分析 21
2.4 課后實(shí)訓(xùn) 21
任務(wù)3 圖像和超鏈接 22
3.1 知識(shí)準(zhǔn)備 22
3.1.1 圖像標(biāo)簽 22
3.1.2 絕對(duì)路徑和相對(duì)路徑 23
3.1.3 超鏈接標(biāo)簽 24
3.1.4 錨點(diǎn)鏈接 25
3.2 實(shí)戰(zhàn)演練——制作“網(wǎng)頁(yè)技術(shù)介紹”網(wǎng)頁(yè) 27
3.2.1 網(wǎng)頁(yè)效果圖 27
3.2.2 制作過(guò)程 27
3.2.3 代碼分析 29
3.3 強(qiáng)化訓(xùn)練——制作“文章故事網(wǎng)”網(wǎng)頁(yè) 29
3.3.1 網(wǎng)頁(yè)效果圖 29
3.3.2 制作過(guò)程 30
3.3.3 代碼分析 31
3.4 課后實(shí)訓(xùn) 31
第三單元 HTML5新增標(biāo)簽及屬性
任務(wù)4 結(jié)構(gòu)標(biāo)簽和分組標(biāo)簽 32
4.1 知識(shí)準(zhǔn)備 32
4.1.1 結(jié)構(gòu)標(biāo)簽 32
4.1.2 分組標(biāo)簽 39
4.2 實(shí)戰(zhàn)演練——制作“唐詩(shī)欣賞”網(wǎng)頁(yè) 41
4.2.1 網(wǎng)頁(yè)效果圖 41
4.2.2 制作過(guò)程 41
4.2.3 代碼分析 44
4.3 強(qiáng)化訓(xùn)練——制作“溫州地標(biāo)性建筑”網(wǎng)頁(yè) 45
4.3.1 網(wǎng)頁(yè)效果圖 45
4.3.2 制作過(guò)程 45
4.3.3 代碼分析 47
4.4 課后實(shí)訓(xùn) 48
任務(wù)5 頁(yè)面交互標(biāo)簽、層次語(yǔ)義標(biāo)簽和全局屬性 48
5.1 知識(shí)準(zhǔn)備 48
5.1.1 頁(yè)面交互標(biāo)簽 48
5.1.2 層次語(yǔ)義標(biāo)簽 51
5.1.3 全局屬性 53
5.2 實(shí)戰(zhàn)演練——制作“書(shū)評(píng)網(wǎng)”網(wǎng)頁(yè) 56
5.2.1 網(wǎng)頁(yè)效果圖 56
5.2.2 制作過(guò)程 57
5.2.3 代碼分析 60
5.3 強(qiáng)化訓(xùn)練——制作“面試應(yīng)答技巧”網(wǎng)頁(yè) 60
5.3.1 網(wǎng)頁(yè)效果圖 60
5.3.2 制作過(guò)程 61
5.3.3 代碼分析 63
5.4 課后實(shí)訓(xùn) 63
第四單元 CSS3基礎(chǔ)
任務(wù)6 標(biāo)記選擇器和類選擇器 65
6.1 知識(shí)準(zhǔn)備 65
6.1.1 CSS簡(jiǎn)介 65
6.1.2 CSS樣式規(guī)則 65
6.1.3 CSS樣式的引入 66
6.1.4 CSS樣式的優(yōu)先級(jí) 68
6.1.5 標(biāo)記選擇器 68
6.1.6 類選擇器 69
6.2 實(shí)戰(zhàn)演練——制作“美化文章”網(wǎng)頁(yè) 70
6.2.1 網(wǎng)頁(yè)效果圖 70
6.2.2 制作過(guò)程 70
6.2.3 代碼分析 72
6.3 強(qiáng)化訓(xùn)練——制作“圖文混排”網(wǎng)頁(yè) 72
6.3.1 網(wǎng)頁(yè)效果圖 72
6.3.2 制作過(guò)程 73
6.3.3 代碼分析 74
6.4 課后實(shí)訓(xùn) 75
任務(wù)7 鏈接偽類和CSS樣式面板 75
7.1 知識(shí)準(zhǔn)備 75
7.1.1 鏈接偽類 75
7.1.2 CSS樣式面板 77
7.2 實(shí)戰(zhàn)演練——制作“散文欣賞”網(wǎng)頁(yè) 77
7.2.1 網(wǎng)頁(yè)效果圖 77
7.2.2 制作過(guò)程 78
7.2.3 代碼分析 85
7.3 強(qiáng)化訓(xùn)練——制作“熱點(diǎn)新聞”列表 85
7.3.1 網(wǎng)頁(yè)效果圖 85
7.3.2 制作過(guò)程 86
7.3.3 代碼分析 91
7.4 課后實(shí)訓(xùn) 91
任務(wù)8 id選擇器、偽選擇器和表格樣式 92
8.1 知識(shí)準(zhǔn)備 92
8.1.1 id選擇器 92
8.1.2 偽選擇器 93
8.1.3 表格 94
8.2 實(shí)戰(zhàn)演練——制作“鞋子尺碼對(duì)照單”網(wǎng)頁(yè) 96
8.2.1 網(wǎng)頁(yè)效果圖 96
8.2.2 制作過(guò)程 96
8.2.3 代碼分析 98
8.3 強(qiáng)化訓(xùn)練——制作“嬰兒身高體重標(biāo)準(zhǔn)表”網(wǎng)頁(yè) 99
8.3.1 網(wǎng)頁(yè)效果圖 99
8.3.2 制作過(guò)程 100
8.3.3 代碼分析 102
8.4 課后實(shí)訓(xùn) 103
任務(wù)9 復(fù)合選擇器、通配符選擇器 103
9.1 知識(shí)準(zhǔn)備 103
9.1.1 復(fù)合選擇器 103
9.1.2 通配符選擇器 106
9.1.3 同時(shí)應(yīng)用多個(gè)樣式 106
9.2 實(shí)戰(zhàn)演練——制作“寓言故事”網(wǎng)頁(yè) 107
9.2.1 網(wǎng)頁(yè)效果圖 107
9.2.2 制作過(guò)程 108
9.2.3 代碼分析 110
9.3 強(qiáng)化訓(xùn)練——制作“詩(shī)詞欣賞”網(wǎng)頁(yè) 110
9.3.1 網(wǎng)頁(yè)效果圖 110
9.3.2 制作過(guò)程 111
9.3.3 代碼分析 116
9.4 課后實(shí)訓(xùn) 116
第五單元 盒子模型
任務(wù)10 盒子模型及應(yīng)用 119
10.1 知識(shí)準(zhǔn)備 119
10.1.1 盒子模型的概念 119
10.1.2 邊框的設(shè)置 120
10.1.3 內(nèi)邊距的設(shè)置 125
10.1.4 外邊距的設(shè)置 126
10.2 實(shí)戰(zhàn)演練——制作“古詩(shī)文欣賞”網(wǎng)頁(yè) 128
10.2.1 網(wǎng)頁(yè)效果圖 128
10.2.2 制作過(guò)程 128
10.2.3 代碼分析 129
10.3 強(qiáng)化訓(xùn)練——制作“散文賞析”網(wǎng)頁(yè) 130
10.3.1 網(wǎng)頁(yè)效果圖 130
10.3.2 制作過(guò)程 130
10.3.3 代碼分析 132
10.4 課后實(shí)訓(xùn) 133
任務(wù)11 元素的浮動(dòng) 133
11.1 知識(shí)準(zhǔn)備 133
11.1.1 元素的類型及轉(zhuǎn)換 133
11.1.2 overflow屬性 135
11.1.3 元素的浮動(dòng) 136
11.1.4 清除浮動(dòng) 139
11.2 實(shí)戰(zhàn)演練——制作“網(wǎng)站導(dǎo)航條”網(wǎng)頁(yè) 144
11.2.1 網(wǎng)頁(yè)效果圖 144
11.2.2 制作過(guò)程 145
11.2.3 代碼分析 146
11.3 強(qiáng)化訓(xùn)練——制作“浪漫花語(yǔ)百科網(wǎng)”網(wǎng)頁(yè) 146
11.3.1 網(wǎng)頁(yè)效果圖 146
11.3.2 制作過(guò)程 146
11.3.3 代碼分析 150
11.4 課后實(shí)訓(xùn) 151
任務(wù)12 元素的定位 152
12.1 知識(shí)準(zhǔn)備 152
12.1.1 元素的定位模式與邊偏移 152
12.1.2 靜態(tài)定位 152
12.1.3 相對(duì)定位 152
12.1.4 絕對(duì)定位 154
12.1.5 固定定位 156
12.1.6 z-index層疊等級(jí)屬性 156
12.2 實(shí)戰(zhàn)演練——制作“旅游景點(diǎn)推薦網(wǎng)”banner 157
12.2.1 網(wǎng)頁(yè)效果圖 157
12.2.2 制作過(guò)程 157
12.2.3 代碼分析 159
12.3 強(qiáng)化訓(xùn)練——制作“個(gè)人博客首頁(yè)”網(wǎng)頁(yè) 160
12.3.1 網(wǎng)頁(yè)效果圖 160
12.3.2 制作過(guò)程 160
12.3.3 代碼分析 163
12.4 課后實(shí)訓(xùn) 164
任務(wù)13 陰影與漸變屬性 164
13.1 知識(shí)準(zhǔn)備 164
13.1.1 box-shadow屬性 164
13.1.2 box-sizing屬性 165
13.1.3 線性漸變 167
13.1.4 徑向漸變 168
13.1.5 重復(fù)漸變 168
13.1.6 Web字體圖標(biāo) 170
13.2 實(shí)戰(zhàn)演練——制作“網(wǎng)站廣告欄”網(wǎng)頁(yè) 171
13.2.1 網(wǎng)頁(yè)效果圖 171
13.2.2 制作過(guò)程 171
13.2.3 代碼分析 173
13.3 強(qiáng)化訓(xùn)練——制作“旅游攻略網(wǎng)”網(wǎng)頁(yè) 174
13.3.1 網(wǎng)頁(yè)效果圖 174
13.3.2 制作過(guò)程 175
13.3.3 代碼分析 179
13.4 課后實(shí)訓(xùn) 181
任務(wù)14 過(guò)渡與變形屬性 181
14.1 知識(shí)準(zhǔn)備 181
14.1.1 過(guò)渡屬性 181
14.1.2 變形屬性 183
14.2 實(shí)戰(zhàn)演練——制作“產(chǎn)品展示”網(wǎng)頁(yè) 184
14.2.1 網(wǎng)頁(yè)效果圖 184
14.2.2 制作過(guò)程 185
14.2.3 代碼分析 186
14.3 強(qiáng)化訓(xùn)練——制作“商品評(píng)論”網(wǎng)頁(yè) 187
14.3.1 網(wǎng)頁(yè)效果圖 187
14.3.2 制作過(guò)程 187
14.3.3 代碼分析 191
14.4 課后實(shí)訓(xùn) 191
第六單元 HTML5表單的應(yīng)用
任務(wù)15 表單與input元素 194
15.1 知識(shí)準(zhǔn)備 194
15.1.1 認(rèn)識(shí)表單 194
15.1.2 創(chuàng)建表單 194
15.1.3 input元素及屬性 195
15.2 實(shí)戰(zhàn)演練——制作“登錄界面”網(wǎng)頁(yè) 196
15.2.1 網(wǎng)頁(yè)效果圖 196
15.2.2 制作過(guò)程 196
15.2.3 代碼分析 198
15.3 強(qiáng)化訓(xùn)練——制作“簡(jiǎn)歷”表單 199
15.3.1 網(wǎng)頁(yè)效果圖 199
15.3.2 制作過(guò)程 200
15.3.3 代碼分析 203
15.4 課后實(shí)訓(xùn) 204
任務(wù)16 其他表單元素與表單驗(yàn)證 204
16.1 知識(shí)準(zhǔn)備 204
16.1.1 其他表單元素 204
16.1.2 表單驗(yàn)證方法 207
16.1.3 正則表達(dá)式 208
16.2 實(shí)戰(zhàn)演練——制作“商品訂購(gòu)”表單 210
16.2.1 網(wǎng)頁(yè)效果圖 210
16.2.2 制作過(guò)程 210
16.2.3 代碼分析 213
16.3 強(qiáng)化訓(xùn)練——制作“會(huì)員注冊(cè)”表單 213
16.3.1 網(wǎng)頁(yè)效果圖 213
16.3.2 制作過(guò)程 214
16.3.3 代碼分析 216
16.4 課后實(shí)訓(xùn) 217
第七單元 網(wǎng)頁(yè)多媒體
任務(wù)17 視頻與音頻 218
17.1 知識(shí)準(zhǔn)備 218
17.1.1 嵌入視頻 218
17.1.2 嵌入音頻 219
17.1.3 ＜source＞標(biāo)簽 219
17.1.4 視頻與音頻的DOM操作 220
17.2 實(shí)戰(zhàn)演練——制作“音樂(lè)播放器”網(wǎng)頁(yè) 221
17.2.1 網(wǎng)頁(yè)效果圖 221
17.2.2 制作過(guò)程 221
17.2.3 代碼分析 223
17.3 強(qiáng)化訓(xùn)練——制作“視頻播放”網(wǎng)頁(yè) 223
17.3.1 網(wǎng)頁(yè)效果圖 223
17.3.2 制作過(guò)程 224
17.3.3 代碼分析 225
17.4 課后實(shí)訓(xùn) 225
第八單元 JavaScript基礎(chǔ)
任務(wù)18 JavaScript的應(yīng)用 226
18.1 知識(shí)準(zhǔn)備 226
18.1.1 JavaScript簡(jiǎn)介 226
18.1.2 JavaScript語(yǔ)言基礎(chǔ) 228
18.1.3 JavaScript函數(shù) 230
18.1.4 事件及事件驅(qū)動(dòng) 231
18.1.5 JavaScript對(duì)象 233
18.1.6 BOM對(duì)象 238
18.1.7 DOM對(duì)象 240
18.2 實(shí)戰(zhàn)演練——制作“商品精選模塊”網(wǎng)頁(yè) 243
18.2.1 網(wǎng)頁(yè)效果圖 243
18.2.2 制作過(guò)程 243
18.2.3 代碼分析 245
18.3 強(qiáng)化訓(xùn)練——制作“焦點(diǎn)圖廣告”網(wǎng)頁(yè) 246
18.3.1 網(wǎng)頁(yè)效果圖 246
18.3.2 制作過(guò)程 246
18.3.3 代碼分析 250
18.4 課后實(shí)訓(xùn) 251
書(shū)單推薦
