出版信息
書 名 CSS網頁設計標準教程
叢 書 名 21世紀高等學校計算機規劃教材——精品系列
標準書號 ISBN 978-7-115-20611-4/TP
作 者 溫謙 編著
責任編輯 張立科 賈楠
開 本 16 開
印 張 19.75
字 數 514 千字
頁 數 304 頁
裝 幀 平裝
版 次 第1版第1次
初版時間 2009年5月
本 印 次 2009年5月
首 印 數 3000 冊
定 價 32.00 元
內容簡介
《CSS網頁設計標準教程》分為4部分,15章。包括了CSS核心原理、CSS專題技術、CSS頁面布局以及綜合案例等內容。全書遵循Web標準,強調網頁中“表現”與“內容”分離的思想,從更規範的角度全面、系統地介紹了CSS網頁設計的方法與技巧。書中給出了大量的案例,並對案例做了細緻的分析,便於學生理解所學知識,加強實操訓練,提高實踐能力。《CSS網頁設計標準教程》可作為高等院校各專業“網頁設計與製作”課程的教材,也可供網頁設計、製作和開發人員學習參考,Css可以和Div一起使用。
編輯推薦
《CSS
網頁設計標準教程》全面介紹了CSS技術標準的概念、原理以及在Web設計中的實際套用。,力求在知識體系上層層深入,在內容安排上遵循“從原理到實踐,從局部到整體.由簡單到複雜”的基本思路、《CSS網頁設計標準教程》分別介紹了CSS核心原理、CSS專題技術、CSS頁面布局以及綜合案例等內容。全書遵循Web標準,強調網頁中“表現”與“內容”分離的思想,從更規範的角度全面、系統地介紹了CSS網頁設計的方法與技巧,使設計者製作出兼容主流瀏覽器lE6、lE7、Flre fox的網頁。書中給出了大量的案例,並對案例進行細緻分析,便於學生理解所學知識.加強實操訓練,提高實踐能力。《CSS網頁設計標準教程》可作為高等院校各專業“網頁設計與製作”課程的教材,也可供網頁設計、製作和開發人員學習參考。
剖析CSS核心原理
講解流行網頁元素
歸納網頁布局方法
提供豐富綜合案例
目錄
第1部分 CSS核心原理
第1章 (X)HTML與CSS概述 2
1.1 網頁的基礎概念 2
1.2 Web標準 3
1.2.1 標準的重要性 3
1.2.2 “Web標準”概述 4
1.3 HTML與XHTML 5
1.3.1 追根溯源 5
1.3.2 文檔類型的含義與選擇 6
1.3.3 XHTML與HTML的重要區別 7
1.4 (X)HTML與CSS 8
1.4.1 CSS標準 8
1.4.2 傳統HTML的缺點 9
1.4.3 CSS的引入 10
1.4.4 如何編輯CSS 11
1.4.5 瀏覽器與CSS 12
小結 13
習題 13
第2章 CSS選擇器與相關特性 14
2.1 構造CSS規則 14
2.2 基本CSS選擇器 15
2.2.1 標記選擇器 15
2.2.2 類別選擇器 16
2.2.3 ID選擇器 18
2.3 在HTML中使用CSS的方法 19
2.3.1 行內式 20
2.3.2 內嵌式 20
2.3.3 連結式 21
2.3.4 導入式 22
2.4 複合選擇器 24
2.4.1 交集選擇器 24
2.4.2 並集選擇器 25
2.4.3 後代選擇器 27
2.5 CSS的繼承特性 29
2.5.1 繼承關係 29
2.5.2 CSS繼承的運用 30
2.6 CSS的層疊特性 32
小結 34
習題 34
第3章 CSS設計實踐 35
3.1 手工方式編寫頁面 35
3.1.1 構建頁面框架 35
3.1.2 設定標題 36
3.1.3 控制圖片 37
3.1.4 設定正文 38
3.1.5 設定整體頁面 38
3.1.6 對段落進行分別設定 39
3.1.7 完整代碼 40
3.1.8 CSS的注釋 41
3.2 使用Dreamweaver進行CSS設定 41
3.2.1 創建頁面 41
3.2.2 新建CSS規則 42
3.2.3 編輯CSS規則 44
3.2.4 為圖像創建CSS規則 45
小結 47
習題 47
第4章 CSS盒子模型 48
4.1 “盒子”與“模型”的概念探究 48
4.2 長度單位 49
4.3 框線 50
4.3.1 設定框線樣式 51
4.3.2 屬性值的簡寫形式 52
4.3.3 框線與背景 54
4.4 設定內邊距 55
4.5 設定外邊距 56
4.6 盒子之間的關係 57
4.6.1 HTML與DOM 57
4.6.2 標準文檔流 60
4.6.3 <div>標記與<span>標記 62
4.7 盒子在標準流中的定位原則 64
4.7.1 行內元素之間的水平margin 64
4.7.2 塊級元素之間的豎直margin 65
4.7.3 嵌套盒子之間的margin 66
4.7.4 margin屬性可以設定為負值 68
4.8 盒子模型概念的實例 69
小結 72
習題 72
第5章 盒子的浮動與定位 73
5.1 盒子的浮動 73
5.1.1 製作基礎頁面 73
5.1.2 設定第1個浮動的div 75
5.1.3 設定第2個浮動的div 75
5.1.4 設定第3個浮動的div 76
5.1.5 改變浮動的方向 76
5.1.6 再次改變浮動的方向 76
5.1.7 全部向左浮動 77
5.1.8 使用clear屬性清除浮動的影響 78
5.1.9 擴展盒子的高度 79
5.2 盒子的定位 80
5.2.1 靜態定位 80
5.2.2 相對定位 81
5.2.3 絕對定位 84
5.2.4 固定定位 89
5.3 z-index空間位置 89
5.4 盒子的display屬性 90
小結 91
習題 91
第2部分 CSS專題技術
第6章 用CSS設定文本和圖像 94
6.1 使用CSS設定文本樣式 94
6.1.1 創建基礎頁面 94
6.1.2 設定文字的字型 95
6.1.3 設定文字的傾斜效果 95
6.1.4 設定文字的加粗效果 96
6.1.5 轉換英文字母大小寫 97
6.1.6 控制文字的大小 98
6.1.7 設定文字裝飾效果 99
6.1.8 設定段落首行縮進 100
6.1.9 設定字詞間距 101
6.1.10 設定段落內部的文字行高 101
6.1.11 設定段落之間的距離 102
6.1.12 控制文本的水平位置 103
6.1.13 設定文字與背景的顏色 103
6.2 用CSS設定圖像樣式 104
6.2.1 設定圖片框線 105
6.2.2 圖片縮放 107
6.2.3 圖文混排 108
6.2.4 製作八大行星科普網頁實例 110
6.2.5 設定圖片與文字的對齊方式 113
6.3 用CSS設定背景樣式 117
6.3.1 設定背景顏色 117
6.3.2 設定背景圖像 118
6.3.3 設定背景圖像平鋪 119
6.3.4 設定背景圖像位置 121
6.3.5 固定背景圖片位置 123
6.3.6 設定標題的圖像替換 124
小結 127
習題 127
第7章 用CSS設定超連結與導航選單 128
7.1 製作豐富的超連結特效 129
7.2 創建按鈕式超連結 131
7.3 製作螢光燈效果的選單 132
7.3.1 創建HTML框架 133
7.3.2 設定容器的CSS樣式 133
7.3.3 設定選單項的CSS樣式 134
7.4 控制滑鼠指針 136
7.5 設定項目列表樣式 136
7.5.1 列表的符號 137
7.5.2 圖片符號 139
7.6 創建基於列表的導航選單 140
7.6.1 簡單的豎直排列選單 140
7.6.2 橫豎自由轉換選單 143
7.7 套用滑動門技術的玻璃效果選單 143
7.7.1 基本思路 144
7.7.2 設定選單整體效果 145
7.7.3 使用“滑動門”技術設定玻璃材質背景 146
7.7.4 後續問題 147
小結 148
習題 148
第8章 用CSS設定表格和表單樣式 149
8.1 控制表格 149
8.1.1 設定表格的框線 149
8.1.2 確定表格的寬度 152
8.1.3 其他與表格相關的標記 152
8.2 美化表格 153
8.2.1 搭建HTML結構 154
8.2.2 整體設定 155
8.2.3 設定單元格樣式 155
8.2.4 斑馬紋效果 156
8.3 製作日曆 157
8.3.1 搭建HTML結構 158
8.3.2 設定整體樣式和表頭樣式 159
8.3.3 設定日曆單元格樣式 160
8.4 CSS與表單 163
8.4.1 表單中的元素 163
8.4.2 多彩的下拉選單 166
8.5 網民調查問卷實例 167
小結 169
習題 169
第9章 圓角設計 170
9.1 圓角框的作用 170
9.2 固定寬度圓角框 171
9.2.1 兩背景圖像法 171
9.2.2 使用透明背景圖 174
9.3 不固定寬度的圓角框 175
9.3.1 不固定寬度圓角框的含義 175
9.3.2 “4圖像”單色不固定寬度圓角框 176
9.4 “5圖像”二維滑動門經典圓角框 178
9.4.1 準備圖像 179
9.4.2 搭建HTML結構 180
9.4.3 放置背景圖像 182
9.4.4 設定樣式並修復缺口 183
9.4.5 在整體頁面中使用圓角框 184
9.4.6 實現網頁換膚 186
小結 189
習題 189
第10章 網頁樣式綜合案例——靈活的電子相冊 190
10.1 搭建框架 190
10.2 陣列模式 192
10.3 單列模式 196
10.4 改進陣列模式 198
10.5 IE 6兼容 201
小結 203
習題 203
第3部分 CSS頁面布局
第11章 固定寬度布局剖析與製作 206
11.1 向報紙學習排版思想 206
11.2 CSS排版觀念 208
11.2.1 兩列布局 208
11.2.2 三列布局 209
11.2.3 多列布局 210
11.2.4 布局結構的表達式與結構圖 211
11.3 單列布局 214
11.3.1 放置第一個圓角框 215
11.3.2 設定圓角框的CSS樣式 215
11.3.3 放置其他圓角框 218
11.4 “1-2-1”固定寬度布局 219
11.4.1 創建基本代碼 219
11.4.2 絕對定位法 221
11.4.3 浮動法 222
11.5 “1-3-1”固定寬度布局 225
11.6 “1-((1-2)+1)-1”固定寬度布局 226
小結 227
習題 227
第12章 變寬度網頁布局剖析與製作 228
12.1 “1-2-1”變寬度網頁布局 228
12.1.1 “1-2-1”等比例變寬布局 228
12.1.2 “1-2-1”單列變寬布局 230
12.2 “1-3-1”寬度適應布局 234
12.2.1 “1-3-1”三列寬度等比例布局 234
12.2.2 “1-3-1”單側列寬度固定的變寬布局 234
12.2.3 “1-3-1”中間列寬度固定的變寬布局 235
12.2.4 進一步思考 237
12.2.5 “1-3-1”雙側列寬度固定的變寬布局 238
12.2.6 “1-3-1”中列和側列寬度固定的變寬布局 240
12.3 變寬布局方法總結 240
12.4 分列布局背景色問題 241
12.5 CSS布局與傳統的表格方式布局的分析 245
小結 247
習題 247
第4部分 綜合案例
第13章 綜合案例——兒童用品網上商店 250
13.1 案例概述 250
13.2 內容分析 251
13.3 HTML結構設計 252
13.4 原型設計 255
13.5 頁面方案設計 258
13.6 布局設計 258
13.6.1 整體樣式設計 258
13.6.2 頁頭部分 259
13.6.3 內容部分 262
13.6.4 頁腳部分 264
13.7 細節設計 265
13.7.1 頁頭部分 265
13.7.2 內容部分 270
13.7.3 左側的主要內容列 270
13.7.4 右邊欄 273
13.8 CSS布局的優點 276
13.9 互動效果設計 277
13.9.1 次導航欄 277
13.9.2 主導航欄 278
13.9.3 賬號區 278
13.9.4 圖像框線 279
13.9.5 產品分類 280
13.10 遵從Web標準的設計流程 281
小結 282
習題 282
第14章 綜合案例——部落格網站 283
14.1 分析構架 283
14.1.1 設計分析 283
14.1.2 排版構架 284
14.2 模組拆分 285
14.2.1 導航與Banner 285
14.2.2 左側列表 287
14.2.3 內容部分 290
14.2.4 footer腳註 292
14.3 整體調整 292
小結 293
習題 293
第15章 綜合案例——旅遊入口網站 294
15.1 分析構架 294
15.1.1 設計分析 294
15.1.2 排版構架 295
15.2 模組拆分 296
15.2.1 Banner圖片與導航選單 296
15.2.2 左側分欄 297
15.2.3 中部主體 299
15.2.4 右側分欄 301
15.2.5 腳註 302
15.3 最終效果 303
小結 304
習題 304