HTML5+CSS3網頁設計與製作案例課堂（第3版）

目    錄

第1章  新一代Web前端技術 1

1.1  HTML的基本概念 2

1.1.1  HTML的發展歷程 2

1.1.2  什麽是HTML 2

1.2  HTML 5的優勢 3

1.2.1  解決了跨瀏覽器問題 3

1.2.2  新增了多個新特性 3

1.2.3  用戶優先的原則 3

1.2.4  化繁為簡的優勢 4

1.3  HTML 5網頁的開發環境 5

1.3.1  使用記事本手工編寫HTML 5 5

1.3.2  使用WebStorm編寫HTML文件 5

1.4  使用瀏覽器查看HTML 5文件 8

1.4.1  查看頁面效果 8

1.4.2  查看源代碼 8

1.5  疑難解惑 9

1.6  跟我學上機 9

第2章  HTML 5網頁的文檔結構 11

2.1  HTML 5文件的基本結構 12

2.1.1  HTML 5頁面的整體結構 12

2.1.2  HTML 5新增的結構標記 12

2.2  HTML 5基本標記詳解 13

2.2.1  文檔類型說明 13

2.2.2  HTML標記 13

2.2.3  頭標記 13

2.2.4  主體標記 16

2.2.5  頁面註釋標記 17

2.3  HTML 5語法的變化 17

2.3.1  標記不再區分大小寫 17

2.3.2  允許屬性值不使用引號 18

2.3.3  允許部分屬性的值省略 18

2.4  疑難解惑 19

2.5  跟我學上機 19

第3章  HTML 5網頁中的文本、超鏈接和圖像 21

3.1  標題 22

3.1.1  標題標記 22

3.1.2  標題的對齊方式 23

3.2　設置文字格式 24

3.2.1  文字的字體、字號和顏色 24

3.2.2　文字的粗體、斜體和下劃線 26

3.2.3　文字的上標和下標 27

3.3  設置段落格式 28

3.3.1　段落標記 28

3.3.2　段落的換行標記 28

3.3.3　段落的原格式標記 29

3.4  文字列表 30

3.4.1  無序列表 30

3.4.2  有序列表 31

3.4.3  建立不同類型的無序列表 31

3.4.4  建立不同類型的有序列表 32

3.4.5  自定義列表 33

3.4.6  建立嵌套列表 34

3.5  超鏈接標記 35

3.5.1  設置文本和圖片的超鏈接 35

3.5.2  創建指向不同目標類型的超鏈接 36

3.5.3  設置以新窗口顯示超鏈接頁面 37

3.5.4  鏈接到同一頁面的不同位置 38

3.6  圖像熱點鏈接 38

3.7  在網頁中插入圖像 40

3.8　編輯網頁中的圖像 41

3.8.1　設置圖像的大小和邊框 41

3.8.2　設置圖像的間距和對齊方式 43

3.8.3  設置圖像的替換文字和提示文字 44

3.9  疑難解惑 45

3.10  跟我學上機 46

第4章  使用HTML 5創建表格 47

4.1  表格的基本結構 48

4.2  創建表格 49

4.2.1  創建普通表格 49

4.2.2  創建一個帶有標題的表格 50

4.3  編輯表格 50

4.3.1  定義表格的邊框類型 51

4.3.2  定義表格的表頭 51

4.3.3  設置表格背景 52

4.3.4  設置單元格的背景 53

4.3.5  合並單元格 54

4.3.6  表格的分組 57

4.3.7  設置單元格的行高與列寬 58

4.4  完整的表格標記 59

4.5  設置懸浮變色的表格 60

4.6  疑難解惑 63

4.7  跟我學上機 63

第5章  使用HTML 5創建表單 65

5.1  表單概述 66

5.2  表單基本元素的使用 66

5.2.1  單行文本輸入框 66

5.2.2  多行文本輸入框 67

5.2.3  密碼域 68

5.2.4  單選按鈕 68

5.2.5  復選框 69

5.2.6  列表框 70

5.2.7  普通按鈕 71

5.2.8  提交按鈕 72

5.2.9  重置按鈕 73

5.3  表單高級元素的使用 74

5.3.1  url屬性的使用 74

5.3.2  email屬性的使用 74

5.3.3  日期和時間屬性的使用 75

5.3.4  number屬性的使用 76

5.3.5  range屬性的使用 77

5.3.6  required屬性的使用 77

5.4  疑難解惑 78

5.5  跟我學上機 78

第6章  HTML 5中的多媒體 81

6.1  audio標記 82

6.1.1  audio標記概述 82

6.1.2  audio標記的屬性 83

6.1.3  瀏覽器支持audio標記的情況 83

6.2  在網頁中添加音頻文件 83

6.3  video標記 85

6.3.1  video標記概述 85

6.3.2  video標記的屬性 86

6.3.3  瀏覽器對video標記的支持情況 86

6.4  在網頁中添加視頻文件 87

6.5  疑難解惑 88

6.6  跟我學上機 89

第7章  使用HTML 5繪制圖形 91

7.1  添加canvas的步驟 92

7.2  繪制基本形狀 92

7.2.1  繪制矩形 92

7.2.2  繪制圓形 93

7.2.3  使用moveTo與lineTo繪制直線 94

7.2.4  使用bezierCurveTo繪制貝濟埃曲線 96

7.3  繪制漸變圖形 97

7.3.1  繪制線性漸變 97

7.3.2  繪制徑向漸變 98

7.4  繪制變形圖形 99

7.4.1  繪制平移效果的圖形 100

7.4.2  繪制縮放效果的圖形 100

7.4.3  繪制旋轉效果的圖形 101

7.4.4  繪制組合效果的圖形 103

7.4.5  繪制帶陰影的圖形 104

7.5  使用圖像 105

7.5.1  繪制圖像 105

7.5.2  平鋪圖像 106

7.5.3  裁剪圖像 108

7.5.4  圖像的像素化處理 109

7.6  繪制文字 111

7.7  疑難解惑 113

7.8  跟我學上機 113

第8章  CSS 3概述與基本語法 115

8.1  CSS 3概述 116

8.1.1  CSS 3的功能 116

8.1.2  瀏覽器與CSS 3 116

8.1.3  CSS 3的基礎語法 117

8.1.4  CSS 3的常用單位 117

8.2  在HTML 5中使用CSS 3的方法 122

8.2.1  行內樣式 122

8.2.2  內嵌樣式 123

8.2.3  鏈接樣式 124

8.2.4  導入樣式 125

8.2.5  優先級問題 126

8.3  CSS 3的常用選擇器 128

8.3.1  標記選擇器 128

8.3.2  類選擇器 129

8.3.3  ID選擇器 130

8.3.4  全局選擇器 131

8.3.5  組合選擇器 132

8.3.6  選擇器繼承 132

8.3.7  偽類選擇器 133

8.4  選擇器聲明 134

8.4.1  集體聲明 134

8.4.2  多重嵌套聲明 135

8.5  疑難解惑 136

8.6  跟我學上機 136

第9章  使用CSS 3美化網頁字體與段落 139

9.1  美化網頁文字 140

9.1.1  設置文字的字體 140

9.1.2  設置文字的字號 141

9.1.3  設置字體風格 142

9.1.4  設置加粗字體 143

9.1.5  將小寫字母轉換為大寫字母 144

9.1.6  設置字體的復合屬性 144

9.1.7  設置字體顏色 145

9.2  設置文本的高級樣式 146

9.2.1  設置文本陰影效果 146

9.2.2  設置文本的溢出效果 147

9.2.3  設置文本的控制換行 148

9.2.4  保持字體尺寸不變 149

9.3  美化網頁中的段落 150

9.3.1  設置單詞之間的間隔 150

9.3.2  設置字符之間的間隔 151

9.3.3  設置文字的修飾效果 152

9.3.4  設置垂直對齊方式 153

9.3.5  轉換文本的大小寫 154

9.3.6  設置文本的水平對齊方式 155

9.3.7  設置文本的縮進效果 157

9.3.8  設置文本的行高 157

9.3.9  文本的空白處理 158

9.3.10  文本的反排 160

9.4  疑難解惑 161

9.5  跟我學上機 161

第10章  使用CSS 3美化網頁圖片 163

10.1  圖片縮放 164

10.1.1  通過描述標記width和height縮放圖片 164

10.1.2  使用CSS 3中的max-width和max-height縮放圖片 164

10.1.3  使用CSS 3中的width和height縮放圖片 165

10.2  設置圖片的對齊方式 166

10.2.1  設置圖片的橫向對齊 166

10.2.2  設置圖片的縱向對齊 167

10.3  圖文混排 169

10.3.1  設置文字環繞效果 169

10.3.2  設置圖片與文字的間距 170

10.4  疑難解惑 171

10.5  跟我學上機 172

第11章  使用CSS 3美化網頁背景與邊框 173

11.1  使用CSS 3美化背景 174

11.1.1  設置背景顏色 174

11.1.2  設置背景圖片 175

11.1.3  背景圖片重復 176

11.1.4  背景圖片顯示 177

11.1.5  背景圖片的位置 179

11.1.6  背景圖片的大小 180

11.1.7  背景的顯示區域 181

11.1.8  背景圖像的裁剪區域 182

11.1.9  背景復合屬性 183

11.2  使用CSS 3美化邊框 184

11.2.1  設置邊框的樣式 185

11.2.2  設置邊框的顏色 186

11.2.3  設置邊框的線寬 187

11.2.4  設置邊框的復合屬性 189

11.3  設置邊框的圓角效果 189

11.3.1  設置圓角邊框 190

11.3.2  指定兩個圓角半徑 190

11.3.3  繪制四個不同角的圓角邊框 191

11.3.4  繪制不同種類的邊框 193

11.4  疑難解惑 194

11.5  跟我學上機 195

第12章  使用CSS 3美化超級鏈接和光標 197

12.1  使用CSS 3來美化超級鏈接 198

12.1.1  改變超級鏈接的基本樣式 198

12.1.2  設置帶有提示信息的超級鏈接 199

12.1.3  設置超級鏈接的背景圖 200

12.1.4  設置超級鏈接的按鈕效果 201

12.2  使用CSS 3美化光標特效 202

12.2.1  使用CSS 3控制光標箭頭 202

12.2.2  設置光標變幻式超鏈接 204

12.3  設計一個簡單的導航欄 205

12.4  疑難解惑 206

12.5  跟我學上機 207

第13章  使用CSS 3美化表格和表單 209

13.1  美化表格的樣式 210

13.1.1  設置表格邊框的樣式 210

13.1.2  設置表格邊框的寬度 212

13.1.3  設置表格邊框的顏色 213

13.2  美化表單樣式 214

13.2.1  美化表單中的元素 214

13.2.2  美化提交按鈕 216

13.2.3  美化下拉菜單 217

13.3  疑難解惑 219

13.4  跟我學上機 219

第14章  使用CSS 3美化網頁菜單 221

14.1 使用CSS 3美化項目列表 222

14.1.1  美化無序列表 222

14.1.2  美化有序列表 223

14.1.3  美化自定義列表 225

14.1.4  製作圖片列表 226

14.1.5  縮進圖片列表 227

14.1.6  列表的復合屬性 228

14.2  使用CSS 3製作網頁菜單 230

14.2.1  製作無須表格的菜單 230

14.2.2  製作水平和垂直菜單 232

14.3  疑難解惑 234

14.4  跟我學上機 234

第15章  使用濾鏡美化網頁元素 237

15.1  濾鏡概述 238

15.2  設置基本濾鏡效果 239

15.2.1  高斯模糊濾鏡 239

15.2.2  明暗度濾鏡 240

15.2.3  對比度濾鏡 241

15.2.4  陰影濾鏡 242

15.2.5  灰度濾鏡 243

15.2.6  反相濾鏡 244

15.2.7  透明度濾鏡 244

15.2.8  飽和度濾鏡 245

15.3  使用濾鏡製作動畫效果 246

15.4  疑難解惑 247

15.5  跟我學上機 248

第16章  CSS 3中的動畫效果 249

16.1  瞭解過渡效果 250

16.2  添加過渡效果 250

16.3  瞭解動畫效果 252

16.4  添加動畫效果 253

16.5  瞭解2D轉換效果 254

16.6  添加2D轉換效果 255

16.6.1  添加移動效果 255

16.6.2  添加旋轉效果 256

16.6.3  添加縮放效果 257

16.6.4  添加傾斜效果 258

16.7  添加3D轉換效果 259

16.8  疑難解惑 261

16.9  跟我學上機 262

第17章  HTML 5中的文件與拖放 263

17.1　選擇文件 264

17.1.1  選擇單個文件 264

17.1.2  選擇多個文件 264

17.2　使用FileReader接口讀取文件 265

17.2.1　檢測瀏覽器是否支持FileReader接口 265

17.2.2　FileReader接口的方法 265

17.3　使用HTML 5實現文件的拖放效果 269

17.3.1　認識文件拖放的過程 269

17.3.2　瀏覽器支持情況 270

17.3.3　在網頁中拖放圖片 270

17.4　在網頁中來回拖放圖片 271

17.5  在網頁中拖放文字 272

17.6  疑難解惑 274

17.7  跟我學上機 275

第18章  定位地理位置技術 277

18.1  Geolocation API獲取地理位置 278

18.1.1　地理定位的原理 278

18.1.2　獲取定位信息的方法 278

18.1.3　常用地理定位方法 278

18.1.4　判斷瀏覽器是否支持HTML 5獲取地理位置信息 279

18.1.5　指定緯度和經度坐標 280

18.1.6　獲取當前位置的經度與緯度 281

18.1.7　處理錯誤和拒絕 282

18.2　目前瀏覽器對地理定位的支持情況 283

18.3　在網頁中調用Google地圖 283

18.4  疑難解惑 286

18.5  跟我學上機 286

第19章  數據存儲和通信技術 287

19.1　認識Web存儲 288

19.1.1　本地存儲和Cookie的區別 288

19.1.2　Web存儲方法 288

19.2　使用HTML 5 Web Storage API 288

19.2.1　測試瀏覽器的支持情況 289

19.2.2　使用sessionStorage方法創建對象 289

19.2.3　使用localStorage方法創建對象 291

19.2.4　Web Storage API的其他操作 292

19.2.5　使用JSON對象存取數據 293

19.3  常見瀏覽器對Web存儲的支持情況 295

19.4  跨文檔消息傳輸 295

19.4.1  跨文檔消息傳輸的基本知識 295

19.4.2  跨文檔通信應用測試 296

19.5  WebSocket API 298

19.5.1  什麽是WebSocket API 298

19.5.2  WebSocket通信基礎 298

19.5.3  服務器端使用WebSocket API 299

19.5.4  客戶機端使用WebSocket API 302

19.6  製作簡單Web留言本 303

19.7  編寫簡單的WebSocket服務器 305

19.8  疑難解惑 309

19.9  跟我學上機 309

第20章  處理線程和服務器發送事件 311

20.1  Web Worker 312

20.1.1　Web Worker概述 312

20.1.2　線程中常用的變量、函數與類 312

20.1.3　與線程進行數據的交互 313

20.2　線程嵌套 315

20.2.1  單層線程嵌套 315

20.2.2　多個子線程中的數據交互 317

20.3　服務器發送事件概述 318

20.4　服務器發送事件的實現過程 319

20.4.1　檢測瀏覽器是否支持Server-Sent事件 319

20.4.2　使用EventSource 對象 319

20.4.3　編寫服務器端代碼 320

20.5　創建Web Worker計數器 321

20.6  服務器發送事件實戰 322

20.7  疑難解惑 323

20.8  跟我學上機 324

第21章  CSS 3定位與DIV佈局核心技術 325

21.1  瞭解塊元素和行內元素 326

21.1.1  塊元素和行內元素的應用 326

21.1.2  div元素和span元素的區別 328

21.2  盒子模型 329

21.2.1  盒子模型的概念 329

21.2.2  定義網頁的border區域 329

21.2.3  定義網頁的padding區域 331

21.2.4  定義網頁的margin區域 332

21.3  CSS 3新增的彈性盒模型 335

21.3.1  定義盒子的佈局方向(box-orient) 336

21.3.2  定義盒子元素的排列順序(box-direction) 337

21.3.3  定義盒子元素的位置(box-ordinal-group) 338

21.3.4  定義盒子的彈性空間(box-flex) 340

21.3.5  管理盒子空間(box-pack和box-align) 342

21.3.6  盒子空間的溢出管理(box-lines) 343

21.4  設計淘寶導購菜單 345

21.5  疑難解惑 348

21.6  跟我學上機 348

第22章  項目實訓1——設計在線購物網站 351

22.1  整體佈局 352

22.1.1  設計分析 352

22.1.2  排版架構 352

22.2  模塊分割 353

22.2.1  Logo與導航區 353

22.2.2  Banner與資訊區 355

22.2.3  產品類別區域 356

22.2.4  頁腳區域 358

22.3  設置鏈接 358

第23章  項目實訓2——設計商業門戶網站 359

23.1  整體設計 360

23.1.1  顏色應用分析 360

23.1.2  架構佈局分析 360

23.2  主要模塊設計 361

23.2.1  網頁整體樣式 362

23.2.2  網頁局部樣式 363

23.2.3  頂部模塊代碼 365

23.2.4  中間主體代碼 366

23.2.5  底部模塊代碼 369

23.3  網站調整 369

23.3.1  部分內容調整 369

23.3.2  模塊調整 369

23.3.3  調整後預覽 371