網頁設計與網站建設實例教程（微課版）

目錄

 

第 1 章  HTML：網頁的起點 1

 1.1 網頁的基本概念 1

1.1.1 Web  1

1.1.2 網頁與網站 2

 1.2 網頁核心三要素 4

1.2.1 HTML5概述 4

1.2.2 CSS  7

1.2.3 JavaScript腳本語言 8

 1.3 編寫第一個HTML5頁面 8

1.3.1 使用HTML5編寫簡單的Web頁面 8

1.3.2 使用HTML5的結構化元素 10

1.3.3 使用CSS美化HTML5文檔 13

 1.4 本章小結 15

 1.5 練習題 15

1.5.1 單項選擇題 15

1.5.2 填空題 15

1.5.3 簡答題 15

第 2 章  HTML5入門 16

 2.1 HTML5基礎 16

2.1.1 HTML5結構 16

2.1.2 HTML5語法 18

 2.2 HTML5元素 21

2.2.1 語義結構化元素 22

2.2.2 內容交互元素 26

2.2.3 HTML5廢除的元素 28

 2.3 HTML5屬性 29

2.3.1 HTML屬性 29

2.3.2 HTML5新增的全局屬性 31

2.3.3 HTML5廢除的屬性 31

 2.4 HTML5表格 32

 2.5 本章小結 39

 2.6 練習題 40

2.6.1 單項選擇題 40

2.6.2 填空題 40

2.6.3 簡答題 40

第 3 章  文字和段落排版設計 41

 3.1 文本基礎結構標簽 41

3.1.1 標題標簽‌ 41

3.1.2 段落與分隔標簽‌ 42

 3.2 文本格式化標簽 44

3.2.1 樣式修飾類 44

3.2.2 特殊文本定位‌ 46

3.2.3 定義文字效果 47

 3.3 容器布局標簽 50

 3.4 語義化標簽 52

3.4.1 引用標識‌ 52

3.4.2 預格式化文本‌ 54

3.4.3 代碼標識‌ 56

 3.5 列表標簽 57

 3.6 本章小結 60

 3.7 練習題 60

3.7.1 單項選擇題 60

3.7.2 填空題 61

3.7.3 簡答題 61

第 4 章  HTML5表單 62

 4.1 表單概述 62

 4.2 表單基礎結構 63

4.2.1 <form>元素 63

4.2.2 <input>元素 66

4.2.3 <fieldset>元素 68

4.2.4 <textarea>元素 68

4.2.5 <select>和<option>元素 70

 4.3 HTML5表單新增內容 72

4.3.1 新增表單屬性 72

4.3.2 <input>新增輸入類型 76

4.3.3 新增表單元素 81

 4.4 表單驗證機制 86

4.4.1 即時反饋型驗證 86

4.4.2 選擇性忽略型驗證 86

4.4.3 手動觸發型驗證 87

 4.5 本章小結 88

 4.6 練習題 88

4.6.1 單項選擇題 88

4.6.2 填空題 89

4.6.3 簡答題 89

第 5 章  HTML5超鏈接技術解析 90

 5.1 超鏈接簡介 90

 5.2 基礎類型鏈接 92

5.2.1 文本超鏈接 92

5.2.2 圖像超鏈接 93

 5.3 功能型鏈接 95

5.3.1 錨點鏈接 96

5.3.2 下載鏈接 98

 5.4 協議擴展鏈接 100

 5.5 特殊狀態鏈接 102

 5.6 SEO優化鏈接 103

 5.7 本章小結 104

 5.8 練習題 104

5.8.1 單項選擇題 104

5.8.2 填空題 105

5.8.3 簡答題 105

第 6 章  HTML5多媒體技術 106

 6.1 多媒體技術簡介 106

 6.2 <audio>音頻標簽 107

 6.3 <video>視頻標簽 109

 6.4 <embed>元素 111

 6.5 <canvas>繪圖技術 114

6.5.1 <canvas>環境 114

6.5.2 <canvas>繪制2D圖形 116

6.5.3 <canvas>視覺增強 127

6.5.4 圖像處理 131

6.5.5 繪制文本 134

 6.6 <svg>矢量圖形 137

 6.7 本章小結 140

 6.8 練習題 140

6.8.1 單項選擇題 140

6.8.2 填空題 141

6.8.3 簡答題 141

第 7 章  CSS3概述 142

 7.1 CSS的歷史變遷 142

7.1.1 CSS產生的原因 142

7.1.2 CSS的發展歷史 143

7.1.3 Hello CSS World 145

7.1.4 為文檔應用CSS的方式 146

 7.2 CSS3基本用法 147

7.2.1 CSS3樣式概述 147

7.2.2 應用CSS3樣式 148

7.2.3 CSS3樣式表 149

7.2.4 CSS3代碼註釋 150

7.2.5 CSS3代碼格式化 151

7.2.6 CSS3繼承性 151

7.2.7 CSS3層疊性 152

 7.3 本章小結 153

 7.4 練習題 154

7.4.1 單項選擇題 154

7.4.2 填空題 154

7.4.3 簡答題 154

第 8 章  CSS3選擇器 155

 8.1 選擇器的用法 155

 8.2 屬性選擇器 156

 8.3 結構偽類選擇器 157

8.3.1 CSS中的偽類選擇器及偽元素 157

8.3.2 :root、:not、:empty和:target 158

8.3.3 :first-child、:last-child、:nth-child(n)和:nth-last-child(n) 159

8.3.4 :first-of-type和:last-of-type 161

8.3.5 :nth-of-type(n)和:nth-last-of-type(n) 162

8.3.6 :only-child 163

 8.4 UI元素狀態偽類選擇器 164

8.4.1 UI元素狀態偽類選擇器的語法 164

8.4.2 E:hover、E:active和E:focus 165

8.4.3 E:enabled與E:disabled 166

8.4.4 E:read-only與E:read-write 167

8.4.5 E:checked、E:default和E:indeterminate 167

8.4.6 E::selection 169

8.4.7 E:invalid與E:valid 169

8.4.8 E:required與E:optional 170

8.4.9 E:in-range與E:out-of-range 171

 8.5 本章小結 171

 8.6 練習題 172

8.6.1 單項選擇題 172

8.6.2 填空題 172

8.6.3 簡答題 172

第 9 章  CSS3文本屬性 173

 9.1 CSS3文本屬性概述 173

 9.2 設計文本陰影 174

9.2.1 text-shadow屬性的使用方法 174

9.2.2 一般文字陰影效果 174

9.2.3 文字凹凸效果 175

9.2.4 為文本指定多個陰影 176

 9.3 設置文本樣式 177

9.3.1 text-stroke屬性 177

9.3.2 文本溢出 178

9.3.3 強制換行 180

9.3.4 嵌入字體 181

9.3.5 字體尺寸 182

 9.4 本章小結 185

 9.5 練習題 186

9.5.1 單項選擇題 186

9.5.2 填空題 186

9.5.3 簡答題 186

第 10 章  高級CSS操控 187

 10.1 背景 187

10.1.1 background-color屬性 188

10.1.2 background-image屬性 188

10.1.3 background-position屬性 189

10.1.4 background-size屬性 189

10.1.5 background-origin屬性 190

10.1.6 background-repeat屬性 190

10.1.7 background-clip屬性 190

10.1.8 background-attachment屬性 190

 10.2 邊框與邊距 192

10.2.1 盒子模型 192

10.2.2 border屬性 192

10.2.3 padding屬性 194

10.2.4 margin屬性 195

10.2.5 border-radius屬性 196

10.2.6 border-image屬性 197

10.2.7 box-shadow屬性 198

 10.3 變形處理 199

10.3.1 旋轉 200

10.3.2 傾斜 202

10.3.3 縮放 203

10.3.4 移動 204

 10.4 設計動畫 205

10.4.1 過渡動畫 206

10.4.2 關鍵幀動畫 210

 10.5 本章小結 217

 10.6 練習題 217

10.6.1 單項選擇題 217

10.6.2 填空題 218

10.6.3 簡答題 218

第 11 章  網頁布局 219

 11.1 多欄布局 219

11.1.1 設置列寬和列數 220

11.1.2 設置列間距 222

11.1.3 設置列邊框 223

11.1.4 設置跨列標題 223

11.1.5 統一列高 224

 11.2 盒布局 225

11.2.1 CSS盒子模型 225

11.2.2 使用盒布局 226

11.2.3 盒布局和多欄布局的區別 228

 11.3 彈性盒布局 229

11.3.1 對多個元素使用flex屬性 229

11.3.2 設置元素的顯示順序 230

11.3.3 設置元素的排列方向 231

11.3.4 定義寬高自適應 232

11.3.5 消除空白 233

11.3.6 靈活使用flex屬性 234

11.3.7 控制換行方向 239

 11.4 彈性盒布局的原理 240

11.4.1 彈性盒布局概述 240

11.4.2 justify-content屬性 240

11.4.3 align-items屬性 241

 11.5 本章小結 242

 11.6 練習題 242

11.6.1 單項選擇題 242

11.6.2 填空題 243

11.6.3 簡答題 243

第 12 章  構建企業網站 244

 12.1 企業網站設計指南 244

12.1.1 網站的開發流程 244

12.1.2 企業網站的主要功能 246

12.1.3 色彩搭配與風格設計 246

 12.2 企業網站的構建過程 247

12.2.1 前期準備工作 247

12.2.2 組織網頁結構 248

12.2.3 設計<header>元素 249

12.2.4 設計<aside>元素 250

12.2.5 設計頁面主體部分 251

12.2.6 設計版權信息 256

 12.3 測試網頁 256

 12.4 本章小結 257

 12.5 練習題 257

12.5.1 單項選擇題 257

12.5.2 填空題 258

12.5.3 簡答題 258

參考文獻   259