Div+CSS 3+jQuery網頁設計深度剖析（含DVD光碟1張）

《Div+CSS 3+jQuery網頁設計深度剖析（含DVD光碟1張）》是2016年電子工業出版社出版的圖書，作者是張曉景。

基本介紹

• 中文名：Div+CSS 3+jQuery網頁設計深度剖析（含DVD光碟1張）
• 作者：張曉景
• 出版社：電子工業出版社
• 出版時間：2016年3月1日
• 頁數：480 頁
• 定價：79.8 元 
• 開本：16 開
• 裝幀：平裝
• ISBN：9787121277368

內容簡介

《Div+CSS 3+jQuery網頁設計深度剖析》系統地介紹了CSS樣式的基礎理論和實際套用技術，並結合實例講解了利用Div+CSS布局製作網頁的方法和技巧。在實例的製作過程中，除了介紹利用CSS樣式進行設計的各方面知識的同時，還結合實際網頁製作中可能遇到的問題提供解決思路、方法和技巧，使初學者也可以輕鬆地掌握Div+CSS布局的方式，製作出精美的網頁。 本書全面展現了運用Div+CSS進行網頁設計布局的方法，詳細的講解步驟配合圖示，使得每個步驟清晰易懂、一目了然。書中不但套用了大量實例對重點、難點進行深入剖析，而且還結合作者多年的網頁設計與教學經驗進行點撥，使讀者學以致用。在書中還穿插介紹了有關CSS 3和HTML 5的相關知識，力求使讀者了解到全面詳細的網頁設計製作技術。 本書內容豐富、結構清晰，注重思維鍛鍊與實踐套用，適合初、中級網頁設計愛好者，以及希望學習Web標準對原有網站進行重構的網頁設計者。本書配套光碟中還提供了書中所有實例源檔案和相關視頻教程，供讀者學習和參考。

圖書目錄

第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　網頁設計中的CSS 30

2．2．1　如何使用CSS 31

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　CSS 3中的新增選擇符 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　定義Div 76

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　CSS 3中有關基礎盒模型 103

3．6．1　overflow 103

3．6．2　overflow-x 105

3．6．3　overflow-y 106

3．7　CSS 3中新增的彈性盒模型 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　CSS 3中有關背景的新增屬性 136

4．3．1　background-origin 136

4．3．2　background-clip 138

4．3．3　background-size 139

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　CSS 3中有關文字的新增屬性 174

5．6．1　text-shadow 174

5．6．2　text-overflow 175

5．6．3　word-wrap 177

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　CSS 3中有關框線的新增屬性 207

6．5．1　border-image 207

6．5．2　border-radius 209

6．5．3　box-shadow 210

6．5．4　border-color 211

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　CSS 3中有關顏色的新增屬性 232

7．3．1　HSL colors 232

7．3．2　HSLA colors 233

7．3．3　opacity 234

7．3．4　RGBA colors 235

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　CSS 3中有關內容的新增屬性 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　CSS 3中有關用戶界面的

新增屬性 314

9．5．1　box-sizing 314

9．5．2　resize 316

9．5．3　outline 317

9．5．4　nav-index 318

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　CSS 3中其他模組的新增屬性 350

10．2．1　@media 350

10．2．2　columns 351

10．2．3　@font-face 353

10．2．4　speech 354

10．3　套用實例――製作餐飲類網站 356

10．4　舉一反三――製作網路遊戲

網站頁面 366

第11章　CSS與jQurey的綜合套用 369

11．1　什麼是JavaScript 370

11．1．1　了解JavaScript 370

11．1．2　JavaScript的特點 372

11．1．3　JavaScript的套用範圍 373

11．1．4　CSS樣式與JavaScript 375

11．2　JavaScript和JavaScript庫 375

11．2．1　關於jQuery 375

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　在Dreamweaver CC中

使用jQuery 379

課堂練習　調用外部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與HTML 405

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　了解Ajax 432

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　HTML 5簡介 439

13．3．1　HTML 5標籤 440

13．3．2　HTML 5的事件屬性 443

13．3．3　HTML 5的標準屬性 444

13．4　套用實例――使用Ajax實現

頁面特效 444

13．5　舉一反三――通過Ajax實現可拖動的Div塊 455

第14章　Div+CSS布局綜合案例 457

綜合實例――製作醫療保健類網站 458

作者簡介

　張曉景，資深設計師，Adobe專家組成員，Adobe 網頁設計師認證講師 Adobe UI設計工程師，國家信息產業部653工程講師。參與國家開放大學網頁設計和網頁界面設計課程體系開發。從事平面設計、網站設計和UI設計多年，參與開發過數十個多媒體商業網站。曾參與設計了999集團設計宣傳冊，北京西單金澤大廈設計VI設計，以及國務院國資委電子資料室設計製作網站等眾多設計工作。 有豐富的教學經驗，曾在中國傳媒大學、北京大學、北京師範大學等重點院校以及Adobe創意大學和新東方等培訓機構教授設計課程。對UI設計風格有獨特見解。並過出版網頁設計與設計類書籍數十種，並參與清華大學中職教材的編寫工作。 近期部分項目介紹： 為999集團設計宣傳冊 中國郵電廣告DM設計 為北京西單金澤大廈VIS設計 為國務院國資委電子資料室設計製作網站 為北京美輕鬆科技公司製作Flash推廣動畫 為北京林克曼科技有限公司製作公司網站 授課經驗： Adobe Photoshop CS6內側 Adobe Flash CS6新功能介紹 Adobe 產品推介 參與國家信息產業部653工程課程設定體系。 參與中央電視大學網頁設計專業課程體系設定 北京中國小骨幹老師技能培訓 鐵道部多媒體課件培訓 GOOGLE培訓計畫 中石油信息部門網站藝術布局 中國傳媒大學廣告行銷 撰寫專著: 並分別與中國人民郵電出版社/電子工業出版社/希望出版社/合作著有 《Photoshop智慧型手機APP界面設計全解析》 《iOS智慧型手機APP界面設計實戰教程》 《DIV+CSS網頁布局商業案例精粹》 《Photoshop CS6圖示設計高手之道》 《Android智慧型手機APP界面設計實戰教程》 《中文版Photoshop CS5數碼照片完全自學一本通》 《中文版Flash CS5完全自學一本通》 《中文版Dreamweaver CS5完全自學一本通》。 《網頁設計師就業大揭秘》 《平面設計師就業大揭秘》 《炮炮兵的Flash修煉術》 《Dreamweaver 8精彩網頁設計實例導航》 《xHTML+CSS+Dreamweaver CS3標準網站構建實例詳解?》 《通道與蒙版篇-PhotoshopCS2決定成敗之細節》等圖書。