HTML5與CSS3網頁設計基礎（第2版）

《HTML5與CSS3網頁設計基礎（第2版）》是2016年清華大學出版社出版的圖書，作者是[美]Terry Felke-Morris。

基本介紹

• 書名：HTML5與CSS3網頁設計基礎
• 作者：Terry Felke-Morris
• 原版名稱：Basics of Web Design:HTML5 and CSS3
• 譯者：周靖
• ISBN：9787302422006
• 頁數：392
• 定價：49元
• 出版社：清華大學出版社
• 出版時間：2016.01.01
• 裝幀：平裝
• 開本：16開
• 印次：2-1

內容簡介

HTML5和CSS3已成為新一代網頁設計師不可缺少的工具。本書作者在信息技術行業浸染二十多年，具有豐富的教學和從業經驗，她的經典教材《Web開發與設計基礎(第5版)》被譽為“美國網頁設計師就業寶典”。這是作者針對HTML 5和 CSS 3推出的最新標準教程。本書包含的主題有：Internet和Web概念，創建HTML5網頁；用CSS配置顏色和文本；用CSS配置頁面布局；配置圖像和多媒體；探索新增的CSS3特性；套用網頁設計最佳實踐；設計可訪問和可用的網頁；搜尋引擎最佳化設計；選擇域名；發布網站。本書適合所有對網頁設計感興趣的讀者閱讀。

目錄

第1章Internet和Web基礎 1

1.1Internet和Web 2

Internet 2

Internet的誕生 2

Internet的發展 2

Web的誕生 3

第一個圖形化瀏覽器 3

各種技術的聚合 3

1.2Web標準和無障礙訪問 4

W3C推薦標準 4

Web標準和無障礙訪問 4

無障礙訪問和法律 4

Web通用設計 5

1.3網上的信息 6

信息和可靠性 6

有道德地使用網上信息的道德使用 7

1.4瀏覽器和伺服器 7

網路概述 7

客戶端/伺服器模型 8

1.5Internet協定 9

電子郵件協定 9

超文本傳輸協定 9

檔案傳輸協定 10

IP位址 10

1.6統一資源標識符(URI)和域名 11

URI和URL 11

域名 12

1.7HTML概述 13

什麼是HTML 13

什麼是XML 13

什麼是XHTML 14

HTML5——HTML的最新版本 14

1.8網頁幕後揭秘 14

文檔類型定義(DTD) 15

網頁模板 15

html元素 15

頁頭部分 15

主體部分 16

1.9第一個網頁 16

動手實作1.1 16

創建資料夾 17

保存檔案 18

測試網頁 18

複習和練習 19

複習題 19

動手練習 20

Web研究 20

聚焦Web設計 20

第2章HTML基礎 23

2.1標題元素 24

動手實作2.1 24

HTML5更多的標題選項 25

2.2段落元素 25

動手實作2.2 26

對齊 26

2.3換行和水平標尺 27

換行元素 27

動手實作2.3 27

水平標尺元素 28

動手實作2.4 28

2.4塊引用元素 29

動手實作2.5 29

2.5短語元素 30

2.6有序列表 31

type，start和reversed屬性 32

動手實作2.6 32

2.7無序列表 33

動手實作2.7 33

2.8描述列表 34

動手實作2.8 35

2.9特殊字元 36

動手實作2.9 36

2.10HTML語法校驗 37

動手實作2.10 38

2.11結構性元素 39

div元素 39

HTML5結構性元素 40

header元素 40

nav元素 40

footer元素 40

動手實作2.11 40

2.12錨元素 42

動手實作2.12 42

連結目標 43

絕對連結 43

相對連結 43

blockanchor 43

2.13練習使用連結 44

站點地圖 44

動手實作2.13 44

2.14電子郵件連結 47

動手實作2.14 48

複習和練習 48

複習題 48

動手練習 49

聚焦Web設計 50

案例學習：PacificTrailsResort 50

案例學習：JavaJamCoffeeHouse 53

第3章網頁設計基礎 57

3.1為目標客群設計 58

瀏覽器友好性 59

螢幕解析度 59

3.2網站組織 59

分級式組織 60

線性組織 60

隨機組織 61

3.3視覺設計原則 61

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

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

近似：分組相關項目 63

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

3.4提供無障礙訪問 63

無障礙設計的受益者 63

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

引擎中的排名 64

法律規定 64

無障礙設計的熱潮 64

3.5文本的使用 65

文本設計的注意事項 65

3.6Web調色板 66

十六進制顏色值 67

Web安全顏色 67

無障礙設計和顏色 67

3.7顏色的運用 68

面向兒童 68

面向年輕人 69

面向所有人 69

面向老年人 70

3.8使用圖形和多媒體 71

檔案大小和圖片尺寸 71

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

只使用必要的多媒體 71

提供替代文本 72

3.9更多設計上的考慮 73

感覺到的載入時間 73

第一屏 74

適當留白 74

水平滾動 74

3.10導航設計 74

網站要易於導航 74

導航欄 74

麵包屑導航 75

圖片導航 76

動態導航 76

站點地圖 76

站點搜尋功能 76

3.11線框和頁面布局 77

3.12固定和流動布局 79

固定布局 79

流動布局 80

3.13為行動網路設計 81

三種方式 81

移動設備設計考慮 81

桌面和移動網站的例子 82

移動設計小結 83

3.14回響式網頁設計 83

3.15Web設計最佳實踐 85

複習和練習 87

複習題 87

動手練習 88

聚焦Web設計 89

案例學習：Web項目 89

項目里程碑 89

第4章CSS基礎知識(一) 93

4.1CSS概述 94

層疊樣式表的優點 94

配置CSS的方法 95

層疊樣式表的“層疊” 95

4.2CSS選擇符和聲明 96

CSS語法基礎 96

background-color屬性 96

color屬性 96

配置背景色和文本色 96

4.3CSS顏色值語法 97

4.4配置內聯CSS 99

style屬性 99

動手實作4.1 99

4.5配置嵌入CSS 100

style元素 100

動手實作4.2 101

4.6配置外部CSS 103

link元素 103

動手實作4.3 103

4.7CSS的class、ID和上下文選擇符 104

class選擇符 104

id選擇符 105

後代選擇符 105

動手實作4.4 105

4.8span元素 106

span元素 106

動手實作4.5 106

4.9練習使用CSS 108

動手實作4.6 108

將嵌入CSS轉換為外部CSS 109

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

4.10CSS語法校驗 111

動手實作4.7 111

複習和練習 113

複習題 113

動手練習 114

聚焦網頁設計 114

案例學習：PacificTrailsResort 115

案例學習：JavaJamCoffeeHouse 118

第5章圖片樣式基礎 121

5.1圖片 122

GIF圖 122

JPEG圖片 123

PNG圖片 124

新的WebP圖像格式 124

5.2img元素 125

動手實作5.1 125

5.3圖片連結 126

動手實作5.2 127

無障礙訪問和圖片連結 128

5.4配置背景圖片 128

background-image屬性 128

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

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

background-attachment屬性 129

5.5定位背景圖片 130

background-repeat屬性 130

定位背景圖片 130

動手實作5.3 131

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

漸進式增強 133

動手實作5.4 133

5.7收藏圖示 134

配置收藏圖示 135

動手實作5.5 135

5.8用CSS配置列表符號 136

用圖片代替列表符號 136

動手實作5.6 137

5.9圖像映射 137

map元素 137

area元素 137

探究矩形圖像映射 138

複習和練習 139

複習題 139

動手練習 140

聚焦Web設計 141

案例學習：PacificTrailsResort 141

案例學習：JavaJamCoffeeHouse 143

第6章CSS基礎知識(二) 147

6.1字型 148

動手實作6.1 148

6.2文本屬性 150

font-size屬性 150

font-weight屬性 151

font-style屬性 151

text-transform屬性 151

line-height屬性 151

動手實作6.2 151

6.3對齊和縮進 152

text-align屬性 153

text-indent屬性 153

動手實作6.3 153

6.4CSS的寬度和高度 154

width屬性 154

min-width屬性 155

max-width屬性 155

height屬性 155

動手實作6.4 156

6.5CSS的框模型 156

框模型實例 157

6.6CSS的邊距和填充 158

margin屬性 158

padding屬性 158

6.7CSS的框線 159

動手實作6.5 160

6.8CSS3的圓角 161

動手實作6.6 162

6.9CSS的頁面內空居中設定居中

頁面內容 163

動手實作6.7 164

6.10CSS3的框線陰影和文本陰影 165

CSS3的box-shadow屬性 165

CSS3的text-shadow屬性 166

動手實作6.8 166

6.11CSS3的background-clip和

background-origin屬性 167

CSS3的background-clip屬性 167

CSS3background-origin屬性 168

6.12CSS3背景大小和縮放 168

6.13CSS3的opacity屬性 170

動手實作6.9 170

6.14CSS3RGBA顏色 172

動手實作6.10 173

6.15CSS3HSLA顏色 173

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

HSLA顏色示例 174

動手實作6.11 175

6.16CSS3的漸變 175

CSS3線性漸變語法 176

CSS3漸變和漸進式增強 176

配置CSS3漸變 176

複習和練習 177

複習題 177

動手練習 178

聚焦Web設計 179

案例學習：PacificTrailsResort 179

案例學習：JavaJamCoffeeHouse 181

第7章頁面布局基礎 185

7.1正常流動 186

動手實作7.1 186

7.2浮動 188

float屬性 188

動手實作7.2 189

浮動元素和正常流動 189

7.3清除浮動 190

clear屬性 190

7.4溢出 191

overflow屬性 191

7.5CSS的雙欄頁面布局 194

左側導航的雙欄布局 194

頂部logo左側導航的雙欄布局 195

還不算完美 195

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

用CSS配置無序列表 196

用CSStext-decoration屬性消除

下劃線 196

動手實作7.3 197

7.7用無序列表實現垂直導航 198

CSSdisplay屬性 198

動手實作7.4 199

7.8用偽類實現CSS互動性 200

動手實作7.5 201

7.9CSS雙欄布局練習 202

動手實作7.6 202

7.10用CSS進行定位 205

static定位 205

fixed定位 205

相對定位 206

絕對定位 207

7.11定位練習 208

動手實作7.7 208

7.12CSS精靈 210

動手實作7.8 211

複習和練習 212

複習題 212

動手練習 212

聚焦網頁設計 213

案例學習：PacificTrailsResort 213

案例學習：JavaJamCoffeeHouse 214

第8章連結、布局和移動開發進階 217

8.1深入了解相對連結 218

相對連結的例子 218

動手實作8.1 219

8.2區段標識符 220

動手實作8.2 221

8.3figure元素和figcaption元素 222

figure元素 222

figcaption元素 222

添加圖題 222

動手實作8.3 223

8.4圖片浮動練習 224

動手實作8.4 224

8.5更多HTML5元素 226

8.5更多HTML5元素 227

hgroup元素 227

section元素 227

article元素 227

aside元素 227

time元素 227

動手實作8.5 227

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

配置CSS塊顯示 229

HTML5Shim 230

動手實作8.6 230

8.7CSS對列印的支持 231

列印樣式最佳實踐 231

動手實作8.7 232

8.8移動網頁設計 233

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

為移動使用最佳化布局 234

最佳化移動導航 234

最佳化移動圖片 235

最佳化移動文本 235

為OneWeb而設計 235

8.9viewportmeta標記 235

8.10CSS3媒體查詢 238

什麼是媒體查詢 238

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

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

8.11媒體查詢練習 240

動手實作8.8 240

8.12靈活的圖像 242

動手實作8.9 243

8.13測試移動顯示 244

用桌面瀏覽器測試 245

針對專業開發人員 246

複習和練習 247

複習題 247

動手練習 248

聚焦網頁設計 248

案例學習：PacificTrailsResort 249

案例學習：JavaJamCoffeeHouse 252

第9章表格基礎 257

9.1表格概述 258

table元素 258

border屬性 259

表格標題 259

9.2表行、單元格和表頭 260

動手實作9.1 261

9.3跨行和跨列 261

動手實作9.2 262

9.4配置無障礙訪問表格 263

9.5用CSS配置表格樣式 265

動手實作?9.3 265

9.6CSS3結構性偽類 267

動手實作9.4 267

配置首字母 268

9.7配置表格區域 268

複習和練習 270

複習題 270

動手練習 271

聚焦Web設計 271

案例學習：PacificTrailsResort 272

案例學習：JavaJamCoffeeHouse 273

第10章表單基礎 275

10.1概述 276

form元素 277

表單控制項 277

10.2文本框 278

10.3提交按鈕和重置按鈕 279

提交按鈕 279

重置按鈕 279

示例表單 279

動手實作10.1 280

10.4複選框和單選鈕 281

複選框 281

單選鈕 282

10.5隱藏欄位和密碼框 283

隱藏欄位 283

密碼框 283

10.6textarea元素 284

動手實作10.2 285

10.7select和option元素 286

select元素 287

option元素 287

10.8label元素 288

動手實作10.3 288

10.9fieldset元素和legend元素 289

fieldset元素 289

legend元素 289

前瞻：用CSS配置fieldset分組

樣式 290

10.10用CSS配置表單樣式 291

10.11伺服器端處理 292

隱私和表單 293

10.12表單練習 294

動手實作10.4 294

10.13HTML5文本表單控制項 295

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

URL表單輸入控制項 296

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

搜尋詞輸入表單控制項 296

HTML5文本框表單控制項的

有效屬性 296

10.14HTML5的datalist元素 297

10.15HTML5的slider控制項和

spinner控制項 298

slider表單輸入控制項 298

spinner表單輸入控制項 299

HTML5和漸進式增強 300

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

日曆輸入表單控制項 300

顏色池表單控制項 301

10.17HTML5表單練習 302

動手實作10.5 302

複習和練習 304

複習題 304

動手練習 305

聚焦Web設計 305

案例學習：PacificTrailsResort 305

案例學習：JavaJamCoffeeHouse 309

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

11.1外掛程式、容器和codec 314

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

11.2配置音頻和視頻 315

訪問音頻或視頻檔案 315

動手實作11.1 316

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

11.3Flash和HTML5embed元素 317

embed元素 317

動手實作11.2 318

11.4HTML5的audio元素和source元素 318

audio元素 318

source元素 319

動手實作11.3 320

11.5HTML5的video元素和

source元素 320

video元素 321

source元素 321

11.6HTML5視頻練習 322

動手實作11.4 322

11.7嵌入YouTube視頻 323

iframe元素 323

動手實作11.5 324

11.8CSS3的transform屬性 325

CSS3旋轉變換 325

動手實作11.6 326

11.9CSS3的transition屬性 327

動手實作11.7 328

11.10CSS過渡練習 329

動手實作11.8 329

11.11HTML5的canvas元素 331

複習和練習 333

複習題 333

動手練習 333

聚焦Web設計 334

案例學習：PacificTrailsResort 334

案例學習：JavaJamCoffeeHouse 336

第12章上網發布 339

12.1註冊域名 340

選擇域名 340

註冊域名 341

12.2選擇主機 341

主機的類型 342

選擇虛擬主機 342

12.3用FTP發布 344

FTP應用程式 344

用FTP連線 344

使用FTP 344

12.4提交到搜尋引擎 345

搜尋引擎的組成 346

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

12.5搜尋引擎最佳化 347

連結 349

圖片和多媒體 349

有效代碼 349

有價值的內容 349

12.6無障礙訪問測試 349

通用設計和無障礙訪問 349

網路無障礙訪問標準 349

測試無障礙設計相容性 350

12.7使用性測試 351

進行使用性測試 351

動手實作12.1 352

複習和練習 353

複習題 353

動手練習 354

聚焦Web設計 354

案例學習：PacificTrailsResort 354

案例學習：JavaJamCoffeeHouse 355

附錄A複習和練習答案 357

附錄BHTML5速查表 358

附錄CCSS速查表 362

附錄DXHTML速查表 366

附錄E對比XHTML和HTML5 369

附錄FWCAG2.0快速參考 375