Div+CSS 3+jQuery網頁設計深度剖析

第1章 網頁和網站的制作流程1
1.1 認識網頁2
1.1.1 網頁和網站的關系2
1.1.2 網頁的基本構成元素3
1.2 什麼是網頁設計4
1.2.1 網頁設計概述4
1.2.2 網頁設計與網頁制作5
1.2.3 網頁設計的特點6
1.2.4 網頁設計相關術語8
1.3 網頁設計所涵蓋的內容10
1.3.1 網頁中的視聽元素11
1.3.2 網頁版式設計11
1.4 如何設計網頁12
1.4.1 網頁設計的基本原則12
1.4.2 網站設計成功的要素13
1.4.3 網頁的設計風格及色彩搭配14
1.5 網頁設計的原則15
1.6 網頁設計師應具備的素質18
1.7 網站的制作流程20
1.7.1 前期策划20
1.7.2 頁面細化及實施21
1.7.3 后期維護22
1.8 網頁設計的實現22
第2章 CSS樣式入門25
2.1 CSS的基本概念26
2.1.1 CSS的特點26
2.1.2 CSS的類型27
2.1.3 CSS的基本語法28
2.1.4 CSS的沖突29
2.2 網頁設計中的CSS30
2.2.1 如何使用CSS31
2.2.2 CSS能做什麼33
2.2.3 CSS的局限性33
2.3 CSS樣式的基本用法34
2.4 應用CSS到網頁中35
2.5 單位和值37
2.6 CSS樣式具有的特性43
2.7 CSS3中的新增選擇符44
2.7.1 屬性選擇符44
課堂練習 屬性選擇符的運用45
2.7.2 結構偽類選擇符47
2.7.3 UI元素狀態偽類選擇符57
2.8 應用實例——為頁面添加CSS樣式63
2.9 舉一反三——產品介紹網站72
第3章 使用Div+CSS布局頁面75
3.1 定義Div76
3.2 CSS布局定位79
3.3 可視化盒模型87
3.3.1 盒子模型87
3.3.2 margin屬性89
3.3.3 border屬性89
3.3.4 padding屬性90
3.3.5 content屬性90
3.3.6 視覺可視化模型91
3.4 常用的布局方式91
3.4.1 居中布局設計91
3.4.2 浮動布局設計92
3.4.3 高度自適應97
3.5 流體網格布局98
課堂練習 制作適合手機瀏覽的網頁98
3.6 CSS3中有關基礎盒模型103
3.6.1 overflow103
3.6.2 overflow—x105
3.6.3 overflow—y106
3.7 CSS3中新增的彈性盒模型106
3.7.1 box—orient屬性控制盒子取向107
3.7.2 box—direction屬性控制盒子順序108
3.7.3 box—ordinal—group屬性控制盒子位置110
3.7.4 box—flex屬性控制盒子彈性空間112
3.7.5 盒子空間管理——box—pack和box—align屬性113
3.7.6 盒子空間溢出管理——box—lines屬性115
3.8 應用實例——使用Div+CSS布局頁面115
3.9 舉一反三——制作健康網站123
第4章 使用CSS控制網頁中的背景125
4.1 背景顏色126
4.1.1 設置頁面背景顏色126
課堂練習 設置背景顏色126
4.1.2 設置塊背景顏色127
課堂練習 設置塊背景顏色128
4.2 背景圖像129
4.2.1 為頁面設置背景圖像129
課堂練習 設置背景圖片130
4.2.2 背景圖像的重復131
4.2.3 設置背景圖像的位置132
課堂練習 背景圖像定位133
4.2.4 設置背景滾動134
4.2.5 背景樣式縮寫的方式136
4.3 CSS3中有關背景的新增屬性136
4.3.1 background—origin136
4.3.2 background—clip138
4.3.3 background—size139
4.4 應用實例——制作金融類網站頁面140
4.5 舉一反三——學習用品網站149
第5章 使用CSS控制頁面文字樣式151
5.1 控制文字樣式152
5.1.1 字體和大小152
課堂練習 不同字體的設置153
5.1.2 文字顏色和粗細157
5.1.3 斜體159
5.1.4 下畫線、頂畫線和刪除線160
5.1.5 英文字母大小寫160
5.2 控制段落樣式161
5.2.1 段落水平對齊161
5.2.2 段落垂直對齊163
5.2.3 行間距和字間距164
5.2.4 首字下沉165
5.2.5 首行縮進166
5.3 使用CSS對Flash中的文字進行控制167
5.4 CSS類選區169
課堂練習 利用CSS類選區制作個人網站首頁169
5.5 制作文字的滾動效果171
課堂練習 實現文字的滾動效果171
5.6 CSS3中有關文字的新增屬性174
5.6.1 text—shadow174
5.6.2 text—overflow175
5.6.3 word—wrap177
5.7 文字樣式設置實例——設計類網站178
5.8 舉一反三——制作社區類網站頁面186
第6章 使用CSS控制圖像樣式189
6.1 圖像樣式190
6.1.1 圖像邊框設置190
6.1.2 圖像縮放設置193
6.2 圖像對齊195
6.2.1 水平對齊設置195
6.2.2 垂直對齊設置196
6.3 圖文混排198
6.3.1 文字環繞198
課堂練習 文字環繞效果的制作198
6.3.2 設置混排間距199
6.4 網頁中特殊的圖像效果199
6.4.1 全屏大圖切換199
6.4.2 鼠標經過圖像的動態效果202
6.5 CSS3中有關邊框的新增屬性207
6.5.1 border—image207
6.5.2 border—radius209
6.5.3 box—shadow210
6.5.4 border—color211
6.6 應用實例——制作婚慶網站頁面212
6.7 舉一反三——產品介紹網站219
第7章 利用CSS控制列表樣式221
7.1 列表控制概述222
7.1.1 列表控制原則222
7.1.2 列表的類型及使用222
7.1.3 改變項目樣式225
7.1.4 圖像符號227
7.2 使用列表制作實用菜單227
7.2.1 無須表格的菜單228
7.2.2 菜單的橫豎轉換230
7.3 CSS3中有關顏色的新增屬性232
7.3.1 HSLcolors232
7.3.2 HSLAcolors233
7.3.3 opacity234
7.3.4 RGBAcolors235
7.4 列表在網頁中的特殊應用237
7.4.1 滾動圖像237
課堂練習 在網頁中實現圖像橫向滾動效果237
7.4.2 動態堆疊卡243
課堂練習 在網頁中實現動態堆疊卡效果243
7.5 應用實例——制作音樂網站246
7.6 舉一反三——制作設計工作室網站253
第8章 使用CSS控制表單樣式255
8.1 表單設計概述256
8.1.1 表單的設計原則256
8.1.2 表單應用分類257
8.2 表單的設計259
課堂練習 制作商城賬號注冊頁面263
8.3 使用CSS樣式控制表單元素269
8.3.1 使用CSS樣式控制表單元素的背景269
8.3.2 使用CSS樣式實現圓角文本域272
8.3.3 使用CSS樣式設置下拉列表274
8.4 表單在網頁中的特殊應用276
8.4.1 聚焦型提示語消失276
8.4.2 輸入型提示語消失280
8.5 CSS3中有關內容的新增屬性282
8.6 應用實例——制作用戶注冊頁面283
8.7 舉一反三——制作用戶登錄頁面291
第9章 使用CSS美化瀏覽器293
9.1 使用CSS控制超鏈接294
9.1.1 認識超鏈接294
9.1.2 關於鏈接路徑295
9.1.3 超鏈接屬性控制298
9.1.4 圖像映射301
課堂練習 實現圖像映射301
9.1.5 鏈接的打開方式303
9.2 超鏈接特效303
9.2.1 按鈕式超鏈接303
9.2.2 浮雕式超鏈接305
9.3 鼠標特效306
9.3.1 通過CSS樣式控制鼠標箭頭306
9.3.2 鼠標變化的超鏈接307
9.4 超鏈接在網頁中的特殊應用308
9.4.1 網頁中的傾斜導航菜單308
課堂練習 制作網站的傾斜導航菜單308
9.4.2 網頁中的動感超鏈接310
課堂練習 制作網站的動感導航菜單310
9.5 CSS3中有關用戶界面的新增屬性314
9.5.1 box—sizing314
9.5.2 resize316
9.5.3 outline317
9.5.4 nav—index318
9.6 應用實例——制作產品宣傳網站頁面320
9.7 舉一反三——制作運輸公司網站頁面329
第10章 應用CSS中的濾鏡331
10.1 了解CSS濾鏡332
10.1.1 Alpha濾鏡332
10.1.2 Blur濾鏡335
10.1.3 MotionBlur濾鏡336
10.1.4 Dropshadow濾鏡338
10.1.5 Shadow濾鏡339
10.1.6 Flip濾鏡339
10.1.7 Glow濾鏡341
10.1.8 Gray濾鏡341
10.1.9 Invert濾鏡342
10.1.10 Xray濾鏡342
10.1.11 Mask濾鏡343
10.1.12 Wave濾鏡344
10.1.13 Chroma濾鏡344
10.1.14 BlendTrans濾鏡345
課堂練習 實現圖像的漸變效果345
10.1.15 Light濾鏡347
10.1.16 RevealTrans濾鏡348
10.2 CSS3中其他模塊的新增屬性350
10.2.1 @media350
10.2.2 columns351
10.2.3 @font—face353
10.2.4 speech354
10.3 應用實例——制作餐飲類網站356
10.4 舉一反三——制作網絡游戲網站頁面366
第11章 CSS與jQurey的綜合應用369
11.1 什麼是JavaScript370
11.1.1 了解JavaScript370
11.1.2 JavaScript的特點372
11.1.3 JavaScript的應用范圍373
11.1.4 CSS樣式與JavaScript375
11.2 JavaScript和JavaScript庫375
11.2.1 關於jQuery375
11.2.2 jQuery文件的下載376
11.2.3 jQuery的優勢376
11.2.4 jQuery代碼的編寫377
11.2.5 jQuery選擇器377
11.2.6 jQuery事件379
11.3 在DreamweaverCC中使用jQuery379
課堂練習 調用外部jQuery文件實現鼠標經過圖像變形特效379
課堂練習 制作一個簡單的檢索頁面381
11.4 使用jQuery控制聲音384
11.5 使用jQuery實現淡入淡出效果384
11.6 使用jQuery制作選項卡389
11.7 應用實例——使用jQuery框架392
11.8 舉一反三——制作網頁高光過渡效果401
第12章 CSS與XML的綜合應用403
12.1 XML基礎404
12.1.1 XML的特點404
12.1.2 XML與HTML405
12.1.3 XML的基本語法407
12.1.4 格式正確的XML文檔410
12.2 XML與CSS的鏈接411
12.2.1 使用xml：stylesheet處理指令411
12.2.2 使用@import指令413
12.3 XML與CSS的應用413
12.3.1 顯示學生信息XML文檔413
12.3.2 利用XML文檔實現隔行變色的表格416
12.4 應用實例——在HTML頁面中調用XML數據421
12.5 舉一反三——制作企業網站428
第13章 CSS與Ajax的綜合應用431
13.1 了解Ajax432
13.1.1 Ajax簡介432
13.1.2 Ajax的關鍵元素433
13.1.3 Ajax的優勢434
13.1.4 實現Ajax的步驟434
13.1.5 使用CSS的必要性435
13.2 Ajax基礎436
13.2.1 創建XMLHttpRequest對象436
13.2.2 發出Ajax請求437
13.2.3 處理服務器響應438
13.2.4 使用CSS樣式438
13.3 HTML5簡介439
13.3.1 HTML5標簽440
13.3.2 HTML5的事件屬性443
13.3.3 HTML5的標准屬性444
13.4 應用實例——使用Ajax實現頁面特效444
13.5 舉一反三——通過Ajax實現可拖動的Div塊455
第14章 Div+CSS布局綜合案例457
綜合實例——制作醫療保健類網站458