本書系統(tǒng)地講解了目前流行的Div CSS標準布局的基礎(chǔ)理論和實際應(yīng)用的技法。全書通過108個經(jīng)典實例與知識點相結(jié)合的形式進行講解，從網(wǎng)站的布局風(fēng)格以及實現(xiàn)方法兩個方面剖析了Div CSS網(wǎng)頁布局和制作方法。 本書全面地講解了使用Div CSS進行網(wǎng)頁布局的方法和技巧，并在每個實例的制作步驟中配以圖示，從而更加直觀地輔助讀者學(xué)習(xí)，以達到事半功倍的效果。本書通過大量實例對Div CSS布局進行了深入淺出的分析，并對重點和難點進行了更加深入的解析，使讀者能夠充分掌握Div CSS布局的精髓所在。希望讀者通過對本書的學(xué)習(xí)，能夠以符合標準的設(shè)計思維，采用實戰(zhàn)操作完成網(wǎng)頁設(shè)計，進而融入到Web標準設(shè)計領(lǐng)域。 本書內(nèi)容豐富、結(jié)構(gòu)清晰、圖文并茂，實例的講解到位，操作步驟也簡單易懂。另外，本書在講解知識的基礎(chǔ)上著重培養(yǎng)讀者的設(shè)計思維與實戰(zhàn)能力，比較適合初、中級網(wǎng)頁設(shè)計制作愛好者以及希望學(xué)習(xí)Web標準對原網(wǎng)站進行重構(gòu)的網(wǎng)頁設(shè)計者。本書配套光盤中還提供了書中所有實例的源文件和相關(guān)視頻教程，供讀者學(xué)習(xí)和參考。

·完善的學(xué)習(xí)模式 實例分析 知識點鏈接 制作步驟 Q&A 提示 操作視頻6大環(huán)節(jié)保障了可學(xué)習(xí)性。詳細講解操作步驟，力求讓讀者即學(xué)即會。108個典型實例，清晰表達了源代碼書寫規(guī)則，讓讀者掌握網(wǎng)頁源代碼的書寫方法與技巧，從而為可視化設(shè)計能力的提高奠定了基礎(chǔ)。 ·進階式講解模式 全書共12章，每一章都是一個技術(shù)專題，從基礎(chǔ)入手，逐步進階到靈活應(yīng)用�；�礎(chǔ)講解與操作緊密結(jié)合，方法全面，技巧豐富，不但能學(xué)習(xí)到專業(yè)的制作方法與技巧，還能提高實際應(yīng)用的能力。 ·全程同步教學(xué)視頻 530分鐘全程同步多媒體語音教學(xué)視頻，由一線教師親授，詳細記錄了所有案例的具體操作過程。讀者可以邊學(xué)邊做，同步提升操作技能。 ·提供配套PPT課件與模板素材 隨書附贈配套PPT教學(xué)課件，供老師修改使用。還附贈50個Div CSS模板、800張網(wǎng)頁背景素材、1000張網(wǎng)頁小圖標、20種類型的網(wǎng)頁模板、50個Flash小圖片及1000余張高清圖片素材。全面配合書中所講知識與技能，提高學(xué)習(xí)效率，提升學(xué)習(xí)效果。

第 1 篇 基礎(chǔ)篇

第 01 章 Dreamweaver與CSS基礎(chǔ)

實例001 建站第 一步創(chuàng)建本地靜態(tài)站點9

實例002 設(shè)置遠程服務(wù)器創(chuàng)建企業(yè)網(wǎng)站站點10

實例003 內(nèi)聯(lián)CSS樣式控制文本顯示效果12

實例004 內(nèi)部CSS樣式控制頁面整體效果13

實例005 外部CSS樣式鏈接外部CSS樣式表文件15

實例006 @import方式導(dǎo)入外部CSS樣式18

第 02 章 Div CSS布局基礎(chǔ)

實例007 margin控制網(wǎng)頁元素的位置21

實例008 border為網(wǎng)頁元素添加邊框22

實例009 padding控制Div中內(nèi)容的位置24

實例010 相對定位設(shè)置網(wǎng)頁元素疊加顯示26

實例011 絕對定位設(shè)置網(wǎng)頁元素固定在右側(cè)顯示27

實例012 固定定位固定的網(wǎng)頁導(dǎo)航29

實例013 浮動定位制作作品列表31

實例014 空白邊疊加控制元素的上下邊距35

實例015 流體網(wǎng)格布局制作個人作品展示頁面37

第 03 章 使用CSS控制網(wǎng)頁背景

實例016 定義頁面背景顏色制作個人作品網(wǎng)站頁面44

實例017 定義背景圖像為網(wǎng)頁添加背景圖像45

實例018 背景圖像的位置控制網(wǎng)頁中背景圖像的位置47

實例019 固定背景圖像控制網(wǎng)頁的背景圖像固定不動48

實例020 RGBA與HSLA顏色值（CSS3.0）設(shè)置半透明背景顏色50

實例021 漸變背景顏色（CSS3.0）為網(wǎng)頁設(shè)置漸變背景顏色52

實例022 background-size屬性（CSS3.0）控制背景圖像大小55

實例023 background-origin 屬性（CSS3.0）控制背景圖像顯示區(qū)域57

實例024 background-clip 屬性（CSS3.0）控制背景圖像的裁剪區(qū)域58

第 04 章 使用CSS控制文本

實例025 定義字體制作網(wǎng)站歡迎頁面62

實例026 定義英文字體大小寫制作英文網(wǎng)站頁面64

實例027 定義字體下劃線、頂劃線和刪除線網(wǎng)頁文字修飾66

實例028 定義字間距和行間距制作網(wǎng)站公告69

實例029 定義段落首字下沉制作企業(yè)介紹頁面71

實例030 定義段落首行縮進制作設(shè)計公司網(wǎng)站頁面72

實例031 定義段落水平對齊制作網(wǎng)站彈出頁面74

實例032 定義文本垂直對齊制作產(chǎn)品介紹頁面76

實例033 Web字體在網(wǎng)頁中使用特殊字體78

實例034 CSS類選區(qū)應(yīng)用多個類CSS樣式81

實例035 text-shadow屬性（CSS3.0）為網(wǎng)頁文字添加陰影83

實例036 word-wrap屬性（CSS3.0）控制網(wǎng)頁文本換行84

實例037 text-overflow屬性（CSS3.0） 控制文本溢出86

第 05 章 使用CSS控制圖片效果

實例038 圖片邊框修飾網(wǎng)頁圖像89

實例039 圖片縮放自適應(yīng)窗口大小的圖片91

實例040 圖片的水平對齊制作產(chǎn)品展示頁面94

實例041 圖片的垂直對齊制作飲品展示頁面95

實例042 實現(xiàn)圖文混排效果制作產(chǎn)品介紹頁面97

實例043 border-colors屬性（CSS3.0）為圖像添加多種色彩邊框99

實例044 border-radius屬性（CSS3.0） 實現(xiàn)圓角邊框100

實例045 border-image屬性（CSS3.0）實現(xiàn)圖像邊框102



第 2 篇 進階篇

第 06 章 使用CSS控制列表樣式

實例046 ul無序列表制作新聞欄目106

實例047 ol有序列表制作音樂排行列表108

實例048 更改列表項目樣式制作方塊列表效果110

實例049 使用圖片作為列表樣式制作圖像列表112

實例050 定義列表制作復(fù)雜新聞列表114

實例051 列表的應(yīng)用制作橫向?qū)Ш讲藛?15

實例052 列表的應(yīng)用制作縱向?qū)Ш讲藛?18

實例053 content屬性（CSS3.0）賦予Div內(nèi)容120

實例054 opacity屬性（CSS3.0）實現(xiàn)元素的半透明效果122

第 07 章 使用CSS美化表格和表單元素

實例055 創(chuàng)建數(shù)據(jù)表格制作新聞列表125

實例056 設(shè)置表格邊框和背景制作精美表格128

實例057 為單元行應(yīng)用類CSS樣式實現(xiàn)隔行變色的單元格132

實例058 應(yīng)用CSS樣式的hover偽類實現(xiàn)交互的變色表格134

實例059 設(shè)置表單元素的背景顏色美化文本域135

實例060 設(shè)置表單元素的邊框美化登錄框138

實例061 使用CSS定義圓角文本字段140

實例062 使用CSS定義下拉列表 制作多彩下拉列表141

實例063 column屬性（CSS3.0）實現(xiàn)網(wǎng)頁文本分欄143

實例064 column-width屬性（CSS3.0）設(shè)置分欄寬度144

實例065 column-count屬性（CSS3.0）控制網(wǎng)頁文本分欄數(shù)146

實例066 column-gap屬性（CSS3.0）控制網(wǎng)頁文本分欄間距148

實例067 column-rule屬性（CSS3.0）為分欄添加分欄線150

第 08 章 使用CSS樣式美化超鏈接和鼠標指針

實例068 定義超鏈接樣式制作活動公告153

實例069 超鏈接偽類應(yīng)用制作按鈕式超鏈接156

實例070 超鏈接偽類應(yīng)用制作圖像式超鏈接159

實例071 使用CSS定義鼠標指針樣式改變默認的鼠標指針162

實例072 使用CSS定義鼠標變換效果實現(xiàn)網(wǎng)頁中的鼠標變換效果163

實例073 box-shadow屬性（CSS3.0）為網(wǎng)頁元素添加陰影165

實例074 overflow屬性（CSS3.0）網(wǎng)頁元素內(nèi)容溢出處理166

實例075 resize屬性（CSS3.0）在網(wǎng)頁中實現(xiàn)區(qū)域縮放調(diào)節(jié)168

實例076 outline屬性（CSS3.0）為網(wǎng)頁元素添加輪廓邊框170



第 3 篇 提高篇

第 09 章 使用CSS3.0濾鏡

實例077 grayscale濾鏡將網(wǎng)頁處理為灰度效果173

實例078 sepia濾鏡將網(wǎng)頁中的圖像處理為懷舊效果174

實例079 satruate濾鏡調(diào)整網(wǎng)頁中圖像的色彩飽和度176

實例080 hue-rotate濾鏡調(diào)整網(wǎng)頁中圖像的色調(diào)178

實例081 invert濾鏡將網(wǎng)頁中的圖像處理為底片效果180

實例082 opacity濾鏡設(shè)置網(wǎng)頁元素半透明效果181

實例083 brightness濾鏡調(diào)整網(wǎng)頁中圖像的亮度183

實例084 contrast濾鏡調(diào)整網(wǎng)頁中圖像的對比度184

實例085 blur濾鏡實現(xiàn)網(wǎng)頁元素模糊效果186

實例086 drop-shadow濾鏡為網(wǎng)頁元素添加陰影效果188

第 10 章 使用CSS3.0實現(xiàn)動畫效果

實例087 旋轉(zhuǎn)變形實現(xiàn)網(wǎng)頁元素的旋轉(zhuǎn)191

實例088 縮放和翻轉(zhuǎn)變形實現(xiàn)網(wǎng)頁元素的縮放和翻轉(zhuǎn)193

實例089 移動變形實現(xiàn)網(wǎng)頁元素的移動194

實例090 傾斜變形實現(xiàn)網(wǎng)頁元素的傾斜效果196

實例091 transition-property屬性實現(xiàn)網(wǎng)頁元素變形過渡效果198

實例092 transition屬性制作動態(tài)選項卡200

第 11 章 CSS與其他語言綜合運用

實例093 XML與CSS制作學(xué)生信息管理頁面205

實例094 使用CSS實現(xiàn)XML中特殊效果隔行變色的信息列表208

實例095 在HTML頁面中調(diào)用XML數(shù)據(jù)制作攝影圖片網(wǎng)頁212

實例096 使用JavaScript實現(xiàn)可選擇字體大小制作新聞頁面218

實例097 使用JavaScript實現(xiàn)圖像滑動切換制作圖像頁面221

實例098 使用JavaScript實現(xiàn)特效制作動態(tài)網(wǎng)站相冊225



第 4 篇 商業(yè)案例篇

第 12 章 布局制作商業(yè)網(wǎng)站頁面

實例099 制作寵物貓咪網(wǎng)站頁面233

實例100 制作設(shè)計工作室網(wǎng)站頁面238

實例101 制作醫(yī)療健康類網(wǎng)站頁面245

實例102 制作教育類網(wǎng)站頁面251

實例103 制作企業(yè)類網(wǎng)站頁面257

實例104 制作水上樂園網(wǎng)站頁面265

實例105 制作休閑游戲網(wǎng)站頁面272

實例106 制作野生動物園網(wǎng)站頁面282

實例107 制作餐飲類網(wǎng)站頁面288

實例108 制作游戲類網(wǎng)站頁面296