適讀人群 ：網頁設計，UI設計等行業從業人員，相關專業學生

暢銷書升級，增加了技能案例。添加了變形動畫的章節，每一章增加了瀏覽器適配解析

張曉景 暢銷書作者，Adobe 專家委員會成員，Adobe 網頁設計師認證講師，Adobe UI設計工程師，國家信息產業部653工程講師。

參與國家開放大學網頁設計和網頁界面設計課程體繫開發。從事平面設計、網站設計和UI設計多年，參與開發過數十個多媒體商業網站。對UI設計風格有獨特見解。有豐富的教學經驗，為中國石油、中國鐵路等大型企業做專業企業培訓，曾在中國傳媒大學、北京大學、北京師範大學、北京交通大學等重點院校以及Adobe創意大學和新東方等培訓機構教授設計課程。

• 
• 
• 
• 
• 
• 
• 
• 

第一章 網頁和網站制作流程
1．1 認識網頁 2
1．1．1 網頁和網站 2
1．1．2 網頁的基素 2
1．2 什麼是網頁設計 3
1．2．1 網頁設計概述 3
1．2．2 網頁設計和網頁制作 4
1．2．3 網頁設計的特點 5
1．2．4 網頁制作相關術語 6
1．3 網頁設計中所涵蓋的內容 11
1．3．1素 11
1．3．2 版式設計 11
1．4 如何設計網頁 12
1．4．1 網頁設計的基本原則 12
1．4．2 網頁設計成功的要素 13
1．4．3 網頁設計風格及色彩搭配 14
1．5 網頁設計的原則 14
1．5．1 為用戶考慮的原則 14
1．5．2 主題突出原則 15
1．5．3 整體原則 16
1．5．4 內容與形式相統一 16
1．5．5 更新和維護的原則 17
1．6 網頁設計師應具備的素質 17
1．6．1 藝術素質 17
16．2 技能素質 18
1．6．3 綜合素質 18
1．7 網站的制作流程 19
1．7．1 前期策劃 19
1．7．2 原型設計 20
1．7．3 頁面美化 21
1．7．4 頁面開發 22
1．7．5 後期維護 22
1．8 靜態頁面的制作流程 22
1．8．1 觀察設計稿 22
1．8．2 拆分設計稿 23
1．8．3 網頁設計實現 23

第二章 CSS樣式入門
2．1 CSS的基本概念 25
2．1．1 CSS的特點 25
2．1．2 CSS的基本語法 25
2．1．3 CSS的衝突 26
技能案例：使用就近原則 26
2．2 網頁設計中的CSS 28
2．2．1 如何使用CSS 28
2．2．2 CSS能做什麼 29
2．2．3 CSS不能做什麼 30
2．3 CSS的基本用法 30
2．3．1 內聯樣式 30
2．3．2 嵌入樣式 30
技能案例：設置嵌入樣式 30
2．3．3 外部樣式 31
2．4 CSS的單位和值 31
2．4．1 定義顏色值 32
2．4．2 定義字體 33
2．5 CSS基礎選擇符 34
2．5．1 通配選擇符 34
2．5．2 標簽選擇符 35
2．5．3 id選擇符 35
2．5．4 類選擇符 35
技能案例：使用類選擇符定義樣式 36
2．5．5 群組選擇符 36
2．5．6 基礎選擇符瀏覽器適配 36
2．6 CSS的層次選擇符 36
2．6．1 後代選擇符 37
技能案例：使用後代選擇符定義樣式 37
2．6．2 子選擇符 37
2．6．3 相鄰兄弟選擇符 37
技能案例：使用相鄰兄弟選擇符設置樣式 37
2．6．4 通用兄弟選擇符 38
技能案例：使用通用兄弟選擇符定義樣式 38
2．6．5 層次選擇符瀏覽器適配 39
2．7 偽素 39
2．7．1動態偽類選擇符 39
2．7．2 目標偽類選擇符 40
2．7．3 語言偽類選擇器 40
2．7．4素狀態偽類選擇器 40
2．7．5 結構偽類選擇器 41
2．7．6 偽類選擇符瀏覽器適配 42
2．7．素選擇符 44
2．8 應用案例――為頁面添加CSS樣式 45
2．8．1 設計分析 45
2．8．2 制作步驟 45
2．8．3 案例總結 51
2．9 舉一反三――產品介紹網站 51
2．9．1 案例分析 52
2．9．2 視頻操作 52

第三章 使用DIV+CSS布局頁面
3．1 定義Div 55
3．1．1 什麼是Div 55
3．1．2 插入Div 55
3．1．3 Div的嵌套和固定格式 56
3．2 CSS布局定位 57
3．2．1 浮動定位 57
3．2．2 position定位 60
3．3 可視化盒模型 62
3．3．1 盒子模型 62
3．3．2 視覺可視化模型 64
3．3．3 空白邊疊加 64
3．4 常見的網頁布局方式 65
3．4．1 居中布局設計 65
3．4．2 浮動布局設計 66
3．4．3 高度自適應 70
3．5 盒模型的控制屬性 70
3．5．1 overflow 70
技能案例：顯示滾動條 71
3．5．2 overflow-x 71
技能案例：顯示橫向滾動條 71
3．5．3 overflow-y 72
技能案例：顯示豎向滾動條 72
3．6 應用案例――使用DIV+CSS布局頁面 73
3．6．1 設計分析 73
3．6．2 制作步驟 73
3．6．3 案例總結 78
3．7 舉一反三――制作健康網站 78
3．7．1 案例分析 78
3．7．2 視頻操作 79
第四章 使用CSS控制網頁中的背景
4．1 背景顏色 81
4．1．1 設置頁面背景顏色 81
技能案例：添加背景顏色 81
4．1．2 設置塊背景顏色 82
技能案例：添加塊背景 82
4．1．3 漸變背景 83
技能案例：設置線性漸變背景 83
技能案例：設置徑向漸變背景 84
4．2 背景圖片 86
4．2．1 為頁面設置背景圖片 86
技能案例：設置背景圖片 86
4．2．2 背景圖片的重復 87
技能案例：設置背景圖片的重復 87
4．2．3 設置背景圖片的位置 88
技能案例：設置背景圖片的位置 88
4．2．4 設置背景滾動 90
技能案例：設置頁面背景滾動 90
4．2．5 背景樣式縮寫的方式 90
4．3 背景定位 91
4．3．1 背景定位屬性的語法 91
4．3．2 背景定位屬性的瀏覽器適配 91
4．4 背景裁切 92
4．4．1 背景裁切屬性的語法 92
4．4．2 背景裁切的瀏覽器適配 92
4．5 背景大小 93
4．5．1 背景大小屬性的語法 93
4．5．2 背景大小瀏覽器的適配 93
4．6 多重背景圖像 94
4．6．1 多重背景圖像屬性的語法 94
4．6．2 多重背景圖像的瀏覽器適配 95
4．6．3 CSS多背景屬性的優勢 95
4．7 應用案例――制作金融類網站頁面 96
4．7．1 設計分析 96
4．7．2 制作步驟 96
4．7．3 案例總結 102
4．8 舉一反三――制作電子商品網站 102
4．8．1 案例分析 103
4．8．2 視頻操作 103


第五章 使用CSS控制頁面文字樣式
5．1 控制文本樣式 106
5．1．1 文本字體和大小 106
技能案例：設置網頁中的文字字體 107
5．1．2 文本顏色和粗細 110
技能案例：設置網頁中文字的顏色 110
5．1．3 文本的3種樣式 112
技能案例：設置網頁中文字的樣式 112
5．1．4 文本的美化方式 113
技能案例：為網頁中的文字設置下劃線效果 113
5．1．5 英文字母大小寫 113
5．2 控制段落樣式 114
5．2．1 段落水平對齊 114
技能案例：設置文字左對齊、水平居中與右對齊 114
5．2．2 段落垂直對齊 116
技能案例：設置文本段落垂直對齊 116
5．2．3 行間距和字間距 117
5．2．4 首字下沉 118
技能案例：設置網頁中段落首字母下沉 118
5．3 文字陰影及模糊 119
5．3．1 文字陰影及模糊屬性的語法 119
技能案例：設置網頁中文本的陰影 119
5．3．2 文字陰影屬性的瀏覽器適配 120
5．4 文字溢出 120
5．4．1 文字溢出屬性的語法 121
5．4．2 文字溢出屬性瀏覽器的適配 121
5．5 文字斷開轉行 121
5．5．1 文字斷開轉行屬性的語法 121
5．5．2 文字轉行屬性的瀏覽器適配 122
5．6 應用實例――設計類網站 122
5．6．1 設計分析 123
5．6．2 制作步驟 123
5．6．3 案例總結 129
5．7 舉一反三――制作社區類網站 129
5．7．1 案例分析 130
5．7．2 視頻操作 130


第六章 使用CSS控制圖片樣式
6．1圖片樣式 132
6．1．1 圖片邊框設置 132
技能案例：設置圖片邊框 132
6．1．2 圖片縮放設置 135
技能案例：設置網頁中圖片的縮放 135
6．2 圖片對齊 137
6．2．1 水平對齊設置 137
技能案例：設置圖片的水平對齊 137
6．2．2 垂直對齊設置 138
6．3 圖文混排 139
6．3．1 文本混排 140
技能案例：設置網頁中的圖文混排 140
6．3．2 設置混排間距 140
6．4 圖像邊框 141
6．4．1 圖像邊框屬性的語法介紹 141
6．4．1 圖像邊框的瀏覽器適配 141
6．5 邊框圓角 142
6．5．1 邊框圓角屬性的語法 142
6．5．2 4個子屬性 143
6．5．3 邊框圓角屬性的瀏覽器適配 144
6．6 邊框陰影 144
6．6．1 邊框陰影屬性的語法 145
6．6．2邊框陰影瀏覽器的適配 145
6．7 邊框顏色 146
6．7．1 邊框顏色屬性的語法 146
6．7．2 邊框顏色的瀏覽器適配 147
6．8 應用實例――制作婚慶網站頁面 147
6．8．1 設計分析 147
6．8．2 制作步驟 148
6．8．3 案例總結 153
6．9 舉一反三――產品介紹網站 153
6．9．1 案例分析 154
6．9．2 視頻操作 154

第七章 使用CSS控制列表樣式
7．1 列表控制概述 155
7．1．1 列表控制原則 155
7．1．2 列表的類型及使用 155
技能案例：使用uI制作無序列表 155
技能案例：使用ol制作無序列表 156
技能案例：使用dl制作列表 156
7．1．3 改變項目樣式 157
技能案例：制作突出的列表樣式 157
7．1．4 圖片符號 158
技能案例：制作圖片符號列表 158
7．2 使用列表制作實用菜單 159
7．2．1 無需表格的菜單 159
技能案例：制作豎排菜單 159
7．2．2 菜單的橫豎轉換 161
技能案例：制作橫排菜單 161
技能案例：制作下拉菜單 162
7．3 Opacity 164
7．3．1 Opacity 語法 164
技能案例：為圖片設置透明度 164
7．3．2 Opacity的瀏覽器適配 165
7．4 CSS 顏色模式 165
7．4．1 HSL colors語法 165
技能案例：使用HSL顏色模式 165
7．4．2 HSLA colors 語法 166
技能案例：使用HSLA顏色模式 166
7．4．3 RGBA colors語法 167
技能案例：使用RGBA顏色模式 167
7．4．4 HSL、HSLA和RGBA colors的瀏覽器適配 168
7．5 應用實例――制作音樂網站 169
7．5．1 設計分析 170
7．5．2 制作步驟 170
7．5．3 案例總結 174
7．6 舉一反三――制作設計工作室網站 174
7．6．1 案例分析 174
7．6．2 視頻操作 175

第八章 使用CSS控制表單樣式
8．1 表單設計概述 177
8．1．1 表單的設計原則 177
8．1．2 表單應用分類 178
8．2 表單的設計 179
8．2．1 表單素 179
8．2．2 標簽、字段集和圖例 183
技能案例：制作表單 183
8．2．3 使用CSS控制文本字段 185
技能案例：使用CSS樣式更改表單外觀 185
8．2．4 使用CSS控制復選框與單選框 185
技能案例：使用CSS樣式更改表單外觀2 186
8．2．5 使用CSS控制列表與跳轉菜單 186
技能案例：使用CSS樣式更改表單外觀3 186
8．3 應用實例――制作用戶注冊頁面 187
8．3．1 設計分析 187
8．3．2 制作步驟 187
8．3．3 案例總結 195
8．4 舉一反三――制作用戶登錄頁面 195
8．4．1 案例分析 196
8．4．2 視頻操作 196

第九章 使用CSS美化瀏覽器效果
9．1 使用CSS控制超鏈接 199
9．1．1 認識超鏈接 199
9．1．2 關於鏈接路徑 200
9．1．3 超鏈接屬性控制 202
技能案例：設置超鏈接屬性 203
9．1．素的內容控制屬性 205
技能案例：使用content屬性 206
9．1．5 圖像映射 206
技能案例：設置熱點鏈接 206
9．1．6 鏈接的打開方式 208
9．2 超鏈接特效 208
9．2．1 按鈕式超鏈接 208
技能案例：制作按鈕式超鏈接 208
9．2．2 浮雕式超鏈接 209
技能案例：制作浮雕式超鏈接 209
9．3 鼠標特效 210
9．3．1 CSS控制鼠標箭頭 210
9．3．2 鼠標變化的超鏈接 211
技能案例：設置超鏈接的鼠標變化 211
9．4 box-sizing 212
9．4．1 box-sizing屬性語法 212
9．4．2 box-sizing的瀏覽器適配 212
技能案例：為邊框添加陰影 213
9．5 resize 213
9．5．1 resize屬性 213
9．5．2 resize的瀏覽器適配 214
9．6 outline 214
9．6．1 outline屬性語法 214
9．6．2 outline的瀏覽器適配 215
9．7 nav-index 216
9．7．1 nav-index屬性語法 216
9．7．2 nav-index的瀏覽器適配 216
9．8 應用實例――制作產品宣傳網站頁面 216
9．8．1 設計分析 217
9．8．2 制作步驟 217
9．8．3 案例總結 225
9．9 舉一反三――制作運輸公司網站頁面 225
9．9．1 案例分析 225
9．9．2 視頻操作 226

第十章 使用CSS控制變形動畫效果
10．1 CSS變形屬性簡介 228
10．1．1 變形屬性與函數 228
10．1．2 變形屬性的瀏覽器適配 228
10．2素的2D變形效果 230
10．2．1 旋轉變形 230
技能案例素的旋轉效果 230
10．2．2 縮放和翻轉變形 231
技能案例素的縮放效果 231
10．2．3 移動變形 232
技能案例素的縮放效果 232
10．2．4 傾斜變形 233
技能案例：實素的傾斜效果 234
10．2．5 矩陣變形 235
10．2．6 定義變形的中心點 235
10．2．7 同時使用多個變形函數 236
10．3素3D變形效果 236
10．3．1 3D位移變形 236
技能案例：實素的3D位移效果 237
10．3．2 3D旋轉變形 238
技能案例：實素的3D旋轉效果 238
10．3．3 3D縮放變形 240
技能案例：實素的3D縮放效果 240
10．3．4 3D矩陣變形 241
10．4 CSS過渡效果 242
10．4．1 過渡屬性簡介 242
10．4．2 如何創建過度動畫 242
10．4．3 實現過渡效果 243
10．4．4 設置過渡時間 243
10．5 應用實例―素變形過渡效果 244
10．5．1 設計分析 244
10．5．2 制作步驟 244
10．5．3 案例總結 247
10．6 舉一反三――制作關鍵幀動畫效果 247
10．6．1 案例分析 247
10．6．2 視頻操作 248


第十一章 CSS與JavaScript的綜合應用
11．1 什麼是JavaScript 250
11．1．1 了解JavaScript 250
技能案例：在頁面中嵌入JavaScript代碼 251
11．1．2 JavaScript的特點 252
11．1．3 JavaScript的應用範圍 253
11．1．4 CSS樣式與JavaScript 255
11．2 JavaScript的語法基礎 255
11．2．1 JavaScript的基本架構 255
技能案例：使用JavaScript實現彈出提示框 256
11．2．2 JavaScript的基本語法 256
11．2．3 數據類型和變量 259
11．2．4 表達式和運算符 260
11．2．5 基本語句 260
技能案例：使用if語句 261
技能案例：使用for語句 261
11．3 JQuery 262
11．3．1 JQuery Mobile 262
11．3．2 JQuery UI 263
技能案例：創建jQuery UI組件 264
11．4 其他JavaScript框架 264
11．4．1 Raect 264
11．4．2 Vue 265
11．4．3 Angular 265
11．5 應用實例――在網頁中應用交互效果 266
11．5．1 設計分析 267
11．5．2 制作步驟 267
11．5．3 案例總結 276
11．6 舉一反三――制作婚紗攝影網站 276
11．6．1 案例分析 277
11．6．2 視頻操作 278

第十二章 CSS與XML的綜合應用
12．1 XML基礎 280
12．1．1 XML的特點 280
技能案例：創建XML頁面 280
12．1．2 XML與HTML 281
技能案例：調用XML文件 282
12．1．3 XML基本語法 283
12．1．4 格式正確的XML文檔 286
12．2 XML與CSS的鏈接 287
12．2．1 使用xml：stylesheet處理指令 287
技能案例：使用CSS來格式化XML文檔 287
12．2．2 使用@import指令 289
12．3 XML與CSS的應用 289
12．3．1 顯示學生信息XML文檔 289
技能案例：創建顯示學生信息得XML文件 289
12．3．2 XML文檔實現隔行變色的表格 291
技能案例：實現XML文件隔行變色信息表 291
12．4 應用實例――在頁面中調用XML數據 294
12．4．1 設計分析 295
12．4．2 制作步驟 295
12．4．3 案例總結 300
12．5 舉一反三――制作企業網站 300
12．5．1 案例分析 300
12．5．2 視頻操作 301

第十三章 CSS與Ajax的綜合應用
13．1 了解Ajax 303
13．1．1 Ajax簡介 303
13．1．2 Ajax素 304
13．1．3 Ajax的優勢 305
13．1．4 實現Ajax的步驟 305
13．1．5 使用CSS的必要性 306
13．2 Ajax基礎 307
13．2．1 創建XMLHttpRequest對像 307
技能案例：創建Ajax對像 307
13．2．2 發出Ajax請求 308
技能案例：添加表單並獲取數據 308
13．2．3 處理服務器響應 309
技能案例：添加處理服務器響應的代碼 309
13．2．4 使用CSS樣式 309
技能案例：為案例添加CSS樣式 309
13．3 HTML 簡介 310
13．3．1 HTML 標簽 310
13．3．2 HTML 事件屬性 311
13．3．3 HTML 標準屬性 313
13．4 應用實例――使用Ajax實現頁面特效 313
13．4．1 設計分析 314
13．4．2 制作步驟 314
13．4．3 案例總結 322
13．5 舉一反三――通過Ajax實現可拖動Div塊 322
13．5．1 案例分析 322
13．5．2 視頻操作 323

第十四章 綜合商業案例
14．1綜合實例――制作遊戲類網站 325
14．1．1 設計分析 325
14．1．2 制作步驟 325
制作網頁頂部導航欄 325
制作網頁的上半部分主體內容 327
制作網頁的下半部分主體內容 330
制作網頁底部信息 336
14．1．3 案例總結 337
14．2 綜合實例――制作醫療保健類網站 337
14．2．1 設計分析 337
14．2．2 制作步驟 337
制作網頁頂部導航信息 337
制作網頁左半部分主體 342
制作網頁中間部分主體 342
制作網頁右半部分主體 345
制作網頁版底信息欄目 347
14．2．3 案例總結 348