HTML5+CSS3+JavaScript網頁設計案例課堂（第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網頁的開發環境 4

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

1.3.2  使用WebStorm編寫HTML 5文件 5

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

1.4.1  查看頁面效果 8

1.4.2  查看源文件 9

1.5  疑難解惑 9

1.6  跟我學上機 10

第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  頭標記head 14

2.2.4  網頁的主體標記 16

2.2.5  頁面註釋標記<!-- --> 17

2.3  HTML 5語法的變化 17

2.3.1  標簽不再區分大小寫 18

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  段落的換行標簽 29

3.3.3  段落的原格式標簽 30

3.4  文字列表 30

3.4.1  建立無序列表<ul> 30

3.4.2  建立有序列表<ol> 31

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

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

3.4.5  自定義列表 34

3.4.6  建立嵌套列表 36

3.5  超鏈接標記 37

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

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

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

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

3.6  圖像熱點鏈接 41

3.7  在網頁中插入圖像 42

3.8  編輯網頁中的圖像 44

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

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

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

3.9  疑難解惑 47

3.10  跟我學上機 48

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

4.1  表格的基本結構 50

4.2  創建表格 51

4.2.1  創建普通表格 51

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

4.3  編輯表格 53

4.3.1  定義表格的邊框類型 53

4.3.2  定義表格的表頭 54

4.3.3  設置表格背景 55

4.3.4  設置單元格的背景 57

4.3.5  合並單元格 57

4.3.6  表格的分組 59

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

4.4  完整的表格標記 62

4.5  設置懸浮變色的表格 63

4.6  疑難解惑 67

4.7  跟我學上機 67

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

5.1  表單概述 70

5.2  表單基本元素的使用 70

5.2.1  單行文本輸入框 71

5.2.2  多行文本輸入框 71

5.2.3  密碼輸入框 72

5.2.4  單選按鈕 72

5.2.5  復選框 73

5.2.6  列表框 74

5.2.7  普通按鈕 75

5.2.8  提交按鈕 76

5.2.9  重置按鈕 77

5.3  表單高級元素的使用 78

5.3.1  url屬性的使用 78

5.3.2  email屬性的使用 79

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

5.3.4  number屬性的使用 80

5.3.5  range屬性的使用 81

5.3.6  required屬性的使用 81

5.4  疑難解惑 82

5.5  跟我學上機 82

第6章  HTML 5中的多媒體 85

6.1  audio標記 86

6.1.1  audio標記概述 86

6.1.2  audio標記的屬性 87

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

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

6.3  video標記 89

6.3.1  video標記概述 89

6.3.2  video標記的屬性 90

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

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

6.5  疑難解惑 93

6.6  跟我學上機 94

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

7.1  添加canvas的步驟 96

7.2  繪制基本形狀 96

7.2.1  繪制矩形 96

7.2.2  繪制圓形 97

7.2.3  使用moveTo()與lineTo()繪制直線 98

7.2.4  使用bezierCurveTo()繪制貝塞爾曲線 100

7.3  繪制漸變圖形 101

7.3.1  繪制線性漸變 101

7.3.2  繪制徑向漸變 102

7.4  繪制變形圖形 104

7.4.1  繪制平移效果的圖形 104

7.4.2  繪制縮放效果的圖形 105

7.4.3  繪制旋轉效果的圖形 106

7.4.4  繪制組合效果的圖形 107

7.4.5  繪制帶陰影的圖形 109

7.5  使用圖像 110

7.5.1  繪制圖像 110

7.5.2  平鋪圖像 111

7.5.3  裁剪圖像 112

7.5.4  圖像的像素化處理 114

7.6  繪制文字 116

7.7  疑難解惑 117

7.8  跟我學上機 118

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

8.1  CSS 3概述 120

8.1.1  CSS 3的功能 120

8.1.2  瀏覽器與CSS 3 120

8.1.3  CSS 3的基礎語法 121

8.1.4  CSS 3的常用單位 121

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

8.2.1  行內樣式 125

8.2.2  內嵌樣式 126

8.2.3  鏈接樣式 128

8.2.4  導入樣式 129

8.2.5  優先級問題 130

8.3  CSS 3的常用選擇器 132

8.3.1  標簽選擇器 132

8.3.2  類選擇器 133

8.3.3  ID選擇器 134

8.3.4  全局選擇器 135

8.3.5  組合選擇器 136

8.3.6  繼承選擇器 137

8.3.7  偽類選擇器 138

8.4  選擇器聲明 139

8.4.1  集體聲明 139

8.4.2  多重嵌套聲明 140

8.5  疑難解惑 140

8.6  跟我學上機 141

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

9.1  美化網頁文字 144

9.1.1  設置文字的字體 144

9.1.2  設置文字的字號 145

9.1.3  設置字體風格 146

9.1.4  設置字體的粗細 146

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

9.1.6  設置字體的復合屬性 148

9.1.7  設置字體顏色 149

9.2  設置文本的高級樣式 150

9.2.1  設置文本陰影效果 150

9.2.2  設置文本的溢出效果 151

9.2.3  設置文本換行 152

9.2.4  保持字體尺寸不變 153

9.3  美化網頁中的段落 154

9.3.1  設置單詞之間的間隔 154

9.3.2  設置字符之間的間隔 155

9.3.3  設置文字的修飾效果 156

9.3.4  設置垂直對齊方式 157

9.3.5  轉換文本的大小寫 159

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

9.3.7  設置文本的縮進效果 162

9.3.8  設置文本的行高 162

9.3.9  文本的空白處理 163

9.3.10  文本的反排 165

9.4  疑難解惑 166

9.5  跟我學上機 166

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

10.1  圖片縮放 170

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

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

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

10.2  設置圖片的對齊方式 172

10.2.1  設置圖片橫向對齊 172

10.2.2  設置圖片縱向對齊 173

10.3  圖文混排 175

10.3.1  設置文字環繞效果 175

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

10.4  疑難解惑 178

10.5  跟我學上機 178

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

11.1  使用CSS 3美化背景 182

11.1.1  設置背景顏色 182

11.1.2  設置背景圖片 183

11.1.3  設置背景圖片重復 184

11.1.4  設置背景圖片顯示 186

11.1.5  設置背景圖片的位置 187

11.1.6  設置背景圖片的大小 188

11.1.7  設置背景圖片的顯示區域 190

11.1.8  設置背景圖片的裁剪區域 191

11.1.9  設置背景圖片的復合屬性 193

11.2  使用CSS 3美化邊框 194

11.2.1  設置邊框的樣式 194

11.2.2  設置邊框的顏色 195

11.2.3  設置邊框的線寬 196

11.2.4  設置邊框的復合屬性 198

11.3  設置邊框的圓角效果 199

11.3.1  設置圓角邊框 199

11.3.2  指定兩個圓角半徑 199

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

11.3.4  繪制不同種類的邊框 202

11.4  疑難解惑 204

11.5  跟我學上機 205

第12章  使用CSS 3美化超級鏈接和鼠標 207

12.1  使用CSS 3美化超鏈接 208

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

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

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

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

12.2  使用CSS 3美化鼠標特效 212

12.2.1  使用CSS 3控制鼠標箭頭 212

12.2.2  設置鼠標變換式超鏈接 213

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

12.4  疑難解惑 216

12.5  跟我學上機 216

第13章  使用CSS 3美化表格和表單的樣式 219

13.1  美化表格的樣式 220

13.1.1  設置表格邊框的樣式 220

13.1.2  設置表格邊框的寬度 221

13.1.3  設置表格邊框的顏色 223

13.2  美化表單樣式 224

13.2.1  美化表單中的元素 224

13.2.2  美化提交按鈕 226

13.2.3  美化下拉菜單 227

13.3  疑難解惑 229

13.4  跟我學上機 229

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

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

14.1.1  美化無序列表 232

14.1.2  美化有序列表 233

14.1.3  美化自定義列表 235

14.1.4  製作圖片列表 236

14.1.5  縮進圖片列表 237

14.1.6  設置列表的復合屬性 238

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

14.2.1  製作無序表格的菜單 239

14.2.2  製作水平和垂直菜單 241

14.3  疑難解惑 243

14.4  跟我學上機 243

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

15.1  濾鏡概述 246

15.2  設置基本濾鏡效果 247

15.2.1  高斯模糊(blur)濾鏡 247

15.2.2  明暗度(brightness)濾鏡 248

15.2.3  對比度(contrast)濾鏡 249

15.2.4  陰影(drop-shadow)濾鏡 250

15.2.5  灰度(grayscale)濾鏡 251

15.2.6  反相(invert)濾鏡 252

15.2.7  透明度(opacity)濾鏡 253

15.2.8  飽和度(saturate)濾鏡 254

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

15.4  疑難解惑 256

15.5  跟我學上機 257

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

16.1  瞭解過渡效果 260

16.2  添加過渡效果 260

16.3  瞭解動畫效果 262

16.4  添加動畫效果 263

16.5  瞭解2D轉換效果 264

16.6  添加2D轉換效果 265

16.6.1  添加移動效果 265

16.6.2  添加旋轉效果 266

16.6.3  添加縮放效果 267

16.6.4  添加傾斜效果 268

16.7  添加3D轉換效果 269

16.8  疑難解惑 271

16.9  跟我學上機 272

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

17.1  選擇文件 274

17.1.1  選擇單個文件 274

17.1.2  選擇多個文件 274

17.2  使用FileReader接口讀取文件 275

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

17.2.2  FileReader接口的方法 276

17.2.3  使用readAsDataURL方法預覽圖片 276

17.2.4  使用readAsText方法讀取文本文件 278

17.3  使用HTML 5實現文件的拖放 279

17.3.1  認識文件拖放的過程 279

17.3.2  瀏覽器支持情況 280

17.3.3  在網頁中拖放圖片 280

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

17.5  在網頁中拖放文字 282

17.6  疑難解惑 284

17.7  跟我學上機 285

第18章  JavaScript編程基本知識 287

18.1  JavaScript入門 288

18.1.1  JavaScript能做什麽 288

18.1.2  在網頁中嵌入JavaScript代碼 290

18.1.3  調用外部JavaScript文件 291

18.1.4  JavaScript的語法基礎 292

18.1.5  數據類型 293

18.2  JavaScript的常量和變量 294

18.3  運算符與表達式 296

18.3.1  運算符 296

18.3.2  表達式 299

18.4  疑難解惑 301

18.5  跟我學上機 301

第19章  JavaScript程序控制語句 303

19.1  條件判斷語句 304

19.1.1  簡單if語句 304

19.1.2  if...else語句 305

19.1.3  if...else if語句 306

19.1.4  if語句的嵌套 307

19.1.5  switch語句 308

19.2  循環語句 310

19.2.1  while語句 310

19.2.2  do…while語句 312

19.2.3  for語句 313

19.2.4  循環語句的嵌套 314

19.3  跳轉語句 317

19.3.1  break語句 317

19.3.2  continue語句 318

19.4  疑難解惑 320

19.5  跟我學上機 320

第20章  JavaScript中的函數 323

20.1  函數的定義 324

20.1.1  聲明式函數定義 324

20.1.2  函數表達式定義 325

20.1.3  函數構造器定義 326

20.2  函數的調用 326

20.2.1  函數的簡單調用 326

20.2.2  通過超鏈接調用函數 327

20.2.3  在事件響應中調用函數 328

20.3  函數的參數與返回值 329

20.3.1  函數的參數 329

20.3.2  函數的返回值 330

20.4  常用內置函數 331

20.5  特殊函數 333

20.5.1  嵌套函數 333

20.5.2  遞歸函數 335

20.5.3  內嵌函數 336

20.6  疑難解惑 337

20.7  跟我學上機 337

第21章  JavaScript對象的應用 339

21.1  瞭解對象 340

21.1.1  什麽是對象 340

21.1.2  對象的屬性和方法 340

21.2  創建自定義對象的方法 341

21.2.1  直接定義並創建自定義對象 341

21.2.2  使用Object對象創建自定義對象 342

21.2.3  使用自定義構造函數創建對象 343

21.3  對象訪問語句 348

21.3.1  for…in循環語句 349

21.3.2  with語句 350

21.4  數組對象 351

21.4.1  數組對象概述 351

21.4.2  定義數組 352

21.4.3  數組的屬性 353

21.4.4  操作數組元素 355

21.4.5  數組方法 356

21.5  String對象 359

21.5.1  創建String對象 359

21.5.2  String對象的屬性 360

21.5.3  String對象的方法 361

21.6  疑難解惑 365

21.7  跟我學上機 366

第22章  JavaScript對象編程 367

22.1  文檔對象模型(DOM) 368

22.1.1  文檔對象模型(DOM)介紹 368

22.1.2  在DOM模型中獲得對象 368

22.1.3  事件驅動的應用 369

22.2  窗口(window)對象 371

22.2.1  創建窗口(window) 371

22.2.2  創建對話框 373

22.2.3  窗口的相關操作 374

22.3  文檔(document)對象 376

22.3.1  文檔屬性的應用 376

22.3.2  文檔中圖片的使用 378

22.3.3  顯示文檔中的所有超鏈接 379

22.4  表單對象 380

22.4.1  創建form對象 380

22.4.2  form對象屬性與方法的應用 381

22.4.3  單選按鈕與復選框的使用 382

22.4.4  下拉菜單的使用 383

22.5  疑難解惑 384

22.6  跟我學上機 385

第23章  綜合項目1——開發企業門戶網站 387

23.1  構思佈局 388

23.1.1  設計分析 388

23.1.2  排版架構 388

23.2  主要模塊設計 389

23.2.1  Logo與導航菜單 389

23.2.2  Banner區 390

23.2.3  資訊區 390

23.2.4  版權信息 392

第24章  綜合項目2——設計在線購物網站 395

24.1  整體佈局 396

24.1.1  設計分析 396

24.1.2  排版架構 396

24.2  模塊分割 397

24.2.1  Logo與導航區 397

24.2.2  Banner與資訊區 399

24.2.3  產品類別區域 400

24.2.4  頁腳區域 402

24.3  設置鏈接 402

第25章  綜合項目3——開發商業響應式網站 403

25.1  網站概述 404

25.1.1  網站結構 404

25.1.2  設計效果 404

25.1.3  設計準備 405

25.2  設計首頁佈局 406

25.3  設計可切換導航 407

25.4  主體內容 412

25.4.1  設計輪播廣告區 413

25.4.2  設計產品推薦區 414

25.4.3  設計登錄註冊和Logo 415

25.4.4  設計特色展示區 416

25.4.5  設計產品生產流程區 417

25.5  設計底部隱藏導航 420