CSS網頁布局學習筆記全書內容分為 3部分，共15章，其中第 1-10章為第 1部分，依次講解了 Web開發標準與網頁網站製作，出版時間： 2008-10-1
基本介紹
- 書名：CSS網頁布局學習筆記
- 作者：王大平
- ISBN：9787121070150
- 頁數：576頁
- 定價：62.00元
- 出版社：電子工業出版社
- 出版時間：2008-10-1
- 開本：16
- 分類：圖書 >> 計算機>>網頁設計
內容簡介,本書獨一無二的優勢,前言,目錄,
內容簡介
Web標準布局的本質、XHTML書寫規範、CSS基礎與書寫規範、網頁頭部元素的詳細定義、CSS基本布局屬性、CSS容器屬性、CSS定義文本屬性、元素的修飾和 CSS常見套用、瀏覽器及兼容問題、整站樣式表的分析、CSS高級套用等知識；第11-13章為第 2部分，講解了 CSS高級套用，CSS實戰與技巧，CSS可視化開發技術等內容；第14章和 15章為第 3部分，分別通過個人部落格網站和企業網站的實現流程，介紹 CSS布局的綜合套用流程和實現技巧。
本書適合廣大 Web網站設計人員、網站設計的初學者、網站管理維護人員、大中專院校的學生和社會培訓學員閱讀。
本書獨一無二的優勢
本書由具有多年開發經驗的程式設計師執筆寫作，筆者在 Web 2.0領域具有多年的開發研究經驗，並且具有多年的培訓講解經驗，尤其熟識Web 2.0標準理論知識體系，筆者憑著嫻熟的筆法和淵博的理論知識，將CSS網頁布局技術展現得淋漓盡致，使讀者能夠很快地進入實際開發角色。本書和市場上其他類似書籍相比，具有下面與眾不同的特色。
★形象
本書對書中的原始碼採取繪圖的講解方式，使抽象變形象，讓高深的編程理論“赤裸裸”地展現在你的面前，使你能夠輕而易舉地領悟編程奧秘。這是本書最大的特色。
★趣味
本書用拉鏈做素材，拉開學習的帷幕，用情趣似的學習筆記形式帶你走進輕鬆的學習課堂，並且在書中讓人感覺到煩躁的地方搭配以相關的圖片，讓你享受到學習中的樂趣，探索中的喜悅，勝
利後的興奮。
★實用
本書的實用性較強，以實例為導向，由淺入深地講解了CSS網頁布局中的種種問題。特別是，在講解時非常注重實踐與理論的形象結合，為了能使讀者通過讀懂原始碼來掌握CSS技術，在實例舉證時還給原始碼繪了大量的流程圖。本書的所有原始碼都已調試通過，並且放在了本書所附帶的光碟中，讀者拿來即可使用。
★全面
本書內容全面，從基本的語法入手，以恰當的實例為導向，由淺入深地講解CSS技術的基本理論知識，所講解的內容幾乎囊括了CSS技術的所有知識點，讀者讀完此書幾乎能夠掌握CSS所有的開發技術。
前言
計算機軟體技術的日新月異推動了社會信息化的進程，這也使得開發人員不得不學習新的技術以適應這種局面。在Web套用領域，隨著網路技術的發展，各種站點紛紛建立。並且因為網路的無限性和共享性，以及各種設計軟體的推出，多樣化的站點展示方式便應運而生。為保證各種用戶和各類軟體設計出的站點信息完整的展現在用戶面前，Web標準技術便應運而生。
作為傳統網頁布局和修飾方式，越來越落後於時代潮流，逐漸被新興的Web標準所代替。而作為Web標準的 CSS技術，迅速成為了當今Web發展的主要因素。隨著Web標準的大力推廣宣傳，Web標準逐漸被網站設計者所認可，越來越多的站點改版成為了符合標準的版本。Web標準能夠被廣大用戶所迅速認可，是因為它能夠給用戶帶來真正的好處。它不但能更加方便地實現對頁面的維護，而且還能加快頁面的顯示速度，提高瀏覽者的積極性，實現了搜尋引擎的最佳化。
隨著2005年Web 2.0的提出，給Web開發帶來了巨大的革新和衝擊。由於Web 2.0是建立在Web標準基礎之上的，所以在很大程度上推動了Web標準的發展。隨著當前硬體技術和軟體技術的進步，Web標準頁面的前景將變得更加光明。
本書讀者對象
本書在內容安排上從淺入深，充分實例舉證，非常適合需要使用CSS進行網頁布局的網站開發
入門者，也可以作為網站開發者常備的一本CSS備查手冊。本書適合以下類型的讀者：
沒有任何網站開發基礎，欲學習網站開發的初學者。
有一定Web編程基礎，欲學習使用CSS網頁布局技術的初學者。
有豐富的Web編程經驗，且經常要參與網站開發的Web程式設計師，本書可作為他們的常用參考手冊。
本書內容結構
本書以Web 2.0版本作為講解對象，從基本的語法和規範入手，以恰當的實例為導向，從淺入深介紹CSS技術的基本理論知識及套用系統開發的實踐經驗。本書一共3篇15章。分別如
下：
第一篇“CSS技術基礎篇”包括第1到10章，主要講解了CSS技術的基礎知識。其中包括Web開發標準與網頁網站製作介紹，HTML與XHTML基礎知識，CSS基礎與語法介紹，CSS基本套用知識，CSS網頁布局，CSS布局屬性介紹，CSS容器屬性介紹，CSS文本設定知識，CSS的圖片修飾知識。為讀者步入後面的知識下堅實的基礎。
第二篇“基本套用和提高篇”包括第11到13章，主要講解了CSS技術的基本套用知識。內容包括CSS高級套用，CSS實戰與技巧,不同瀏覽器的兼容性與解析，CSS可視化開發技術。在介紹過程中始終貫穿基礎知識，使讀者從實踐中掌握真諦。
第三篇“綜合實戰篇”包括第14和15章，介紹了個人部落格網站開發實例和企業網站開發實例的全過
程。讀者通過本篇的學習可以完全掌握CSS囊括的所有新技術，能夠真正體會到CSS新技術給開發人員帶來的視覺衝擊。讀者通過本篇的實踐性內容的學習後，完全可以走上工作崗位。
致謝
本書由北京城市學院老師王大平編寫，在編寫過程中，溫才燚，李振捷，管西京，宗傑，劉冉等提供了很大的幫助，在此，對他們表示衷心的感謝。由於時間倉促，加上作者水平有限，書中難免存在一些不足和錯誤之處，敬請讀者見諒，
目錄
第1篇 CSS技術基礎篇
第1章 Web開發標準與網頁網站製作介紹
1.1 Web開發標準介紹......................... 3
1.1.1 Web開發標準概述 ...................3
1.1.2為什麼要使用
Web標準...............4
1.2 CSS網頁布局標準 .......................5
1.3 認識網頁和網站.......................... 8
1.3.1何謂網頁 ...........................8
1.3.2何謂網站 ...........................9
1.4 網頁的基本構成元素..................... 10
1.5 網頁的基本製作流程..................... 13
1.6 網站的基本製作流程..................... 14
1.7 小結................................... 17
第2章 HTML與XHTML基礎知識
2.1 HTML簡介..............................19
2.1.1 HTML概述........................ 19
2.1.2 HTML文檔結構.................... 19
2.1.3 HTML語法基礎 .................... 19
2.2 XHTML基礎.............................21
2.2.1 XHTML概述....................... 21
2.2.2 XHTML的文檔結構................. 21
2.2.3 XHTML的基本元素................. 21
2.2.4了解 XHTML語法................... 23
2.3 HTML升級到XHTML ......................29
2.4 XHTML中的CSS套用 .....................32
2.5 正確使用XHTML標籤 ....................35
2.6 小結..................................37
第3章CSS基礎
3.1 CSS概述...............................39
3.2 基本語法..............................41
3.3 選擇符的使用..........................41
3.4 CSS屬性的簡要介紹 ....................46
3.5 元素簡要介紹..........................47
3.6 幾個常用值............................48
3.6.1顏色單位 .......................... 48
3.6.2長度單位.......................... 50
3.6.3百分比值 .......................... 51
3.6.4 URL .............................. 51
3.6.5 URL默認值 ........................ 52
3.7 網頁中的CSS套用 ......................52
3.7.1頁面調用 CSS方式................... 52
3.7.2調用優先權 ........................ 55
3.8 CSS的編碼規範.........................59
3.8.1書寫規範.......................... 59
3.8.2命名規範.......................... 60
3.9 CSS調試...............................61
3.10 CSS實用技巧..........................64
3.11 小結.................................65
第4章CSS基本套用
4.1 CSS頁面頭部元素........................ 67
4.1.1選擇文檔類型 ...................... 67
4.1.2命名空間.......................... 68
4.1.3編碼類型 .......................... 68
4.1.4 meta標籤 .......................... 68
4.2 CSS聲明方法............................ 71
4.3 Style標籤.............................. 74
4.4 link與@import.......................... 75
4.5 id與class.............................. 77
4.6 小結................................... 78
第5章CSS網頁布局
5.1 網頁布局概述........................... 80
5.1.1網頁分析和製作流程 ................ 80
5.1.2網頁布局理念...................... 81
5.2 table布局.............................. 82
5.3 認識div與span.......................... 86
5.3.1 div與span概述 ...................... 86
5.3.2 div與span的套用.................... 87
5.4 div布局與table布局區別................. 90
5.5 div與css聯合套用....................... 92
5.6 CSS布局技巧和排版心得.................. 95
5.7 小結.................................. 100
第6章CSS布局屬性
6.1 CSS元素詳解........................... 102
6.2 元素的定位............................ 104
6.2.1元素排列 ......................... 104
6.2.2浮動屬性定位..................... 108
6.3 定位屬性.............................. 109
6.3.1定位模式......................... 109
6.3.2邊偏移........................... 109
6.3.3層疊定位屬性 ..................... 110
6.3.4定位屬性的套用................... 110
6.4 基本內容控制屬性...................... 117
6.4.1 display屬性........................ 117
6.4.2 visibility屬性....................... 119
6.4.3 text-align屬性..................... 120
6.4.4 margin屬性........................ 121
6.5 頁面背景控制.......................... 123
6.5.1頁面背景概述..................... 123
6.5.2使用背景顏色..................... 123
6.5.3使用背景圖片..................... 123
6.5.4背景顏色和背景圖片混用........... 130
6.5.5文本樣式設定.................... 133
6.5.6連結樣式設定..................... 135
6.6 使用浮動屬性.......................... 137
6.6.1浮動屬性概述..................... 137
6.6.2相鄰固定元素..................... 137
6.6.3相鄰兩個浮動元素................. 140
6.6.4相鄰多個浮動元素................. 141
6.7 清除浮動屬性.......................... 143
6.7.1清除浮動屬性概述................. 143
6.7.2使用清除浮動屬性................. 146
6.8 UL和LI列表控制屬性.................... 149
6.8.1使用list-style-type屬性............. 149
6.8.2使用list-style-position屬性.......... 151
6.8.3使用list-style-image屬性............ 153
6.8.4使用list-style屬性 .................. 155
6.9 製作導航選單.......................... 156
6.9.1製作一個縱嚮導航選單............. 156
6.9.2製作一個橫嚮導航選單............. 164
6.10 小結................................. 171
第7章定義容器屬性
7.1 CSS盒模型............................. 173
7.1.1盒模型內容....................... 173
7.1.2盒模型背景....................... 174
7.2 使用補白屬性.......................... 175
7.2.1補白屬性概述..................... 175
7.2.2補白屬性的百分比值............... 176
7.2.3單側補白屬性..................... 178
7.2.4實戰技巧——簡寫補白屬性......... 180
7.3 使用框線屬性.......................... 181
7.3.1使用框線樣式屬性................. 182
7.3.2使用框線寬度屬性................. 184
7.3.3使用框線顏色屬性................. 187
7.3.4綜合使用框線屬性................. 189
7.3.5使用表格框線屬性................. 191
7.4 使用邊界屬性.......................... 193
7.4.1邊界屬性介紹及使用............... 193
7.4.2使用單側邊界屬性................. 195
7.4.3相鄰邊界屬性 ..................... 197
7.4.4在內聯元素中使用邊界屬性 ......... 201
7.5 父子元素距離.......................... 204
7.5.1如果子元素邊界為0 ................ 204
7.5.2如果父元素補白為0 ................ 205
7.6 嵌套元素使用負邊界.................... 208
7.7 固定元素大小.......................... 210
7.7.1計算盒模型大小................... 210
7.7.2固定長度和寬度................... 211
7.8 小結.................................. 212
第8章CSS文本設定
8.1 文本的縮進和對齊...................... 214
8.1.1縮進段首......................... 214
8.1.2文本下沉與大寫................... 216
8.1.3文本對齊......................... 218
8.1.4圖文混排對齊處理................. 221
8.2 行高和間隔............................ 223
8.2.1使用行高屬性..................... 223
8.2.2文本間隔與空白................... 232
8.2.3文本轉換......................... 238
8.3 實現水平和垂直居中.................... 239
8.3.1確定容器內容和大小............... 239
8.3.2未知容器內容和大小............... 241
8.3.3確定容器大小而未知內容........... 243
8.3.4容器大小和內容都未知............. 246
8.3.5背景圖片水平垂直居中............. 250
8.4 字型設定.............................. 251
8.4.1字型選擇 ......................... 251
8.4.2字型大小......................... 253
8.4.3字型加粗......................... 257
8.4.4字型樣式 ......................... 259
8.4.5字型轉換......................... 260
8.5 修飾和連結............................ 263
8.5.1修飾文本......................... 263
8.5.2修飾屬性的繼承................... 265
8.5.3使用連結屬性..................... 267
8.5.4小技巧——掌握連結的順序......... 273
8.5.5連結的繼承性..................... 275
8.5.6設定滑鼠懸停樣式................. 276
8.6 小結.................................. 277
第9章CSS中的圖片
9.1 常見圖片格式.........................279
9.1.1 GIF格式.......................... 279
9.1.2 JPEG格式......................... 279
9.2 圖片的修飾...........................279
9.2.1背景圖片修飾..................... 280
9.2.2內容圖片修飾..................... 280
9.3 製作一個圖片圓角框..................285
9.3.1單色單線圓角框的高度自適用....... 285
9.3.2單色單線圓角框的寬度自適用....... 289
9.3.3圓角框的完全自適用............... 294
9.3.4複雜圓角框的高度自適用........... 298
9.3.5複雜圓角框的完全自適用........... 301
9.4 圖片最佳化.............................305
9.5 小結.................................307
第10章CSS高級套用
10.1 套用自適用特性 .....................309
10.1.1獨立元素的自適用................ 309
10.1.2使用背景色自適用................ 311
10.1.3左右自適用的兩列布局............ 313
10.1.4某列固定時的自適用.............. 315
10.1.5水平自適用...................... 320
10.2 表單修飾............................323
10.2.1修飾表單文本域.................. 324
10.2.2修飾表單文本區域................ 325
10.2.3修飾表單按鈕.................... 327
10.2.4修飾複選框...................... 328
10.2.5修飾單選按鈕.................... 329
10.2.6修飾表單列表.................... 330
10.2.7修飾表單檔案域.................. 332
10.2.8修飾表單圖像域.................. 333
10.3 修飾頁面滾條........................334
10.4 修飾表格............................336
10.4.1修飾表格邊線和背景.............. 336
10.4.2設定表格的寬度和高度............ 337
10.4.3實現表格的居中.................. 339
10.4.4設定表格內容高度................ 340
10.5 修飾水平線..........................341
10.6 製作一個頁面框架 ...................342
10.6.1總體結構分析.................... 343
10.6.2設計頁面結構.................... 344
10.6.3編寫基礎樣式.................... 345
10.6.4編寫頂部樣式.................... 346
10.6.5編寫選單樣式.................... 347
10.6.6編寫主體樣式.................... 348
10.6.7編寫底部樣式.................... 349
10.7 製作登錄框..........................350
10.7.1設計頁面結構.................... 351
10.7.2編寫基礎樣式.................... 352
10.7.3編寫背景樣式.................... 353
10.7.4編寫表單樣式.................... 354
10.7.5編寫底部按鈕樣式................ 355
10.8 修飾導航欄..........................356
10.8.1修飾縱嚮導航欄.................. 356
10.8.2修飾導航欄連結.................. 358
10.8.3修飾導航欄文本背景.............. 359
10.8.4修飾橫嚮導航欄.................. 362
10.9 製作一個縱向下拉選單...............364
10.9.1設計頁面結構.................... 365
10.9.2編寫基礎樣式.................... 366
10.9.3編寫主導航樣式.................. 367
10.9.4編寫下拉欄目樣式................ 368
10.9.5編寫隱藏樣式.................... 369
10.9.6編寫顯示樣式.................... 370
10.9.7編寫腳本調用代碼................ 370
10.10 製作一個橫向下拉選單..............371
10.10.1設計頁面結構................... 373
10.10.2編寫主導航樣式................. 374
10.10.3編寫下拉選單樣式............... 375
10.10.4編寫兼容樣式................... 376
10.10.5編寫顯示樣式................... 376
10.10.6編寫腳本調用代碼............... 376
10.11 製作一個完整頁面..................378
10.11.1 Photoshop切片................... 379
10.11.2設計上部導航部分............... 380
10.11.3設計中間內容部分............... 384
10.11.4設計底部著作權部分............... 390
10.12 小結...............................393
第2篇 基本套用和提高篇
第11章CSS實戰與技巧
11.1 製作複雜圓角框....................... 397
11.1.1圖片圓角框...................... 397
11.1.2純CSS圓角框..................... 400
11.2 滑動門設計........................... 404
11.3 切換網站樣式......................... 408
11.3.1設計頁面結構.................... 409
11.3.2編寫不同樣式.................... 410
11.3.3頁面腳本調用.................... 413
11.4 實現柱形圖........................... 415
11.4.1進度條效果...................... 415
11.4.2統計柱形圖...................... 418
11.5 Flash套用............................ 423
11.5.1設計頁面結構.................... 423
11.5.2編寫設定樣式.................... 424
11.5.3編寫腳本調用程式................ 426
11.5.4插入Flash ........................ 427
11.5.5消除遮蓋........................ 428
11.6隱藏顯示標籤頁....................... 428
11.6.1設計頁面結構.................... 429
11.6.2編寫整體樣式.................... 430
11.6.3編寫標題樣式.................... 431
11.6.4編寫列表樣式.................... 432
11.6.5編寫連結樣式.................... 432
11.6.6編寫懸停樣式.................... 433
11.7特效處理............................. 434
11.7.1準備頁面素材.................... 435
11.7.2設計頁面結構.................... 435
11.7.3編寫連結樣式.................... 436
11.7.4編寫懸停樣式.................... 437
11.8小提示視窗........................... 438
11.8.1功能介紹........................ 438
11.8.2設計頁面結構.................... 439
11.8.3編寫整體樣式.................... 440
11.8.4 編寫提示標記樣式................ 440
11.8.5編寫顯示提示樣式................ 440
11.9JavaScript套用....................... 441
11.9.1 JavaScript概述.................... 442
11.9.2 JavaScript套用實例................ 442
11.10小結................................ 447
第12章不同瀏覽器的兼容性解析
12.1 瀏覽器兼容性介紹 ...................449
12.1.1常用瀏覽器介紹.................. 449
12.1.2遵循的原則...................... 449
12.2使用!important .....................450
12.3解決水平居中問題 ...................452
12.4解決非浮動內容和容器的問題.........454
12.5解決浮動問題........................457
12.6默認寬度的並列浮動元素.............460
12.7嵌套元素的疊加問題.................462
12.7.1嵌套元素均沒有定義寬度和高度.... 462
12.7.2設定子元素寬度.................. 463
12.7.3設定父元素寬度.................. 464
12.7.4解決方法........................ 466
12.8 子元素的負邊界問題.................470
12.9 列表默認顯示問題 ...................472
12.9.1列表默認顯示問題介紹............ 472
12.9.2取消列表默認顯示問題............ 474
12.10 IE 6.0的識別問題..................475
12.10.1浮動元素的雙邊距問題........... 475
12.10.2浮動元素的零邊距問題........... 477
12.10.3解決方法....................... 477
12.10.4浮動列表問題................... 479
12.10.5圖片空隙問題................... 481
12.11 IE 7.0的識別問題..................483
12.11.1 !important支持................... 483
12.11.2內容和容器的關係............... 483
12.11.3嵌套問題....................... 485
12.11.4浮動子元素問題................. 487
12.12 Opera下的CSS技巧..................489
12.13 常見兼容性技巧....................490
12.14 小結..............................492
第13章 CSS可視化開發
13.1 可視化開發工具介紹.................494
13.1.1 Frontpage介紹.................... 494
13.1.2 Dreamweaver介紹................. 495
13.2Frontpage中的CSS可視化開發.........498
13.3Dreamweaver中的CSS可視化開發.......502
13.4Visual Studio 2005中的CSS可視化開發............................... 505
13.5Developer Toolbar使用介紹..........508
13.5.1 Developer Toolbar的安裝........... 509
13.5.2 Developer Toolbar使用概要......... 510
13.6 小結................................511
第3篇 綜合實戰篇
第14章 個人部落格網站開發實例
14.1 網站規劃............................515
14.1.1站點需求分析.................... 515
14.1.2預期效果分析.................... 515
14.1.3站點結構規劃.................... 517
14.2 切圖分析............................517
14.3 製作站點首頁........................518
14.3.1實現流程分析.................... 518
14.3.2製作頂部導航.................... 519
14.3.3設計中間內容部分................ 523
14.3.4製作底部著作權部分................ 529
14.4 製作日誌頁面........................531
14.4.1實現流程分析.................... 532
14.4.2日誌內容實現 .................... 532
14.5 製作日誌詳情頁面 ...................533
14.5.1實現流程分析.................... 534
14.5.2頁面具體實現.................... 534
14.6 小結................................538
第15章 企業網站開發實例
15.1 網站規劃............................540
15.1.1站點需求分析.................... 540
15.1.2預期效果分析.................... 540
15.1.3頁布局分析...................... 542
15.2 切圖分析............................542
15.3 首頁實現............................543
15.3.1實現流程分析.................... 543
15.3.2製作頁面頭部.................... 543
15.3.3製作頁面主體.................... 547
15.3.4製作頁面底部.................... 556
15.3.5解決兼容性問題.................. 557
15.4 二級頁面實現........................558
15.5 小結................................560
