內容簡介
本書內容豐富,注重思維方法的轉變和提高實際操作能力,以最簡單的方法介紹使用CSS進行符合Web標準的網頁設計的相關知識和技巧。全書以CSS布局為主體內容,探討CSS布局的入門知識與網站布局實戰技巧、版式布局到細節、瀏覽器兼容性等,幫助讀者改變傳統的網站設計思維,進入基於Web標準的網頁設計領域。本書含有大量實例,詳細描述各個CSS屬性,以及代碼編寫技巧,方便讀者模擬實踐。本書適合將要學習或者正在學習使用CSS布局技術用戶閱讀,並可作為Web前端代碼架構的從業人員的參考手冊。
圖書目錄
第一篇 基礎知識篇
第1章 與網頁有關的基本概念 3
1.1 網頁的基本構成 3
1.2 網頁的結構設計——HTML與XHTML 4
1.2.1 認識HTML 5
1.2.2 認識XHTML 5
1.2.3 製作一個簡單的XHTML網頁 6
1.2.4 XHTML的優勢 7
1.3 CSS入門 8
1.3.1 感性體驗CSS的魅力 8
1.3.2 CSS的概念 11
1.3.3 CSS的特點 11
1.3.4 CSS的優勢 12
1.3.5 發揮CSS的優勢 12
1.4 Web標準 13
1.4.1 什麼是Web標準 14
1.4.2 Web標準的構成 14
1.4.3 Web標準的表現層技術 15
1.5 CSS+DIV建設網站 15
1.5.1 CSS+DIV的含義 15
.1.5.2 CSS+DIV網站設計的優勢 15
1.6 小結 16
第2章 CSS基礎知識 18
2.1 CSS的基本語法 18
2.1.1 CSS的基本語法構成 18
2.1.2 一個CSS樣式的簡單實例 18
2.2 CSS的選擇符 19
2.2.1 類型選擇符 20
2.2.2 群組選擇符 20
2.2.3 包含選擇符 20
2.2.4 id、class選擇符 21
2.2.5 標籤指定式選擇符 22
2.2.6 組合選擇符 22
2.2.7 偽類和偽對象 23
2.2.8 通配選擇符 23
2.3 CSS的常用屬性及屬性值 24
2.3.1 color顏色屬性 24
2.3.2 常用CSS長度單位 25
2.3.3 百分比值 26
2.3.4 URL路徑 26
2.4 CSS的繼承性 27
2.5 CSS的添加方法 28
2.5.1 在XHTML標識符里添加CSS 28
2.5.2 在XHTML頭信息標識符里添加CSS 28
2.5.3 連結樣式表 29
2.5.4 聯合使用樣式表 30
2.6 CSS的開發環境 31
2.6.1 編輯軟體 31
2.6.2 瀏覽軟體 32
2.7 小結 33
第3章 XHTML與Javascript基礎 35
3.1 XHTML基礎知識 35
3.1.1 XHTML的格式檔案 35
3.1.2 XHTML基本結構 36
3.1.3 XHTML網頁實例 39
3.2 XHTML的語法構成 40
3.2.1 XHTML中的標籤 40
3.2.2 XHTML的標籤屬性 41
3.3 XHTML的語法規範 42
3.3.1 標籤不能重疊,可以嵌套 42
3.3.2 XHTML檔案一定要有正確的組織格式 42
3.3.3 標籤名字一定要用小寫字母 43
3.3.4 所有的 XHTML 元素一定要關閉 43
3.3.5 獨立的一個標籤也要結束用 /]來結束 43
3.4 div標籤 43
3.4.1 什麼是div 44
3.4.2 理解div 44
3.4.3 使用div 46
3.4.4 div的並列與嵌套 46
3.5 span標籤 47
3.5.1 什麼是span 47
3.5.2 span與div的區別 47
3.6 h1至h6標籤 49
3.7 列表製作標籤ul、ol、li 49
3.7.1 ul無序列表 50
3.7.2 ol有序列表 51
3.8 p標籤和br標籤 51
3.8.1 p標籤 51
3.8.2 br標籤 52
3.9 img標籤 53
3.9.1 img標籤的屬性 53
3.9.2 img標籤使用方法 53
3.10 表單標籤 54
3.10.1 form標籤 54
3.10.2 input標籤 54
3.10.3 分組標籤fieldset、legend 56
3.11 JavaScript簡介 57
3.12 JavaScript語言基礎 58
3.12.1 插入JavaScript 58
3.12.2 基本語法 59
3.12.3 變數和數據類型 59
3.12.4 語句 60
3.13 JavaScript的對象及其屬性和方法 63
3.14 事件處理 64
3.14.1 事件處理的類型 64
3.14.2 指定事件處理 64
3.15 小結 65
第4章 瀏覽器的兼容與解析問題 67
4.1 兼容問題的由來 67
4.2 需要兼容的常用瀏覽器 67
4.3 CSS hack技術 68
4.3.1 什麼是CSS hack 68
4.3.2 使用CSS hack 69
4.4 常用CSS hack方法介紹 69
4.4.1 禁止IE 6瀏覽器 70
4.4.2 僅IE 7識別 71
4.4.3 僅IE 6識別 71
4.4.4 僅IE識別 72
4.4.5 兼容IE 6、IE 7、Firefox瀏覽器 73
4.5 CSS hack管理 75
4.6 IE條件注釋功能 76
4.7 小結 76
第二篇 實例製作篇
第5章 使用CSS製作背景 81
5.1 製作顏色背景 81
5.2 給元素添加背景圖片 82
5.2.1 指定背景圖像 83
5.2.2 製作重複的背景圖像 85
5.3 製作不動的背景 86
5.4 給網頁添加背景 89
5.5 製作滾動的背景 91
5.6 綜合使用背景 92
5.7 小結 94
第6章 使用CSS布局頁面頂部內容 95
6.1 製作包含文本logo的頁面頂部 95
6.2 製作包含圖像logo的頁面頂部 97
6.2.1 製作實例 98
6.2.2 兼容問題 100
6.3 製作包含文本banner的頁面頂部 102
6.3.1 圖片logo的定位 103
6.3.2 定義捷徑的文本樣式.. 105
6.3.3 定義段落文本banner樣式 107
6.4 製作包含圖像banner的頁面頂部 108
6.5 小結 112
第7章 使用CSS製作網站導航 114
7.1 製作一個簡單的橫向文字導航條 114
7.2 製作方塊導航條 117
7.3 製作標籤式導航 119
7.4 製作按鈕導航條 122
7.5 CSS盒模型及盒模型hack 126
7.5.1 盒模型尺寸 126
7.5.2 盒模型hack 128
7.5.3 簡單盒模型hack方法 129
7.6 製作會動的長城型導航條 130
7.7 製作基於背景控制的導航條 135
7.8 製作左右自由伸展的導航條 138
7.8.1 九宮格技術原理 139
7.8.2 製作自由伸展的導航條實例 141
7.9 製作一個簡單的縱嚮導航條 144
7.9.1 使用ul、li列表標籤製作導航條 145
7.9.2 使用div+h1標籤製作 145
7.10 製作分行導航條 148
7.11 製作增亮導航條 149
7.12 製作動感的導航條 151
7.13 製作下拉式導航條 155
7.13.1 製作實例 155
7.13.2 兼容問題 159
7.14 製作多級彈出導航條 160
7.14.1 製作實例 160
7.14.2 兼容問題 165
7.15 小結 167
第8章 使用CSS製作列表 169
8.1 製作新聞列表 169
8.1.1 製作實例 170
8.1.2 兼容問題 173
8.2 製作排行榜 174
8.3 製作自定義圖片項目符號的列表 177
8.3.1 使用列表符號樣式屬性製作列表 177
8.3.2 使用背景圖片屬性製作列表符號 180
8.3.3 兼容問題 181
8.4 使用CSS改變列表排版 182
8.5 列表縮進排版 186
8.5.1 製作實例 186
8.5.2 兼容問題 189
8.6 複雜列表排版 191
8.6.1 overflow屬性語法結構 191
8.6.2 製作實例 191
8.6.3 兼容問題 196
8.7 小結 198
第9章 使用CSS製作表單 200
9.1 製作登錄表單 200
9.1.1 label標籤語法結構 201
9.1.2 製作登錄表單實例 201
9.1.3 兼容問題 204
9.2 製作用戶註冊表單 205
9.2.1 製作頁面的XHTML代碼 206
9.2.2 製作頁面的CSS樣式 208
9.3 製作符合W3C標準的表單 213
9.3.1 製作頁面的XHTML代碼 213
9.3.2 製作頁面的CSS樣式 216
9.3.3 兼容問題 224
9.4 小結 224
第10章 使用CSS製作內容的版式 226
10.1 製作分欄的文字排版 226
10.2 製作圖文混合排版 228
10.2.1 圖文混排基本方式 228
10.2.2 製作網站圖文混排版式的實例 230
10.3 製作全圖排版的實例 235
10.3.1 自由浮動布局 235
10.3.2 其他顯示方式布局 240
10.4 小結 242
第11章 使用CSS製作連結樣式 243
11.1 製作Windows風格樣式的CSS按鈕 243
11.1.1 仿Windows經典樣式的CSS按鈕 243
11.1.2 仿Windows XP風格的CSS按鈕 244
11.2 製作仿按鈕下陷效果的實例 245
11.3 麵包屑導航連結 246
11.3.1 製作實例 247
11.3.2 兼容問題 249
11.4 小結 250
第12章 使用CSS製作數據表格 252
12.1 製作基本的數據表格 252
12.1.1 表示數據的表格對象標籤 252
12.1.2 使用表格標籤製作表格 252
12.1.3 使用CSS修飾表格樣式 254
12.2 製作CSS風格的數據表格 258
12.2.1 表格對象標籤屬性 258
12.2.2 CSS屬性text-transform 259
12.2.3 製作數據表格實例 259
12.3 小結 266
第13章 使用CSS製作頁面底部內容 267
13.1 製作文本信息的頁面底部內容 267
13.1.1 a標籤的title屬性 267
13.1.2 製作包含文本信息的頁面底部XHTML結構代碼 267
13.1.3 製作頁面的CSS樣式 268
13.1.4 兼容問題 272
13.2 製作包含導航連結的頁面底部內容 273
13.2.1 製作包含導航連結頁面底部的XHTML代碼結構 273
13.2.2 製作頁面的CSS樣式 274
13.3 製作包含圖像友情連結的頁面底部內容 278
13.3.1 製作頁面底部的XHTML結構 278
13.3.2 製作頁面的CSS樣式 279
13.4 小結 282
第三篇 整體布局篇
第14章 CSS基本布局 287
14.1 一列固定寬度 287
14.2 一列寬度自適應 288
14.3 一列居中 290
14.4 二列固定寬度 292
14.5 二列寬度自適應 293
14.6 兩列右列寬度自適應 294
14.7 兩列固定寬度居中 297
14.8 三列浮動中間列寬度自適應 299
14.9 高度自適應 302
14.10 小結 303
第15章 CSS整體布局的實現 305
15.1 頂行三列布局的實現 305
15.1.1 製作思路 306
15.1.2 製作頂部三列式布局實例 307
15.2 多區域不規則布局 309
15.2.1 製作思路 310
15.2.2 製作多區域不規則布局的實例 313
15.3 小結 316
第16章 使用Dreamweaver製作頁面的實例 317
16.1 框架設計 317
16.1.1 頁面分析 318
16.1.2 框架製作 319
16.1.3 切圖 323
16.2 布局設計 326
16.2.1 頁面頂部布局設計 327
16.2.2 頁面中上部的布局設計 329
16.2.3 頁面中下部的布局設計 332
16.2.4 頁面底部的布局設計 336
16.3 模組設計 338
16.3.1 快速導航製作 338
16.3.2 “麵包屑”製作 341
16.3.3 數據表格製作 342
16.3.4 圖片排版 345
16.4 兼容性測試 348
16.5 小結 350
第四篇 綜合套用篇
第17章 部落格類網頁布局設計 353
17.1 頁面布局和規劃 354
17.1.1 界面設計分析 354
17.1.2 規劃頁面布局 354
17.2 CSS結構設計與整體布局設計 356
17.2.1 CSS結構設計 356
17.2.2 整體布局設計 357
17.3 頁面頭部布局設計 360
17.3.1 製作頭部的結構代碼 360
17.3.2 編寫頭部的CSS代碼 361
17.4 日誌部分的布局設計 363
17.4.1 製作日誌部分的結構代碼 364
17.4.2 編寫日誌部分的CSS代碼 365
17.5 邊欄區域的布局設計 369
17.5.1 製作邊欄區域的結構代碼 369
17.5.2 編寫右邊欄區域的CSS代碼 370
17.6 頁面底部的布局設計 372
17.6.1 製作底部的結構代碼 372
17.6.2 編寫底部的CSS代碼 373
17.7 小結 374
第18章 企業類網頁布局設計 375
18.1 頁面布局和規劃 375
18.1.1 界面設計分析 376
18.1.2 規劃頁面布局 377
18.2 CSS結構設計與整體布局設計 378
18.2.1 CSS檔案結構設計 378
18.2.2 首頁布局設計 379
18.3 頁面頭部布局設計 381
18.3.1 製作頭部的結構代碼 381
18.3.2 編寫頭部的CSS樣式 382
18.4 頁面banner區域的布局設計 383
18.4.1 製作banner區域主體的布局設計 383
18.4.2 製作banner區域各個元素的布局設計 384
18.5 頁面主內容區的布局設計 389
18.5.1 製作頁面主內容區結構 389
18.5.2 編寫CSS樣式 390
18.6 頻道頁面布局設計概述 393
18.7 小結... 394
作者簡介
本叢書的作者團隊對電腦程式設計類圖書市場有很好的敏感性,對出版動態有準確的把握,對計算機技術的發展進行長期跟蹤。該團隊長期以來致力於計算機圖書的內容提供和策劃,已經出版的多個系列圖書都在計算機圖書市場上有良好的口碑,都曾經引領了當年的電腦程式設計暢銷書。