第1篇　HTML篇

第1章　HTML與CSS網頁設計概述　2
1.1　HTML的基本概念　3
1.1.1　什么是HTML　3
1.1.2　HTML的發展　5
1.1.3　HTML與XHTML　5
1.2　CSS的基本概念　6
1.2.1　什么是CSS　6
1.2.2　CSS在網頁設計中的作用　7
1.3　網頁與網站　8
1.3.1　網頁與網站的關系　8
1.3.2　建立網站的一般流程　10
1.3.3　URL簡介　10
1.3.4　常用的網頁編輯工具　11
高手私房菜
技巧：如何查看網頁的HTML代碼　12

第2章　HTML文檔的基本結構　13
2.1　基本的HTML文檔結構示例　14
2.2　HTML文檔的基本結構　14
2.2.1　文檔類型的聲明　14
2.2.2　html標簽對和屬性　16
2.2.3　head標簽對和屬性　17
2.2.4　body標簽對和屬性　17
2.3　HTML標簽、元素及屬性　18
2.3.1　什么是標簽　18
2.3.2　元素　19
2.3.3　屬性的定義　20
2.3.4　屬性值的定義　20
2.3.5　元素和屬性的大小寫規范　21
2.4　標準屬性　21
高手私房菜
技巧1：屬性值與引號的正確使用　22
技巧2：HTML的字符實體在不同瀏覽器中的正確解析　22

第3章　HTML網頁文字設計　23
3.1　文本的排版　24
3.1.1　標題h1、h2、h3、h4、h5和h6　25
3.1.2　字體標記　27
3.1.3　基本文字格式　29
3.1.4　特殊符號　30
3.2　段落的排版　30
3.2.1　段落標記及其對齊方式　30
3.2.2　換行br標記　32
3.2.3　居中標記　32
3.2.4　加入水平分隔線　32
3.2.5　預編排標記　34
3.3　建立無序的列表　35
3.4　建立有序的列表　38
3.4.1　使用type屬性定制有序列表項目符號　39
3.4.2　使用start屬性定制有序列表中的列表項的起始數　40
3.4.3　使用value屬性定制有序列表中的列表項序號的數值　41
3.5　網頁超鏈接　42
3.5.1　超鏈接的概念　42
3.5.2　設置鏈接的目標地址　43
3.5.3　設置鏈接的目標窗口　44
3.5.4　設置鏈接的提示信息　44
3.5.5　使用錨鏈接到同一個網頁的不同部分　45
3.5.6　使用錨鏈接到另一個網頁的特定部分　47
高手私房菜
技巧1：一級標題h1的使用　48
技巧2：元素屬性的默認值　48

第4章　網頁色彩和圖片設計　49
4.1　圖像基礎知識　50
4.1.1　圖像的分辨率　50
4.1.2　網頁中的圖片格式　50
4.1.3　怎樣創建圖片　51
4.2　在網頁中使用圖像　52
4.2.1　在網頁中插入圖像標記　52
4.2.2　設置圖像源文件　53
4.2.3　設置圖像在網頁中顯示的寬度和高度　53
4.2.4　設置圖像的替換文字　54
4.2.5　設置圖像的提示文字　55
4.2.6　設置圖像的邊框　56
4.3　用圖像代替文本作為超鏈接　56
4.4　使用圖像映射　57
4.4.1　選定文本　57
4.4.2　使用Dreamweaver創建圖像映射　58
高手私房菜
技巧1：關于瀏覽器安全色的問題　60
技巧2：關于圖像映射　60

第5章　網頁表格設計　61
5.1　表格的基本結構　62
5.2　控制表格的大小和邊框的寬度　63
5.2.1　設置表格的寬度和高度　63
5.2.2　設置表格邊框的寬度　64
5.3　設置表格及表格單元格的對齊方式　65
5.3.1　控制表格在網頁中的對齊方式　66
5.3.2　控制表格單元格的水平對齊　67
5.3.3　控制表格單元格的上下對齊　68
5.4　合并單元格　69
5.4.1　用colspan屬性左右合并單元格　69
5.4.2　用rowspan屬性上下合并單元格　70
5.5　用cellpadding屬性和cellspacing屬性設定距離　71
5.6　為表格添加視覺效果　73
5.6.1　設置表格和單元格的背景顏色　74
5.6.2　設置表格和單元格的背景圖像　75
5.7　表格的按行分組顯示　76
高手私房菜
技巧1：禁止單元格內的文本自動換行　79
技巧2：用colspan和rowspan屬性上下、左右合并單元格　80

第6章　網頁表單設計　81
6.1　了解和創建網頁表單　82
6.1.1　網頁表單的工作原理　82
6.1.2　創建表單　82
6.1.3　了解控件的概念　84
6.2　使用input標簽創建表單控件　84
6.2.1　創建普通文本框和密碼文本框　85
6.2.2　創建單選按鈕　87
6.2.3　創建復選框　88
6.2.4　創建隱藏控件　89
6.2.5　創建文件選擇框　89
6.2.6　創建重置按鈕　90
6.2.7　創建提交按鈕　91
6.2.8　創建圖形提交按鈕　92
6.3　使用textarea標簽創建多行文本框　92
6.4　使用select和option標簽創建選擇列表　94
6.5　表單的提交方法　95
高手私房菜
技巧：禁用表單控件　96

第7章　網頁框架設計　97
7.1　什么是框架　98
7.2　使用frameset和frame標簽創建框架　98
7.2.1　框架的文檔聲明　100
7.2.2　用cols屬性將窗口分為左右兩部分　100
7.2.3　用rows屬性將窗口分為上、中、下3部分　101
7.2.4　框架的嵌套　102
7.2.5　不顯示框架　103
7.3　設置窗口框架的內容和外觀　104
7.3.1　用src屬性設置框架的初始內容　104
7.3.2　設置框架的邊框　105
7.3.3　控制框架的邊距　106
7.3.4　設置框架的滾動條　107
7.3.5　改變框架窗口大小　108
7.4　設置框架之間的鏈接　108
7.4.1　用base標簽設置鏈接默認目標　109
7.4.2　名稱和框架標識　110
7.5　使用iframe/iframe標簽對創建嵌入式框架　111
高手私房菜
技巧1：設置框架的長度或者寬度　112
技巧2：設置框架邊框的注意事項　112

第8章　網頁多媒體設計　113
8.1　在網頁中加入視頻　114
8.1.1　添加鏈接視頻　114
8.1.2　使用Windows Media Player嵌入視頻　115
8.2　在網頁中加入聲音　116
8.2.1　添加背景聲音　116
8.2.2　添加鏈接聲音　117
8.2.3　使用RealPlayer嵌入聲音　118
8.3　在網頁中添加Flash動畫　119
8.4　在網頁中添加滾動文字　121
高手私房菜
技巧1：流式視頻與音頻　122
技巧2：選擇合適的音頻或者視頻格式　122

第2篇　CSS篇

第9章　CSS樣式基礎　124
9.1　一個簡單的CSS示例　125
9.2　CSS樣式表的規則　126
9.3　使用CSS選擇器　127
9.3.1　標簽選擇器　127
9.3.2　類選擇器　128
9.3.3　ID選擇器　129
高手私房菜
技巧：使用全局選擇器　130

第10章　網頁樣式代碼的生成方法　131
10.1　從零開始手工編寫　132
10.1.1　編寫標題樣式代碼　133
10.1.2　編寫圖片控制代碼　134
10.1.3　設置網頁正文　134
10.1.4　設置整體頁面樣式　135
10.1.5　定義段落樣式　136
10.1.6　完整的代碼　138
10.2　使用Dreamweaver輔助工具創建頁面　138
10.3　在Dreamweaver中新建CSS樣式　139
10.4　在Dreamweaver中編輯CSS樣式　141
高手私房菜
技巧：使用Dreamweaver生成CSS樣式表并鏈接到當前文檔　141

第11章　用CSS設置網頁元素　143
11.1　設置網頁文本的基本樣式　144
11.1.1　定義網頁文本顏色　144
11.1.2　設置具體文字的字體　145
11.1.3　設置文字的傾斜效果　146
11.2　設置文本的行高和間距　147
11.2.1　設置網頁文字間距　147
11.2.2　設置網頁文字行間距　148
11.2.3　設置網頁文字段落間距　149
11.3　設置網頁文本的對齊方式　150
11.3.1　控制文本的水平對齊方式　150
11.3.2　控制文本的垂直對齊方式　152
11.4　設置文字與背景的顏色　154
11.5　設置網頁圖像特效　155
11.5.1　設置圖像邊框　155
11.5.2　圖像縮放功能的實現　159
11.5.3　設置圖像與文字的對齊方式　161
11.5.4　圖文混排　163
11.6　設置網頁背景顏色和背景圖像　165
11.6.1　設置背景顏色　165
11.6.2　設置背景圖像　166
11.6.3　設置背景圖像平鋪　167
11.6.4　設置背景圖像位置　169
11.6.5　設置背景圖像位置固定　170
高手私房菜
技巧1：通過濾鏡屬性設置文字效果　172
技巧2：解決圖片撐破DIV問題　172

第12章　DIV+CSS網頁標準化布局　173
12.1　定義DIV　174
12.1.1　什么是DIV　174
12.1.2　在HTML文檔中應用DIV　174
12.1.3　DIV的嵌套和固定格式　176
12.2　CSS布局定位　177
12.2.1　浮動定位　177
12.2.2　position定位　183
12.3　可視化模型　185
12.3.1　盒模型　185
12.3.2　視覺可視化模型　186
12.3.3　空白邊疊加　187
12.4　CSS布局方式　187
12.4.1　居中的布局設計　188
12.4.2　浮動的布局設計　191
12.4.3　高度自適應設計　196
12.5　CSS 3.0中盒模型的新增屬性　197
12.5.1　overflow　197
12.5.2　overflow-x　198
12.5.3　overflow-y　199
高手私房菜
技巧：將多個DIV緊靠頁面的左側或者右側　200

第3篇　JavaScript篇

第13章　JavaScript程序基礎　202
13.1　JavaScript簡介　203
13.1.1　JavaScript概述　203
13.1.2　JavaScript的實現　203
13.2　制作一個簡單的JavaScript程序　204
13.3　JavaScript的語法　206
13.4　關鍵字和保留字　206
13.5　變量　207
13.6　數據類型　208
13.6.1　字符串　208
13.6.2　數值　211
13.6.3　布爾型　211
13.6.4　類型轉換　211
13.6.5　數組　212
13.7　基本語句　215
13.7.1　條件語句　215
13.7.2　循環語句　216
13.8　函數　218
13.8.1　定義和調用函數　219
13.8.2　用arguments對象訪問函數的參數　220
13.9　對象　221
13.9.1　對象簡介　221
13.9.2　時間日期：Date對象　222
13.9.3　數學計算：Math對象　223
13.10　BOM基礎　225
13.10.1　window對象　226
13.10.2　document對象　227
13.10.3　location對象　228
13.10.4　navigator對象　229
13.10.5　screen對象　229
高手私房菜
技巧1：如何快速檢查語法　230
技巧2：簡略語句　230

第14章　JavaScript開發基礎　231
14.1　JavaScript的應用環境　232
14.1.1　客戶端JavaScript　232
14.1.2　其他環境中的JavaScript　233
14.1.3　客戶端的JavaScript：網頁中的可執行內容　233
14.1.4　客戶端JavaScript的特性　235
14.2　常用的開發工具　235
14.2.1　附帶測試的開發工具——TestSwarm　236
14.2.2　半自動化開發工具——Minimee　236
14.2.3　輕松建立JS庫的開發工具——JavaScript Boilerplate　236
14.3　5個常用的JavaScript調試工具　237
14.3.1　萬能調試工具——Drosera　237
14.3.2　最規則的調試工具——Dragonfly　238
14.3.3　Firefox的集成工具——Firebug　238
14.3.4　前端調試利器——Debugbar　238
14.3.5　支持瀏覽器最多的工具——Venkman　239
14.4　綜合實戰1——用JavaScript計算借貸支出　240
14.5　綜合實戰2——九九乘法表　242
高手私房菜
技巧1：更多的Venkman調試方法　243
技巧2：開發中常用到的快速數組創建方法　244

第15章　事件機制　245
15.1　事件機制簡介　246
15.1.1　事件處理機制的類別　246
15.1.2　JavaScript中的切換事件　246
15.1.3　事件冒泡　248
15.2　常用的事件函數　249
15.2.1　鼠標操作事件　249
15.2.2　鍵盤操作事件　252
15.2.3　其他事件　253
15.3　事件模式的使用　255
15.3.1　綁定事件　255
15.3.2　觸發事件和移除事件　257
高手私房菜
技巧1：事件處理技巧　259
技巧2：jQuery中mouseover和mouseenter的區別　260

第16章　JavaScript的調試與優化　261
16.1　常見的錯誤和異常　262
16.1.1　拼寫錯誤　262
16.1.2　訪問不存在的變量　262
16.1.3　括號不匹配　263
16.1.4　字符串和變量連接錯誤　263
16.1.5　符號與賦值混淆　264
16.2　錯誤處理　264
16.2.1　用alert()和document.write()方法監視變量值　264
16.2.2　用onerror事件找到錯誤　265
16.2.3　用try...catch語句找到錯誤　266
16.3　使用調試器　267
16.3.1　用Firefox錯誤控制臺調試　268
16.3.2　用Microsoft Script Debugger調試　268
16.3.3　用Venkman調試　269
16.4　JavaScript優化　269
16.4.1　縮短代碼下載時間　270
16.4.2　合理聲明變量　270
16.4.3　使用內置函數縮短編譯時間　271
16.4.4　合理書寫if語句　271
16.4.5　最小化語句數量　271
16.4.6　節約使用DOM　272
高手私房菜
技巧：調試常見注意事項　272

第4篇　綜合應用篇

第17章　CSS與HTML的綜合應用　274
17.1　CSS與HTML的結合　275
17.2　綜合實戰1——漸變式數據表　276
17.3　綜合實戰2——網頁文字陰影特效　277
高手私房菜
技巧1：圖片的標題　279
技巧2：去掉了CSS標簽的type屬性　280

第18章　CSS與JavaScript的綜合應用　281
18.1　應用Spry構件　282
18.1.1　Spry構件的基本結構　282
18.1.2　插入Spry菜單　282
18.1.3　插入Spry選項卡式面板　283
18.1.4　插入Spry折疊式構件　284
18.1.5　插入Spry可折疊面板　284
18.2　綜合實戰——在網頁中應用Spry構件　285
18.2.1　設計分析　285
18.2.2　制作步驟　285
高手私房菜
技巧1：制作彈出信息窗口　287
技巧2：打開瀏覽器窗口　287

第19章　CSS與jQuery的綜合應用　289
19.1　jQuery基礎　290
19.1.1　認識jQuery　290
19.1.2　jQuery的優勢　290
19.2　jQuery代碼的編寫　291
19.2.1　搭建jQuery環境　292
19.2.2　編寫簡單的jQuery功能代碼　292
19.2.3　jQuery代碼規范　294
19.3　jQuery對象　294
19.3.1　jQuery對象簡介　295
19.3.2　jQuery對象的應用　295
19.4　綜合實戰——制作幻燈片　296
19.4.1　設計分析　296
19.4.2　制作步驟　297
高手私房菜
技巧：直接使用Google和Microsoft服務器上的jQuery　298

第20章　制作龍馬商務網　299
20.1　網站分析　300
20.2　網站設計　300
20.3　網站制作　303
高手私房菜
技巧：圖片驗證碼　325

第5篇　高手秘籍篇

第21章　構建HTML 5的離線Web應用——緩存技術　328
21.1　HTML 5離線Web應用概述　329
21.2　使用HTML 5離線Web應用API　329
21.2.1　檢查瀏覽器的支持情況　329
21.2.2　搭建簡單的離線應用程序　329
21.2.3　支持離線行為　330
21.2.4　Manifest文件　330
21.2.5　ApplicationCache API　332
21.3　使用HTML 5離線Web應用構建應用　333
21.3.1　創建記錄資源的Manifest文件　333
21.3.2　創建構成界面的HTML和CSS　333
21.3.3　創建離線的JavaScript　334
21.3.4　檢查applicationCache的支持情況　336
21.3.5　為Update按鈕添加處理函數　336
21.3.6　添加Geolocation的支持情況　337
21.3.7　添加Storage功能代碼　337
21.3.8　添加離線事件處理程序　338
高手私房菜
技巧：不同的瀏覽器可以讀取同一個Web中存儲的數據嗎　338

第22章　CSS的高級特性　339
22.1　復合選擇器　340
22.1.1　交集選擇器　340
22.1.2　并集選擇器　341
22.1.3　后代選擇器　342
22.2　CSS的繼承特性　343
22.2.1　繼承關系　344
22.2.2　CSS繼承的運用　344
22.3　CSS的層疊特性　345
高手私房菜
技巧：CSS選擇器的特殊性　346

第23章　Ajax的應用　347
23.1　Ajax的異步交互機制　348
23.1.1　異步對象連接服務器　348
23.1.2　GET和POST模式　350
23.1.3　處理多個異步請求　352
23.2　Ajax框架　353
23.2.1　使用AjaxLib　353
23.2.2　使用AjaxGold　355
高手私房菜
技巧：使用Ajax時IE緩存問題的解決方法　356

第24章　制作手機網站　357
24.1　整體布局　358
24.1.1　設計分析　358
24.1.2　排版架構　358
24.2　設計導航菜單　359
24.3　設置模塊內容　359
高手私房菜
技巧：常見屬性存在的問題　360