《DIV+CSS網頁樣式與布局完全學習手冊》是2014年清華大學出版社出版的圖書。
基本介紹
- 書名：DIV+CSS網頁樣式與布局完全學習手冊
- ISBN：9787302333630
- 定價：59元
- 出版時間：2014-6-17
- 裝幀：平裝
圖書簡介,目錄,
圖書簡介
本書系統地講解了DIV + CSS 樣式表的基礎理論和實際運用技巧，並通過大量實例對CSS 進行深入淺出的分析，主要包括CSS 的基本語法和概念，設定文字、圖片、背景、表格、表單和選單等網頁元素的方法以及CSS 濾鏡的使用，並著重講解了如何用CSS+DIV 進行網頁布局。本書注重實際操作，使讀者在學習CSS 套用技術的同時，掌握CSS+DIV 的精髓。
目錄
第1篇網頁製作基礎........................1
第1章網頁基礎和網站開發流程.................1
1.1 認識網頁與網站.............................................2
1.1.1 什麼是網站.........................................2
1.1.2 靜態網頁和動態網頁..........................2
1.1.3 網頁基本構成元素..............................3
1.2 網站類型........................................................5
1.2.1 個人網站............................................6
1.2.2 電子商務網站.....................................6
1.2.3 娛樂遊戲類網站..................................6
1.2.4 時尚類網站.........................................7
1.2.5 新聞資訊類網站..................................7
1.2.6 門戶類網站.........................................8
1.3 開發網站需要的技術......................................8
1.3.1 需要HTML檔案...................................8
1.3.2 需要DIV來布局...................................9
1.3.3 需要CSS來定義樣式.........................10
1.3.4 需要JavaScript.................................11
1.3.5 需要動態網頁開發語言.....................11
1.4 網站開發流程...............................................12
1.4.1 確定網站目標...................................12
1.4.2 規劃站點結構...................................12
1.4.3 收集素材..........................................13
1.4.4 美工設計出頁面整體效果.................13
1.4.5 切割和最佳化頁面................................13
1.4.6 添加網頁後台程式............................14
1.4.7 申請域名..........................................15
1.4.8 申請伺服器空間................................16
1.4.9 測試並上傳網站................................17
1.4.10 網站最佳化........................................17
1.4.11 網站維護........................................18
1.4.12 網站的推廣.....................................18
第2章Web標準........................................19
2.1 表格布局與CSS布局....................................20
2.1.1 表格布局的優點................................20
2.1.2 表格布局的缺點................................20
2.1.3 表格布局與CSS布局實例.................20
2.2 了解Web標準...............................................22
2.2.1 什麼是Web標準...............................22
2.2.2 為什麼要建立Web標準.....................22
2.2.3 W3C發布的標準...............................23
2.2.4 Web標準的優勢...............................24
2.3 Web標準三劍客...........................................25
2.3.1 內容、結構、表現和行為.................25
2.3.2 如何改善現有網站............................25
第3章HTML和XHTML基礎......................27
3.1 HTML文檔的基本結構..................................28
3.1.1 HTML檔案結構.................................28
3.1.2 編寫HTML檔案注意事項..................29
3.1.3 HTML文檔中的注釋..........................29
3.2 編輯HTML網頁正文.....................................29
3.2.1 輸入網頁標題...................................30
3.2.2 劃分正文段落...................................30
3.2.3 設定文本格式...................................31
3.3 在HTML網頁中插入圖片..............................32
3.3.1 插入網頁圖片...................................33
3.3.2 在網頁中加入水平線........................34
3.4 在HTML網頁中使用列表..............................35
3.4.1 使用編號列表...................................35
3.4.2 使用無序列表...................................36
3.5 在HTML網頁中使用表格..............................37
3.5.1 認識表格標記...................................37
3.5.2 設定表格的整體屬性........................38
3.6 建立超連結...................................................39
3.6.1 連結標籤..........................................39
3.6.2 創建郵件連結...................................40
3.6.3 錨點連結..........................................40
3.7 XHTML簡介.................................................41
3.7.1 什麼是XHTML..................................41
3.7.2 為什麼要升級到XHTML....................41
3.8 XHTML頁面結構..........................................42
3.9 XHTML與HTML的區別................................43
第2篇CSS控制樣式基礎...............46
第4章CSS基礎........................................46
4.1 CSS介紹......................................................47
4.1.1 CSS基本概念...................................47
4.1.2 CSS的優點.......................................47
4.1.3 CSS功能...........................................48
4.1.4 瀏覽器與CSS...................................49
4.1.5 CSS發展歷史...................................49
4.2 在HTML5中使用CSS的方法.......................50
4.2.1 內嵌樣式..........................................50
4.2.2 行內樣式..........................................50
4.2.3 連結外部樣式表................................51
4.2.4 導入樣式..........................................52
4.2.5 優先權問題.......................................52
Ⅳ2
DIV+CSS網頁樣式與布局完全學習手冊
4.3 使用Dreamweaver設定CSS樣式.................52
4.3.1 設定文本樣式...................................53
4.3.2 設定背景樣式...................................54
4.3.3 設定區塊樣式...................................55
4.3.4 設定方框樣式...................................56
4.3.5 設定框線樣式...................................57
4.3.6 設定列表樣式...................................59
4.3.7 設定定位樣式...................................60
4.3.8 設定擴展樣式...................................61
4.3.9 過渡樣式的定義................................61
4.4 選擇器類型...................................................62
4.4.1 標籤選擇器.......................................62
4.4.2 類選擇器..........................................62
4.4.3 ID選擇器..........................................63
4.5 編輯和瀏覽CSS...........................................64
4.5.1 手工編寫CSS...................................64
4.5.2 Dreamweaver編寫CSS....................65
4.6 綜合實戰——對網頁添加CSS樣式..............65
第5章使用CSS設計網頁文本和段落
樣式................................................68
5.1 通過CSS控制文本樣式................................69
5.1.1 字型font-family................................69
5.1.2 字號font-size...................................70
5.1.3 加粗字型font-weight.......................71
5.1.4 字型風格font-style...........................72
5.1.5 小寫字母轉為大寫字母font-variant...72
5.2 通過CSS控制段落格式................................74
5.2.1 單詞間隔word-spacing...................74
5.2.2 字元間隔letter-spacing...................74
5.2.3 文字修飾text-decoration.................75
5.2.4 垂直對齊方式vertial-align...............76
5.2.5 文本轉換text-transform...................77
5.2.6 水平對齊方式text-align...................77
5.2.7 文本縮進text-indent........................78
5.2.8 文本行高line-height........................79
5.2.9 處理空白white-space......................80
5.3 綜合實戰——CSS字型樣式綜合演練...........81
第6章通過CSS定義具有特色的
超連結效果.....................................83
6.1 超連結基礎...................................................84
6.1.1 超連結的基本概念............................84
6.1.2 使用頁面屬性設定超連結.................84
6.2 連結標記......................................................85
6.2.1 a:link................................................85
6.2.2 a:visited...........................................86
6.2.3 a:active............................................87
6.2.4 a:hover.............................................88
6.3 定義豐富的超連結特效.................................89
6.3.1 背景色變換連結................................89
6.3.2 多姿多彩的下劃線連結.....................90
6.3.3 圖像翻轉連結...................................91
6.3.4 框線變換連結...................................93
6.4 綜合實戰......................................................95
6.4.1 實戰——使用CSS實現滑鼠
指針形狀改變...................................95
6.4.2 實戰——為超連結文字加上
質感框線...........................................96
6.4.3 實戰——滑鼠指針移到連結文字上時
改變文字大小或顏色........................99
6.4.4 實戰——給超連結添加提示文字....101
第7章用CSS設計圖像和背景.................106
7.1 設定網頁的背景.........................................107
7.1.1 背景顏色........................................107
7.1.2 背景圖片........................................108
7.2 設定背景圖片的樣式..................................109
7.2.1 背景圖片重複.................................109
7.2.2 背景圖片附屬檔案.................................110
7.2.3 背景定位........................................110
7.3 設定網頁圖片的樣式..................................112
7.3.1 設定圖片框線.................................113
7.3.2 圖文混合排版.................................115
7.4 套用CSS過濾器設計圖像特效....................116
7.4.1 控制圖像和背景的透明度(Alpha).....116
7.4.2 灰度(Gray).....................................117
7.4.3 反色(Invert)....................................118
7.5 綜合實戰....................................................118
7.5.1 實戰——給圖片添加框線...............118
7.5.2 實戰——圖文繞排效果...................120
7.5.3 實戰——文字與圖片上下垂直居中....121
7.5.4 實戰——CSS實現背景半透明效果....122
7.5.5 實戰——可控的左右滾動圖片........123
第3篇CSS控制樣式進階.............127
第8章設計更富靈活性的表格.................127
8.1 表格基礎....................................................128
Ⅴ3
目錄
8.2 用CSS設定表格的樣式..............................129
8.2.1 設定表格的顏色..............................129
8.2.2 設定表格的框線樣式......................130
8.2.3 設定表格的陰影..............................131
8.2.4 設定表格的漸變背景......................132
8.2.5 製作條紋數據表格樣式...................133
8.3 綜合實戰....................................................137
8.3.1 實戰——製作變換背景色的表格....137
8.3.2 實戰——用CSS製作漂亮的彩色背景
表格...............................................138
8.3.3 實戰——製作陰影表格...................140
8.3.4 實戰——製作圓角表格...................140
第9章設計更酷更炫的表單.....................143
9.1 網頁中的表單.............................................144
9.1.1 表單對象........................................144
9.1.2 輸入域標籤<input>........................144
9.1.3 文本域標籤<textarea>...................145
9.1.4 選擇域標籤<select>和<option>....146
9.1.5 設定框線樣式.................................147
9.2 通過CSS設定各元素的外觀.......................149
9.2.1 設定背景樣式.................................149
9.2.2 設定輸入文本的樣式......................151
9.2.3 設計文本框的樣式..........................152
9.3 綜合實戰....................................................154
9.3.1 實戰——改變按鈕的背景顏色
和文字顏色.....................................154
9.3.2 實戰——設計文本框中的
文字樣式........................................157
9.3.3 實戰——製作透明的表單背景........157
9.3.4 實戰——為下拉列表變換顏色........159
9.3.5 實戰——CSS3製作的3D效果登錄
表單...............................................160
第10章用CSS製作實用的選單和
網站導航....................................163
10.1 列表概述..................................................164
10.2 列表樣式控制...........................................164
10.2.1 ul無序列表..................................164
10.2.2 ol有序列表..................................165
10.2.3 dl定義列表..................................166
10.2.4 更改列表項目樣式......................167
10.3 橫排導航..................................................168
10.3.1 文本導航.....................................168
10.3.2 標籤式導航.................................170
10.4 豎排導航..................................................171
10.5 綜合實戰..................................................173
10.5.1 實戰——實現背景變換的
導航選單......................................173
10.5.2 實戰——利用CSS製作橫嚮導航....174
10.5.3 實戰——製作網頁下拉列表........175
10.5.4 實戰——用背景圖片實現CSS柱狀
圖表...........................................177
第11章CSS中的濾鏡.............................179
11.1 濾鏡概述..................................................180
11.2 動感模糊blur............................................180
11.3 對顏色進行透明處理chroma....................181
11.4 設定陰影DropShadow.............................182
11.5 對象的翻轉flipH、flipV.............................183
11.6 發光效果glow...........................................183
11.7 X光片效果xray.........................................184
11.8 波形濾鏡wave..........................................185
11.9 遮罩效果mask..........................................186
第4篇CSS布局...........................187
第12章CSS盒子模型與定位..................187
12.1 “盒子”與“模型”的概念探究..............188
12.2 border......................................................188
12.2.1 框線樣式：border-style............189
12.2.2 框線顏色：border-color............192
12.2.3 框線寬度：border-width...........193
12.2.4 透明框線.....................................194
12.3 padding....................................................195
12.4 margin......................................................197
12.5 盒子的浮動float........................................199
12.6 盒子的定位...............................................201
12.6.1 絕對定位：Absolute...................201
12.6.2 固定定位：fixed.........................203
12.6.3 相對定位：relative.....................204
12.6.4 z-index空間位置........................206
第13章CSS+DIV布局方式.....................207
13.1 CSS布局模型...........................................208
13.1.1 流動布局模型.............................208
4
DIV+CSS網頁樣式與布局完全學習手冊
Ⅵ
13.1.2 浮動布局模型.............................209
13.1.3 層布局模型.................................212
13.1.4 高度自適應.................................214
13.2 CSS布局理念...........................................215
13.2.1 將頁面用div分塊.........................215
13.2.2 設計各塊的位置..........................216
13.2.3 用CSS定位.................................216
13.3 固定寬度布局...........................................217
13.3.1 一列固定寬度.............................217
13.3.2 兩列固定寬度.............................218
13.3.3 圓角框........................................220
13.4 可變寬度布局...........................................221
13.4.1 一列自適應.................................221
13.4.2 兩列寬度自適應..........................222
13.4.3 兩列右列寬度自適應...................223
13.4.4 三列浮動中間寬度自適應...........224
13.4.5 三行二列居中高度自適應布局....225
第14章解決CSS布局中的常見問題........227
14.1 關於水平和垂直居中對齊的問題..............228
14.1.1 讓Div中的內容垂直居中.............228
14.1.2 讓Div中的內容水平居中.............231
14.2 解決瀏覽器不兼容的問題.........................234
14.2.1 margin加倍的問題......................234
14.2.2 浮動IE產生的雙倍距離...............234
14.2.3 DIV浮動IE文本出現3px間距的問題
（bug）......................................235
14.2.4 高度不能自適應的問題...............236
14.2.5 垂直居中對齊文本與文本輸入框
的問題........................................237
14.2.6 firefox下如何使連續長欄位自動
換行............................................238
第15章HTML5高級程式設計.................239
15.1 HTML5簡介.............................................240
15.1.1 認識HTML5...............................240
15.1.2 HTML5的特點............................241
15.1.3 HTML5中的標記方法.................242
15.1.4 HTML5基本布局........................242
15.2 HTML5結構元素.....................................245
15.2.1header........................................245
15.2.2 nav.............................................246
15.2.3 footer..........................................247
15.2.4 article.........................................248
15.2.5 section.......................................249
15.2.6 aside..........................................250
15.2.7 address......................................250
15.3 新增的嵌入多媒體元素與互動性元素.......251
15.3.1 video元素...................................251
15.3.2 audio元素...................................251
15.3.3 embed元素................................252
15.4 新增的input元素的類型............................252
15.4.1 url類型........................................252
15.4.2 email類型...................................252
15.4.3 date類型.....................................253
15.4.4 time類型.....................................253
15.4.5 datetime類型..............................253
15.5 創建簡單的HTML5頁面...........................254
15.5.1 HTML5文檔類型........................254
15.5.2 字元編碼.....................................254
15.5.3 頁面語言.....................................254
15.5.4 添加樣式表.................................254
15.5.5 添加JavaScript...........................255
15.5.6 測試結果.....................................255
第16章CSS3指南.................................256
16.1 預覽激動人心的CSS3.............................257
16.1.1 CSS3的發展歷史.......................257
16.1.2 CSS3新增特性...........................257
16.1.3 主流瀏覽器對CSS3的支持.........261
16.2 使用CSS3實現圓角表格.........................261
16.3 使用CSS3製作圖片滾動選單..................263
16.4 使用CSS3製作文字立體效果..................266
16.5 使用CSS3製作多彩的網頁圖片庫...........267
16.6 使用CSS3實現的幻燈圖片效果...............269
第17章CSS與JavaScript的綜合套用.....275
17.1 JavaScript簡介.........................................276
17.1.1 什麼是JavaScript.......................276
17.1.2 JavaScript特點...........................276
17.2 JavaScript的基本語法..............................277
17.2.1 常量和變數.................................277
17.2.2 表達式和運算符..........................278
17.2.3 基本語句.....................................279
17.2.4 函式............................................283
17.3 JavaScript事件.........................................284
17.4 JavaScript內部對象.................................293
17.4.1 navigator對象.............................293
17.4.2 document對象............................294
5
目錄
Ⅶ
17.4.3 window對象................................295
17.4.4 location對象...............................297
17.4.5 history對象.................................297
17.5 綜合實戰..................................................298
17.5.1 實戰——隨滑鼠移動的圖像........298
17.5.2 實戰——製作圖片循環隱現效果....300
17.5.3 實戰——製作幻燈片效果...........302
17.5.4 實戰——製作燈光效果..............304
17.5.5 實戰——可以任意選擇網頁中的
文字顏色、背景顏色、字號.......305
第5篇CSS布局綜合實例.............310
第18章設計富有個性的個人網站...........310
18.1 個人網站設計概述....................................311
18.2 個人網站色彩搭配和結構設計..................312
18.3 網站前期策劃...........................................312
18.3.1 確定網站主題.............................312
18.3.2 確定目錄結構.............................312
18.3.3 網站藍圖的規劃..........................313
18.4 製作網站主頁...........................................314
18.4.1 導入外部CSS..............................314
18.4.2 製作頂部檔案.............................316
18.4.3 製作個人簡介.............................318
18.4.4 製作個人相冊.............................319
18.4.5 製作最新動態.............................321
18.4.6 製作底部檔案.............................323
第19章公司宣傳網站的布局...................325
19.1 企業網站設計概述....................................326
19.2 分析架構..................................................327
19.2.1 設計分析.....................................327
19.2.2 排版構架.....................................327
19.3 各模組設計...............................................328
19.3.1 布局設計.....................................328
19.3.2 頁面的通用規則..........................329
19.3.3 製作#header對象部分................332
19.3.4 製作導航#nav對象部分..............334
19.3.5 製作公司介紹和圖片展示部分....335
19.3.6 製作“我們的服務”部分...........338
19.3.7 製作#aside對象部分...................341
19.3.8 製作底部版權資訊部分...............344
第20章旅遊網站的設計..........................346
20.1 旅遊網站設計概述....................................347
20.1.1 旅遊網站分類.............................347
20.1.2 頁面配色分析.............................348
20.1.3 排版構架.....................................349
20.2 各部分設計...............................................350
20.2.1 頁面的通用規則..........................350
20.2.2 製作網站導航部分......................351
20.2.3 製作header右側部分..................354
20.2.4 製作歡迎部分.............................363
20.2.5 製作景點新聞部分......................368
20.2.6 製作景點介紹部分......................373
20.2.7 製作景點展示部分......................377
20.2.8 製作底部著作權部分......................385
第21章購物網站布局.............................388
21.1 購物網站設計概述....................................389
21.1.1 購物網站概念.............................389
21.1.2 購物網站的功能要點...................390
21.2 購物網站設計分析....................................391
21.2.1 大信息量的頁面..........................391
21.2.2 頁面結構設計合理......................391
21.2.3 完善的分類體系..........................392
21.2.4 商品圖片的使用..........................392
21.3 購物網站配色與架構................................393
21.3.1 購物網站配色.............................393
21.3.2 排版構架.....................................393
21.4 各部分設計...............................................394
21.4.1 定義頁面通用規則......................394
21.4.2 製作網站header部分..................395
21.4.3 製作網站通欄廣告部分...............403
21.4.4 製作網站左側分類部分...............404
21.4.5 製作輪換顯示的橫幅廣告圖片....406
21.4.6 製作最新上架部分......................407
第6篇附錄...................................414
附錄1 CSS屬性一覽表.....................................414
附錄2 HTML常用標籤......................................418
