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

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