內 容 簡 介本書作者根據自己在長期教學中積累的豐富的網頁設計教學經驗，完整、詳盡地介紹了CSS 3 + DIV網頁樣式與布局的技術。全書共分為24章，前19章分別介紹了開發網站的準備工作、HTML 5技術、CSS樣式入門、CSS樣式基本語法、CSS 3的高級特性、控制網頁字體和段落樣式、控制網頁圖片樣式、控制網頁背景和邊框樣式、美化網頁瀏覽效果、控制表格與表單樣式、控制列表樣式、使用CSS 3濾鏡美化網頁元素、CSS定位與DIV布局核心技術、CSS + DIV盒子的浮動與定位、固定寬度網頁布局剖析與制作、自動縮放網頁布局剖析與制作、CSS 3與JavaScript的搭配應用、CSS與XML的綜合應用、CSS與Ajax的綜合應用。最后5章介紹了5個綜合性網站的例子。通過學習案例，使讀者進一步鞏固所學的知識，提高實戰能力。本書內容豐富、全面，圖文并茂，步驟清晰，通俗易懂，專業性強，使讀者能理解CSS 3 + DIV網頁樣式與布局的技術，并能解決實際生活或工作中的問題，真正做到知其然更知其所以然。通過重點章節，條理清晰、系統地介紹了讀者希望了解的網頁設計技巧。本書涉及面廣泛，幾乎囊括了CSS 3 + DIV網頁樣式與布局的所有重要知識，適合所有的網頁設計初學者快速入門，同時也適合想全面了解CSS 3 + DIV網頁樣式與布局的設計人員閱讀。前 言
伴隨著Web 2.0潮流的盛行，傳統的表格布局模式正逐漸被網頁標準化CSS + DIV的設計方式取代，對最新CSS 3的學習也成為網頁設計師的必修功課。本書專門針對網頁樣式與布局的初學者，幫助他們快速提高實戰水平。
1. 本書特色
(1)知識全面：由淺入深，涵蓋了所有的CSS 3 + DIV知識點，幫助讀者快速掌握網頁設計方面的技能。
(2)圖文并茂：在介紹案例的過程中，每一個操作均有對應的插圖。圖文結合的方式使讀者在學習過程中能夠直觀、清晰地看到操作的過程及效果，便于更快地理解和掌握。
(3)易學易用：顛覆傳統“看”書的觀念，變成一本能“操作”的圖書。
(4)案例豐富：把知識點融會于系統的案例實訓中，并且結合經典案例進行講解和拓展，進而實現“知其然，并知其所以然”的效果。
(5)貼心提示：本書對讀者在學習過程中可能會遇到的疑難問題以“提示”和“注意”等形式進行說明，以免讀者在學習的過程中走彎路。
(6)超值贈送：除了本書的素材和結果外，還附贈封面所述的大量的資源，讀者可以全面掌握網頁設計方方面面的知識。
2. 讀者對象
本書不僅適合網頁設計初級讀者入門學習，也可作為中、高級用戶的參考手冊。書中大量的實例模擬真實的網頁設計案例，對讀者的工作有現實的借鑒作用。
3. 作者團隊
本書作者劉玉紅長期從事網站設計與開發工作。胡同夫、梁云亮、王攀登、王婷婷、陳偉光、包慧利、孫若淞、肖品、王維維和劉海松等人參與了本書的編寫工作。
本書雖然傾注了編者的努力，但由于水平有限，書中難免存在疏漏之處，懇請讀者批評指正。讀者如果遇到問題或有意見和建議，敬請與我們聯系，我們將全力提供幫助。
編 者
目 錄
第1章 制作網頁的準備工作 1
1.1 認識網頁和網站 2
1.1.1 什么是網頁 2
1.1.2 什么是網站 3
1.2 網頁中需要包含的要素 3
1.2.1 需要HTML文件 3
1.2.2 需要DIV層 4
1.2.3 需要CSS定義的網頁樣式 4
1.2.4 需要JavaScript設置網頁動畫 5
1.2.5 需要域名與服務器空間 5
1.3 一個簡單網頁的基本構成 6
1.3.1 head部分 6
1.3.2 body部分 6
1.3.3 注釋部分 7
1.4 制作網頁的總體流程 8
1.4.1 網頁規劃 8
1.4.2 搜集資料 8
1.4.3 使用Photoshop設計網頁的總體效果 9
1.4.4 通過切圖，得到網頁素材文件 9
1.4.5 搭建網頁DIV層 10
1.4.6 定義CSS和JavaScript效果 11
1.4.7 測試網頁 11
1.5 網站種類與網頁布局方式 12
1.5.1 網站的種類 12
1.5.2 網頁布局方式 13
1.6 綜合示例——在Photoshop CS6中構建網頁結構 15
1.7 上機練習——使用Photoshop制作縱向導航條 16
1.8 專家答疑 18
第2章 網頁實現技術——HTML 5 21
2.1 HTML 5的基本概念 22
2.1.1 HTML 5簡介 22
2.1.2 HTML 5文件的基本結構 22
2.1.3 認識HTML 5標記 23
2.2 HTML 5文件的編寫方法 23
2.2.1 使用記事本手工編寫HTML文件 24
2.2.2 使用Dreamweaver CS6編寫HTML文件 24
2.3 HTML 5的基本標記 27
2.3.1 字符標記 27
2.3.2 超級鏈接標記 28
2.3.3 列表標記 30
2.3.4 制作純文本網頁 31
2.4 HTML 5的段落和圖片標記 32
2.4.1 常用段落和圖片標記 32
2.4.2 文字和圖片混合排版 33
2.5 HTML 5的表單標記 34
2.5.1 常用的表單控件 34
2.5.2 多行文本標記和下拉列表 36
2.5.3 用戶注冊頁面 37
2.6 HTML 5的表格標記 38
2.6.1 表格標記 38
2.6.2 制作季度報表 40
2.7 綜合示例——制作網站首頁 41
2.8 上機練習——簡單的HTML 5網頁 45
2.9 專家答疑 45
第3章 CSS 3樣式入門 47
3.1 CSS概述 48
3.1.1 CSS的功能 48
3.1.2 瀏覽器與CSS 48
3.1.3 CSS的發展歷史 49
3.2 CSS 3的常用單位 49
3.2.1 顏色單位 49
3.2.2 長度單位 53
3.3 編輯和瀏覽CSS 54
3.3.1 手工編寫CSS 54
3.3.2 用Dreamweaver編寫CSS 55
3.4 在HTML 5中調用CSS的方法 56
3.4.1 行內樣式 56
3.4.2 內嵌樣式 57
3.4.3 鏈接樣式 59
3.4.4 導入樣式 60
3.5 調用方法的優先級問題 61
3.5.1 行內樣式和內嵌樣式比較 61
3.5.2 內嵌樣式和鏈接樣式比較 62
3.5.3 鏈接樣式和導入樣式 62
3.6 綜合示例——制作學生信息統計表 63
3.7 專家答疑 65
第4章 CSS樣式的基本語法 67
4.1 CSS基礎語法 68
4.1.1 CSS構造規則 68
4.1.2 CSS的注釋 68
4.2 CSS的常用選擇器 69
4.2.1 標簽選擇器 69
4.2.2 類選擇器 70
4.2.3 ID選擇器 71
4.2.4 選擇器的聲明 71
4.3 綜合示例——制作炫彩網站Logo 72
4.4 專家答疑 75
第5章 CSS 3的高級特性 77
5.1 復合選擇器 78
5.1.1 全局選擇器 78
5.1.2 “交集”選擇器 79
5.1.3 “并集”選擇器 79
5.1.4 繼承(后代)選擇器 80
5.2 CSS 3新增的選擇器 81
5.2.1 屬性選擇器 81
5.2.2 結構偽類選擇器 83
5.2.3 UI元素狀態偽類選擇器 84
5.2.4 偽類選擇器 86
5.3 CSS的繼承特性 87
5.3.1 繼承關系 87
5.3.2 CSS繼承的運用 88
5.4 CSS的層疊特性 89
5.4.1 同一選擇器被多次定義的處理 89
5.4.2 同一標簽運用不同類型選擇器的處理 90
5.5 綜合示例——制作新聞菜單 91
5.6 專家答疑 94
第6章 使用CSS 3控制網頁字體與段落的樣式 95
6.1 通過CSS控制字體樣式 96
6.1.1 控制字體類型 96
6.1.2 定義字體大小 97
6.1.3 定義字體風格 98
6.1.4 控制文字的粗細 99
6.1.5 將小寫字母轉為大寫字母 100
6.1.6 設置字體的復合屬性 101
6.1.7 定義文字的顏色 102
6.2 CSS 3中新增的文本高級樣式 103
6.2.1 添加文本的陰影效果 103
6.2.2 設置文本的溢出效果 104
6.2.3 控制文本的換行 105
6.2.4 設置字體尺寸 106
6.3 通過CSS控制文本間距與對齊方式 107
6.3.1 設置單詞之間的間隔 108
6.3.2 設置字符之間的間隔 108
6.3.3 為文本添加下劃線、上劃線、刪除線 109
6.3.4 設置垂直對齊方式 110
6.3.5 轉換文本的大小寫 112
6.3.6 設置文本的水平對齊方式 113
6.3.7 設置文本的縮進效果 115
6.3.8 設置文本的行高 116
6.3.9 文本的空白處理 116
6.3.10 文本的反排 118
6.4 綜合示例——設置網頁標題 119
6.5 上機練習——制作新聞頁面 121
6.6 專家答疑 122
第7章 使用CSS控制網頁圖片的樣式 123
7.1 圖片縮放 124
7.1.1 通過描述標記width和height來縮放圖片 124
7.1.2 使用CSS 3中的max-width和max-height縮放圖片 124
7.1.3 使用CSS 3中的width和height縮放圖片 125
7.2 設置圖片的對齊方式 126
7.2.1 設置圖片橫向對齊 126
7.2.2 設置圖片縱向對齊 127
7.3 圖文混排 129
7.3.1 設置文字的環繞效果 129
7.3.2 設置圖片與文字的間距 130
7.4 綜合示例——制作學校宣傳單 132
7.5 上機練習——制作簡單的圖文混排網頁 134
7.6 專家答疑 135
第8章 使用CSS控制網頁背景與邊框樣式 137
8.1 使用CSS控制網頁背景 138
8.1.1 設置背景顏色 138
8.1.2 設置背景圖片 139
8.1.3 背景圖片的重復 140
8.1.4 背景圖片的顯示 142
8.1.5 背景圖片的位置 143
8.2 CSS 3中新增的控制網頁背景的屬性 145
8.2.1 背景圖片大小 145
8.2.2 背景顯示區域 146
8.2.3 背景圖像的裁剪區域 148
8.2.4 背景復合屬性 149
8.3 使用CSS控制邊框樣式 150
8.3.1 設置邊框的樣式 150
8.3.2 設置邊框的顏色 152
8.3.3 設置邊框的線寬 153
8.3.4 設置邊框的復合屬性 155
8.4 CSS 3中新增的邊框圓角效果 155
8.4.1 設置圓角邊框 156
8.4.2 指定兩個圓角半徑 156
8.4.3 繪制四個角的圓角邊框 157
8.4.4 繪制不同種類的邊框 159
8.5 綜合示例——制作簡單的公司主頁 161
8.6 上機練習——制作簡單的生活資訊主頁 164
8.7 專家答疑 165
第9章 使用CSS 3美化網頁瀏覽效果 167
9.1 使用CSS 3美化超鏈接 168
9.1.1 改變超級鏈接的基本樣式 168
9.1.2 設置帶有提示信息的超級鏈接 169
9.1.3 設置超級鏈接的背景圖 170
9.1.4 設置超級鏈接的按鈕效果 171
9.2 使用CSS 3美化鼠標特效 172
9.2.1 使用CSS 3控制鼠標箭頭 172
9.2.2 設置鼠標變換式超鏈接 174
9.2.3 設置網頁頁面滾動條 175
9.3 綜合示例1——圖片版本的
超級鏈接 177
9.4 綜合示例2——關于鼠標特效 178
9.5 上機練習——制作一個簡單的導航欄 181
9.6 專家答疑 182
第10章 使用CSS控制表格和表單的樣式 185
10.1 美化表格樣式 186
10.1.1 設置表格邊框的樣式 186
10.1.2 設置表格邊框的寬度 188
10.1.3 設置表格邊框的顏色 189
10.2 美化表單樣式 190
10.2.1 美化表單中的元素 190
10.2.2 美化提交按鈕 192
10.2.3 美化下拉菜單 193
10.3 綜合示例——制作用戶登錄頁面 195
10.4 上機練習——制作用戶注冊頁面 197
10.5 專家答疑 199
第11章 使用CSS控制列表樣式 201
11.1 使用CSS控制項目列表 202
11.1.1 美化無序列表 202
11.1.2 美化有序列表 203
11.1.3 美化自定義列表 205
11.1.4 制作圖片列表 206
11.1.5 縮進圖片列表 207
11.1.6 列表復合屬性 209
11.2 使用CSS制作網頁菜單 210
11.2.1 制作無需表格的菜單 210
11.2.2 制作水平和垂直菜單 212
11.3 綜合示例——模擬soso導航欄 214
11.4 上機練習——將段落轉變成列表 217
11.5 專家答疑 219
第12章 使用CSS 3濾鏡美化網頁元素 221
12.1 濾鏡概述 222
12.2 基本濾鏡 222
12.2.1 通道(Alpha)濾鏡 223
12.2.2 模糊(Blur)濾鏡 225
12.2.3 色彩(Chroma)濾鏡 226
12.2.4 投影(DropShadow)濾鏡 227
12.2.5 水平翻轉(FlipH)濾鏡 229
12.2.6 垂直翻轉(FlipV)濾鏡 229
12.2.7 光暈(Glow)濾鏡 230
12.2.8 灰度(Gray)濾鏡 231
12.2.9 反相(Invert)濾鏡 232
12.2.10 遮罩(Mask)濾鏡 233
12.2.11 波浪(Wave)濾鏡 233
12.2.12 陰影(Shadow)濾鏡 235
12.2.13 X-ray濾鏡 236
12.3 高級濾鏡 236
12.3.1 光照(Light)濾鏡 237
12.3.2 漸隱(BlendTrans)濾鏡 238
12.3.3 切換(RevealTrans)濾鏡 240
12.4 專家答疑 241
第13章 CSS定位與DIV布局核心技術 243
13.1 了解塊級元素和行內級元素 244
13.1.1 塊級元素和行內級元素的應用 244
13.1.2 div元素和span元素的區別 246
13.2 盒子模型 247
13.2.1 盒子模型的概念 247
13.2.2 定義網頁的border區域 247
13.2.3 定義網頁的padding區域 249
13.2.4 定義網頁的margin區域 250
13.3 CSS 3新增的彈性盒模型 253
13.3.1 定義盒子的布局取向(box-orient) 254
13.3.2 定義盒子布局的順序(box-direction) 255
13.3.3 定義盒子布局的位置(box-ordinal-group) 257
13.3.4 定義盒子的彈性空間(box-flex) 258
13.3.5 管理盒子的空間(box-pack和box-align) 260
13.3.6 盒子空間的溢出管理(box-lines) 262
13.4 綜合示例——圖文排版效果 263
13.5 上機練習——淘寶導購菜單 265
13.6 專家解惑 268
第14章 CSS + DIV盒子的浮動與定位 269
14.1 定義DIV 270
14.1.1 什么是DIV 270
14.1.2 創建DIV 270
14.2 盒子的定位 271
14.2.1 靜態定位 271
14.2.2 相對定位 272
14.2.3 絕對定位 273
14.2.4 固定定位 274
14.2.5 盒子的浮動 275
14.3 其他CSS布局定位方式 277
14.3.1 溢出(overflow)定位 277
14.3.2 隱藏(visibility)定位 279
14.3.3 z-index空間定位 280
14.4 新增的CSS 3多列布局 282
14.4.1 設置列寬度 282
14.4.2 設置列數 283
14.4.3 設置列間距 285
14.4.4 設置列邊框樣式 286
14.5 綜合示例——定位網頁的布局樣式 288
14.6 上機練習——制作陰影文字效果 291
14.7 專家答疑 292
第15章 固定寬度網頁布局的剖析與制作 293
15.1 CSS的排版觀念 294
15.1.1 將頁面用DIV分塊 294
15.1.2 設置各塊的位置 294
15.1.3 用CSS定位 295
15.2 固定寬度網頁剖析與布局 299
15.2.1 網頁單列布局模式 299
15.2.2 網頁1-2-1型布局模式 303
15.2.3 網頁1-3-1型布局模式 305
15.3 專家答疑 309
第16章 自動縮放網頁布局的剖析與制作 311
16.1 自動縮放網頁1-2-1型布局模式 312
16.1.1 網頁1-2-1等比例變寬布局 312
16.1.2 網頁1-2-1單列變寬布局 313
16.2 自動縮放網頁1-3-1型布局模式 314
16.2.1 網頁1-3-1三列寬度等比例布局 314
16.2.2 網頁1-3-1單側列寬度固定的變寬布局 314
16.2.3 網頁1-3-1中間列寬度固定的變寬布局 317
16.2.4 網頁1-3-1雙側列寬度固定的變寬布局 320
16.2.5 網頁1-3-1中列和左側列寬度固定的變寬布局 324
16.3 分列布局背景色的使用 327
16.3.1 設置固定寬度布局的列背景色 327
16.3.2 設置特殊寬度變化布局的列背景色 329
16.4 綜合案例——單列寬度變化布局 330
16.5 上機練習——多列等比例寬度變化布局 332
16.6 專家答疑 334
第17章 CSS 3和JavaScript的搭配應用 335
17.1 JavaScript的語法基礎 336
17.1.1 什么是JavaScript 336
17.1.2 數據類型 336
17.1.3 變量 338
17.1.4 運算符的簡單應用 338
17.1.5 流程控制語句的簡單應用 341
17.1.6 函數的簡單應用 344
17.2 常見的JavaScript編寫工具 347
17.2.1 記事本工具 347
17.2.2 Dreamweaver 348
17.3 JavaScript在HTML中的使用 349
17.3.1 在HTML網頁頭中嵌入JavaScript代碼 349
17.3.2 在HTML網頁中嵌入JavaScript代碼 350
17.3.3 在HTML網頁元素的事件中嵌入JavaScript代碼 351
17.3.4 在HTML中調用已經存在的JavaScript文件 352
17.3.5 通過JavaScript偽URL引入JavaScript腳本代碼 353
17.4 JavaScript與CSS 3的結合使用 354
17.4.1 設置動態內容 354
17.4.2 改變動態樣式 355
17.4.3 動態定位網頁元素 357
17.4.4 設置網頁元素的顯示與隱藏 359
17.5 HTML 5、CSS 3和JavaScript的 搭配應用 360
17.5.1 設定左右移動的圖片 360
17.5.2 制作顏色選擇器 363
17.5.3 制作跑馬燈效果 365
17.6 綜合示例——制作樹形導航菜單 366
17.7 上機練習——制作滾動的菜單 371
17.8 專家答疑 373
第18章 CSS與XML的綜合運用 375
18.1 XML語法基礎 376
18.1.1 XML的基本應用 376
18.1.2 XML文檔的組成和聲明 377
18.1.3 XML元素介紹 379
18.2 用CSS修飾XML文件 381
18.2.1 XML使用CSS 381
18.2.2 設置字型屬性 382
18.2.3 設置色彩屬性 383
18.2.4 設置邊框屬性 384
18.2.5 設置文本屬性 385
18.3 綜合示例1——招聘廣告 387
18.4 綜合示例2——圖文混排頁面 389
18.5 上機練習——古詩欣賞 391
18.6 專家答疑 394
第19章 CSS與Ajax的綜合應用 395
19.1 Ajax概述 396
19.1.1 什么是Ajax 396
19.1.2 Ajax的關鍵元素 398
19.1.3 CSS在Ajax應用中的
地位 399
19.2 Ajax快速入門 400
19.2.1 全面剖析XMLHttpRequest對象 400
19.2.2 發出Ajax請求 402
19.2.3 處理服務器響應 403
19.3 綜合示例——制作自由拖動的網頁 405
19.4 上機練習——制作加載條 410
19.5 專家答疑 411
第20章 商業門戶類網站賞析 413
20.1 整體設計 414
20.1.1 顏色應用分析 414
20.1.2 架構布局分析 415
20.2 主要模塊設計 416
20.2.1 網頁整體樣式插入 416
20.2.2 網頁局部的樣式 417
20.2.3 頂部模塊樣式代碼分析 427
20.2.4 中間主體代碼分析 428
20.2.5 底部模塊分析 432
20.3 網站調整 432
20.3.1 部分內容調整 432
20.3.2 模塊調整 433
20.3.3 調整后預覽測試 435
第21章 制作娛樂休閑類網頁 437
21.1 整體設計 438
21.1.1 應用設計分析 438
21.1.2 架構布局分析 439
21.2 主要模塊設計 440
21.2.1 網頁整體樣式插入 440
21.2.2 頂部模塊代碼分析 441
21.2.3 視頻模塊代碼分析 442
21.2.4 評論模塊代碼分析 444
21.2.5 熱門推薦模塊代碼分析 445
21.2.6 底部模塊分析 447
21.3 網頁調整 448
21.3.1 部分內容調整 448
21.3.2 調整后預覽測試 449
第22章 制作圖像影音類網頁 451
22.1 整體設計 452
22.1.1 顏色應用分析 452
22.1.2 架構布局分析 452
22.2 主要模塊設計 454
22.2.1 樣式代碼分析 454
22.2.2 頂部模塊樣式代碼分析 462
22.2.3 網站主體模塊代碼分析 464
22.2.4 底部模塊分析 468
22.3 網站調整 469
22.3.1 部分內容調整 469
22.3.2 模塊調整 470
22.3.3 調整后預覽測試 476
第23章 制作企業門戶類網頁 477
23.1 構思布局 478
23.1.1 設計分析 478
23.1.2 排版架構 478
23.2 主要模塊設計 479
23.2.1 Logo與導航菜單 479
23.2.2 Banner區 481
23.2.3 資訊區 481
23.2.4 版權信息 484
第24章 制作在線購物類網頁 487
24.1 整體布局 488
24.1.1 設計分析 488
24.1.2 排版架構 488
24.2 主要模塊設計 489
24.2.1 Logo與導航區 489
24.2.2 Banner與資訊區 491
24.2.3 產品類別區域 492
24.2.4 頁腳區域 494
