Web前端開發實戰

《Web前端開發實戰》是2019年10月電子工業出版社出版的圖書，作者是盛昀瑤、王繼水。

基本介紹

• 書名：Web前端開發實戰
• 作者：盛昀瑤、王繼水
• ISBN：9787121357763 
• 頁數：268
• 定價：￥49.8
• 出版社：電子工業出版社
• 出版時間：2019年10月
• 開本：16開

內容簡介

本書緊密圍繞Web前端工程師在製作網頁過程中的實際需要和應該掌握的技術，全面介紹如何使用HTML5、CSS3、JavaScript進行網頁設計和美化。本書著眼於實戰，講解的都是在開發時經常遇到的典型問題和案例，主要內容分為Web前端開發先備知識、構建HTML頁面、使用CSS美化頁面、使用JavaScript製作網頁特效、綜合實戰5個單元。本書優選了20個任務，大部分任務從提出實際問題開始，通過【任務描述】和【知識預覽】，詳細講述解決問題所需的知識點，並在【任務實現】過程中詳細講解實現步驟，同時展示代碼實例和相關截圖，最後通過【任務實訓】強化讀者對技能的掌握，使讀者循序漸進地體驗網頁製作過程。本書既可以作為高等院校、高等職業院校相關專業的“網頁設計與製作”課程的配套教材，也可以作為“1+X證書”中有關Web前端開發（初級）的技術參考用書。

目錄

單元1 Web前端開發先備知識 1

【任務1.1】揭秘Web前端開發 1

1.1.1 Web前端開發概述 1

1.1.2 Web標準 3

【任務1.2】使用前端工具開發第一個網頁 4

1.2.1 前端開發工具介紹 5

1.2.2 使用Dreamweaver CS6 5

1.2.3 使用Sublime Text 8

1.2.4 使用Dreamweaver CC 11

1.2.5 瀏覽器簡介 13

【任務1.3】建立正確的站點結構 15

1.3.1 前端頁面相關知識 15

1.3.2 站點的建立 17

1.3.3 站點的管理和發布 20

單元測試1 22

單元2 構建HTML頁面 23

【任務2.1】基本頁面構建 23

2.1.1 HTML介紹 23

2.1.2 HTML5網頁的基本結構和基本標籤的作用 24

2.1.3 創建簡單網頁 25

2.1.4 HTML頭部屬性設定 28

【任務2.2】新聞頁面構建 30

2.2.1 HTML基本標籤 30

2.2.2 新聞頁面製作 35

2.2.3 自閉合標籤 36

2.2.4 相對路徑和絕對路徑 37

【任務2.3】讀書頁面構建 39

2.3.1 超連結 41

2.3.2 讀書頁面製作 42

2.3.3 HTML中的命名規則 43

2.3.4 超連結中的一些屬性 44

【任務2.4】教育頁面構建 45

2.4.1 列表 47

2.4.2 教育頁面製作 49

【任務2.5】浪浪網首頁構建 52

2.5.1 表格 54

2.5.2 表格語義化 57

2.5.3 浪浪網首頁製作 59

【任務2.6】浪浪網註冊頁面構建 64

2.6.1 表單標籤 65

2.6.2 表單元素 67

2.6.3 表單分組 73

2.6.4 註冊頁面製作 74

2.6.5 HTML5新增的表單標籤 77

【任務2.7】浪浪網多媒體頁面構建 79

2.7.1 多媒體的使用 80

2.7.2 多媒體頁面製作 83

單元測試2 84

單元3 使用CSS美化頁面 86

【任務3.1】初識浪浪網頭部CSS 86

3.1.1 初識CSS 86

3.1.2 浪浪網頭部CSS設定 91

3.1.3 Google推薦的HTML和CSS格式規範 92

【任務3.2】新聞頁面的簡單美化 96

3.2.1 文字樣式 97

3.2.2 文本樣式 100

3.2.3 超連結樣式 103

3.2.4 框線樣式 105

3.2.5 背景樣式 108

3.2.6 新聞頁面的美化 112

3.2.7 字型設定 113

3.2.8 CSS3中新增的背景屬性和圓角框線屬性 115

【任務3.3】浪浪網首頁主體製作 119

3.3.1 CSS盒子模型和HTML元素 120

3.3.2 列表樣式 126

3.3.3 浮動布局 128

3.3.4 首頁主體製作 133

3.3.5 清除浮動的方法 143

【任務3.4】浪浪網導航欄製作 147

3.4.1 定位布局 147

3.4.2 z-index屬性 152

3.4.3 display屬性 154

3.4.4 導航欄製作 155

單元測試3 161

單元4 使用JavaScript製作網頁特效 163

【任務4.1】浪浪網下拉選單特效製作 163

4.1.1 JavaScript簡介 164

4.1.2 在網頁中引入JavaScript的方式 165

4.1.3 JavaScript的數據結構 166

4.1.4 JavaScript流程控制語句 168

4.1.5 函式 169

4.1.6 JavaScript常用事件 172

4.1.7 下拉選單特效 173

【任務4.2】浪浪網圖片輪換特效製作 176

4.2.1 DOM模型 177

4.2.2 數組 180

4.2.3 定時 181

4.2.4 計時 183

4.2.5 圖片輪換特效 183

4.2.6 Date對象 185

【任務4.3】浪浪網表單驗證特效製作 187

4.3.1 獲取表單元素值 187

4.3.2 JavaScript內置函式 189

4.3.3 正則表達式 190

4.3.4 表單驗證特效 192

4.3.5 HTML5的表單驗證 195

4.3.6 自定義驗證信息 196

【任務4.4】浪浪網其他特效製作 198

4.4.1 CSS樣式特效 200

4.4.2 window對象 201

4.4.3 選項卡特效 204

4.4.4 彈出廣告特效 206

4.4.5 頁面返回、前進、刷新特效 206

單元測試4 208

單元5 綜合實戰 209

【任務5.1】水源安檢企業網站首頁製作 209

5.1.1 頁面布局 210

5.1.2 代碼實現 213

【任務5.2】萬維電商網站首頁製作 233

5.2.1 常見的網站類型 233

5.2.2 頁面布局 236

5.2.3 代碼實現 240

附錄A Dreamweaver CC使用技巧 257

附錄B 單元測試答案 260,單元1 Web前端開發先備知識 1

【任務1.1】揭秘Web前端開發 1

1.1.1 Web前端開發概述 1

1.1.2 Web標準 3

【任務1.2】使用前端工具開發第一個網頁 4

1.2.1 前端開發工具介紹 5

1.2.2 使用Dreamweaver CS6 5

1.2.3 使用Sublime Text 8

1.2.4 使用Dreamweaver CC 11

1.2.5 瀏覽器簡介 13

【任務1.3】建立正確的站點結構 15

1.3.1 前端頁面相關知識 15

1.3.2 站點的建立 17

1.3.3 站點的管理和發布 20

單元測試1 22

單元2 構建HTML頁面 23

【任務2.1】基本頁面構建 23

2.1.1 HTML介紹 23

2.1.2 HTML5網頁的基本結構和基本標籤的作用 24

2.1.3 創建簡單網頁 25

2.1.4 HTML頭部屬性設定 28

【任務2.2】新聞頁面構建 30

2.2.1 HTML基本標籤 30

2.2.2 新聞頁面製作 35

2.2.3 自閉合標籤 36

2.2.4 相對路徑和絕對路徑 37

【任務2.3】讀書頁面構建 39

2.3.1 超連結 41

2.3.2 讀書頁面製作 42

2.3.3 HTML中的命名規則 43

2.3.4 超連結中的一些屬性 44

【任務2.4】教育頁面構建 45

2.4.1 列表 47

2.4.2 教育頁面製作 49

【任務2.5】浪浪網首頁構建 52

2.5.1 表格 54

2.5.2 表格語義化 57

2.5.3 浪浪網首頁製作 59

【任務2.6】浪浪網註冊頁面構建 64

2.6.1 表單標籤 65

2.6.2 表單元素 67

2.6.3 表單分組 73

2.6.4 註冊頁面製作 74

2.6.5 HTML5新增的表單標籤 77

【任務2.7】浪浪網多媒體頁面構建 79

2.7.1 多媒體的使用 80

2.7.2 多媒體頁面製作 83

單元測試2 84

單元3 使用CSS美化頁面 86

【任務3.1】初識浪浪網頭部CSS 86

3.1.1 初識CSS 86

3.1.2 浪浪網頭部CSS設定 91

3.1.3 Google推薦的HTML和CSS格式規範 92

【任務3.2】新聞頁面的簡單美化 96

3.2.1 文字樣式 97

3.2.2 文本樣式 100

3.2.3 超連結樣式 103

3.2.4 框線樣式 105

3.2.5 背景樣式 108

3.2.6 新聞頁面的美化 112

3.2.7 字型設定 113

3.2.8 CSS3中新增的背景屬性和圓角框線屬性 115

【任務3.3】浪浪網首頁主體製作 119

3.3.1 CSS盒子模型和HTML元素 120

3.3.2 列表樣式 126

3.3.3 浮動布局 128

3.3.4 首頁主體製作 133

3.3.5 清除浮動的方法 143

【任務3.4】浪浪網導航欄製作 147

3.4.1 定位布局 147

3.4.2 z-index屬性 152

3.4.3 display屬性 154

3.4.4 導航欄製作 155

單元測試3 161

單元4 使用JavaScript製作網頁特效 163

【任務4.1】浪浪網下拉選單特效製作 163

4.1.1 JavaScript簡介 164

4.1.2 在網頁中引入JavaScript的方式 165

4.1.3 JavaScript的數據結構 166

4.1.4 JavaScript流程控制語句 168

4.1.5 函式 169

4.1.6 JavaScript常用事件 172

4.1.7 下拉選單特效 173

【任務4.2】浪浪網圖片輪換特效製作 176

4.2.1 DOM模型 177

4.2.2 數組 180

4.2.3 定時 181

4.2.4 計時 183

4.2.5 圖片輪換特效 183

4.2.6 Date對象 185

【任務4.3】浪浪網表單驗證特效製作 187

4.3.1 獲取表單元素值 187

4.3.2 JavaScript內置函式 189

4.3.3 正則表達式 190

4.3.4 表單驗證特效 192

4.3.5 HTML5的表單驗證 195

4.3.6 自定義驗證信息 196

【任務4.4】浪浪網其他特效製作 198

4.4.1 CSS樣式特效 200

4.4.2 window對象 201

4.4.3 選項卡特效 204

4.4.4 彈出廣告特效 206

4.4.5 頁面返回、前進、刷新特效 206

單元測試4 208

單元5 綜合實戰 209

【任務5.1】水源安檢企業網站首頁製作 209

5.1.1 頁面布局 210

5.1.2 代碼實現 213

【任務5.2】萬維電商網站首頁製作 233

5.2.1 常見的網站類型 233

5.2.2 頁面布局 236

5.2.3 代碼實現 240

附錄A Dreamweaver CC使用技巧 257

附錄B 單元測試答案 260