別具光芒：CSS網(wǎng)頁(yè)布局案例剖析

第1章　從基礎(chǔ)開(kāi)始　1
1.1　(X)HTML與CSS　2
1.1.1　DOCTYPE(文檔類型)的含義與選擇　2
1.1.2　XHTML與HTML的重要區(qū)別　3
1.1.3　CSS的基本思想　3
1.1.4　CSS的引入　5
1.1.5　瀏覽器與CSS　5
1.2　基本CSS選擇器　6
1.2.1　理解CSS選擇器的思想　6
1.2.2　標(biāo)記選擇器　7
1.2.3　類別選擇器　8
1.2.4　ID選擇器　9
1.3　在HTML中引入CSS的方法　10
1.3.1　行內(nèi)樣式　10
1.3.2　內(nèi)嵌式　11
1.3.3　外部樣式表　11
1.3.4　鏈接式　12
1.3.5　各種方式的優(yōu)先級(jí)問(wèn)題　12
1.4　動(dòng)手體驗(yàn)CSS　14
1.4.1　從零開(kāi)始　15
1.4.2　使用CSS設(shè)置標(biāo)題　15
1.4.3　控制圖片　16
1.4.4　設(shè)置正文　16
1.4.5　設(shè)置整體頁(yè)面　17
1.4.6　對(duì)段落分別進(jìn)行設(shè)置　17
1.4.7　兼容性檢查　18
1.4.8　CSS的注釋　19
1.5　網(wǎng)頁(yè)使用的編輯軟件　20
1.5.1　可視化網(wǎng)頁(yè)制作軟件的優(yōu)點(diǎn)　20
1.5.2　可視化軟件的局限性　21
1.5.3　善于使用代碼視圖的功能　22
1.6　CSS的復(fù)合選擇器　24
1.6.1　“交集”選擇器　24
1.6.2　“并集”選擇器　25
1.6.3　“后代”選擇器　27
1.7　CSS的繼承特性　29
1.7.1　繼承關(guān)系　29
1.7.2　CSS繼承的運(yùn)用　31
1.8　CSS的層疊特性　33
1.9　本章小結(jié)　35
第2章　攝影師個(gè)人網(wǎng)站布局　36
2.1　案例描述　37
2.2　內(nèi)容分析　38
2.3　HTML結(jié)構(gòu)設(shè)計(jì)　40
2.4　原型設(shè)計(jì)　41
2.5　頁(yè)面方案設(shè)計(jì)　43
2.6　布局設(shè)計(jì)　43
2.7　CSS技術(shù)準(zhǔn)備——盒子模型　44
2.8　設(shè)置頁(yè)面的整體背景　46
2.9　制作照片展示區(qū)域　48
2.10　設(shè)置網(wǎng)頁(yè)標(biāo)題的圖像替換　50
2.11　CSS技術(shù)準(zhǔn)備——定位　52
2.11.1　理解標(biāo)準(zhǔn)文檔流　52
2.11.2　認(rèn)識(shí)定位屬性　53
2.11.3　絕對(duì)定位　54
2.12　設(shè)置網(wǎng)頁(yè)標(biāo)題的位置　55
2.13　設(shè)置網(wǎng)頁(yè)文本內(nèi)容　56
2.14　本章小結(jié)　58
第3章　生物研究中心網(wǎng)站布局　59
3.1　案例描述　60
3.2　內(nèi)容分析　61
3.3　原型設(shè)計(jì)　62
3.4　頁(yè)面方案設(shè)計(jì)　63
3.5　CSS技術(shù)準(zhǔn)備——盒子的浮動(dòng)　63
3.5.1　設(shè)置浮動(dòng)　64
3.5.2　浮動(dòng)的方向　66
3.5.3　使用clear屬性清除浮動(dòng)的影響　67
3.5.4　擴(kuò)展盒子的高度　69
3.6　布局設(shè)計(jì)　70
3.7　CSS技術(shù)準(zhǔn)備——在CSS中設(shè)置邊框　70
3.7.1　對(duì)不同的邊框設(shè)置不同的屬性值　71
3.7.2　在一行中同時(shí)設(shè)置邊框的寬度、顏色和樣式　71
3.7.3　對(duì)一條邊框設(shè)置與其他邊框不同的屬性　72
3.7.4　同時(shí)指定一條邊框的一種屬性　72
3.8　制作頁(yè)頭部分　72
3.9　制作主體部分　75
3.9.1　主體的左側(cè)部分　76
3.9.2　主要內(nèi)容區(qū)　79
3.10　CSS技術(shù)擴(kuò)展——擴(kuò)充布局　82
3.11　本章小結(jié)　85
第4章　教育公司網(wǎng)站布局　 86
4.1　兩列布局　87
4.2　案例描述　89
4.3　內(nèi)容分析　90
4.4　原型設(shè)計(jì)　91
4.5　CSS技術(shù)準(zhǔn)備——在CSS中使用背景圖像　92
4.5.1　設(shè)置平鋪方式　92
4.5.2　設(shè)置背景圖像的位置　94
4.5.3　背景的簡(jiǎn)寫(xiě)　96
4.5.4　圖片的固定設(shè)置　97
4.6　制作標(biāo)題圖像　97
4.7　CS3技術(shù)準(zhǔn)備——實(shí)現(xiàn)圓角設(shè)計(jì)　99
4.8　制作頁(yè)頭部分　100
4.8.1　搭建頁(yè)頭部分的HTML結(jié)構(gòu)　100
4.8.2　頁(yè)面標(biāo)題的圖像替換　102
4.8.3　頂部菜單　102
4.8.4　主菜單　103
4.8.5　搜索框　104
4.8.6　頁(yè)頭部分的圓角框　105
4.9　制作主體部分　107
4.9.1　結(jié)構(gòu)分析　107
4.9.2　“面包屑”導(dǎo)航　109
4.9.3　設(shè)置正文標(biāo)題　109
4.9.4　設(shè)置頁(yè)腳　110
4.9.5　添加頁(yè)面內(nèi)容　110
4.10　本章小結(jié)　112
第5章　網(wǎng)上書(shū)店布局　 113
5.1　案例描述　114
5.2　內(nèi)容分析　116
5.3　HTML結(jié)構(gòu)設(shè)計(jì)　118
5.4　原型設(shè)計(jì)　121
5.5　頁(yè)面方案設(shè)計(jì)　122
5.5.1　配色的技巧　123
5.5.2　切片的技巧　125
5.6　使用滑動(dòng)門技術(shù)制作導(dǎo)航菜單　128
5.7　制作主體部分　131
5.7.1　整體樣式設(shè)計(jì)　131
5.7.2　內(nèi)容部分的結(jié)構(gòu)分析　131
5.7.3　設(shè)置右側(cè)的主要內(nèi)容列　133
5.7.4　制作左邊欄　136
5.8　總結(jié)CSS布局的優(yōu)點(diǎn)　139
5.9　制作可以適應(yīng)變化寬度的圓角框　140
5.10　CSS技術(shù)擴(kuò)展——從“網(wǎng)頁(yè)”到“網(wǎng)站”　143
5.10.1　歷史回顧　143
5.10.2　不完善的辦法　144
5.10.3　服務(wù)器出場(chǎng)　144
5.10.4　CMS出現(xiàn)　144
5.10.5　具體操作　144
5.10.6　CMS的弊端　145
5.11　本章小結(jié)　145
第6章　汽車服務(wù)公司網(wǎng)站布局　146
6.1　案例描述　147
6.2　內(nèi)容分析　148
6.3　HTML結(jié)構(gòu)設(shè)計(jì)　151
6.4　原型設(shè)計(jì)　153
6.5　頁(yè)面方案設(shè)計(jì)與切圖　154
6.6　頁(yè)面布局　155
6.6.1　切片　156
6.6.2　CSS技術(shù)準(zhǔn)備——行內(nèi)元素與塊級(jí)元素　157
6.6.3　布局　160
6.6.4　制作頂部菜單　160
6.6.5　制作標(biāo)題圖像　162
6.6.6　制作主體部分　162
6.7　實(shí)現(xiàn)超鏈接特效　164
6.7.1　技術(shù)準(zhǔn)備——設(shè)置超鏈接的CSS樣式　165
6.7.2　超鏈接效果　168
6.8　兼容性檢查　169
6.9　本章小結(jié)　170
第7章　橘汁仙劍游戲網(wǎng)站(靜態(tài))布局　 171
7.1　構(gòu)思設(shè)計(jì)　172
7.1.1　站點(diǎn)分析定位　172
7.1.2　學(xué)習(xí)考察同類站點(diǎn)　173
7.1.3　構(gòu)思規(guī)劃站點(diǎn)　176
7.2　切片制作和生成　178
7.2.1　切片的制作　178
7.2.2　切片的生成　180
7.3　頁(yè)面制作　180
7.3.1　整體框架的構(gòu)建　181
7.3.2　頭部的制作　182
7.3.3　首頁(yè)左側(cè)信息欄的制作　185
7.3.4　首頁(yè)中部?jī)?nèi)容欄的制作　187
7.3.5　在頁(yè)面右側(cè)添加百度搜索　188
7.3.6　在頁(yè)面右側(cè)添加廣告位　192
7.3.7　分類目錄中導(dǎo)航的制作　192
7.3.8　文章瀏覽區(qū)域的制作　194
7.3.9　頁(yè)腳的制作　197
7.3.10　用戶面板的制作　199
7.4　本章小結(jié)　202
第8章　橘汁仙劍游戲網(wǎng)站(動(dòng)態(tài))布局　 203
8.1　SupeSite和Discuz!系統(tǒng)簡(jiǎn)介　204
8.2　系統(tǒng)安裝　205
8.3　使用SupeSite系統(tǒng)　206
8.3.1　登錄SupeSite后臺(tái)設(shè)置　206
8.3.2　基本設(shè)置　208
8.3.3　資訊的發(fā)布和管理　210
8.3.4　資訊等級(jí)審核　212
8.3.5　資訊自定義字段　213
8.3.6　其他設(shè)置　215
8.4　制作SupeSite模板　215
8.4.1　SupeSite模板系統(tǒng)　215
8.4.2　選擇需要制作的模板　216
8.4.3　制作前的準(zhǔn)備　218
8.4.4　首頁(yè)頭部信息的制作　220
8.4.5　首頁(yè)頭部導(dǎo)航的制作　221
8.4.6　體驗(yàn)SupeSite模塊設(shè)置　223
8.4.7　在頭部導(dǎo)航中加入資訊分類　226
8.4.8　首頁(yè)主體內(nèi)容的制作　228
8.4.9　深入探究SupeSite模塊系統(tǒng)　230
8.4.10　首頁(yè)頁(yè)腳的制作　232
8.4.11　站點(diǎn)頭部及頁(yè)腳文件的制作　234
8.4.12　分類目錄頁(yè)的制作　236
8.4.13　文章瀏覽頁(yè)面的制作　237
8.4.14　用戶面板的制作　239
8.4.15　SupeSite模板制作小結(jié)　241
8.5　模塊系統(tǒng)的高級(jí)應(yīng)用　242
8.5.1　SupeSite模塊系統(tǒng)的語(yǔ)法格式　242
8.5.2　條件判斷語(yǔ)句　244
8.5.3　自定義廣告顯示函數(shù)　246
8.6　完成測(cè)試　247
8.7　Discuz!模板系統(tǒng)簡(jiǎn)介　247
8.8　本章小結(jié)　250