HTML5與CSS網頁設計基礎(第6版 知識點+案例+習題+視頻) Basics of Web Design: HTML5 & CSS

[美]特麗·安·菲爾克-莫裡斯 (Terry Ann Felke-Morris)著 周靖 譯

  • HTML5與CSS網頁設計基礎(第6版 知識點+案例+習題+視頻)-preview-1
  • HTML5與CSS網頁設計基礎(第6版 知識點+案例+習題+視頻)-preview-2
  • HTML5與CSS網頁設計基礎(第6版 知識點+案例+習題+視頻)-preview-3
HTML5與CSS網頁設計基礎(第6版 知識點+案例+習題+視頻)-preview-1

相關主題

商品描述

《HTML5與CSS網頁設計基礎(第6版 知識點+案例+習題+視頻)》針對HTML5和CSS的**標準進行及時的更新和修訂,主題涉及如何創建HTML5網頁、如何用CSS配置顏色和文本、如何用CSS配置頁面佈局、如何配置圖像和多媒體、如何應用網頁設計**實踐、如何設計可訪問和可用的網頁、如何為搜索引擎優化而設計、如何選擇域名及如何發布網站。 《HTML5與CSS網頁設計基礎(第6版 知識點+案例+習題+視頻)》適合對網頁設計感興趣的讀者閱讀,是一本較為理想的網頁設計教程。

目錄大綱

簡明目錄

第1 章 互聯網和萬維網基礎    1

第2 章 HTML 基礎       29

第3 章 網頁設計基礎      75

第4 章 CSS 基礎       117

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

第6 章 CSS 進階       191

第7 章 頁面佈局基礎       231

第8 章 靈活響應佈局基礎        279

第9 章 表格基礎         341

第10 章 表單基礎       363

第11 章 媒體和交互性基礎      413

第12 章 Web 發布基礎       447

 

詳細目錄

第1 章  互聯網和萬維網基礎        1

1.1 互聯網和萬維網     2

互聯網      2

互聯網的誕生     2

互聯網的發展       2

萬維網的誕生     2

第一個圖形化瀏覽器      3

各種技術的融合    3

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

W3C 推薦標準       4

網頁標準和無障礙訪問       4

無障礙訪問和法律       4

網頁通用設計     5

網絡概述     5

客戶端/ 服務器模型       6

客戶端      7

服務器      7

1.3 Internet 協議      8

電子郵件協議     8

超文本傳輸協議    8

文件傳輸協議     8

傳輸控制協議/Internet 協議   8

IP 地址      9

1.4 統一資源標識符(URI)

和域名      10

URI 和URL       10

域名     10

頂級域名    11

通用頂級域名       11

國家代碼頂級域名     12

域名系統DNS     13

1.5 網上的信息     14

網上的信息可靠嗎?    14

網上的信息是最新的嗎?    14

有沒有指向額外資源的鏈接?    14

是維基百科嗎?      15

使用網上信息時的道德規範     15

1.6 HTML 概述     16

什麽是HTML      16

什麽是XML      17

什麽是XHTML   17

HTML 的最新版本HTML5       17

1.7 網頁幕後揭秘       18

文檔類型定義(DTD)    18

網頁模板   18

html 元素   19

頁頭區域   19

主體區域   19

1.8 第一個網頁     20

新建文件夾       20

保存文件   21

測試網頁   23

復習和練習      24

第2 章 HTML 基礎        29

2.1 標題元素    30

無障礙訪問和標題     31

HTML5 更多的標題選項      31

2.2 段落元素    32

對齊     33

2.3 換行和水平標尺   34

換行元素   34

水平標尺元素      35

2.4 塊引用元素     36

2.5 短語元素    38

2.6 有序列表    40

type 屬性、start 屬性和reversed屬性     40

2.7 無序列表    42

2.8 描述列表    44

2.9 特殊實體字符       46

2.10 HTML 語法校驗     48

2.11 結構元素   50

div 元素     50

header 元素     50

nav 元素     50

main 元素       50

footer 元素      50

2.12 練習使用結構元素       52

2.13 更多結構元素     54

section 元素       54

article 元素     54

aside 元素       54

time 元素   54

2.14 錨元素      56

鏈接目標   57

絕對鏈接   57

相對鏈接   57

將整個塊作為錨      57

無障礙訪問和超鏈接    57

2.15 練習使用鏈接     58

站點地圖   58

2.16 電子郵件鏈接     62

復習和練習      64

第3 章 網頁設計基礎    75

3.1 為目標受眾設計   76

瀏覽器       77

屏幕分辨率       77

3.2 網站組織    78

分級式組織       78

線性組織   79

隨機組織   79

3.3 視覺設計原則       80

重復:在整個設計中重復視覺元素     80

對比:添加視覺刺激和吸引註意力     81

近似:分組相關項目    81

對齊:對齊元素實現視覺上的統一     81

3.4 提供無障礙訪問   82

通用設計和增強無障礙訪問的受益者       82

無障礙設計有助於提高在搜索引擎中的排名      82

法律規定   83

無障礙設計的熱潮     83

3.5 文本的使用     84

文本設計的註意事項    84

3.6 調色板     86

十六進制顏色值      86

網頁安全色       87

無障礙設計和顏色     87

3.7 針對目標受眾進行設計      88

面向所有人       88

面向老年人       88

面向兒童   89

面向年輕人       89

3.8 選擇顏色方案       90

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

色輪     90

變深、變淺和變灰     91

單色     91

相似色       92

互補色       92

分散互補色       92

三色     93

四色     93

實現顏色方案      93

3.9 使用圖片和多媒體      94

文件大小和圖片尺寸    94

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

只使用必要的多媒體    95

提供替代文本      95

3.10 更多設計考慮     96

移動設備   96

適當留白   96

視差滾動   97

目前的扁平化網頁設計趨勢     97

3.11 導航設計   98

網站要易於導航      98

導航欄       98

麵包屑導航       98

圖片導航   99

動態導航   99

站點地圖   99

站點搜索功能      99

3.12 線框和頁面佈局      100

3.13 固定和流動佈局      102

固定佈局      102

流動佈局      102

3.14 為移動網絡設計      104

移動設備設計考慮      104

為移動優化佈局       104

為移動優化導航       105

為移動優化圖片       105

為移動優化文本       105

3.15 靈活響應的網頁設計      106

3.16 網頁設計最佳實踐     108

復習和練習        110

第4 章 CSS 基礎        117

4.1 CSS 概述        118

層疊樣式表的優點       118

配置CSS 的方法       119

層疊樣式表的“層疊”       119

4.2 CSS 選擇符和聲明       120

CSS 語法基礎    120

background-color 屬性      120

color 屬性     121

配置背景色和文本色       121

4.3 CSS 顏色值語法     122

4.4 配置內聯CSS     124

style 屬性      124

4.5 配置嵌入CSS     126

style 元素      126

4.6 配置外部CSS     128

link 元素       128

4.7 CSS 的class、id 和

後代選擇符       130

class 選擇符     130

id 選擇符      130

後代選擇符     130

4.8 span 元素       132

span 元素      132

第一部分      132

第二部分      133

4.9 練習使用CSS     134

4.10 層疊     136

4.11 練習使用層疊    138

4.12 CSS 語法校驗   140

復習和練習       142

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

5.1 圖片       152

GIF 圖片       152

JPEG 圖片       153

PNG 圖片     153

WebP 圖片格式      154

流行圖形處理軟件      155

5.2 img 元素   156

用alt 屬性提供無障礙訪問     157

5.3 圖片鏈接       158

無障礙訪問和圖片鏈接      159

5.4 配置背景圖片     160

background-image 屬性       160

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

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

background-attachment 屬性     161

5.5 定位背景圖片     162

background-repeat 屬性       162

定位背景圖片    162

5.6 配置多張背景圖片       164

5.7 用CSS 配置字體       166

font-family 屬性     166

5.8 CSS 文本屬性     168

font-size 屬性     168

font-weight 屬性     168

font-style 屬性    169

line-height 屬性      169

text-align 屬性    169

text-decoration 屬性     169

text-indent 屬性      169

text-transform 屬性      169

letter-spacing 屬性     169

5.9 練習配置圖形和文本   170

5.10 用CSS 配置列表符號     172

圖片作為列表符號      173

5.11 收藏圖標      174

配置收藏圖標    174

5.12 圖像映射     176

map 元素      176

area 元素       176

探索矩形圖像映射      176

5.13 figure 元素和figcaption 元素     178

figure 元素       178

figcaption 元素   178

復習和練習       180

第6 章 CSS 進階        191

6.1 寬度和高度      192

width 屬性       192

min-width 屬性   192

max-width 屬性      193

height 屬性      193

6.2 框模型      194

內容      194

填充      194

邊框      195

邊距      195

框模型實例     195

6.3 邊距和填充      196

margin 屬性     196

padding 屬性      196

6.4 邊框       198

6.5 CSS 圓角       200

6.6 頁面內容居中     202

6.7 CSS 邊框陰影和文本陰影   204

CSS box-shadow 屬性       204

CSS text-shadow 屬性       205

6.8 CSS 屬性background-clip

和background-origin    206

CSS 屬性background-clip   206

CSS 屬性background-origin    207

6.9 background-size 屬性    208

6.10 練習使用CSS 的屬性     210

6.11 CSS 的opacity 屬性    212

6.12 CSS RGBA 顏色      214

6.13 CSS HSLA 顏色       216

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

HSLA 顏色示例     216

6.14 CSS 漸變     218

線性漸變語法    218

輻射漸變語法    218

CSS 的漸變和漸進式增強       218

復習和練習       220

第7 章 頁面佈局基礎       231

7.1 正常流動       232

CSS 佈局屬性    233

7.2 浮動       234

float 屬性      234

7.3 清除浮動       236

7.4 溢出       238

overflow 屬性     238

用overflow 屬性清除浮動       238

對比clear 屬性與overflow 屬性   238

用overflow 屬性配置滾動條      239

7.5 CSS 的屬性box-sizing      240

7.6 基本雙欄佈局     242

雙欄佈局的例子       245

7.7 用無序列表      246

用CSS 的配置無序列表     246

用CSS text-decoration 屬性消除

下劃線     246

7.8 用無序列表實現水平導航   248

CSS 的display 屬性     248

用CSS 配置       248

7.9 用偽類實現CSS 交互性      250

7.10 練習CSS 雙欄佈局    252

7.11 用CSS 控制打印     254

打印樣式最佳實踐      254

7.12 CSS 精靈     256

7.13 用CSS 進行定位     258

static 定位     258

fixed 定位     258

相對定位      258

粘性定位      259

絕對定位      260

z-index 屬性       260

7.14 固定位置的導航欄     262

7.15 區段標識符       264

區段標識符和FAQ     264

區段標識符和無障礙訪問      265

使用區段標識符      265

7.16 單頁網站     266

復習和練習       268

第8 章 靈活響應佈局基礎        279

8.1 CSS 靈活框佈局     280

配置靈活容器    280

display 屬性     280

flex-wrap 屬性    281

flex-direction 屬性     281

8.2 靈活容器的更多知識   282

流向      282

justify-content 屬性      282

align-items 屬性     283

flex-flow 屬性     283

靈活框和gap 屬性       283

8.3 靈活框圖片庫     284

8.4 配置靈活項      286

比例靈活項     286

order 屬性     287

8.5 練習靈活框技術     288

8.6 CSS 網格佈局     290

配置網格容器    290

display 屬性     290

設計網格      290

配置網格列和網格行       291

8.7 網格列、行和間隙       292

網絡佈局和gap 屬性   292

order 屬性     292

8.8 雙欄網格頁面佈局       294

配置網格列和行       294

配置網格項     295

網格行編號     295

8.9 使用網格區域的佈局   298

grid-area 屬性     298

grid-template-areas 屬性      298

配置帶空白區域的網格      299

grid-template 屬性     301

8.10 漸進式增強網格      302

CSS 特性查詢    302

8.11 用靈活框和網格來居中      304

8.12 viewport meta 標記     306

8.13 CSS 媒體查詢   308

什麽是媒體查詢       308

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

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

移動優先      309

8.14 用媒體查詢實現靈活響應的佈局   310

8.15 用媒體查詢實現靈活響應的網格

佈局     316

8.16 用CSS 實現靈活圖像     320

8.17 picture 元素       322

source 元素      322

8.18 靈活img 元素屬性     324

sizes 屬性      324

srcset 屬性       324

loading 屬性       325

8.19 測試移動顯示   326

用桌面瀏覽器測試      326

靈活測試工具    326

瀏覽器內置工具       327

更多移動測試工具      327

復習和練習       328

第9 章 表格基礎       341

9.1 表格概述       342

table 元素      342

border 屬性      342

表題      343

9.2 表行、單元格和表頭   344

9.3 跨行和跨列      346

9.4 配置無障礙訪問表格   348

headers 屬性和id 屬性     349

scope 屬性       349

9.5 用CSS 配置表格樣式       350

9.6 CSS 結構性偽類     352

配置首字母     353

9.7 配置表格區域     354

復習和練習       356

第10 章 表單基礎        363

10.1 表單概述     364

form 元素      364

表單控件      365

10.2 input 元素和文本框    366

文本框     366

10.3 提交按鈕和重置按鈕      368

提交按鈕      368

重置按鈕      368

示例表單      368

10.4 復選框和單選鈕      370

復選框     370

單選鈕     371

10.5 textarea 元素      372

10.6 select 元素和option 元素   374

select 元素       374

option 元素      374

10.7 label 元素     376

10.8 fieldset 和legend 元素     378

fieldset 元素     378

legend 元素      378

無障礙訪問和表單      379

10.9 用CSS 配置表單樣式     380

屬性選擇符     381

10.10 CSS 網格佈局表單   382

10.11 服務器端處理      384

隱私和表單     385

10.12 表單練習      386

10.13 密碼、隱藏和文件上傳控件   388

密碼框     388

隱藏輸入控件    388

文件上傳控件    388

10.14 更多文本表單控件   390

E-mail 地址輸入表單控件  390

URL 表單輸入控件     390

電話號碼表單輸入控件     391

搜索詞輸入表單控件       391

10.15 datalist 元素     392

10.16 表單輸入控件     394

slider 表單輸入控件    394

spinner 表單輸入控件       394

漸進式增強     395

10.17 日歷和顏色池控件   396

日期和時間表單控件       396

顏色池表單控件       397

10.18 更多表單練習     398

復習和練習       400

第11 章 媒體和交互性基礎      413

11.1 音頻和視頻入門       414

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

容器和codec      414

11.2 audio 和source      416

audio 元素    416

source 元素      416

音頻和無障礙訪問      417

11.3 video 和source      418

video 元素    418

source 元素      418

視頻和無障礙訪問      419

11.4 練習視頻      420

我可以使用網上找到的任何

東西嗎?      421

11.5 iframe 元素     422

iframe 元素      422

11.6 CSS 屬性transform     424

CSS 旋轉變換    424

CSS 的伸縮變換       424

11.7 CSS 屬性transition     426

11.8 練習使用過渡    428

11.9 練習使用CSS 下拉菜單    430

11.10 details 和summary    432

details 元素      432

summary 元素    432

11.11 JavaScript 和jQuery       434

JavaScript      434

jQuery      435

11.12 HTML5 的API       436

地理位置      436

Web 存儲      436

漸進式Web 應用程序      436

用canvas 元素繪圖     437

復習和練習       438

第12 章 Web 發布基礎       447

12.1 文件組織     448

相對鏈接的例子       448

12.2 註冊域名     450

選擇域名      450

註冊域名      451

12.3 選擇Web 主機      452

選擇虛擬主機    452

12.4 安全套接字層(SSL)   454

數字證書      455

12.5 用FTP 發布       456

FTP 應用程序    456

用FTP 連接       456

使用FTP       456

啟動和登錄     456

文件上傳、下載和刪除      457

進一步探索     457

12.6 提交到搜索引擎      458

搜索引擎的組成       458

機器人     458

數據庫     458

搜索表單      458

在搜索引擎中列出自己的網站     459

12.7 搜索引擎優化   460

關鍵字     460

網頁標題      460

標題標記      460

描述      460

meta 標記      460

鏈接      461

文件名     461

HTTPS 協議       461

圖片和多媒體    461

有效代碼      461

有價值的內容    461

12.8 無障礙訪問測試      462

通用設計和無障礙訪問      462

Web 無障礙訪問標準       462

Section 508 條款       462

WCAG     462

測試無障礙設計相容性      463

自動無障礙設計測試       463

手動無障礙測試       463

12.9 可用性測試       464

進行可用性測試       464

復習和練習       466

附錄       473

附錄A HTML5 速查表      474

附錄B CSS 速查表   478

附錄C WCAG 2.1 快速參考      484

附錄D ARIA 地標角色      486

附錄E Web 安全調色板     488