HTML5網頁設計案例課堂（第2版）

《HTML5網頁設計案例課堂(第2版)》由劉春茂於2018年1月1日出版，全書採取【基礎入門→核心技術→高級技能→移動開發→綜合案例實戰】的講解模式。

基本介紹

• 中文名：HTML5網頁設計案例課堂（第2版） 
• 作者：劉春茂 
• 出版時間：2018年01月01日
• 出版社：清華大學出版社
• ISBN：9787302489160 
• 定價：69 元
• 印次：2-1

內容簡介

《HTML5網頁設計案例課堂(第2版)》以零基礎講解為宗旨，用實例引導讀者深入學習，採取【基礎入門→核心技術→高級技能→移動開發→綜合案例實戰】的講解模式，深入淺出地講解HTML 5的各項技術及實戰技能。

目錄

目錄

第Ⅰ篇基礎入門

第1章新一代Web前端

技術HTML5 3

1.1HTML的基本概念 4

1.1.1HTML的發展歷程 4

1.1.2什麼是HTML 4

1.1.3HTML5檔案的基本結構 5

1.2HTML5的優勢 5

1.2.1解決了跨瀏覽器問題 5

1.2.2新增了多個新特性 5

1.2.3用戶優先的原則 6

1.2.4化繁為簡的優勢 7

1.3HTML5網頁的開發環境 7

1.3.1案例1——使用記事本手工

編寫HTML5 7

1.3.2案例2——使用DreamweaverCC

編寫HTML檔案 8

1.4使用瀏覽器查看HTML5檔案 11

1.4.1案例3——查看頁面效果 11

1.4.2案例4——查看源檔案 12

1.5高手解惑 12

第2章HTML5網頁的文檔結構 13

2.1HTML5檔案的基本結構 14

2.1.1HTML5頁面的整體結構 14

2.1.2HTML5新增的結構標記 14

2.2HTML5基本標記詳解 15

2.2.1文檔類型說明 15

2.2.2HTML標記 15

2.2.3頭標記head 16

2.2.4網頁的主體標記body 18

2.2.5頁面注釋標記<!----> 19

2.3HTML5語法的變化 20

2.3.1標籤不再區分大小寫 20

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

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

2.4必知必會——HTML5代碼規範 21

2.5綜合案例——符合W3C標準的

HTML5網頁 22

2.6跟我學上機——簡單的HTML5網頁 22

2.7高手解惑 23

第3章HTML5與HTML4的區別 25

3.1　新增的主體結構元素 26

3.1.1　案例1——section元素的使用 26

3.1.2　案例2——article元素的使用 26

3.1.3　案例3——aside元素的使用 29

3.1.4　案例4——nav元素的使用 31

3.1.5　案例5——time元素的使用 32

3.2　新增的非主體結構元素 34

3.2.1　案例6——header元素的使用 34

3.2.2　案例7——hgroup元素的使用 34

3.2.3　案例8——footer元素的使用 36

3.2.4　案例9——figure元素的使用 37

3.2.5　案例10——address元素的使用 39

3.3　新增其他常用元素 40

3.3.1　案例11——mark元素的使用 40

3.3.2　案例12——rp元素、rt元素與

ruby元素的使用 41

3.3.3　案例13——progress元素的

使用 42

3.3.4　案例14——command元素的

使用 42

3.3.5　案例15——embed元素的

使用 43

3.3.6　案例16——details元素與

summary元素的使用 43

3.3.7　案例17——datalist元素的

使用 44

3.4　新增全局屬性 45

3.4.1　案例18——contentEditable

屬性的使用 45

3.4.2　案例19——spellcheck屬性的

使用 46

3.4.3　案例20——tabIndex屬性的

使用 46

3.5　新增的其他屬性 47

3.5.1　案例21——表單相關屬性的

使用 47

3.5.2　案例22——連結相關屬性的

使用 54

3.5.3　案例23——其他新增屬性的

使用 55

3.6　HTML5廢除的屬性 56

3.7　高手解惑 57

第II篇核心技術

第4章設計網頁文本內容 61

4.1　標題文字的建立 62

4.1.1　案例1——標題文字標記 62

4.1.2　案例2——標題文字的

對齊方式 63

4.2　設定文字格式 63

4.2.1　案例3——設定文字字型 63

4.2.2　案例4——設定字號 64

4.2.3　案例5——設定文字顏色 66

4.2.4　案例6——設定粗體、斜體、

下畫線 67

4.2.5　案例7——設定上標與下標 68

4.2.6　案例8——設定字型風格 68

4.2.7　案例9——設定加粗字型 69

4.2.8　案例10——設定字型

複合屬性 70

4.2.9　案例11——設定陰影文本 71

4.2.10　案例12——控制換行 72

4.3　設定段落格式 73

4.3.1　案例13——設定段落標記 73

4.3.2　案例14——設定換行標記 74

4.4　設定網頁水平線 75

4.4.1　案例15——添加水平線 75

4.4.2　案例16——設定水平線的

寬度與高度 75

4.4.3　案例17——設定水平線的顏色 76

4.4.4　案例18——設定水平線的

對齊方式 76

4.4.5　案例19——去掉水平線陰影 77

4.5　綜合案例——成才教育網文本設計 77

4.6　高手解惑 78

第5章設計網頁列表與段落 79

5.1　網頁文字列表的設計 80

5.1.1　案例1——建立無序列表<ul> 80

5.1.2　案例2——建立有序列表<ol> 81

5.1.3　案例3——建立不同類型的

無序列表 82

5.1.4　案例4——建立不同類型的

有序列表 82

5.1.5　案例5——嵌套列表 83

5.1.6　案例6——自定義列表<dl> 83

5.2　網頁段落格式的設計 84

5.2.1　案例7——設計單詞間隔

word-spacing 84

5.2.2　案例8——設計字元間隔

letter-spacing 85

5.2.3　案例9——設計文字修飾

text-decoration 86

5.2.4　案例10——設計垂直

對齊方式vertical-align 87

5.2.5　案例11——設計文本轉換

text-transform 88

5.2.6　案例12——設計水平對齊

方式text-align 89

5.2.7　案例13——設計文本縮進

text-indent 91

5.2.8　案例14——設計文本行高

line-height 92

5.2.9　案例15——處理空白

white-space 93

5.2.10　案例16——文本反排

unicode-bidi 94

5.3　綜合案例——製作圖文混排型

旅遊網頁 96

5.4　高手解惑 97

第6章HTML5網頁中的圖像 99

6.1　網頁中的圖像<img> 100

6.1.1　網頁中支持的圖片格式 100

6.1.2　圖像中的路徑 100

6.2　在網頁中插入圖像 102

6.2.1　案例1——插入圖像 102

6.2.2　案例2——從不同位置插入

圖像 103

6.3　編輯網頁中的圖像 103

6.3.1　案例3——設定圖像的

寬度和高度 104

6.3.2　案例4——設定圖像的

提示文字 104

6.3.3　案例5——將圖片設定為

網頁背景 105

6.3.4　案例6——排列圖像 106

6.4　綜合案例——圖文並茂的房屋裝飾

裝修網頁 107

6.5　高手解惑 108

第7章使用HTML5建立超連結 109

7.1　網頁超連結的概念 110

7.1.1　什麼是網頁超連結 110

7.1.2　超連結中的URL 110

7.1.3　超連結的URL類型 111

7.2　建立網頁超級連結 111

7.2.1　案例1——創建超文本連結 111

7.2.2　案例2——創建圖片連結 113

7.2.3　案例3——創建下載連結 114

7.2.4　案例4——使用相對路徑和

絕對路徑 115

7.2.5　案例5——設定以新視窗顯示

超連結頁面 115

7.2.6　案例6——設定電子郵件連結 116

7.3　案例7——浮動框架iframe的使用 117

7.4　綜合案例——使用錨連結製作電子書

閱讀網頁 119

7.5高手解惑 122

第8章使用HTML5創建表單 123

8.1案例1——認識表單 124

8.2表單基本元素的使用 124

8.2.1案例2——單行文本輸入框

text 125

8.2.2案例3——多行文本輸入框

textarea 125

8.2.3案例4——密碼域password 126

8.2.4案例5——單選按鈕radio 127

8.2.5案例6——複選框checkbox 128

8.2.6案例7——列表框select 128

8.2.7案例8——普通按鈕button 129

8.2.8案例9——提交按鈕submit 130

8.2.9案例10——重置按鈕reset 131

8.3表單高級元素的使用 132

8.3.1案例11——url屬性的使用 132

8.3.2案例12——email屬性的使用 132

8.3.3案例13——date和time屬性的

使用 133

8.3.4案例14——number屬性的

使用 134

8.3.5案例15——range屬性的使用 135

8.3.6案例16——required屬性的

使用 136

8.4綜合案例——創建用戶反饋表單 137

8.5跟我學上機——製作用戶註冊表單 138

8.6高手解惑 139

第9章使用HTML5創建表格 141

9.1案例1——表格的基本結構 142

9.2創建表格 143

9.2.1案例2——創建普通表格 143

9.2.2案例3——創建一個帶有標題的

表格 144

9.3編輯表格 145

9.3.1案例4——定義表格的

框線類型 145

9.3.2案例5——定義表格的表頭 146

9.3.3案例6——設定表格背景 147

9.3.4案例7——設定單元格的背景 148

9.3.5案例8——合併單元格 148

9.3.6案例9——排列單元格中的

內容 152

9.3.7案例10——設定單元格的

行高與列寬 153

9.4案例11——完整的表格標記 153

9.5綜合案例——製作計算機報價表 154

9.6跟我學上機——製作學生成績表 157

9.7高手解惑 160

第10章HTML5中的音頻和視頻 161

10.1audio標籤概述 162

10.1.1案例1——認識audio標籤 162

10.1.2audio標籤的屬性 163

10.1.3瀏覽器對audio標籤的

支持情況 163

10.2在網頁中添加音頻檔案 163

10.2.1案例2——添加自動播放的

音頻檔案 163

10.2.2案例3——添加帶有控制項的

音頻檔案 164

10.2.3案例4——添加循環播放的

音頻檔案 165

10.2.4案例5——添加預播放的

音頻檔案 165

10.3video標籤概述 166

10.3.1案例6——認識video標籤 166

10.3.2video標籤的屬性 167

10.3.3瀏覽器對video標籤的

支持情況 167

10.4在網頁中添加視頻檔案 168

10.4.1案例7——添加自動播放的

視頻檔案 168

10.4.2案例8——添加帶有控制項的

視頻檔案 169

10.4.3案例9——添加循環播放的

視頻檔案 169

10.5綜合案例——設定視頻檔案的

高度與寬度 170

10.6跟我學上機——添加預播放的

視頻檔案 171

10.7高手解惑 172

第11章使用HTML5繪製圖形 173

11.1添加canvas的步驟 174

11.2繪製基本形狀 174

11.2.1案例1——繪製矩形 175

11.2.2案例2——繪製圓形 176

11.2.3案例3——使用moveTo與

lineTo繪製直線 177

11.2.4案例4——使用bezierCurveTo

繪製貝濟埃曲線 178

11.3繪製漸變圖形 179

11.3.1案例5——繪製線性漸變 179

11.3.2案例6——繪製徑向漸變 181

11.4繪製變形圖形 182

11.4.1案例7——繪製平移效果的

圖形 182

11.4.2案例8——繪製縮放效果的

圖形 183

11.4.3案例9——繪製旋轉效果的

圖形 185

11.4.4案例10——繪製組合效果的

圖形 186

11.4.5案例11——繪製帶陰影的

圖形 188

11.5使用圖像 189

11.5.1案例12——繪製圖像 189

11.5.2案例13——平鋪圖像 190

11.5.3案例14——裁剪圖像 192

11.5.4案例15——圖像的

像素化處理 193

11.6案例16——繪製文字 195

11.7圖形的保存與恢復 196

11.7.1案例17——保存與

恢復狀態 196

11.7.2案例18——保存檔案 197

11.8綜合案例——繪製火柴棒人物 199

11.9跟我學上機——繪製商標 201

11.10高手解惑 203

第III篇高級技能

第12章HTML5中的檔案與拖放 207

12.1　選擇檔案 208

12.1.1　案例1——選擇單個檔案 208

12.1.2　案例2——選擇多個檔案 208

12.2　使用FileReader接口讀取檔案 209

12.2.1　檢測瀏覽器是否支持

FileReader接口 209

12.2.2　FileReader接口的方法 210

12.2.3　案例3——使用readAsDataURL

方法預覽圖片 210

12.2.4　案例4——使用readAsText方法

讀取文本檔案 212

12.3　使用HTML5實現檔案的拖放 213

12.3.1　認識檔案拖放的過程 214

12.3.2　瀏覽器支持情況 214

12.3.3　案例5——在網頁中拖放

圖片 215

12.4　綜合案例——在網頁中來回拖放

圖片 216

12.5跟我學上機——在網頁中拖放文字 217

12.6高手解惑 219

第13章定位地理位置技術 221

13.1　GeolocationAPI獲取地理位置 222

13.1.1　地理地位的原理 222

13.1.2　獲取定位信息的方法 222

13.1.3　常用地理定位方法 222

13.1.4　判斷瀏覽器是否支持HTML5

獲取地理位置信息 223

13.1.5　指定緯度和經度坐標 224

13.1.6　獲取當前位置的經度與

緯度 225

13.1.7　處理錯誤和拒絕 227

13.2　目前瀏覽器對地理定位的

支持情況 227

13.3　綜合案例——在網頁中調用Google

地圖 228

13.4　跟我學上機——持續獲取用戶

移動後的位置 230

13.5　高手解惑 231

第14章Web存儲和通信技術 233

14.1　認識Web存儲 234

14.1.1　本地存儲和Cookies的區別 234

14.1.2　Web存儲方法 234

14.2　使用HTML5WebStorageAPI 234

14.2.1　測試瀏覽器的支持情況 235

14.2.2　案例1——使用sessionStorage

方法創建對象 236

14.2.3　案例2——使用localStorage

方法創建對象 237

14.2.4　案例3——WebStorageAPI的

其他操作 238

14.2.5　案例4——使用JSON對象

存取數據 239

14.3　目前瀏覽器對Web存儲的

支持情況 241

14.4跨文檔訊息傳輸 242

14.4.1跨文檔訊息傳輸的基本知識 242

14.4.2案例5——跨文檔通信套用

測試 242

14.5WebSocketAPI 245

14.5.1什麼是WebSocketAPI 245

14.5.2WebSocket通信基礎 245

14.5.3案例6——伺服器端使用Web

SocketAPI 247

14.5.4案例7——客戶端使用

WebSocketAPI 250

14.6綜合案例——製作簡單

Web留言本 250

14.7跟我學上機——編寫簡單的

WebSocket伺服器 253

14.8　高手解惑 257

第15章處理執行緒和伺服器

傳送事件 259

15.1　WebWorker 260

15.1.1　WebWorker概述 260

15.1.2　執行緒中常用的變數、

函式與類 260

15.1.3　案例1——與執行緒進行

數據的互動 261

15.2　執行緒嵌套 263

15.2.1　案例2——單執行緒嵌套 263

15.2.2　案例3——多個子執行緒中的

數據互動 265

15.3　伺服器傳送事件概述 267

15.4　伺服器傳送事件的實現過程 267

15.4.1　案例4——檢測瀏覽器是否

支持Server-Sent事件 267

15.4.2　案例5——使用EventSource

對象 268

15.4.3　案例6——編寫伺服器端

代碼 268

15.5　綜合案例——創建WebWorker

計數器 269

15.6跟我學上機——伺服器傳送事件

實戰套用 270

15.7高手解惑 272

第16章構建離線的Web套用 273

16.1　HTML5離線Web套用概述 274

16.2　案例1——使用HTML5離線

Web套用API 274

16.2.1　檢查瀏覽器的支持情況 274

16.2.2　搭建簡單的離線應用程式 275

16.2.3　支持離線行為 275

16.2.4　Manifest檔案 276

16.2.5　ApplicationCacheAPI 277

16.3　案例2——使用HTML5離線

Web套用構建套用 278

16.3.1　創建記錄資源的manifest

檔案 278

16.3.2　創建構成界面的HTML和

CSS 279

16.3.3　創建離線的JavaScript 279

16.3.4　檢查ApplicationCache的

支持情況 281

16.3.5　為Update按鈕添加

處理函式 281

16.3.6　添加Storage功能代碼 282

16.3.7　添加離線事件處理程式 282

16.4　綜合案例——離線定位跟蹤 283

16.5　高手解惑 287

第IV篇移動開發

第17章jQueryMobile基礎 291

17.1認識jQueryMobile 292

17.2跨平台移動設備網頁

jQueryMobile 292

17.2.1案例1——移動設備模擬器 292

17.2.2案例2——jQueryMobile的

安裝 294

17.2.3案例3——jQueryMobile

網頁的架構 296

17.3案例4——創建多頁面的

jQueryMobile網頁 297

17.4案例5——將頁面作為對話框使用 298

17.5案例6——絢麗多彩的頁面切換

效果 299

17.6高手解惑 301

第18章jQueryMobileUI組件 303

18.1套用UI組件 304

18.1.1案例1——表單組件 304

18.1.2案例2——按鈕和組按鈕 311

18.1.3案例3——按鈕圖示 313

18.1.4案例4——彈窗 315

18.2列表 316

18.2.1案例5——列表視圖 316

18.2.2案例6——列表內容 319

18.2.3案例7——列表過濾 320

18.3面板和可摺疊塊 322

18.3.1案例8——面板 322

18.3.2案例9——可摺疊塊 323

18.4案例10——導航條 325

18.5綜合案例——使用jQueryMobile

主題 328

18.6高手解惑 331

第19章jQueryMobile事件 333

19.1頁面事件 334

19.1.1案例1——初始化事件 334

19.1.2案例2——外部頁面載入

事件 336

19.1.3案例3——頁面過渡事件 338

19.2觸摸事件 340

19.2.1案例4——點擊事件 340

19.2.2案例5——滑動事件 342

19.3案例6——滾屏事件 344

19.4案例7——定位事件 347

19.5高手解惑 349

第20章數據存儲和讀取技術 351

20.1WebSQLDatabase概述 352

20.2資料庫的基本操作 352

20.3數據表的基本操作 353

20.4數據的基本操作 355

20.5綜合案例——WebSQLDatabase的

綜合操作技能 356

20.6高手解惑 359

第V篇綜合案例實戰

第21章製作休閒娛樂類網頁 363

21.1　整體布局 364

21.1.1　設計分析 364

21.1.2　排版架構 365

21.2　模組組成 365

21.3　製作步驟 366

21.3.1　製作樣式表 366

21.3.2　Logo與導航選單 373

21.3.3　搜尋條 374

21.3.4　左側視頻模組 374

21.3.5　評論模組 375

21.3.6　右側熱門推薦 377

21.3.7　底部模組 378

第22章製作企業門戶類網頁 381

22.1　整體布局 382

22.1.1　設計分析 382

22.1.2　排版架構 383

22.2　模組組成 383

22.3　製作步驟 384

22.3.1　樣式表 384

22.3.2　網頁頭部 385

22.3.3　導航選單欄 386

22.3.4　中間主體第一欄 386

22.3.5　中間主體第二欄 390

22.3.6　中間主體第三欄 393

22.3.7　中間主體第四欄 398

22.3.8　中間主體第五欄 402

22.3.9　網頁底部 407

第23章製作電子商務類網頁 409

23.1　整體布局 410

23.1.1　設計分析 410

23.1.2　排版架構 411

23.2　模組組成 411

23.3　製作步驟 411

23.3.1　樣式表 411

23.3.2　網頁頭部 419

23.3.3　主體第一通欄 420

23.3.4　主體第二通欄 420

23.3.5　主體第三通欄 421

23.3.6　網頁底部 422

第24章開發連鎖酒店訂購系統 425

24.1連鎖酒店訂購的需求分析 426

24.2網站的結構 426

24.3連鎖酒店訂購系統的代碼實現 427

24.3.1設計首頁 427

24.3.2訂購頁面 428

24.3.3連鎖分店頁面 433

24.3.4查看訂單頁面 434

24.3.5酒店介紹頁面 436