《HTML5+CSS3網頁設計實例教程》是2019年4月清華大學出版社出版的圖書，作者是楊福貞、何永峰、李岩。
基本介紹
- 中文名：HTML5+CSS3網頁設計實例教程
- 作者：楊福貞、何永峰、李岩
- 出版時間：2019年4月
- 出版社：清華大學出版社
- ISBN：9787302525004
- 定價：68 元
內容簡介,圖書目錄,
內容簡介
《HTML5+CSS3網頁設計實例教程》循序漸進地講述Web網頁設計技術，從基本概念到HTML5網頁設計、CSS3樣式控制以及綜合實例，主要內容包括網頁設計新時代、HTML5的演進、創建HTML5文檔、表格與列表、圖片與富媒體、HTML5表單的套用、CSS3概述、CSS3選擇器、文本與字型、套用CSS3的屬性、頁面布局與媒介查詢、變形和變換以及動畫等，並且運用大量實例對各種關鍵技術進行深入淺出的分析。
《HTML5+CSS3網頁設計實例教程》內容豐富、結構合理、思路清晰、語言簡練流暢、示例翔實，既適合作為高等院校計算機相關專業的教材，也可作為網頁設計套用開發人員的參考書。
圖書目錄
第1章 網頁設計新時代 1
1.1 Web網頁設計原則 1
1.1.1 Web標準 1
1.1.2 Web標準與瀏覽器的兼容性 3
1.1.3 可訪問性 3
1.1.4 結構化文檔的Web 4
1.2 HTML5概述 4
1.2.1 傳統HTML與XHTML 4
1.2.2 HTML5是如何形成的 5
1.2.3 HTML5的設計原則 7
1.3 HTML5頁面的特徵 9
1.3.1 使用HTML5結構化元素 10
1.3.2 使用CSS3美化HTML5文檔 13
1.4 Web網頁設計基礎 14
1.4.1 網頁的基本元素 14
1.4.2 網頁設計常用技術 17
1.4.3 網頁設計常用工具 18
1.5 編寫一個簡單的Web頁面 20
1.5.1 搭建瀏覽環境 20
1.5.2 檢測瀏覽環境是否支持 20
1.5.3 使用HTML5編寫一個簡單的Web頁面 21
1.6 本章小結 22
1.7 思考和練習 22
第2章 HTML5的演進 24
2.1 HTML與XHTML基礎 24
2.1.1 標籤與元素 24
2.1.2 特性組 26
2.1.3 HTML和XHTML實例 29
2.2 認識HTML5 31
2.2.1 用XHTML 1.0標記頁面 31
2.2.2 84.8%的標記可以保留 32
2.3 關於<head> 33
2.3.1 更完美的DOCTYPE 33
2.3.2 在HTML5中聲明語言 34
2.3.3 字元編碼 35
2.3.4 簡單易記 35
2.4 從HTML與XHTML到HTML5 35
2.4.1 XHTML 1.0風格的“Hello World!” 35
2.4.2 HTML 4.01風格的“Hello World!” 36
2.4.3 HTML5“鬆散”風格的“Hello World!” 36
2.4.4 HTML5“嚴格”風格的頁面 37
2.5 讓HTML5得到跨瀏覽器支持 37
2.5.1 瀏覽器如何處理未知元素 37
2.5.2 shiv 39
2.5.3 IE列印保護器 40
2.5.4 聲明塊級元素 40
2.6 HTML5樣板頁面 40
2.6.1 不再有type屬性 41
2.6.2 填充材料與替換 42
2.7 HTML5頁面驗證 42
2.7.1 HTML5驗證器 42
2.7.2 更新和驗證“貝克小姐”頁面 44
2.8 新的結構化元素 46
2.8.1 塊級元素與行內元素 47
2.8.2 結構化構建塊<div>、<section>和<article> 47
2.8.3 標題：<header>、<footer>、<hgroup>以及<h1>～<h6> 50
2.8.4 更多的結構化元素：<nav>、<aside>、<figure>以及<figcaption> 50
2.8.5 將一個簡單的頁面轉換成HTML5頁面 52
2.9 本章小結 54
2.10 思考和練習 55
第3章 創建HTML5文檔 56
3.1 HTML5文檔結構 56
3.1.1 構建基本的文檔結構 56
3.1.2 用元數據元素說明文檔 58
3.1.3 使用腳本元素 61
3.2 構建文檔主體 62
3.2.1 基本文本格式化 62
3.2.2 連結與導航 67
3.3 描述文本級語義 78
3.3.1 描述文本級語義的元素 79
3.3.2 使用文本標記的實例 84
3.4 編輯文本 86
3.5 使用字元實體顯示特殊字元 87
3.6 注釋 87
3.7 本章小結 88
3.8 思考和練習 88
第4章 表格與列表 90
4.1 表格介紹 90
4.2 基本表格元素與特性 93
4.2.1 使用<table>元素創建表格 93
4.2.2 創建基本表格 95
4.3 為表格添加標題 96
4.4 表格區域分組 97
4.4.1 使用colspan特性跨越列 97
4.4.2 使用rowspan特性跨越行 98
4.4.3 將表格分解為表頭、表體及表尾 99
4.4.4 使用<colgroup>元素對列進行分組 101
4.4.5 使用<col>元素在列間共享樣式 102
4.5 嵌套表格 102
4.6 易訪問表格 103
4.6.1 如何線性化表格 104
4.6.2 使用id、scope及headers特性 105
4.6.3 創建易訪問表格 106
4.7 使用列表 107
4.7.1 使用<ul>元素創建無序列表 108
4.7.2 有序列表 108
4.7.3 定義列表 110
4.7.4 列表嵌套 111
4.8 表格套用實例 111
4.9 本章小結 113
4.10 思考和練習 114
第5章 圖片與富媒體 115
5.1 在網頁中添加圖片 115
5.1.1 使用<img>元素添加圖片 115
5.1.2 使用圖片作為連結 117
5.1.3 選擇正確的圖片格式 118
5.2 HTML5的視頻 119
5.2.1 視頻格式 120
5.2.2 瀏覽器支持 121
5.2.3 添加視頻源 121
5.2.4 track元素 124
5.2.5 更多的視頻設定 126
5.3 HTML5的音頻 127
5.3.1 音頻編解碼器 128
5.3.2 瀏覽器支持情況 128
5.3.3 添加音頻源 129
5.3.4 使用jPlayer 129
5.4 canvas 129
5.4.1 基於像素的自由 129
5.4.2 添加/實現canvas 130
5.4.3 canvas的威力與潛力 137
5.5 SVG 139
5.5.1 SVG與canvas的選擇 139
5.5.2 用SVG發布向量 140
5.6 富媒體頁面的設計實例 142
5.7 本章小結 144
5.8 思考和練習 144
第6章 HTML5表單的套用 145
6.1 認識表單 145
6.2 使用<form>元素創建表單 147
6.2.1 action特性 147
6.2.2 method特性 148
6.2.3 id特性 148
6.2.4 name特性 148
6.2.5 enctype特性 148
6.2.6 accept-charset特性 148
6.2.7 novalidate特性 148
6.2.8 target特性 149
6.2.9 autocomplete特性 149
6.3 <form>元素中的表單控制項 149
6.3.1 文本輸入控制項 149
6.3.2 新的HTML5輸入控制項類型與特性 153
6.3.3 按鈕 159
6.3.4 複選框 161
6.3.5 單選按鈕 163
6.3.6 下拉選擇框 164
6.3.7 檔案選擇框 167
6.3.8 隱藏控制項 168
6.3.9 新的HTML5表單元素 168
6.4 創建一個聯繫方式表單 170
6.5 使用<label>元素為控制項創建標籤 172
6.6 使用<fieldset>及<legend>元素組織表單結構 173
6.7 焦點 174
6.7.1 標籤遍歷順序 175
6.7.2 快捷鍵 176
6.8 disabled與readonly控制項 176
6.9 向伺服器傳送表單數據 178
6.9.1 HTTP get方法 178
6.9.2 HTTP post方法 179
6.10 創建更有用的表單欄位 179
6.11 本章小結 181
6.12 思考和練習 182
第7章 CSS3概述 183
7.1 CSS基礎 183
7.1.1 CSS演變歷史 183
7.1.2 CSS的版本 184
7.1.3 CSS規則 187
7.1.4 繼承 190
7.2 CSS規則的添加位置 191
7.2.1 用<link>元素鏈入外部樣式表 192
7.2.2 用<style>元素導入外部樣式表 193
7.2.3 使用外部樣式表 193
7.2.4 外部樣式表的優勢 196
7.3 CSS屬性 197
7.4 CSS3新增特性 198
7.4.1 CSS3模組化方式 198
7.4.2 CSS3新增屬性及偽類 200
7.4.3 CSS3的優點 201
7.5 一個基本實例 202
7.6 本章小結 205
7.7 思考和練習 205
第8章 CSS3選擇器 206
8.1 選擇器概述 206
8.2 選擇器 208
8.2.1 通用選擇器 208
8.2.2 類型選擇器 208
8.2.3 類選擇器 208
8.2.4 id選擇器 209
8.2.5 子選擇器 209
8.2.6 後代選擇器 209
8.2.7 相鄰兄弟選擇器 210
8.2.8 一般兄弟選擇器 210
8.2.9 子選擇器與相鄰兄弟選擇器的用途 210
8.2.10 特性選擇器 211
8.3 CSS3選擇器 213
8.3.1 組合器 213
8.3.2 特性選擇器和子串選擇器 214
8.3.3 UI元素狀態偽類 218
8.3.4 :target偽類 220
8.3.5 結構偽類 223
8.3.6 偽元素 229
8.3.7 否定偽類 231
8.4 瀏覽器支持 232
8.6 套用實例 232
8.7 本章小結 235
8.8 思考和練習 235
第9章 文本與字型 237
9.1 用CSS控制文本 237
9.1.1 字型檔和字型 238
9.1.2 font-family屬性 238
9.1.3 font-size屬性 239
9.1.4 font-weight屬性 240
9.1.5 font-style屬性 241
9.1.6 font-variant屬性 242
9.2 用CSS格式化文本 243
9.2.1 color屬性 243
9.2.2 text-align屬性 243
9.2.3 vertical-align屬性 244
9.2.4 text-decoration屬性 245
9.2.5 text-indent屬性 245
9.2.6 text-shadow屬性 246
9.2.7 text-transform屬性 246
9.2.8 letter-spacing屬性 247
9.2.9 word-spacing屬性 248
9.2.10 white-space屬性 248
9.2.11 direction屬性 249
9.2.12 文本偽類 250
9.3 文本樣式化實例 250
9.4 使用@font-face自定義字型 252
9.4.1 解析@font-face語法: @font-face聲明 252
9.4.2 @font-face的可靠語法 253
9.4.3 為網頁添加自定義字型的實例 253
9.5 使用CSS3調整字型 256
9.5.1 設定font-family 256
9.5.2 設定字號 257
9.5.3 選擇字形的粗細 257
9.5.4 選擇正確的字寬 258
9.5.5 設定垂直間距 258
9.5.6 用格線設計字型 258
9.6 使用CSS3控制文本格式 261
9.6.1 控制文本溢出 261
9.6.2 從基線開始垂直對齊文本 261
9.6.3 控制單詞中各個字元之間的空白 262
9.6.4 調整字間距 262
9.6.5 打斷長單詞 263
9.6.6 控制空白和換行符 263
9.6.7 列印斷字 264
9.6.8 控制文本標點符號 265
9.6.9 控制非拉丁Web字型的顯示 266
9.6.10 使用連字和其他OpenType字型功能 267
9.7 本章小結 268
9.8 思考和練習 268
第10章 套用CSS3的屬性 270
10.1 顏色與透明度 270
10.1.1 RGB 270
10.1.2 RGBa透明度 271
10.1.3 HSLa 272
10.1.4 不透明度 273
10.2 背景 274
10.2.1 background-clip屬性 274
10.2.2 background-origin屬性 275
10.2.3 background-size屬性 277
10.2.4 多重背景 279
10.3 框線 281
10.3.1 border-radius屬性 282
10.3.2 border-image屬性 284
10.4 下拉陰影 286
10.4.1 box-shadow屬性 286
10.4.2 text-shadow屬性 288
10.5 漸變 289
10.6 檢測支持和輔助其他瀏覽器 293
10.6.1 使用Modernizr 294
10.6.2 CSS3 Pie 294
10.7 組合CSS3效果實例 295
10.8 本章小結 297
10.9 思考和練習 297
第11章 頁面布局與媒體查詢 299
11.1 盒子模型 299
11.1.1 一個演示盒子模型的示例 300
11.1.2 border屬性 301
11.1.3 padding屬性 303
11.1.4 margin屬性 304
11.1.5 內容盒子的尺寸 305
11.2 使用CSS定位與布局 309
11.2.1 正常流 309
11.2.2 position屬性 310
11.2.3 盒子偏移屬性 310
11.2.4 相對定位 310
11.2.5 絕對定位 311
11.2.6 固定定位 312
11.2.7 z-index屬性 313
11.2.8 使用float屬性實現流動 314
11.2.9 clear屬性 316
11.3 構建頁面布局實例 317
11.4 媒體查詢 320
11.5 CSS3布局 322
11.5.1 CSS3定位布局模組 322
11.5.2 CSS3碎片模組 322
11.5.3 多列布局模組 322
11.5.4 CSS3區域模組 325
11.5.5 CSS3排除和形狀模組 326
11.5.6 CSS3分頁媒體模組 327
11.5.7 用於分頁媒體模組的CSS生成內容 328
11.5.8 彈性盒子布局模組 329
11.5.9 CSS格線布局模組 331
11.6 本章小結 332
11.7 思考和練習 332
第12章 變形、變換和動畫 334
12.1 CSS的2D和3D變形 334
12.1.1 變形屬性和變形函式 335
12.1.2 元素的變形效果 336
12.1.3 修改變形對象 342
12.1.4 瀏覽器對CSS變形的支持 346
12.2 CSS變換和CSS動畫 348
12.3 CSS變換 348
12.3.1 使用transition-property設定可變換的屬性 349
12.3.2 使用transition-duration控制變換的持續時間 351
12.3.3 transition-timing-function、三次貝塞爾曲線和steps( )函式 351
12.3.4 使用transition-delay推遲變換的起始時間 353
12.3.5 多個變換值和簡寫形式的變換屬性 354
12.3.6 簡寫變換屬性時值的排序 354
12.3.7 瀏覽器對CSS變換的支持 354
12.4 使用CSS動畫製作關鍵幀動畫 355
12.4.1 創建一個簡單動畫 356
12.4.2 使用@keyframes控制動畫 357
12.4.3 使用animation-timing-function屬性的計時函式 358
12.4.4 使用animation-delay修改動畫的起始方式 359
12.4.5 控制動畫的運行次數 359
12.4.6 結合animation-direction 360
12.4.7 控制元素在動畫前後的表現 360
12.4.8 暫停動畫 362
12.4.9 簡略形式的動畫屬性以及用逗號分隔的animation-*值 362
12.4.10 瀏覽器對CSS動畫的支持 363
12.5 CSS動畫+JavaScript 363
12.6 本章小結 364
12.7 思考和練習 364
第13章 網頁設計綜合實例 366
13.1 設計旅遊網站網頁 366
13.1.1 頁面的設計 366
13.1.2 全局樣式的設計 368
13.1.3 網頁首部(top區) 368
13.1.4 主內容區(main區) 371
13.1.5 頁尾區(footer區) 379
13.2 設計網頁遊戲 380
13.2.1 遊戲簡介 380
13.2.2 界面布局的設計 381
13.2.3 數據模型的設計 385
13.2.4 遊戲的邏輯實現 388
13.2.5 遊戲的完整代碼 397
參考文獻 398
