HTML5與CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)（第2版）目錄

時(shí)間：2023-06-14 01:15:01 | 來(lái)源：營(yíng)銷百科

時(shí)間：2023-06-14 01:15:01 來(lái)源：營(yíng)銷百科

HTML5與CSS3網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)（第2版）目錄：第1章Internet和Web基礎(chǔ) 1

1.1Internet和Web 2

Internet 2

Internet的誕生 2

Internet的發(fā)展 2

Web的誕生 3

第一個(gè)圖形化瀏覽器 3

各種技術(shù)的聚合 3

1.2Web標(biāo)準(zhǔn)和無(wú)障礙訪問 4

W3C推薦標(biāo)準(zhǔn) 4

Web標(biāo)準(zhǔn)和無(wú)障礙訪問 4

無(wú)障礙訪問和法律 4

Web通用設(shè)計(jì) 5

1.3網(wǎng)上的信息 6

信息和可靠性 6

有道德地使用網(wǎng)上信息的道德使用 7

1.4瀏覽器和服務(wù)器 7

網(wǎng)絡(luò)概述 7

客戶端/服務(wù)器模型 8

1.5Internet協(xié)議9

電子郵件協(xié)議9

超文本傳輸協(xié)議9

文件傳輸協(xié)議10

IP地址 10

1.6統(tǒng)一資源標(biāo)識(shí)符(URI)和域名 11

URI和URL 11

域名 12

1.7HTML概述 13

什么是HTML 13

什么是XML 13

什么是XHTML 14

HTML5——HTML的最新版本 14

1.8網(wǎng)頁(yè)幕后揭秘 14

文檔類型定義(DTD) 15

網(wǎng)頁(yè)模板 15

html元素15

頁(yè)頭部分 15

主體部分 16

1.9第一個(gè)網(wǎng)頁(yè) 16

動(dòng)手實(shí)作1.1 16

創(chuàng)建文件夾 17

保存文件 18

測(cè)試網(wǎng)頁(yè) 18

復(fù)習(xí)和練習(xí) 19

復(fù)習(xí)題 19

動(dòng)手練習(xí) 20

Web研究 20

聚焦Web設(shè)計(jì) 20

第2章HTML基礎(chǔ) 23

2.1標(biāo)題元素 24

動(dòng)手實(shí)作2.1 24

HTML5更多的標(biāo)題選項(xiàng) 25

2.2段落元素 25

動(dòng)手實(shí)作2.2 26

對(duì)齊 26

2.3換行和水平標(biāo)尺 27

換行元素 27

動(dòng)手實(shí)作2.3 27

水平標(biāo)尺元素 28

動(dòng)手實(shí)作2.4 28

2.4塊引用元素 29

動(dòng)手實(shí)作2.5 29

2.5短語(yǔ)元素 30

2.6有序列表 31

type，start和reversed屬性 32

動(dòng)手實(shí)作2.6 32

2.7無(wú)序列表 33

動(dòng)手實(shí)作2.7 33

2.8描述列表 34

動(dòng)手實(shí)作2.8 35

2.9特殊字符 36

動(dòng)手實(shí)作2.9 36

2.10HTML語(yǔ)法校驗(yàn) 37

動(dòng)手實(shí)作2.10 38

2.11結(jié)構(gòu)性元素 39

div元素 39

HTML5結(jié)構(gòu)性元素 40

header元素 40

nav元素 40

footer元素 40

動(dòng)手實(shí)作2.11 40

2.12錨元素 42

動(dòng)手實(shí)作2.12 42

鏈接目標(biāo) 43

絕對(duì)鏈接 43

相對(duì)鏈接 43

blockanchor 43

2.13練習(xí)使用鏈接 44

站點(diǎn)地圖 44

動(dòng)手實(shí)作2.13 44

2.14電子郵件鏈接 47

動(dòng)手實(shí)作2.14 48

復(fù)習(xí)和練習(xí) 48

復(fù)習(xí)題 48

動(dòng)手練習(xí) 49

聚焦Web設(shè)計(jì) 50

案例學(xué)習(xí)：PacificTrailsResort 50

案例學(xué)習(xí)：JavaJamCoffeeHouse 53

第3章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ) 57

3.1為目標(biāo)受眾設(shè)計(jì) 58

瀏覽器友好性 59

屏幕分辨率 59

3.2網(wǎng)站組織 59

分級(jí)式組織 60

線性組織 60

隨機(jī)組織 61

3.3視覺設(shè)計(jì)原則 61

重復(fù)：在整個(gè)設(shè)計(jì)中重復(fù)視覺元素 62

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

近似：分組相關(guān)項(xiàng)目 63

對(duì)齊：對(duì)齊元素實(shí)現(xiàn)視覺上的統(tǒng)一 63

3.4提供無(wú)障礙訪問 63

無(wú)障礙設(shè)計(jì)的受益者 63

無(wú)障礙設(shè)計(jì)有助于提高在搜索

引擎中的排名 64

法律規(guī)定 64

無(wú)障礙設(shè)計(jì)的熱潮 64

3.5文本的使用 65

文本設(shè)計(jì)的注意事項(xiàng) 65

3.6Web調(diào)色板 66

十六進(jìn)制顏色值 67

Web安全顏色67

無(wú)障礙設(shè)計(jì)和顏色 67

3.7顏色的運(yùn)用 68

面向兒童 68

面向年輕人 69

面向所有人 69

面向老年人 70

3.8使用圖形和多媒體 71

文件大小和圖片尺寸 71

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

只使用必要的多媒體 71

提供替代文本 72

3.9更多設(shè)計(jì)上的考慮 73

感覺到的加載時(shí)間 73

第一屏 74

適當(dāng)留白 74

水平滾動(dòng) 74

3.10導(dǎo)航設(shè)計(jì) 74

網(wǎng)站要易于導(dǎo)航 74

導(dǎo)航欄 74

面包屑導(dǎo)航 75

圖片導(dǎo)航 76

動(dòng)態(tài)導(dǎo)航 76

站點(diǎn)地圖 76

站點(diǎn)搜索功能 76

3.11線框和頁(yè)面布局 77

3.12固定和流動(dòng)布局 79

固定布局 79

流動(dòng)布局 80

3.13為移動(dòng)網(wǎng)絡(luò)設(shè)計(jì) 81

三種方式 81

移動(dòng)設(shè)備設(shè)計(jì)考慮 81

桌面和移動(dòng)網(wǎng)站的例子 82

移動(dòng)設(shè)計(jì)小結(jié) 83

3.14響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 83

3.15Web設(shè)計(jì)最佳實(shí)踐 85

復(fù)習(xí)和練習(xí) 87

復(fù)習(xí)題 87

動(dòng)手練習(xí) 88

聚焦Web設(shè)計(jì) 89

案例學(xué)習(xí)：Web項(xiàng)目 89

項(xiàng)目里程碑 89

第4章CSS基礎(chǔ)知識(shí)(一) 93

4.1CSS概述 94

層疊樣式表的優(yōu)點(diǎn) 94

配置CSS的方法 95

層疊樣式表的'層疊' 95

4.2CSS選擇符和聲明 96

CSS語(yǔ)法基礎(chǔ) 96

background-color屬性 96

color屬性 96

配置背景色和文本色 96

4.3CSS顏色值語(yǔ)法 97

4.4配置內(nèi)聯(lián)CSS 99

style屬性 99

動(dòng)手實(shí)作4.1 99

4.5配置嵌入CSS 100

style元素 100

動(dòng)手實(shí)作4.2 101

4.6配置外部CSS 103

link元素 103

動(dòng)手實(shí)作4.3 103

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

class選擇符 104

id選擇符 105

后代選擇符 105

動(dòng)手實(shí)作4.4 105

4.8span元素 106

span元素 106

動(dòng)手實(shí)作4.5 106

4.9練習(xí)使用CSS 108

動(dòng)手實(shí)作4.6 108

將嵌入CSS轉(zhuǎn)換為外部CSS 109

將網(wǎng)頁(yè)與外部CSS文件關(guān)聯(lián) 109

4.10CSS語(yǔ)法校驗(yàn) 111

動(dòng)手實(shí)作4.7 111

復(fù)習(xí)和練習(xí) 113

復(fù)習(xí)題 113

動(dòng)手練習(xí) 114

聚焦網(wǎng)頁(yè)設(shè)計(jì) 114

案例學(xué)習(xí)：PacificTrailsResort 115

案例學(xué)習(xí)：JavaJamCoffeeHouse 118

第5章圖片樣式基礎(chǔ) 121

5.1圖片 122

GIF圖 122

JPEG圖片 123

PNG圖片 124

新的WebP圖像格式124

5.2img元素 125

動(dòng)手實(shí)作5.1 125

5.3圖片鏈接 126

動(dòng)手實(shí)作5.2 127

無(wú)障礙訪問和圖片鏈接 128

5.4配置背景圖片 128

background-image屬性 128

同時(shí)使用背景顏色和背景圖片 128

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

background-attachment屬性 129

5.5定位背景圖片 130

background-repeat屬性 130

定位背景圖片 130

動(dòng)手實(shí)作5.3 131

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

漸進(jìn)式增強(qiáng) 133

動(dòng)手實(shí)作5.4 133

5.7收藏圖標(biāo) 134

配置收藏圖標(biāo) 135

動(dòng)手實(shí)作5.5 135

5.8用CSS配置列表符號(hào) 136

用圖片代替列表符號(hào) 136

動(dòng)手實(shí)作5.6 137

5.9圖像映射 137

map元素 137

area元素 137

探究矩形圖像映射 138

復(fù)習(xí)和練習(xí) 139

復(fù)習(xí)題 139

動(dòng)手練習(xí) 140

聚焦Web設(shè)計(jì) 141

案例學(xué)習(xí)：PacificTrailsResort 141

案例學(xué)習(xí)：JavaJamCoffeeHouse 143

第6章CSS基礎(chǔ)知識(shí)(二) 147

6.1字體 148

動(dòng)手實(shí)作6.1 148

6.2文本屬性 150

font-size屬性 150

font-weight屬性 151

font-style屬性 151

text-transform屬性 151

line-height屬性 151

動(dòng)手實(shí)作6.2 151

6.3對(duì)齊和縮進(jìn) 152

text-align屬性 153

text-indent屬性 153

動(dòng)手實(shí)作6.3 153

6.4CSS的寬度和高度 154

width屬性 154

min-width屬性 155

max-width屬性 155

height屬性 155

動(dòng)手實(shí)作6.4 156

6.5CSS的框模型 156

框模型實(shí)例 157

6.6CSS的邊距和填充 158

margin屬性 158

padding屬性 158

6.7CSS的邊框 159

動(dòng)手實(shí)作6.5 160

6.8CSS3的圓角 161

動(dòng)手實(shí)作6.6 162

6.9CSS的頁(yè)面內(nèi)空居中設(shè)置居中

頁(yè)面內(nèi)容 163

動(dòng)手實(shí)作6.7 164

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

CSS3的box-shadow屬性 165

CSS3的text-shadow屬性 166

動(dòng)手實(shí)作6.8 166

6.11CSS3的background-clip和

background-origin屬性 167

CSS3的background-clip屬性 167

CSS3background-origin屬性 168

6.12CSS3背景大小和縮放 168

6.13CSS3的opacity屬性 170

動(dòng)手實(shí)作6.9 170

6.14CSS3RGBA顏色 172

動(dòng)手實(shí)作6.10 173

6.15CSS3HSLA顏色 173

色調(diào)、飽和度、亮度和alpha 173

HSLA顏色示例 174

動(dòng)手實(shí)作6.11 175

6.16CSS3的漸變 175

CSS3線性漸變語(yǔ)法 176

CSS3漸變和漸進(jìn)式增強(qiáng) 176

配置CSS3漸變 176

復(fù)習(xí)和練習(xí) 177

復(fù)習(xí)題 177

動(dòng)手練習(xí) 178

聚焦Web設(shè)計(jì) 179

案例學(xué)習(xí)：PacificTrailsResort 179

案例學(xué)習(xí)：JavaJamCoffeeHouse 181

第7章頁(yè)面布局基礎(chǔ) 185

7.1正常流動(dòng) 186

動(dòng)手實(shí)作7.1 186

7.2浮動(dòng) 188

float屬性 188

動(dòng)手實(shí)作7.2 189

浮動(dòng)元素和正常流動(dòng) 189

7.3清除浮動(dòng) 190

clear屬性 190

7.4溢出 191

overflow屬性 191

7.5CSS的雙欄頁(yè)面布局 194

左側(cè)導(dǎo)航的雙欄布局 194

頂部logo左側(cè)導(dǎo)航的雙欄布局 195

還不算完美 195

7.6用無(wú)序列表實(shí)現(xiàn)垂直導(dǎo)航 196

用CSS配置無(wú)序列表 196

用CSStext-decoration屬性消除

下劃線 196

動(dòng)手實(shí)作7.3 197

7.7用無(wú)序列表實(shí)現(xiàn)垂直導(dǎo)航 198

CSSdisplay屬性 198

動(dòng)手實(shí)作7.4 199

7.8用偽類實(shí)現(xiàn)CSS交互性 200

動(dòng)手實(shí)作7.5 201

7.9CSS雙欄布局練習(xí) 202

動(dòng)手實(shí)作7.6 202

7.10用CSS進(jìn)行定位 205

static定位 205

fixed定位 205

相對(duì)定位 206

絕對(duì)定位 207

7.11定位練習(xí) 208

動(dòng)手實(shí)作7.7 208

7.12CSS精靈 210

動(dòng)手實(shí)作7.8 211

復(fù)習(xí)和練習(xí) 212

復(fù)習(xí)題 212

動(dòng)手練習(xí) 212

聚焦網(wǎng)頁(yè)設(shè)計(jì) 213

案例學(xué)習(xí)：PacificTrailsResort 213

案例學(xué)習(xí)：JavaJamCoffeeHouse 214

第8章鏈接、布局和移動(dòng)開發(fā)進(jìn)階 217

8.1深入了解相對(duì)鏈接 218

相對(duì)鏈接的例子 218

動(dòng)手實(shí)作8.1 219

8.2區(qū)段標(biāo)識(shí)符 220

動(dòng)手實(shí)作8.2 221

8.3figure元素和figcaption元素 222

figure元素 222

figcaption元素 222

添加圖題 222

動(dòng)手實(shí)作8.3 223

8.4圖片浮動(dòng)練習(xí) 224

動(dòng)手實(shí)作8.4 224

8.5更多HTML5元素 226

8.5更多HTML5元素 227

hgroup元素 227

section元素 227

article元素 227

aside元素 227

time元素 227

動(dòng)手實(shí)作8.5 227

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

配置CSS塊顯示 229

HTML5Shim 230

動(dòng)手實(shí)作8.6 230

8.7CSS對(duì)打印的支持 231

打印樣式最佳實(shí)踐 231

動(dòng)手實(shí)作8.7 232

8.8移動(dòng)網(wǎng)頁(yè)設(shè)計(jì) 233

移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)要考慮的問題 234

為移動(dòng)使用優(yōu)化布局 234

優(yōu)化移動(dòng)導(dǎo)航 234

優(yōu)化移動(dòng)圖片 235

優(yōu)化移動(dòng)文本 235

為OneWeb而設(shè)計(jì) 235

8.9viewportmeta標(biāo)記 235

8.10CSS3媒體查詢 238

什么是媒體查詢 238

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

使用@media規(guī)則的媒體查詢示例 239

8.11媒體查詢練習(xí) 240

動(dòng)手實(shí)作8.8 240

8.12靈活的圖像 242

動(dòng)手實(shí)作8.9 243

8.13測(cè)試移動(dòng)顯示 244

用桌面瀏覽器測(cè)試 245

針對(duì)專業(yè)開發(fā)人員 246

復(fù)習(xí)和練習(xí) 247

復(fù)習(xí)題 247

動(dòng)手練習(xí) 248

聚焦網(wǎng)頁(yè)設(shè)計(jì) 248

案例學(xué)習(xí)：PacificTrailsResort 249

案例學(xué)習(xí)：JavaJamCoffeeHouse 252

第9章表格基礎(chǔ) 257

9.1表格概述 258

table元素 258

border屬性 259

表格標(biāo)題 259

9.2表行、單元格和表頭 260

動(dòng)手實(shí)作9.1 261

9.3跨行和跨列 261

動(dòng)手實(shí)作9.2 262

9.4配置無(wú)障礙訪問表格 263

9.5用CSS配置表格樣式 265

動(dòng)手實(shí)作?9.3 265

9.6CSS3結(jié)構(gòu)性偽類 267

動(dòng)手實(shí)作9.4 267

配置首字母 268

9.7配置表格區(qū)域 268

復(fù)習(xí)和練習(xí) 270

復(fù)習(xí)題 270

動(dòng)手練習(xí) 271

聚焦Web設(shè)計(jì) 271

案例學(xué)習(xí)：PacificTrailsResort 272

案例學(xué)習(xí)：JavaJamCoffeeHouse 273

第10章表單基礎(chǔ) 275

10.1概述 276

form元素 277

表單控件 277

10.2文本框 278

10.3提交按鈕和重置按鈕 279

提交按鈕 279

重置按鈕 279

示例表單 279

動(dòng)手實(shí)作10.1 280

10.4復(fù)選框和單選鈕 281

復(fù)選框 281

單選鈕 282

10.5隱藏字段和密碼框 283

隱藏字段 283

密碼框 283

10.6textarea元素 284

動(dòng)手實(shí)作10.2 285

10.7select和option元素 286

select元素 287

option元素 287

10.8label元素 288

動(dòng)手實(shí)作10.3 288

10.9fieldset元素和legend元素 289

fieldset元素 289

legend元素 289

前瞻：用CSS配置fieldset分組

樣式 290

10.10用CSS配置表單樣式 291

10.11服務(wù)器端處理 292

隱私和表單 293

10.12表單練習(xí) 294

動(dòng)手實(shí)作10.4 294

10.13HTML5文本表單控件 295

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

URL表單輸入控件 296

電話號(hào)碼表單輸入控件 296

搜索詞輸入表單控件 296

HTML5文本框表單控件的

有效屬性 296

10.14HTML5的datalist元素 297

10.15HTML5的slider控件和

spinner控件 298

slider表單輸入控件 298

spinner表單輸入控件 299

HTML5和漸進(jìn)式增強(qiáng) 300

10.16HTML5日歷和顏色池控件 300

日歷輸入表單控件 300

顏色池表單控件 301

10.17HTML5表單練習(xí) 302

動(dòng)手實(shí)作10.5 302

復(fù)習(xí)和練習(xí) 304

復(fù)習(xí)題 304

動(dòng)手練習(xí) 305

聚焦Web設(shè)計(jì) 305

案例學(xué)習(xí)：PacificTrailsResort 305

案例學(xué)習(xí)：JavaJamCoffeeHouse 309

第11章媒體和交互性基礎(chǔ) 313

11.1插件、容器和codec 314

輔助應(yīng)用程序和插件 314

11.2配置音頻和視頻 315

訪問音頻或視頻文件 315

動(dòng)手實(shí)作11.1 316

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

11.3Flash和HTML5embed元素 317

embed元素 317

動(dòng)手實(shí)作11.2 318

11.4HTML5的audio元素和source元素 318

audio元素 318

source元素 319

動(dòng)手實(shí)作11.3 320

11.5HTML5的video元素和

source元素 320

video元素 321

source元素 321

11.6HTML5視頻練習(xí) 322

動(dòng)手實(shí)作11.4 322

11.7嵌入YouTube視頻 323

iframe元素 323

動(dòng)手實(shí)作11.5 324

11.8CSS3的transform屬性 325

CSS3旋轉(zhuǎn)變換 325

動(dòng)手實(shí)作11.6 326

11.9CSS3的transition屬性 327

動(dòng)手實(shí)作11.7 328

11.10CSS過(guò)渡練習(xí) 329

動(dòng)手實(shí)作11.8 329

11.11HTML5的canvas元素331

復(fù)習(xí)和練習(xí) 333

復(fù)習(xí)題 333

動(dòng)手練習(xí) 333

聚焦Web設(shè)計(jì) 334

案例學(xué)習(xí)：PacificTrailsResort 334

案例學(xué)習(xí)：JavaJamCoffeeHouse 336

第12章上網(wǎng)發(fā)布 339

12.1注冊(cè)域名 340

選擇域名 340

注冊(cè)域名 341

12.2選擇主機(jī) 341

主機(jī)的類型 342

選擇虛擬主機(jī) 342

12.3用FTP發(fā)布 344

FTP應(yīng)用程序 344

用FTP連接 344

使用FTP 344

12.4提交到搜索引擎 345

搜索引擎的組成 346

在搜索引擎中列出你的網(wǎng)站 347

12.5搜索引擎優(yōu)化 347

鏈接 349

圖片和多媒體 349

有效代碼 349

有價(jià)值的內(nèi)容 349

12.6無(wú)障礙訪問測(cè)試 349

通用設(shè)計(jì)和無(wú)障礙訪問 349

網(wǎng)絡(luò)無(wú)障礙訪問標(biāo)準(zhǔn) 349

測(cè)試無(wú)障礙設(shè)計(jì)相容性 350

12.7使用性測(cè)試 351

進(jìn)行使用性測(cè)試 351

動(dòng)手實(shí)作12.1 352

復(fù)習(xí)和練習(xí) 353

復(fù)習(xí)題 353

動(dòng)手練習(xí) 354

聚焦Web設(shè)計(jì) 354

案例學(xué)習(xí)：PacificTrailsResort 354

案例學(xué)習(xí)：JavaJamCoffeeHouse 355

附錄A復(fù)習(xí)和練習(xí)答案 357

附錄BHTML5速查表 358

附錄CCSS速查表 362

附錄DXHTML速查表 366

附錄E對(duì)比XHTML和HTML5 369

附錄FWCAG2.0快速參考 375^[2]