內容提要
《div+css 3.0網頁布局案例精粹》系統地介紹了css樣式的基礎理論和實際套用技術，並結合實例來介紹使用div+css布局製作網頁的方法和技巧。在介紹使用css樣式進行設計的同時，還結合實際網頁製作中可能遇到的問題，提供了解決問題的思路、方法和技巧，使初學者可以輕鬆地掌握div+css布局的方式，製作出精美的網頁。
《div+css 3.0網頁布局案例精粹》全面展現了使用div+css進行網頁設計布局的方法，其詳細的講解步驟配合圖示，使得每個步驟清晰易懂、一目了然。書中不僅套用大量實例對重點、難點進行了深入的剖析，還結合作者多年的網頁設計經驗和教學經驗進行了點撥，使讀者能夠學以致用。另外，在書中還穿插介紹了css 3.0和html 5.0的相關知識，力求使讀者了解最新的網頁設計製作技術。
圖書目錄
《div+css 3.0網頁布局案例精粹》
第1章 網頁和網站的製作流程 1
1.1 認識網頁 2
1.1.1 網頁和網站 2
1.1.2 網頁的基本構成元素 2
1.2 什麼是網頁設計 3
1.2.1 網頁設計概述 4
1.2.2 網頁設計與網頁製作 4
1.2.3 網頁設計的特點 5
1.2.4 網頁設計的相關術語 7
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 為用戶考慮的原則 15
1.5.2 主題突出的原則 15
.1.5.3 整體原則 16
1.5.4 內容與形式相統一的原則 17
1.5.5 更新和維護的原則 18
1.6 網頁設計師應具備的素質 18
1.6.1 藝術素質 18
1.6.2 技能素質 19
1.6.3 綜合素質 19
1.7 網站的製作流程 20
1.7.1 前期策劃 20
1.7.2 頁面細化及實施 21
1.7.3 後期維護 22
1.8 靜態頁面的製作流程 22
1.8.1 觀察設計稿 22
1.8.2 拆分設計稿 23
1.8.3 網頁設計的實現 23
第2章 css樣式入門 25
2.1 css的基本概念 26
2.1.1 css的特點 26
2.1.2 css的類型 27
2.1.3 css的基本語法 28
2.1.4 css的衝突 29
2.2 網頁設計中的css 30
2.2.1 怎樣使用css 30
2.2.2 css能做什麼 32
2.2.3 css不能做什麼 32
2.3 css樣式表的基本用法 33
2.3.1 怎樣在html中插入樣式表 33
2.3.2 css樣式表規則 33
2.4 套用css到網頁中 34
2.4.1 內聯樣式 34
2.4.2 嵌入樣式表 34
2.4.3 外部樣式表 35
2.5 單位和值 35
2.5.1 定義顏色值 36
2.5.2 定義字型 37
2.5.3 群選擇符 38
2.5.4 派生選擇符 38
2.5.5 id選擇符 39
2.5.6 類別選擇符 39
2.6 套用實例——為頁面添加css樣式 41
2.6.1 設計分析 41
2.6.2 製作步驟 41
2.6.3 案例總結 47
2.7 舉一反三——製作產品介紹網站 48
2.7.1 案例分析 48
2.7.2 視頻操作 49
第3章 使用div+css布局頁面 51
3.1 定義div 52
3.1.1 什麼是div 52
3.1.2 插入div 52
3.1.3 div的嵌套和固定格式 54
3.2 css布局定位 54
3.2.1 浮動定位 55
3.2.2 position定位 58
3.3 可視化盒模型 60
3.3.1 盒子模型 60
3.3.2 視覺可視化模型 62
3.3.3 空白邊疊加 62
3.4 常用的布局方式 63
3.4.1 居中布局設計 63
3.4.2 浮動布局設計 65
3.4.3 高度自適應設計 68
3.5 css 3.0中盒模型的新增屬性 69
3.5.1 overflow 69
3.5.2 overflow-x 70
3.5.3 overflow-y 71
3.6 套用實例——使用div+css布局頁面 72
3.6.1 設計分析 73
3.6.2 製作步驟 73
3.6.3 案例總結 78
3.7 舉一反三——製作健康網站 78
3.7.1 案例分析 78
3.7.2 視頻操作 79
第4章 使用css控制網頁背景 81
4.1 背景顏色 82
4.1.1 設定頁面背景顏色 82
4.1.2 設定塊背景顏色 83
4.2 背景圖片 84
4.2.1 為頁面設定背景圖片 84
4.2.2 背景圖片的重複 85
4.2.3 設定背景圖片的位置 86
4.2.4 設定背景滾動 87
4.2.5 背景樣式的縮寫方式 88
4.3 css 3.0中背景的新增屬性 89
4.3.1 background-origin 89
4.3.2 background-clip 90
4.3.3 background-size 92
4.3.4 multiple backgrounds 93
4.4 套用實例——製作金融類網站頁面 94
4.4.1 設計分析 94
4.4.2 製作步驟 95
4.4.3 案例總結 101
4.5 舉一反三——製作保健商品網站 102
4.5.1 案例分析 102
4.5.2 視頻操作 103
第5章 使用css控制文字樣式 105
5.1 控制文字樣式 106
5.1.1 字型和大小 106
5.1.2 文字顏色和粗細 110
5.1.3 斜體 111
5.1.4 下畫線、頂畫線和刪除線 112
5.1.5 英文字母大小寫 113
5.2 控制段落樣式 113
5.2.1 段落水平對齊 113
5.2.2 段落垂直對齊 114
5.2.3 行間距和字間距 115
5.2.4 首字下沉 116
5.3 使用css對flash中的文字進行控制 116
5.4 css 3.0中文字的新增屬性 118
5.4.1 text-shadow 118
5.4.2 text-overflow 119
5.4.3 word-wrap 121
5.5 套用實例——製作設計類網站 122
5.5.1 設計分析 122
5.5.2 製作步驟 122
5.5.3 案例總結 129
5.6 舉一反三——製作社區類網站 129
5.6.1 案例分析 129
5.6.2 視頻操作 130
第6章 使用css控制圖片樣式 131
6.1 圖片樣式 132
6.1.1 圖片框線設定 132
6.1.2 圖片縮放設定 135
6.2 圖片對齊 136
6.2.1 水平對齊設定 136
6.2.2 垂直對齊設定 137
6.3 圖文混排 138
6.3.1 文本混排 138
6.3.2 設定混排間距 139
6.4 css 3.0中框線的新增屬性 139
6.4.1 border-image 140
6.4.2 border-radius 141
6.4.3 box-shadow 142
6.4.4 border-color 143
6.5 套用實例——製作婚慶網站 145
6.5.1 設計分析 145
6.5.2 製作步驟 146
6.5.3 案例總結 150
6.6 舉一反三——製作產品介紹網站 150
6.6.1 案例分析 151
6.6.2 視頻操作 152
第7章 使用css控制列表樣式 153
7.1 列表控制概述 154
7.1.1 列表控制原則 154
7.1.2 列表的類型及使用 154
7.1.3 改變項目樣式 157
7.1.4 圖片符號 158
7.2 使用列表製作實用選單 159
7.2.1 無須表格的選單 159
7.2.2 選單的橫豎轉換 161
7.3 css 3.0中顏色的新增屬性 162
7.3.1 hsl colors 162
7.3.2 hsla colors 163
7.3.3 opacity 164
7.3.4 rgba colors 166
7.4 套用實例——製作音樂網站 167
7.4.1 設計分析 168
7.4.2 製作步驟 168
7.4.3 案例總結 172
7.5 舉一反三——製作設計工作室網站 172
7.5.1 案例分析 173
7.5.2 視頻操作 173
第8章 使用css控制表單樣式 175
8.1 表單設計概述 176
8.1.1 表單的設計原則 176
8.1.2 表單套用分類 177
8.2 表單的設計 179
8.2.1 表單和表單元素 179
8.2.2 標籤、欄位集和圖例 183
8.2.3 使用css控制文本欄位 185
8.2.4 使用css控制複選框與單選框 185
8.2.5 使用css控制列表與跳轉選單 186
8.3 css 3.0中控制內容的新增屬性 187
8.4 套用實例——製作用戶註冊頁面 188
8.4.1 設計分析 189
8.4.2 製作步驟 189
8.4.3 案例總結 196
8.5 舉一反三——製作用戶登錄頁面 196
8.5.1 案例分析 197
8.5.2 視頻操作 197
第9章 使用css美化瀏覽器效果 199
9.1 使用css控制超連結 200
9.1.1 認識超連結 200
9.1.2 關於連結路徑 202
9.1.3 超連結屬性控制 204
9.1.4 圖像映射 206
9.1.5 連結的打開方式 208
9.2 超連結特效 208
9.2.1 按鈕式超連結 208
9.2.2 浮雕式超連結 210
9.3 滑鼠特效 210
9.3.1 css控制滑鼠箭頭 211
9.3.2 滑鼠變化的超連結 211
9.4 css 3.0中用戶界面的新增屬性 212
9.4.1 box-sizing 212
9.4.2 resize 214
9.4.3 outline 215
9.4.4 nav-index 216
9.5 套用實例——製作產品宣傳網站 218
9.5.1 設計分析 218
9.5.2 製作步驟 219
9.5.3 案例總結 225
9.6 舉一反三——製作運輸公司網站 225
9.6.1 案例分析 225
9.6.2 視頻操作 226
第10章 套用css中的濾鏡 227
10.1 了解css濾鏡 228
10.1.1 alpha濾鏡 228
10.1.2 blur濾鏡 231
10.1.3 motionblur濾鏡 232
10.1.4 dropshadow濾鏡 233
10.1.5 shadow濾鏡 234
10.1.6 flip濾鏡 234
10.1.7 glow濾鏡 235
10.1.8 gray濾鏡 236
10.1.9 invert濾鏡 236
10.1.10 xray濾鏡 237
10.1.11 mask濾鏡 237
10.1.12 wave濾鏡 238
10.2 css 3.0中其他模組的新增屬性 239
10.2.1 @media 239
10.2.2 columns 240
10.2.3 @font-face 242
10.2.4 speech 243
10.3 套用實例——製作產品類網站 245
10.3.1 設計分析 245
10.3.2 製作步驟 245
10.3.3 案例總結 254
10.4 舉一反三——製作網路遊戲網站 254
10.4.1 案例分析 254
10.4.2 視頻操作 255
第11章 css與javascript的綜合套用 257
11.1 什麼是javascript 258
11.1.1 了解javascript 258
11.1.2 javascript的特點 260
11.1.3 javascript的套用範圍 261
11.1.4 css樣式與javascript 263
11.2 javascript的語法基礎 263
11.2.1 javascript的基本架構 263
11.2.2 javascript的基本語法 264
11.2.3 數據類型和變數 267
11.2.4 表達式和運算符 268
11.2.5 基本語句 268
11.3 使用spry構件 270
11.3.1 關於spry構件 271
11.3.2 插入spry選單 271
11.3.3 插入spry選項卡式面板 273
11.3.4 插入spry摺疊式構件 275
11.3.5 插入spry可摺疊面板 276
11.4 套用實例——在網頁中套用spry構件 278
11.4.1 設計分析 279
11.4.2 製作步驟 279
11.4.3 案例總結 287
11.5 舉一反三——製作婚紗攝影網站 287
11.5.1 案例分析 288
11.5.2 視頻操作 288
第12章 css與xml的綜合套用 289
12.1 xml基礎 290
12.1.1 xml的特點 290
12.1.2 xml與html 291
12.1.3 xml基本語法 293
12.1.4 格式正確的xml文檔 296
12.2 xml與css的連結 297
12.2.1 使用xml:stylesheet指令 297
12.2.2 使用@import指令 299
12.3 xml與css的套用 299
12.3.1 顯示學生信息 299
12.3.2 實現隔行變色的表格 302
12.4 套用實例——在html頁面中調用xml數據 305
12.4.1 設計分析 306
12.4.2 製作步驟 306
12.4.3 案例總結 311
12.5 舉一反三——製作企業網站 311
12.5.1 案例分析 312
12.5.2 視頻操作 313
第13章 css與ajax的綜合套用 315
13.1 了解ajax 316
13.1.1 ajax簡介 316
13.1.2 ajax的關鍵元素 317
13.1.3 ajax的優勢 318
13.1.4 實現ajax的步驟 318
13.1.5 使用css的必要性 319
13.2 ajax基礎 320
13.2.1 創建xmlhttprequest對象 320
13.2.2 發出ajax請求 321
13.2.3 處理伺服器回響 322
13.2.4 使用css樣式 322
13.3 html 5.0簡介 323
13.3.1 html 5.0標籤 323
13.3.2 html 5.0事件屬性 327
13.3.3 html 5.0標準屬性 329
13.4 套用實例——使用ajax 實現頁面特效 330
13.4.1 設計分析 330
13.4.2 製作步驟 330
13.4.3 案例總結 338
13.5 舉一反三——通過ajax 實現可拖動div塊 339
13.5.1 案例分析 339
13.5.2 視頻操作 340
第14章 兒童教育類網站 341
14.1 綜合實例——製作兒童教育類網站 342
14.1.1 設計分析 342
14.1.2 製作步驟 342
14.1.3 案例總結 353
第15章 醫療保健類網站設計 355
15.1 綜合實例——製作醫療保健類網站 356
15.1.1 設計分析 356
15.1.2 製作步驟 356
15.1.3 案例總結 366
第16章 遊戲類網站設計 367
16.1 綜合實例——製作遊戲類網站 368
16.1.1 設計分析 368
16.1.2 製作步驟 368
16.1.3 案例總結 378
