《CSS3+DIV網頁樣式與布局案例課堂》是2014年清華大學出版社出版的圖書。
基本介紹
- 書名：CSS3+DIV網頁樣式與布局案例課堂
- ISBN：9787302386155
- 定價：65元
- 出版社：清華大學出版社
- 裝幀：平裝
- 印次：1-1
- 印刷日期：2014-12-18
內容簡介,目錄,
內容簡介
本書作者根據自己在長期教學中積累的豐富的網頁設計教學經驗，完整、詳盡地介紹了CSS 3 + DIV網頁樣式與布局的技術。
目錄
第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.1head部分 6
1.3.2body部分 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綜合示例——在PhotoshopCS6中構建網頁結構 15
1.7上機練習——使用Photoshop製作縱嚮導航條 16
1.8專家答疑 18
第2章網頁實現技術——HTML5 21
2.1HTML5的基本概念 22
2.1.1HTML5簡介 22
2.1.2HTML5檔案的基本結構 22
2.1.3認識HTML5標記 23
2.2HTML5檔案的編寫方法 23
2.2.1使用記事本手工編寫HTML檔案 24
2.2.2使用DreamweaverCS6編寫HTML檔案 24
2.3HTML5的基本標記 27
2.3.1字元標記 27
2.3.2超級連結標記 28
2.3.3列表標記 30
2.3.4製作純文本網頁 31
2.4HTML5的段落和圖片標記 32
2.4.1常用段落和圖片標記 32
2.4.2文字和圖片混合排版 33
2.5HTML5的表單標記 34
2.5.1常用的表單控制項 34
2.5.2多行文本標記和下拉列表 36
2.5.3用戶註冊頁面 37
2.6HTML5的表格標記 38
2.6.1表格標記 38
2.6.2製作季度報表 40
2.7綜合示例——製作網站首頁 41
2.8上機練習——簡單的HTML5網頁 45
2.9專家答疑 45
第3章CSS3樣式入門 47
3.1CSS概述 48
3.1.1CSS的功能 48
3.1.2瀏覽器與CSS 48
3.1.3CSS的發展歷史 49
3.2CSS3的常用單位 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在HTML5中調用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.1CSS基礎語法 68
4.1.1CSS構造規則 68
4.1.2CSS的注釋 68
4.2CSS的常用選擇器 69
4.2.1標籤選擇器 69
4.2.2類選擇器 70
4.2.3ID選擇器 71
4.2.4選擇器的聲明 71
4.3綜合示例——製作炫彩網站Logo 72
4.4專家答疑 75
第5章CSS3的高級特性 77
5.1複合選擇器 78
5.1.1全局選擇器 78
5.1.2“交集”選擇器 79
5.1.3“並集”選擇器 79
5.1.4繼承(後代)選擇器 80
5.2CSS3新增的選擇器 81
5.2.1屬性選擇器 81
5.2.2結構偽類選擇器 83
5.2.3UI元素狀態偽類選擇器 84
5.2.4偽類選擇器 86
5.3CSS的繼承特性 87
5.3.1繼承關係 87
5.3.2CSS繼承的運用 88
5.4CSS的層疊特性 89
5.4.1同一選擇器被多次定義的處理 89
5.4.2同一標籤運用不同類型選擇器的處理 90
5.5綜合示例——製作新聞選單 91
5.6專家答疑 94
第6章使用CSS3控制網頁字型與段落的樣式 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.2CSS3中新增的文本高級樣式 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使用CSS3中的max-width和max-height縮放圖片 124
7.1.3使用CSS3中的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.2CSS3中新增的控制網頁背景的屬性 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.4CSS3中新增的框線圓角效果 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章使用CSS3美化網頁瀏覽效果 167
9.1使用CSS3美化超連結 168
9.1.1改變超級連結的基本樣式 168
9.1.2設定帶有提示信息的超級連結 169
9.1.3設定超級連結的背景圖 170
9.1.4設定超級連結的按鈕效果 171
9.2使用CSS3美化滑鼠特效 172
9.2.1使用CSS3控制滑鼠箭頭 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章使用CSS3濾鏡美化網頁元素 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.13X-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.2div元素和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.3CSS3新增的彈性盒模型 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.3z-index空間定位 280
14.4新增的CSS3多列布局 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.1CSS的排版觀念 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章CSS3和JavaScript的搭配套用 335
17.1JavaScript的語法基礎 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.2Dreamweaver 348
17.3JavaScript在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.4JavaScript與CSS3的結合使用 354
17.4.1設定動態內容 354
17.4.2改變動態樣式 355
17.4.3動態定位網頁元素 357
17.4.4設定網頁元素的顯示與隱藏 359
17.5HTML5、CSS3和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.1XML語法基礎 376
18.1.1XML的基本套用 376
18.1.2XML文檔的組成和聲明 377
18.1.3XML元素介紹 379
18.2用CSS修飾XML檔案 381
18.2.1XML使用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.1Ajax概述 396
19.1.1什麼是Ajax 396
19.1.2Ajax的關鍵元素 398
19.1.3CSS在Ajax套用中的
地位 399
19.2Ajax快速入門 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.1Logo與導航選單 479
23.2.2Banner區 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.1Logo與導航區 489
24.2.2Banner與資訊區 491
24.2.3產品類別區域 492
24.2.4頁腳區域 494
