HTML5與CSS3從入門到精通

本書針對HTML5和CSS3的*標準進行及時的更新和修訂，包含的主題有：Inter和Web概念；創建HTML5網頁；用CSS配置顏色和文本；用CSS配置頁面布局；配置圖像和多媒體；探索新增的CSS3特性；套用網頁設計*實踐；設計可訪問和可用的網頁；搜尋引擎最佳化設計；選擇域名；發布網站。

本書適合所有對網頁設計感興趣的讀者閱讀，是一本理想的入門參考。

基本介紹

• 書名：HTML5與CSS3從入門到精通(第3版)
• 作者：［美］Terry Felke-Morris
• 原版名稱：Basics of Web Design:HTML5 and CSS3
• 譯者：周靖
• ISBN：9787302473268
• 類別：程式語言與程式設計 
• 頁數：434
• 定價：69.00元
• 出版社：清華大學出版社
• 出版時間：2017-07-01
• 裝幀：平裝-膠訂
• 開本：16開
• 版次：3

基本信息

書名：HTML5與CSS3從入門到精通

作者：[美]Terry Felke-Morris

定價：69元

印次：3-1

ISBN：9787302473268

出版日期：2017.06.01

印刷日期：2017.06.13

內容介紹

本書針對HTML5和CSS3的最新標準進行及時的更新和修訂，包含的主題有：Internet和Web概念；創建HTML5網頁；用CSS配置顏色和文本；用CSS配置頁面布局；配置圖像和多媒體；探索新增的CSS3特性；套用網頁設計最佳實踐；設計可訪問和可用的網頁；搜尋引擎最佳化設計；選擇域名；發布網站。本書適合所有對網頁設計感興趣的讀者閱讀，是一本理想的入門參考。

目 錄

第1章 網際網路和全球資訊網基礎 1

1.1 網際網路和全球資訊網 2

網際網路 2

網際網路的誕生 2

網際網路的發展 2

全球資訊網的誕生 2

第一個圖形化瀏覽器 3

各種技術的聚合 3

1.2 網頁標準和無障礙訪問 4

W3C推薦標準 4

網頁標準和無障礙訪問 4

無障礙訪問和法律 4

網頁通用設計 5

1.3 瀏覽器和伺服器 6

網路概述 6

客戶端/伺服器模型 6

1.4 Internet協定 8

電子郵件協定 8

超文本傳輸協定 8

檔案傳輸協定 8

傳輸控制協定/Internet協定 8

IP位址 9

1.5 統一資源標識符(URI)和域名 10

URI和URL 10

域名 10

頂級域名 11

通用頂級域名 11

國家代碼頂級域名 12

域名系統DNS 13

1.6 網上的信息 14

網上的信息可靠嗎？ 14

網上的信息是最新的嗎？ 15

有沒有指向其他資源的外部連結？ 15

1.7 HTML概述 16

什麼是HTML？ 16

什麼是XML？ 17

什麼是XHTML？ 17

HTML的最新版本HTML5 17

1.8 網頁幕後揭秘 18

文檔類型定義(DTD) 18

網頁模板 18

html元素 18

頁頭區域 19

主體區域 19

1.9 第一個網頁 20

動手實作1.1 20

新建資料夾 20

保存檔案 21

測試網頁 22

複習和練習 23

複習題 23

動手練習 23

網上調研 24

聚焦網頁設計 24

第2章HTML基礎 25

2.1標題元素 26

動手實作2.1 26

無障礙訪問和標題 27

HTML5更多的標題選項 27

2.2段落元素 28

動手實作2.2 28

對齊 29

2.3換行和水平標尺 30

換行元素 30

動手實作2.3 30

水平標尺元素 31

動手實作2.4 31

2.4塊引用元素 32

動手實作2.5 33

2.5短語元素 34

2.6有序列表 36

type屬性，start屬性和

reversed屬性 36

動手實作2.6 37

2.7無序列表 38

動手實作2.7 39

2.8描述列表 40

動手實作2.8 41

2.9特殊字元 42

動手實作2.9 42

2.10HTML語法校驗 44

動手實作2.10 44

2.11結構元素 46

div元素 46

header元素 46

nav元素 46

main元素 46

footer元素 46

動手實作2.11 47

2.12練習使用結構元素 48

動手實作2.12 48

2.13錨元素 50

動手實作2.13 50

連結目標 51

絕對連結 51

相對連結 51

blockanchor 51

2.14練習使用連結 52

站點地圖 52

動手實作2.14 52

2.15電子郵件連結 56

動手實作2.15 57

複習和練習 58

複習題 58

動手練習 59

聚焦網頁設計 59

案例分析 59

PacificTrailsResort案例分析 60

JavaJamCoffeeHouse案例分析 62

第3章網頁設計基礎 67

3.1為目標客群設計 68

瀏覽器 69

螢幕解析度 69

3.2網站組織 70

分級式組織 70

線性組織 71

隨機組織 71

3.3視覺設計原則 72

重複：在整個設計中重複視覺元素 72

對比：添加視覺刺激和吸引注意力 73

近似：分組相關項目 73

對齊：對齊元素實現視覺上的統一 73

3.4提供無障礙訪問 74

通用設計和增強無障礙訪問的

受益者 74

無障礙設計有助於提高在搜尋

引擎中的排名 74

法律規定 75

無障礙設計的熱潮 75

3.5文本的使用 76

文本設計的注意事項 76

3.6調色板 78

十六進制顏色值 78

網頁安全色 78

無障礙設計和顏色 79

3.7針對目標客群進行設計 80

面向兒童 80

面向年輕人 80

面向所有人 81

面向老年人 81

3.8選擇顏色方案 83

以一張圖片為基礎的方案 83

色輪 84

變深、變淺和變灰 84

單色 85

相似色 85

互補色 86

分散互補色 86

三色 86

四色 87

實現顏色方案 87

3.9使用圖片和多媒體 88

檔案大小和圖片尺寸 88

抗鋸齒/鋸齒化文本的問題 88

只使用必要的多媒體 89

提供替代文本 89

3.10更多設計考慮 90

感覺到的載入時間 91

第一屏 91

適當留白 91

水平滾動 91

3.11導航設計 92

網站要易於導航 92

導航欄 92

圖片導航 93

動態導航 93

站點地圖 93

站點搜尋功能 94

3.12線框和頁面布局 95

3.13固定和流動布局 98

固定布局 98

流動布局 99

3.14為行動網路設計 100

三種方式 100

移動設備設計考慮 100

桌面和移動網站的例子 101

移動設計小結 101

3.15靈活回響的網頁設計 102

3.16網頁設計最佳實踐 104

複習和練習 106

複習題 106

動手練習 107

聚焦網頁設計 107

網頁項目案例分析 108

項目里程碑 108

第4章CSS基礎 111

4.1CSS概述 112

層疊樣式表的優點 112

配置CSS的方法 113

層疊樣式表的“層疊” 113

4.2CSS選擇符和聲明 114

CSS語法基礎 114

background-color屬性 114

color屬性 114

配置背景色和文本色 115

4.3CSS顏色值語法 116

4.4配置內聯CSS 118

style屬性 118

動手實作4.1 118

4.5配置嵌入CSS 120

style元素 120

動手實作4.2 121

4.6配置外部CSS 123

link元素 123

動手實作4.3 123

4.7CSS的class、ID和後代選擇符 125

class選擇符 125

id選擇符 125

後代選擇符 125

動手實作4.4 125

4.8span元素 127

span元素 127

動手實作4.5 127

4.9練習使用CSS 129

動手實作4.6 129

將嵌入CSS轉換為外部CSS 129

將網頁與外部CSS檔案關聯 129

4.10層疊 132

4.11練習使用層疊 134

動手實作4.7 134

4.12CSS語法校驗 136

動手實作4.8 136

複習和練習 138

複習題 138

動手練習 139

聚焦網頁設計 139

PacificTrailsResort案例分析 140

JavaJamCoffeeHouse案例分析 143

第5章圖形和文本樣式基礎 147

5.1圖片 148

GIF圖片 148

JPEG圖片 148

PNG圖片 149

新的WebP圖像格式 149

5.2img元素 150

動手實作5.1 150

5.3圖片連結 152

動手實作5.2 152

5.4配置背景圖片 154

background-image屬性 154

同時使用背景顏色和背景圖片 154

瀏覽器如何顯示背景圖片 154

background-attachment屬性 155

5.5定位背景圖片 156

background-repeat屬性 156

定位背景圖片 156

動手實作5.3 157

5.6用CSS3配置多張背景圖片 158

漸進式增強 158

動手實作5.4 159

5.7用CSS配置字型 160

font-family屬性 160

動手實作5.5 160

5.8CSS文本屬性 162

font-size屬性 162

font-weight屬性 162

font-style屬性 162

line-height屬性 163

text-align屬性 163

text-decoration屬性 163

text-indent屬性 163

text-transform屬性 163

letter-spacing屬性 163

5.9練習配置圖形和文本 164

動手實作5.6 164

5.10用CSS配置列表符號 166

用圖片代替列表符號 167

動手實作5.7 167

5.11收藏圖示 168

配置收藏圖示 168

動手實作5.8 168

5.12圖像映射 170

map元素 170

area元素 170

探索矩形圖像映射 170

5.13複習和練習 172

複習題 172

動手練習 173

聚焦網頁設計 174

PacificTrailsResort案例分析 174

JavaJamCoffeeHouse案例分析 178

第6章CSS進階 183

6.1寬度和高度 184

width屬性 184

min-width屬性 184

max-width屬性 184

height屬性 185

動手實作6.1 185

6.2框模型 186

內容 186

填充 186

框線 186

邊距 187

框模型實例 187

6.3邊距和填充 188

margin屬性 188

padding屬性 188

6.4框線 190

動手實作6.2 191

6.5CSS3圓角 192

動手實作6.3 193

6.6居中頁面內容 194

動手實作6.4 194

6.7CSS3的框線和文本陰影 196

CSS3的box-shadow屬性 196

CSS3的text-shadow屬性 196

動手實作6.5 197

6.8CSS3的background-clip和

background-origin屬性 198

CSS3background-clip屬性 198

CSS3background-origin屬性 199

6.9CSS3背景大小和縮放 200

6.10練習使用CSS3屬性 202

動手實作6.6 202

6.11CSS3的opacity屬性 204

動手實作6.7 204

6.12CSS3RGBA顏色 206

動手實作6.8 207

6.13CSS3HSLA顏色 208

色調、飽和度、亮度和alpha 208

HSLA顏色示例 208

動手實作6.9 209

6.14CSS3的漸變 210

線性漸變語法 210

輻射漸變語法 210

CSS3漸變和漸進式增強 211

動手實作6.10 211

複習和練習 212

複習題 212

動手練習 213

聚焦網頁設計 213

PacificTrailsResort案例分析 213

JavaJamCoffeeHouse案例分析 216

第7章頁面布局基礎 221

7.1正常流動 222

動手實作7.1 222

7.2浮動 224

float屬性 224

動手實作7.2 225

浮動元素和正常流動 225

7.3清除浮動 226

clear屬性 226

7.4溢出 228

overflow屬性 228

7.5基本雙欄布局 230

動手實作7.3 230

雙欄布局的例子 234

7.6用無序列表實現垂直導航 236

用CSS配置無序列表 236

用CSStext-decoration屬性消除

下劃線 236

動手實作7.4 237

7.7用無序列表實現水平導航 238

CSS的display屬性 238

動手實作7.5 239

7.8用偽類實現CSS互動性 240

動手實作7.6 240

7.9練習CSS雙欄布局 242

動手實作7.7 242

7.10用CSS進行定位 244

static定位 244

fixed定位 244

相對定位 244

絕對定位 245

7.11練習定位 246

動手實作7.8 246

7.12CSS精靈 248

動手實作7.9 249

複習和練習 250

複習題 250

動手練習 251

聚焦網頁設計 251

PacificTrailsResort案例分析 251

JavaJamCoffeeHouse案例分析 252

第8章連結、布局和移動

開發進階 255

8.1相對連結的更多知識 256

相對連結的例子 256

動手實作8.1 256

8.2區段標識符 258

動手實作8.2 259

8.3figure元素和figcaption元素 260

figure元素 260

figcaption元素 260

添加圖題 260

動手實作8.3 261

8.4圖片浮動練習 262

動手實作8.4 262

8.5更多HTML5元素 264

section元素 264

article元素 264

aside元素 264

time元素 264

動手實作8.5 264

8.6HTML5與舊瀏覽器的兼容性 266

配置CSS塊顯示 266

HTML5Shim 266

動手實作8.6 267

8.7CSS對列印的支持 268

列印樣式最佳實踐 268

動手實作8.7 269

8.8移動網頁設計 270

移動網頁設計要考慮的問題 270

為移動使用最佳化布局 271

最佳化移動導航 271

最佳化移動圖片 272

最佳化移動文本 272

為OneWeb而設計 272

8.9viewportmeta標記 273

8.10CSS3媒體查詢 275

什麼是媒體查詢 275

使用link元素的媒體查詢例子 275

使用@media規則的媒體查詢示例 276

8.11練習媒體查詢 277

動手實作8.8 277

8.12靈活圖像 281

動手實作8.9 281

8.13測試移動顯示 283

用桌面瀏覽器測試 284

針對專業開發人員 285

複習和練習 287

複習題 287

動手練習 288

聚焦網頁設計 288

PacificTrailsResort案例分析 288

JavaJamCoffeeHouse案例分析 292

第9章表格基礎 297

9.1表格概述 298

table元素 298

border屬性 299

表格標題 299

9.2表行、單元格和表頭 300

動手實作9.1 301

9.3跨行和跨列 302

動手實作9.2 302

9.4配置無障礙訪問表格 304

9.5用CSS配置表格樣式 306

動手實作9.3 306

9.6CSS3結構性偽類 308

動手實作9.4 308

配置首字母 309

9.7配置表格區域 310

複習和練習 312

複習題 312

動手練習 313

聚焦網頁設計 313

PacificTrailsResort案例分析 314

JavaJamCoffeeHouse案例分析 315

第10章表單基礎 317

10.1概述 318

form元素 318

表單控制項 319

10.2文本框 320

10.3提交按鈕和重置按鈕 322

提交按鈕 322

重置按鈕 322

示例表單 322

動手實作10.1 323

10.4複選框和單選鈕 324

複選框 324

單選鈕 325

10.5隱藏欄位和密碼框 326

隱藏欄位 326

密碼框 326

10.6textarea元素 328

動手實作10.2 329

10.7select和option元素 330

select元素 330

option元素 330

10.8label元素 332

動手實作10.3 333

10.9fieldset元素和legend元素 334

fieldset元素 334

legend元素 334

用CSS配置fieldset分組樣式 335

10.10用CSS配置表單樣式 336

動手實作10.4 336

屬性選擇符 337

10.11伺服器端處理 338

隱私和表單 339

10.12表單練習 340

動手實作10.5 340

10.13HTML5文本表單控制項 342

E-mail地址輸入表單控制項 342

URL表單輸入控制項 342

電話號碼錶單輸入控制項 343

搜尋詞輸入表單控制項 343

HTML5文本框表單控制項的

有效屬性 343

10.14HTML5的datalist元素 344

10.15HTML5的slider控制項和spinner

控制項 346

slider表單輸入控制項 346

spinner表單輸入控制項 347

HTML5和漸進式增強 347

10.16HTML5日曆和顏色池控制項 348

日曆輸入表單控制項 348

顏色池表單控制項 349

10.17HTML5表單練習 350

動手實作10.6 350

複習和練習 352

複習題 352

動手練習 353

聚焦網頁設計 353

PacificTrailsResort案例分析 353

JavaJamCoffeeHouse案例分析 357

第11章媒體和互動性基礎 361

11.1外掛程式、容器和codec 362

輔助應用程式和外掛程式 362

11.2配置音頻和視頻 364

訪問音頻或視頻檔案 364

動手實作11.1 364

多媒體和瀏覽器兼容問題 365

11.3Flash和HTML5embed元素 366

embed元素 366

動手實作11.2 367

11.4HTML5audio和source元素 368

audio元素 368

source元素 368

動手實作11.3 369

11.5HTML5video和source元素 370

video元素 370

source元素 370

11.6練習HTML5視頻 372

動手實作11.4 372

11.7iframe元素 374

動手實作11.5 375

11.8CSS3的transform屬性 376

CSS3旋轉變換 376

CSS3伸縮變換 377

動手實作11.6 377

11.9CSS3transition屬性 378

動手實作11.7 378

11.10練習CSS過渡 380

動手實作11.8 380

11.11CSS下拉選單 382

動手實作11.9 382

11.12JavaScript和jQuery 384

JavaScript 384

jQuery 385

11.13HTML5API 386

地理位置 386

Web存儲 386

離線Web應用程式 386

用canvas元素繪圖 387

複習和練習 388

複習題 388

動手練習 388

聚焦網頁設計 389

PacificTrailsResort案例分析 389

JavaJamCoffeeHouse案例分析 391

第12章Web發布基礎 393

12.1註冊域名 394

選擇域名 394

註冊域名 395

12.2選擇Web主機 396

Web主機的類型 396

選擇虛擬主機 396

12.3用FTP發布 399

FTP應用程式 399

用FTP連線 399

使用FTP 399

12.4提交到搜尋引擎 401

搜尋引擎的組成 401

在搜尋引擎中列出你的網站 402

12.5搜尋引擎最佳化 403

連結 404

圖片和多媒體 404

有效代碼 404

有價值的內容 404

12.6無障礙訪問測試 405

通用設計和無障礙訪問 405

Web無障礙訪問標準 405

測試無障礙設計相容性 406

12.7可用性測試 407

進行可用性測試 407

動手實作12.1 408

複習和練習 409

複習題 409

動手練習 410

聚焦網頁設計 410

PacificTrailsResort案例分析 411

JavaJamCoffeeHouse案例分析 411

附錄A複習和練習答案 413

附錄BHTML5速查表 414

附錄CCSS速查表 418

附錄DXHTML速查表 422

附錄E對比XHTML和HTML5 425

附錄FWCAG2.0快速參考 433

附錄GWeb安全調色板 435