《HTML5+CSS3 網頁設計》是2017年清華大學出版社出版的圖書，作者是劉玉紅。
基本介紹
- 書名：HTML5+CSS3 網頁設計
- 作者：劉玉紅
- 出版社：清華大學出版社
- 出版時間：2017.09.01
出版信息,內容簡介,目錄,
出版信息
HTML5+CSS3 網頁設計
作者：劉玉紅、蒲娟
定價：78元
印次：1-1
ISBN：9787302480723
出版日期：2017.09.01
印刷日期：2017.08.24
印次：1-1
ISBN：9787302480723
出版日期：2017.09.01
印刷日期：2017.08.24
內容簡介
本書採取“HTML5網頁設計→CSS3美化網頁→網頁版式布局→綜合案例實戰”的講解模式，深入淺出地為讀者講解了網頁設計和排版布局的各項技術及實戰技能。 本書第1篇“HTML5網頁設計”主要講解HTML5快速入門、HTML5網頁文檔結構、HTML5網頁中的文本和圖像、用HTML5建立超連結、用HTML5創建表格和表單、HTML5中的多媒體、使用HTML5繪製圖形、獲取地理位置、Web通信新技術、構建離線的Web套用等；第2篇“CSS3美化網頁”主要講解CSS3概述與基本語法、使用CSS3美化網頁字型與段落、使用CSS3美化網頁圖片、使用CSS3美化網頁背景與框線、使用CSS3美化表格和表單樣式、使用CSS3美化超連結和滑鼠、使用CSS3控制網頁導航選單的樣式等；
目錄
第1篇 HTML5網頁設計
第1章 HTML5快速入門
1.1 HTML5概述 4
1.1.1 HTML5簡介 4
1.1.2 HTML5檔案的基本結構 5
1.2 HTML5檔案的編寫方法 5
1.2.1 案例1——手工編寫HTML5 5
1.2.2 案例2——使用HTML編輯器編寫HTML 6
1.3 使用瀏覽器查看HTML5檔案 10
1.3.1 各大瀏覽器與HTML5的兼容 10
1.3.2 案例3——查看頁面效果 11
1.3.3 案例4——查看源檔案 11
1.4 高手甜點 12
1.5 跟我練練手 12
第2章 HTML5網頁文檔結構
2.1 Web標準 14
2.1.1 Web標準概述 14
2.1.2 Web標準規定的內容 15
2.2 HTML5文檔的基本結構 16
2.2.1 HTML5結構 16
2.2.2 文檔類型說明 17
2.2.3 HTML5標記<html> 17
2.2.4 頭標記<head> 17
2.2.5 網頁的主體標記<body> 20
2.2.6 頁面注釋標記<!-- --> 21
2.3 綜合案例——符合W3C標準的
HTML5網頁 22
2.4 高手甜點 23
2.5 跟我練練手 24
第3章 HTML5網頁中的文本和圖像
3.1 在網頁中添加文本 26
3.1.1 案例1——普通文本的添加 26
3.1.2 案例2——特殊字元文本的添加 26
3.1.3 案例3——添加特殊文本 28
3.2 文本排版 30
3.2.1 案例4——換行標記<br> 30
3.2.2 案例5——段落標記<p> 31
3.2.3 案例6——標題標記<h1>～<h6> 32
3.3 文字列表 33
3.3.1 案例7——建立無序列表<ul> 33
3.3.2 案例8——建立有序列表<ol> 34
3.3.3 案例9——建立不同類型的無序列表 35
3.3.4 案例10——建立不同類型的有序列表 36
3.3.5 案例11——建立嵌套列表 37
3.3.6 案例12——自定義列表<dl> 38
3.4 網頁中的圖像 39
3.4.1 案例13——插入圖像<img> 39
3.4.2 案例14——設定圖像的寬度和高度
width、height 41
3.4.3 案例15——設定圖片的提示文字alt 42
3.4.4 案例16——將圖片設定為網頁背景
background 43
3.4.5 案例17——排列圖像align 44
3.5 綜合案例1——圖文並茂房屋裝飾裝修
網頁 44
3.6 綜合案例2——線上購物網站產品展示
效果 46
3.7 高手甜點 47
3.8 跟我練練手 48
第4章 用HTML5建立超連結
4.1 網頁超連結概述 50
4.1.1 超連結的概念 50
4.1.2 超連結中的URL 50
4.1.3 超連結的URL類型 51
4.2 建立網頁超連結href 51
4.2.1 案例1——創建超文本連結 51
4.2.2 案例2——創建圖片連結 53
4.2.3 案例3——創建下載連結 54
4.2.4 案例4——使用相對路徑和絕對路徑 55
4.2.5 案例5——設定以新視窗顯示超連結
頁面 56
4.2.6 案例6——設定電子郵件連結 58
4.3 案例7——浮動框架iframe 59
4.4 案例8——精確定位熱點區域map、
area 61
4.5 綜合案例——使用錨連結製作電子書
閱讀網頁 64
4.6 高手甜點 67
4.7 跟我練練手 68
第5章 用HTML5創建表格和表單
5.1 表格的基本結構 70
5.2 使用HTML5創建表格 72
5.2.1 案例1——創建普通表格<table>
<tr><td> 72
5.2.2 案例2——創建一個帶有標題的表格
<caption> 73
5.2.3 案例3——定義表格的框線類型border 74
5.2.4 案例4——定義表格的表頭<th> 75
5.2.5 案例5——設定表格背景bgcolor、
background 76
5.2.6 案例6——設定單元格背景bgcolor 78
5.2.7 案例7——合併單元格colspan、
rowspan 79
5.2.8 案例8——排列單元格中的內容align 83
5.2.9 案例9——設定單元格的行高與列寬
cellpadding 84
5.3 案例10——創建完整的表格 85
5.4 案例11——認識表單<form> 87
5.5 表單基本元素的使用 88
5.5.1 案例12——單行文本輸入框text 88
5.5.2 案例13——多行文本輸入框textarea 89
5.5.3 案例14——密碼域password 89
5.5.4 案例15——單選按鈕radio 90
5.5.5 案例16——複選框checkbox 91
5.5.6 案例17——下拉列表框select 92
5.5.7 案例18——普通按鈕button 93
5.5.8 案例19——提交按鈕submit 94
5.5.9 案例20——重置按鈕reset 95
5.6 表單高級元素的使用 96
5.6.1 案例21——url屬性的套用 96
5.6.2 案例22——email屬性的套用 97
5.6.3 案例23——date和time的套用 98
5.6.4 案例24——number屬性的套用 99
5.6.5 案例25——range屬性的套用 100
5.6.6 案例26——required屬性的套用 101
5.7 綜合案例1——創建用戶反饋單 102
5.8 綜合案例2——製作商品報價單 103
5.9 高手甜點 105
5.10 跟我練練手 106
第6章 HTML5中的多媒體
6.1 網頁音頻標記audio 108
6.1.1 audio標記概述 108
6.1.2 audio標記的屬性 108
6.1.3 音頻解碼器 109
6.1.4 audio標記瀏覽器的支持情況 109
6.2 網頁視頻標記video 109
6.2.1 video標記概述 109
6.2.2 video標記的屬性 110
6.2.3 視頻解碼器 110
6.2.4 video標記瀏覽器的支持情況 110
6.3 添加網頁音頻檔案 111
6.3.1 案例1——設定背景音樂 111
6.3.2 案例2——設定音樂循環播放loop 112
6.4 添加網頁視頻檔案 112
6.4.1 案例3——為網頁添加視頻檔案video 112
6.4.2 案例4——設定自動運行autoplay 113
6.4.3 案例5——設定視頻檔案的循環
播放loop 114
6.4.4 案例6——設定視頻視窗的高度與寬度
height、width 115
6.5 添加網頁滾動文字 115
6.5.1 案例7——滾動文字標記marquee 116
6.5.2 案例8——滾動方向屬性direction 116
6.5.3 案例9——滾動方式屬性behavior 117
6.5.4 案例10——滾動速度屬性scrollamount 118
6.5.5 案例11——滾動延遲屬性scrolldelay 119
6.5.6 案例12——滾動循環屬性loop 120
6.5.7 案例13——滾動範圍屬性height、
width 121
6.5.8 案例14——滾動背景顏色屬性bgcolor 122
6.5.9 案例15——滾動空間屬性hspace、
vspace 123
6.6 高手甜點 124
6.7 跟我練練手 124
第7章 使用HTML5繪製圖形
7.1 什麼是canvas 126
7.2 繪製基本形狀 127
7.2.1 案例1——繪製矩形 127
7.2.2 案例2——繪製圓形 128
7.2.3 案例3——使用moveTo與lineTo
繪製直線 129
7.2.4 案例4——使用bezierCurveTo繪製
貝濟埃曲線 131
7.3 繪製漸變圖形 133
7.3.1 案例5——繪製線性漸變 133
7.3.2 案例6——繪製徑向漸變 135
7.4 繪製變形圖形 136
7.4.1 案例7——變換原點坐標 136
7.4.2 案例8——圖形縮放 137
7.4.3 案例9——旋轉圖形 138
7.5 繪製其他樣式的圖形 139
7.5.1 案例10——圖形組合 140
7.5.2 案例11——繪製帶陰影的圖形 142
7.5.3 案例12——繪製文字 143
7.6 使用圖像 145
7.6.1 案例13——繪製圖像 145
7.6.2 案例14——圖像平鋪 146
7.6.3 案例15——圖像裁剪 148
7.6.4 案例16——像素處理 149
7.7 圖形的保存與恢復 151
7.7.1 案例17——保存與恢復狀態 152
7.7.2 案例18——保存檔案 153
7.8 綜合案例1——繪製火柴棒人物 154
7.9 綜合案例2——繪製商標 157
7.10 高手甜點 159
7.11 跟我練練手 160
第8章 獲取地理位置
8.1 GeolocationAPI獲取地理位置 162
8.1.1 地理定位的原理 162
8.1.2 獲取定位信息的方法 162
8.1.3 常用地理定位方法 162
8.1.4 案例1——判斷瀏覽器是否支持HTML5
獲取地理位置信息 163
8.1.5 案例2——指定緯度和經度坐標 164
8.1.6 案例3——獲取當前位置的經度與緯度 165
8.2 目前瀏覽器對地理定位的支持情況 167
8.3 綜合案例——在網頁中調用
Google地圖 168
8.4 高手甜點 171
8.5 跟我練練手 172
第9章 Web通信新技術
9.1 跨文檔訊息傳輸 174
9.1.1 跨文檔訊息傳輸的基本知識 174
9.1.2 案例1——跨文檔通信套用測試 174
9.2 WebSocketsAPI 177
9.2.1 WebSocketAPI的概念 177
9.2.2 WebSockets通信基礎 177
9.2.3 案例2——伺服器端使用Web
SocketsAPI 179
9.2.4 案例3——客戶端使用Web
SocketsAPI 183
9.3 綜合案例——編寫簡單的WebSocket
伺服器 183
9.4 高手甜點 188
9.5 跟我練練手 188
第10章 構建離線的Web
10.1 HTML5離線Web套用概述 190
10.2 使用HTML5離線Web套用API 190
10.2.1 案例1——檢查瀏覽器的支持情況 190
10.2.2 案例2——搭建簡單的離線應用程式 191
10.2.3 案例3——支持離線行為 191
10.2.4 案例4——manifest檔案 192
10.2.5 案例5——ApplicationCacheAPI 193
10.3 實例2——使用HTML5離線Web套用
構建套用 195
10.3.1 案例6——創建記錄資源的manifest
檔案 195
10.3.2 案例7——創建構成界面的HTML和
CSS 195
10.3.3 案例8——創建離線的JavaScript 196
10.3.4 案例9——檢查applicationCache的
支持情況 198
10.3.5 案例10——為Update按鈕添加處理
函式 198
10.3.6 案例11——添加Storage功能代碼 199
10.3.7 案例12——添加離線事件處理程式 199
10.4 高手甜點 200
10.5 跟我練練手 201
第2篇 CSS3美化網頁
第11章 CSS3概述與基本
11.1 CSS3概述 206
11.1.1 CSS3功能 206
11.1.2 瀏覽器與CSS3 206
11.1.3 CSS3基礎語法 207
11.1.4 CSS3常用單位 207
11.2 編輯和瀏覽CSS3 212
11.2.1 案例1——手工編寫CSS3 212
11.2.2 案例2——Dreamweaver編寫CSS 213
11.3 在HTML5中使用CSS3的方法 215
11.3.1 案例3——行內樣式 215
11.3.2 案例4——內嵌樣式 216
11.3.3 案例5——連結樣式 217
11.3.4 案例6——導入樣式 219
11.3.5 案例7——優先權問題 220
11.4 CSS3的常用選擇器 222
11.4.1 案例8——標籤選擇器 223
11.4.2 案例9——類選擇器 223
11.4.3 案例10——ID選擇器 224
11.4.4 案例11——全局選擇器 225
11.4.5 案例12——組合選擇器 226
11.4.6 案例13——繼承選擇器 227
11.4.7 案例14——偽類選擇器 228
11.5 選擇器聲明 230
11.5.1 案例15——集體聲明 230
11.5.2 案例16——多重嵌套聲明 231
11.6 綜合實例1——製作炫彩網站Logo 231
11.7 綜合案例2——製作學生信息統計表 234
11.8 高手甜點 236
11.9 跟我練練手 237
第12章 使用CSS3美化網頁字型與段落
12.1 美化網頁文字 240
12.1.1 案例1——設定文字的字型 240
12.1.2 案例2——設定文字的字號 241
12.1.3 案例3——設定字型風格 242
12.1.4 案例4——設定加粗字型 243
12.1.5 案例5——將小寫字母轉換為
大寫字母 244
12.1.6 案例6——設定字型的複合屬性 245
12.1.7 案例7——設定字型顏色 246
12.2 設定文本的高級樣式 247
12.2.1 案例8——設定文本陰影效果 248
12.2.2 案例9——設定文本溢出效果 249
12.2.3 案例10——設定文本的控制換行 250
12.2.4 案例11——保持字型尺寸不變 251
12.3 美化網頁中的段落 252
12.3.1 案例12——設定單詞之間的間隔 252
12.3.2 案例13——設定字元之間的間隔 253
12.3.3 案例14——設定文字的修飾效果 254
12.3.4 案例15——設定垂直對齊方式 255
12.3.5 案例16——轉換文本的大小寫 257
12.3.6 案例17——設定文本的水平對齊方式 258
12.3.7 案例18——設定文本的縮進效果 260
12.3.8 案例19——設定文本的行高 261
12.3.9 案例20——文本的空白處理 262
12.3.10 案例21——文本的反排 263
12.4 綜合案例1——設定網頁標題 264
12.5 綜合案例2——製作新聞頁面 266
12.6 高手甜點 267
12.7 跟我練練手 268
第13章 使用CSS3美化網頁圖片
13.1 圖片縮放 270
13.1.1 案例1——通過描述標記width和
height縮放圖片 270
13.1.2 案例2——使用CSS3中的max-width
和max-height縮放圖片 270
13.1.3 案例3——使用CSS3中的width和
height縮放圖片 272
13.2 設定圖片的對齊方式 272
13.2.1 案例4——設定圖片橫向對齊 273
13.2.2 案例5——設定圖片縱向對齊 273
13.3 圖文混排 275
13.3.1 案例6——設定文字環繞效果 275
13.3.2 案例7——設定圖片與文字的間距 277
13.4 綜合案例1——製作學校宣傳單 278
13.5 綜合案例2——製作簡單圖文
混排網頁 281
13.6 高手甜點 282
13.7 跟我練練手 283
第14章 使用CSS3美化網頁背景與框線
14.1 使用CSS3美化背景 286
14.1.1 案例1——設定背景顏色
background-color 286
14.1.2 案例2——設定背景圖片
background-image 287
14.1.3 案例3——背景圖片重複
background-repeat 288
14.1.4 案例4——背景圖片顯示
background-attachment 290
14.1.5 案例5——背景圖片位置
background-position 291
14.1.6 案例6——背景圖片大小
background-size 293
14.1.7 案例7——背景顯示區域
background-origin 294
14.1.8 案例8——背景圖像裁剪區域
background-clip 296
14.1.9 案例9——背景複合屬性 297
14.2 使用CSS3美化框線 299
14.2.1 案例10——設定框線樣式
border-style 299
14.2.2 案例11——設定框線顏色
border-color 300
14.2.3 案例12——設定框線線寬
border-width 302
14.2.4 案例13——設定框線複合屬性 303
14.3 設定框線圓角效果border-radius 304
14.3.1 案例14——設定圓角框線 304
14.3.2 案例15——指定兩個圓角半徑 305
14.3.3 案例16——繪製四個不同圓角框線 306
14.3.4 案例17——繪製不同種類的框線 308
14.4 綜合案例1——製作簡單公司主頁 310
14.5 綜合案例2——製作簡單生活資訊
主頁 314
14.6 高手甜點 316
14.7 跟我練練手 317
第15章 使用CSS3美化表格和表單樣式
15.1 美化表格樣式 320
15.1.1 案例1——設定表格框線樣式
border-collapse 320
15.1.2 案例2——設定表格框線寬度
border-width 322
15.1.3 案例3——設定表格框線顏色
background-color 323
15.2 美化表單樣式 325
15.2.1 案例4——美化表單中的元素font 325
15.2.2 案例5——美化提交按鈕transparent 327
15.2.3 案例6——美化下拉列表font 328
15.3 綜合案例1——製作用戶登錄頁面 330
15.4 綜合案例2——製作用戶註冊頁面 332
15.5 高手甜點 334
15.6 跟我練練手 335
第16章 使用CSS3美化超連結和滑鼠
16.1 使用CSS3美化超連結 338
16.1.1 案例1——改變超連結基本樣式 338
16.1.2 案例2——設定帶有提示信息的
超連結 339
16.1.3 案例3——設定超連結的背景圖 340
16.1.4 案例4——設定超連結的按鈕效果 341
16.2 使用CSS3美化滑鼠特效 343
16.2.1 案例5——使用CSS3控制滑鼠箭頭 343
16.2.2 案例6——設定滑鼠變幻式超連結 344
16.2.3 案例7——設定網頁頁面滾動條 345
16.3 綜合案例1——圖片版本超連結 348
16.4 綜合案例2——關於滑鼠特效實例 350
16.5 綜合案例3——製作一個簡單的
導航欄 352
16.6 高手甜點 354
16.7 跟我練練手 355
第17章 使用CSS3控制網頁導航選單的樣式
17.1 使用CSS3美化項目列表 358
17.1.1 案例1——美化無序列表 358
17.1.2 案例2——美化有序列表 360
17.1.3 案例3——美化自定義列表 362
17.1.4 案例4——製作圖片列表 363
17.1.5 案例5——縮進圖片列表 364
17.1.6 案例6——列表複合屬性 365
17.2 使用CSS3製作網頁選單 367
17.2.1 案例7——製作無序表格的選單 367
17.2.2 案例8——製作水平選單 369
17.3 綜合案例1——模擬soso導航欄 371
17.4 綜合案例2——將段落轉變成列表 375
17.5 高手甜點 377
17.6 跟我練練手 377
第3篇 網頁版式布局
第18章 CSS定位與DIV布局核心技術
18.1 了解塊級元素和行內級元素 382
18.1.1 案例1——塊級元素和行內級元素
的套用 382
18.1.2 案例2——div元素和span元素的區別 384
18.2 盒子模型 385
18.2.1 盒子模型的概念 385
18.2.2 案例3——定義網頁border區域 386
18.2.3 案例4——定義網頁padding區域 387
18.2.4 案例5——定義網頁margin區域 388
18.3 CSS3新增彈性盒模型 392
18.3.1 案例6——定義盒子布局取向
（box-orient） 392
18.3.2 案例7——定義盒子布局順序
（box-direction） 394
18.3.3 案例8——定義盒子布局位置
（box-ordinal-group） 395
18.3.4 案例9——定義盒子彈性空間
（box-flex） 397
18.3.5 案例10——管理盒子空間（box-pack和
box-align） 399
18.3.6 案例11——盒子空間的溢出管理
（box-lines） 401
18.4 綜合案例1——圖文排版效果 402
18.5 綜合案例2——淘寶導購選單 404
18.6 高手甜點 407
18.7 跟我練練手 408
第19章 CSS+DIV盒子的浮動與定位
19.1 定義DIV 410
19.1.1 什麼是DIV 410
19.1.2 案例1——創建DIV 410
19.2 盒子的定位 411
19.2.1 案例2——靜態定位static 412
19.2.2 案例3——相對定位relative 412
19.2.3 案例4——絕對定位absolute 413
19.2.4 案例5——固定定位fixed 414
19.2.5 案例6——盒子的浮動float 416
19.3 其他CSS布局定位方式 418
19.3.1 案例7——溢出（overflow）定位 418
19.3.2 案例8——隱藏（visibility）定位 419
19.3.3 案例9——z-index空間定位 421
19.4 新增CSS3多列布局 423
19.4.1 案例10——設定列寬度column-width 423
19.4.2 案例11——設定列數column-count 424
19.4.3 案例12——設定列間距column-gap 426
19.4.4 案例13——設定列框線樣式
19.5 綜合案例1——定位網頁布局樣式 429
19.6 綜合案例2——製作陰影文字效果 432
19.7 高手甜點 433
19.8 跟我練練手 434
