別具光光芒：DIV+CSS網(wǎng)頁(yè)布局與美化

第1章  網(wǎng)頁(yè)和網(wǎng)站的制作流程　1
1.1  認(rèn)識(shí)網(wǎng)頁(yè)　2
1.1.1  網(wǎng)頁(yè)和網(wǎng)站　2
1.1.2  網(wǎng)頁(yè)的基本構(gòu)成元素　3
1.2  網(wǎng)站整體制作流程　3
1.2.1  前期策劃　3
1.2.2  頁(yè)面細(xì)化及實(shí)施　4
1.2.3  后期維護(hù)　4
1.3  靜態(tài)頁(yè)面制作的流程　5
1.3.1  觀察圖紙　5
1.3.2  拆分圖紙　5
1.3.3  組裝　5
第2章  布局方式大戰(zhàn)——標(biāo)準(zhǔn)與非標(biāo)準(zhǔn)　7
2.1  表格布局　8
2.2  Web標(biāo)準(zhǔn)　8
2.2.1  混亂的邏輯結(jié)構(gòu)和冗余的嵌套表格　8
2.2.2  Web標(biāo)準(zhǔn)概述　9
2.3  理解表現(xiàn)和結(jié)構(gòu)分離　12
2.3.1  什么是內(nèi)容、表現(xiàn)和結(jié)構(gòu)　12
2.3.2  DIV與CSS結(jié)合的優(yōu)勢(shì)　14
2.3.3  怎么改善現(xiàn)有網(wǎng)站　15
2.4  關(guān)于Web標(biāo)準(zhǔn)的誤區(qū)　18
2.4.1  拋棄表格布局的思維方式　18
2.4.2  正確使用XHTML標(biāo)簽　19
2.4.3  善于利用CSS　19
2.4.4  “通過(guò)驗(yàn)證”并不是最終目的　19
第3章  網(wǎng)頁(yè)的基礎(chǔ)——HTML與XHTML　21
3.1  HTML的基本用法　22
3.1.1  HTML文件基本結(jié)構(gòu)　22
3.1.2  常用的HTML標(biāo)簽　24
3.2  升級(jí)到XHTML　31
3.2.1  為什么要升級(jí)　31
3.2.2  XHTML與HTML的比較　32
3.2.3  如何轉(zhuǎn)換現(xiàn)有的結(jié)構(gòu)為XHTML　36
第4章  層疊樣式表CSS　37
4.1  認(rèn)識(shí)CSS　38
4.1.1  CSS的神奇性　38
4.1.2  CSS的必要性　38
4.1.3  CSS與瀏覽器　39
4.2  基本用法　40
4.2.1  如何在HTML內(nèi)插入樣式表　40
4.2.2  規(guī)則　41
4.3  文檔結(jié)構(gòu)　44
4.3.1  結(jié)構(gòu)　44
4.3.2  繼承　45
4.3.3  特殊性　46
4.3.4  層疊　46
4.3.5  重要性　47
4.4  元素分類(lèi)　47
4.4.1  常用分類(lèi)　48
4.4.2  CSS2中的分類(lèi)　48
4.5  單位和值　49
4.5.1  顏色　49
4.5.2  長(zhǎng)度　50
4.5.3  CSS2中的單位　51
4.6  屬性　51
4.6.1  類(lèi)型　52
4.6.2  背景　53
4.6.3  區(qū)塊　54
4.6.4  方框　54
4.6.5  邊框　54
4.6.6  列表　55
4.6.7  定位　55
4.7  盒模型(BOX Model)　56
4.8  常見(jiàn)的瀏覽器兼容問(wèn)題　57
4.9  縮寫(xiě)小技巧　59
第5章  圖片及動(dòng)態(tài)效果　61
5.1  圖片　62
5.1.1  JPEG圖片　62
5.1.2  靜態(tài)GIF圖片　63
5.1.3  GIF動(dòng)畫(huà)　64
5.1.4  PNG圖片　64
5.2  JavaScript腳本　65
5.2.1  認(rèn)識(shí) JavaScript　65
5.2.2  在HTML文檔中插入JavaScript腳本　66
5.2.3  不要濫用腳本　66
5.3  Flash的應(yīng)用　67
5.4  綜合運(yùn)用圖片和動(dòng)態(tài)效果　67
第6章  小型企業(yè)網(wǎng)站　69
6.1  觀察圖紙　70
6.1.1  設(shè)計(jì)分析　70
6.1.2  布局分析　71
6.2  拆分圖紙　75
6.2.1  分離顏色　75
6.2.2  拆分首頁(yè)　77
6.2.3  拆分內(nèi)容頁(yè)　86
6.3  組裝　89
6.3.1  定義站點(diǎn)　89
6.3.2  首頁(yè)　92
6.3.3  內(nèi)容頁(yè)模板　115
6.3.4  制作內(nèi)容頁(yè)　127
6.3.5  英文版的制作　128
6.4  整理CSS　130
6.4.1  首頁(yè)　130
6.4.2  內(nèi)容頁(yè)　135
6.4.3  其他　139
6.5  本章小結(jié)　140
第7章  電子相冊(cè)網(wǎng)站　141
7.1  觀察圖紙　142
7.1.1  設(shè)計(jì)分析　142
7.1.2  布局分析　143
7.2  拆分圖紙　144
7.2.1  分離顏色　144
7.2.2  拆分首頁(yè)　146
7.2.3  拆分目錄頁(yè)　152
7.2.4  拆分展示頁(yè)　161
7.3  組裝　162
7.3.1  定義站點(diǎn)　163
7.3.2  首頁(yè)　163
7.3.3  模板頁(yè)　171
7.3.4  制作展示頁(yè)　177
7.3.5  制作目錄頁(yè)　178
7.4  整理CSS　183
7.5  本章小結(jié)　184
第8章  網(wǎng)絡(luò)電臺(tái)   　185
8.1  觀察圖紙　186
8.1.1  設(shè)計(jì)分析　186
8.1.2  布局分析　186
8.2  拆分圖紙　188
8.2.1  分離顏色　188
8.2.2  分離頁(yè)面(body)背景圖片　188
8.2.3  分離box層、logo層、nav層及footer層　189
8.2.4  分離各分欄模塊層　190
8.2.5  導(dǎo)出切片　197
8.3  組裝　198
8.3.1  定義站點(diǎn)　198
8.3.2  制作HTML頁(yè)面　199
8.3.3  設(shè)置總體CSS　203
8.3.4  細(xì)化mian層　208
8.3.5  細(xì)化links層　211
8.3.6  制作導(dǎo)航欄　218
8.3.7  制作live層多媒體播放器　220
8.3.8  整理CSS　222
8.4  本章小結(jié)　223
第9章  網(wǎng)上商店　225
9.1  觀察圖紙　226
9.1.1  設(shè)計(jì)分析　226
9.1.2  布局分析　226
9.2  定義站點(diǎn)　227
9.3  DIV布局　228
9.4  插入內(nèi)容及設(shè)置CSS　229
9.4.1  基本設(shè)置　229
9.4.2  body　230
9.4.3  box層和logo層　230
9.4.4  導(dǎo)航欄(nav層)　232
9.4.5  link層和login層　237
9.4.6  sort層　242
9.4.7  ad_2層　244
9.4.8  main層和ad_1層　245
9.4.9  recommend層　247
9.4.10  new層　250
9.4.11  rank層　253
9.4.12  info層　254
9.4.13  footer層　256
9.5  整理CSS　258
9.6  本章小結(jié)　259
第10章  旅游網(wǎng)站　261
10.1  觀察圖紙　262
10.1.1  設(shè)計(jì)分析　262
10.1.2  布局分析　262
10.2  定義站點(diǎn)　263
10.3  DIV布局　264
10.4  插入內(nèi)容及設(shè)置CSS　265
10.4.1  基本設(shè)置　265
10.4.2  body　266
10.4.3  定位層　266
10.4.4  導(dǎo)航　270
10.4.5  main層內(nèi)各層制作　277
10.4.6  link1層內(nèi)各層制作　281
10.4.7  link2層各層制作　285
10.5  整理CSS　290
10.6  本章小結(jié)　290