網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）

目 錄
第1章　網(wǎng)站建設(shè)基礎(chǔ)　1
1．1　互聯(lián)網(wǎng)基礎(chǔ)　1
1．1．1　因特網(wǎng)　1
1．1．2　萬(wàn)維網(wǎng)　1
1．1．3　HTTP　1
1．1．4　IP地址　2
1．1．5　域名　2
1．1．6　URL　2
1．1．7　FTP　2
1．2　網(wǎng)頁(yè)制作技術(shù)　3
1．2．1　HTML　3
1．2．2　CSS　6
1．2．3　ASP　9
1．2．4　VBScript　9
1．2．5　JavaScript　10
1．3　網(wǎng)頁(yè)制作工具　10
1．3．1　Dreamweaver　11
1．3．2　Flash　11
1．3．3　Photoshop　11
1．4　網(wǎng)頁(yè)布局類(lèi)型　11
1．4．1　一字型結(jié)構(gòu)　11
1．4．2　左右型結(jié)構(gòu)　11
1．4．3　川字型結(jié)構(gòu)　12
1．4．4　二字型結(jié)構(gòu)　12
1．4．5　三字型結(jié)構(gòu)　12
1．4．6　廠字型結(jié)構(gòu)　13
1．4．7　匡字型結(jié)構(gòu)　13
1．4．8　同字型結(jié)構(gòu)　13
1．4．9　回字型結(jié)構(gòu)　13
1．5　網(wǎng)站設(shè)計(jì)流程　14
1．5．1　前期策劃　14
1．5．2　網(wǎng)頁(yè)制作　15
1．5．3　網(wǎng)站發(fā)布　15
1．5．4　網(wǎng)站推廣　15
1．5．5　后期維護(hù)　15
1．6　小結(jié)　15
1．7　習(xí)題　16
第2章　Dreamweaver 基礎(chǔ)　17
2．1　認(rèn)識(shí)工作界面　17
2．1．1　歡迎屏幕　17
2．1．2　文檔窗口　18
2．1．3　工作區(qū)布局　19
2．1．4　常用工具欄　20
2．1．5　常用面板　22
2．2　設(shè)置首選參數(shù)　23
2．2．1　【常規(guī)】分類(lèi)　24
2．2．2　【不可見(jiàn)元素】分類(lèi)　24
2．2．3　【復(fù)制/粘貼】分類(lèi)　25
2．2．4　【新建文檔】分類(lèi)　25
2．3　創(chuàng)建站點(diǎn)　26
2．3．1　教學(xué)案例──創(chuàng)建站點(diǎn)“夢(mèng)想”　26
2．3．2　定義Dreamweaver站點(diǎn)　28
2．3．3　創(chuàng)建文件夾和文件　28
2．4　管理站點(diǎn)　29
2．4．1　編輯站點(diǎn)　29
2．4．2　復(fù)制站點(diǎn)　30
2．4．3　刪除站點(diǎn)　30
2．4．4　導(dǎo)出站點(diǎn)　31
2．4．5　導(dǎo)入站點(diǎn)　31
2．4．6　新建站點(diǎn)　32
2．5　插入文件頭標(biāo)簽　32
2．5．1　Meta　32
2．5．2　關(guān)鍵字　34
2．5．3　說(shuō)明　34
2．5．4　刷新　34
2．6　編輯文件頭標(biāo)簽　35
2．6．1　通過(guò)源代碼　35
2．6．2　通過(guò)【屬性】面板　36
2．7　小結(jié)　36
2．8　習(xí)題　36
第3章　設(shè)置頁(yè)面和文本　37
3．1　創(chuàng)建和保存文檔　37
3．1．1　新建文檔　37
3．1．2　保存文檔　37
3．1．3　打開(kāi)文檔　38
3．1．4　關(guān)閉文檔　39
3．1．5　添加內(nèi)容　39
3．2　設(shè)置頁(yè)面屬性　41
3．2．1　教學(xué)案例──北京獲得2022年冬奧會(huì)舉辦權(quán)　41
3．2．2　外觀屬性　43
3．2．3　鏈接屬性　46
3．2．4　標(biāo)題屬性　47
3．2．5　標(biāo)題/編碼屬性　47
3．2．6　跟蹤圖像屬性　47
3．3　設(shè)置字體屬性　48
3．3．1　教學(xué)案例──冬季運(yùn)動(dòng)的益處　48
3．3．2　文檔標(biāo)題　51
3．3．3　字體類(lèi)型　51
3．3．4　字體顏色　51
3．3．5　文本大小　52
3．3．6　粗體和斜體　52
3．3．7　CSS規(guī)則　52
3．4　設(shè)置段落屬性　53
3．4．1　教學(xué)案例──冬季運(yùn)動(dòng)項(xiàng)目　53
3．4．2　段落與換行　56
3．4．3　文本對(duì)齊方式　57
3．4．4　文本縮進(jìn)和凸出　57
3．4．5　設(shè)置列表　58
3．4．6　插入水平線　59
3．4．7　插入日期　59
3．5　小結(jié)　59
3．6　習(xí)題　60
第4章　使用圖像和媒體　61
4．1　圖像格式　61
4．1．1　GIF圖像　61
4．1．2　JPG/JPEG圖像　62
4．1．3　PNG圖像　62
4．2　應(yīng)用圖像　63
4．2．1　教學(xué)案例──五月飛雪　63
4．2．2　設(shè)置背景　68
4．2．3　插入圖像　69
4．2．4　圖像屬性　73
4．2．5　圖像占位符　74
4．3　媒體類(lèi)型　74
4．3．1　SWF　75
4．3．2　FLV　75
4．3．3　WMV　75
4．3．4　WMA　75
4．3．5　MP4　76
4．3．6　RA　76
4．3．7　RM　76
4．3．8　RMVB　76
4．3．9　ASF　77
4．3．10　Shockwave　77
4．4　應(yīng)用媒體　77
4．4．1　教學(xué)案例──海坨戴雪　78
4．4．2　插入SWF動(dòng)畫(huà)　83
4．4．3　插入FLV視頻　84
4．4．4　插入Shockwave影片　86
4．4．5　插入Applet　87
4．4．6　插入ActiveX控件　87
4．4．7　插入插件　91
4．5　小結(jié)　91
4．6　習(xí)題　91
第5章　創(chuàng)建超級(jí)鏈接　93
5．1　認(rèn)識(shí)超級(jí)鏈接　93
5．1．1　超級(jí)鏈接的概念　93
5．1．2　鏈接路徑的類(lèi)型　94
5．1．3　超級(jí)鏈接的分類(lèi)　94
5．2　文本超級(jí)鏈接　95
5．2．1　教學(xué)案例──1932年我國(guó)首次參加奧運(yùn)會(huì)　95
5．2．2　文本超級(jí)鏈接　99
5．2．3　下載超級(jí)鏈接和空鏈接　100
5．2．4　電子郵件超級(jí)鏈接　100
5．2．5　文本超級(jí)鏈接的狀態(tài)　101
5．2．6　設(shè)置默認(rèn)的鏈接相對(duì)路徑　102
5．3　圖像超級(jí)鏈接　103
5．3．1　教學(xué)案例──衰敗的城市　103
5．3．2　圖像超級(jí)鏈接　106
5．3．3　圖像熱點(diǎn)超級(jí)鏈接　107
5．3．4　鼠標(biāo)經(jīng)過(guò)圖像　107
5．4　錨記和腳本超級(jí)鏈接　108
5．4．1　教學(xué)案例──百年前的美麗風(fēng)景　108
5．4．2　創(chuàng)建錨記超級(jí)鏈接　111
5．4．3　設(shè)置腳本超級(jí)鏈接　112
5．5　測(cè)試和更新超級(jí)鏈接　112
5．5．1　測(cè)試超級(jí)鏈接　112
5．5．2　查找問(wèn)題鏈接　113
5．5．3　修復(fù)問(wèn)題鏈接　114
5．5．4　自動(dòng)更新鏈接　114
5．5．5　手工更改鏈接　115
5．6　小結(jié)　116
5．7　習(xí)題　116
第6章　使用表格　118
6．1　認(rèn)識(shí)表格　118
6．1．1　表格的構(gòu)成　118
6．1．2　表格的作用　119
6．2　插入和設(shè)置表格　119
6．2．1　教學(xué)案例──列車(chē)時(shí)刻表　119
6．2．2　插入表格　123
6．2．3　表格屬性　124
6．2．4　行列和單元格屬性　125
6．2．5　添加表格內(nèi)容　127
6．3　編輯表格　127
6．3．1　教學(xué)案例──個(gè)人簡(jiǎn)歷　127
6．3．2　拷貝、剪切和粘貼表格　132
6．3．3　插入、刪除行和列　133
6．3．4　合并和拆分單元格　135
6．3．5　調(diào)整表格大小　136
6．3．6　刪除表格和內(nèi)容　136
6．4　使用表格布局網(wǎng)頁(yè)　136
6．4．1　教學(xué)案例──心理效應(yīng)　136
6．4．2　設(shè)置表格背景　142
6．4．3　制作表格細(xì)線效果　142
6．4．4　插入嵌套表格　142
6．5　使用表格數(shù)據(jù)功能　143
6．5．1　導(dǎo)入表格數(shù)據(jù)　143
6．5．2　導(dǎo)出表格數(shù)據(jù)　144
6．5．3　排序表格數(shù)據(jù)　145
6．6　小結(jié)　146
6．7　習(xí)題　146
第7章　使用CSS樣式　147
7．1　關(guān)于CSS樣式　147
7．1．1　CSS主要功能　147
7．1．2　CSS樣式層疊優(yōu)先次序　148
7．1．3　CSS速記格式　149
7．2　創(chuàng)建CSS樣式　151
7．2．1　教學(xué)案例──梅蘭竹菊　151
7．2．2　【CSS樣式】面板　158
7．2．3　CSS樣式的選擇器類(lèi)型　159
7．2．4　CSS樣式的保存位置　161
7．2．5　編輯CSS規(guī)則　162
7．3　應(yīng)用CSS樣式　163
7．3．1　教學(xué)案例──人生就像一條河　163
7．3．2　創(chuàng)建CSS樣式表文件　169
7．3．3　附加CSS樣式表　171
7．3．4　自動(dòng)應(yīng)用的CSS樣式　171
7．3．5　單個(gè)CSS類(lèi)的應(yīng)用　171
7．3．6　多個(gè)CSS類(lèi)的應(yīng)用　172
7．4　管理CSS樣式　173
7．4．1　轉(zhuǎn)換CSS規(guī)則　173
7．4．2　移動(dòng)CSS規(guī)則　174
7．5　設(shè)置CSS屬性　175
7．5．1　教學(xué)案例──神州散文欣賞　175
7．5．2　類(lèi)型　179
7．5．3　背景　180
7．5．4　區(qū)塊　180
7．5．5　方框　181
7．5．6　邊框　182
7．5．7　列表　183
7．5．8　定位　183
7．5．9　擴(kuò)展　184
7．5．10　過(guò)渡　185
7．6　CSS濾鏡　185
7．6．1　靜態(tài)濾鏡　185
7．6．2　動(dòng)態(tài)濾鏡　191
7．6．3　可應(yīng)用CSS濾鏡的HTML標(biāo)簽　192
7．7　CSS過(guò)渡效果　193
7．7．1　創(chuàng)建并應(yīng)用CSS過(guò)渡效果　193
7．7．2　編輯CSS過(guò)渡效果　194
7．8　小結(jié)　195
7．9　習(xí)題　195
第8章　使用CSS+Div布局　197
8．1　CSS盒子模型　197
8．1．1　CSS盒子結(jié)構(gòu)　197
8．1．2　CSS盒子屬性　199
8．1．3　關(guān)于Div和Span　199
8．1．4　關(guān)于id和class　200
8．2　使用簡(jiǎn)單的CSS+Div布局　200
8．2．1　教學(xué)案例──把握好你的生活　200
8．2．2　插入Div標(biāo)簽　206
8．2．3　關(guān)于CSS布局塊　206
8．2．4　關(guān)于CSS排版理念　207
8．3　使用復(fù)雜的CSS+Div布局　209
8．3．1　教學(xué)案例──人生哲理小故事　209
8．3．2　使用預(yù)設(shè)計(jì)的CSS+Div布局　213
8．3．3　插入流體網(wǎng)格布局Div標(biāo)簽　216
8．3．4　Div標(biāo)簽的居中、浮動(dòng)和清除方式　219
8．3．5　正確認(rèn)識(shí)CSS+Div布局　221
8．4　小結(jié)　222
8．5　習(xí)題　222
第9章　使用AP Div和Spry　223
9．1　AP元素　223
9．1．1　AP元素的含義　223
9．1．2　【AP元素】面板　224
9．2　創(chuàng)建和設(shè)置AP Div　225
9．2．1　教學(xué)案例──做人要大氣　225
9．2．2　創(chuàng)建AP Div　228
9．2．3　選定AP Div　230
9．2．4　AP Div屬性　231
9．3　編輯AP Div　232
9．3．1　教學(xué)案例──做大事不可拘小節(jié)　232
9．3．2　移動(dòng)AP Div　235
9．3．3　縮放AP Div　236
9．3．4　對(duì)齊AP Div　236
9．3．5　嵌套AP Div　236
9．4　使用Spry布局構(gòu)件　237
9．4．1　Spry菜單欄　238
9．4．2　Spry選項(xiàng)卡式面板　238
9．4．3　Spry折疊式　239
9．4．4　Spry可折疊面板　239
9．4．5　Spry工具提示　240
9．5　小結(jié)　240
9．6　習(xí)題　240
第10章　使用框架　241
10．1　認(rèn)識(shí)框架　241
10．1．1　框架網(wǎng)頁(yè)的含義　241
10．1．2　框架網(wǎng)頁(yè)的工作原理　242
10．1．3　框架集的嵌套　243
10．1．4　合理使用框架網(wǎng)頁(yè)　243
10．2　創(chuàng)建框架　244
10．2．1　教學(xué)案例──早安心語(yǔ)　244
10．2．2　創(chuàng)建框架　246
10．2．3　保存框架　247
10．2．4　為框架添加內(nèi)容　248
10．2．5　框架中鏈接的目標(biāo)窗口　248
10．2．6　框架集文檔的標(biāo)題　249
10．2．7　調(diào)整框架大小　249
10．2．8　拆分和刪除框架　250
10．3　設(shè)置框架　251
10．3．1　教學(xué)案例──美麗風(fēng)情　251
10．3．2　選定框架　254
10．3．3　框架和框架集屬性　255
10．3．4　編輯無(wú)框架內(nèi)容　257
10．3．5　插入浮動(dòng)框架　258
10．4　小結(jié)　259
10．5　習(xí)題　259
第11章　使用行為　261
11．1　認(rèn)識(shí)行為　261
11．1．1　行為　261
11．1．2　事件　261
11．1．3　動(dòng)作　262
11．2　行為基本操作　263
11．2．1　【行為】面板　263
11．2．2　添加行為　264
11．2．3　編輯行為　265
11．3　文本類(lèi)行為　265
11．3．1　教學(xué)案例──只聞花香　265
11．3．2　彈出信息　266
11．3．3　設(shè)置狀態(tài)欄文本　267
11．4　圖像類(lèi)行為　267
11．4．1　教學(xué)案例──人生就是相逢　267
11．4．2　交換圖像　269
11．4．3　恢復(fù)交換圖像　269
11．4．4　預(yù)先載入圖像　270
11．5　代碼屬性類(lèi)行為　270
11．5．1　教學(xué)案例──深山村寨　270
11．5．2　改變屬性　273
11．5．3　調(diào)用JavaScript　274
11．6　跳轉(zhuǎn)類(lèi)行為　274
11．6．1　教學(xué)案例──宋詞之美　274
11．6．2　打開(kāi)瀏覽器窗口　276
11．6．3　轉(zhuǎn)到URL　277
11．7　效果類(lèi)行為　277
11．7．1　教學(xué)案例──美麗風(fēng)景　278
11．7．2　效果　279
11．8　小結(jié)　280
11．9　習(xí)題　280
第12章　使用庫(kù)和模板　281
12．1　使用庫(kù)　281
12．1．1　教學(xué)案例──勵(lì)志小故事　281
12．1．2　認(rèn)識(shí)庫(kù)項(xiàng)目　283
12．1．3　創(chuàng)建庫(kù)項(xiàng)目　284
12．1．4　添加庫(kù)項(xiàng)目　285
12．1．5　維護(hù)庫(kù)項(xiàng)目　285
12．2　使用模板　287
12．2．1　教學(xué)案例──浮山學(xué)堂　287
12．2．2　認(rèn)識(shí)模板　292
12．2．3　創(chuàng)建模板　293
12．2．4　可編輯區(qū)域　294
12．2．5　重復(fù)區(qū)域　295
12．2．6　重復(fù)表格　296
12．2．7　可選區(qū)域　296
12．2．8　使用模板創(chuàng)建網(wǎng)頁(yè)　298
12．2．9　維護(hù)模板　299
12．3　小結(jié)　300
12．4　習(xí)題　300
第13章　使用表單　301
13．1　常規(guī)表單對(duì)象　301
13．1．1　教學(xué)案例──用戶注冊(cè)　301
13．1．2　認(rèn)識(shí)表單　305
13．1．3　表單和按鈕　307
13．1．4　文本域和文本區(qū)域　308
13．1．5　單選按鈕和單選按鈕組　309
13．1．6　復(fù)選框和復(fù)選框組　310
13．1．7　選擇域和隱藏域　310
13．1．8　圖像域和文件域　311
13．1．9　跳轉(zhuǎn)菜單　312
13．2　使用表單類(lèi)行為　314
13．2．1　教學(xué)案例──論文信息提交　314
13．2．2　設(shè)置文本域文字　317
13．2．3　跳轉(zhuǎn)菜單　317
13．2．4　跳轉(zhuǎn)菜單開(kāi)始　318
13．2．5　檢查表單　318
13．3　Spry驗(yàn)證表單對(duì)象　319
13．3．1　教學(xué)案例──雜志在線投稿　319
13．3．2　認(rèn)識(shí)Spry驗(yàn)證表單對(duì)象　322
13．3．3　Spry驗(yàn)證文本域　323
13．3．4　Spry驗(yàn)證文本區(qū)域　324
13．3．5　Spry驗(yàn)證復(fù)選框　324
13．3．6　Spry驗(yàn)證選擇　324
13．3．7　Spry驗(yàn)證密碼　325
13．3．8　Spry驗(yàn)證確認(rèn)　325
13．3．9　Spry驗(yàn)證單選按鈕組　326
13．4　小結(jié)　326
13．5　習(xí)題　326
第14章　開(kāi)發(fā)ASP應(yīng)用程序基礎(chǔ)　327
14．1　搭建本地ASP開(kāi)發(fā)環(huán)境　327
14．1．1　教學(xué)案例──配置Web服務(wù)器　327
14．1．2　教學(xué)案例──定義測(cè)試服務(wù)器　331
14．2　搭建遠(yuǎn)程ASP運(yùn)行環(huán)境　333
14．2．1　關(guān)于遠(yuǎn)程IIS服務(wù)器　334
14．2．2　教學(xué)案例──配置遠(yuǎn)程Web服務(wù)器　334
14．2．3　教學(xué)案例──配置遠(yuǎn)程FTP服務(wù)器　337
14．2．4　教學(xué)案例──定義遠(yuǎn)程服務(wù)器　339
14．3　數(shù)據(jù)庫(kù)、SQL語(yǔ)句和SQL函數(shù)　341
14．3．1　數(shù)據(jù)庫(kù)基礎(chǔ)　341
14．3．2　SQL常用語(yǔ)句　341
14．3．3　SQL常用函數(shù)　343
14．4　數(shù)據(jù)庫(kù)連接方式　345
14．4．1　教學(xué)案例──創(chuàng)建ODBC數(shù)據(jù)源DSN　345
14．4．2　ODBC DSN數(shù)據(jù)庫(kù)連接方式　347
14．4．3　OLE DB數(shù)據(jù)庫(kù)連接方式　348
14．5　小結(jié)　349
14．6　習(xí)題　350
第15章　制作ASP應(yīng)用程序　351
15．1　通過(guò)瀏覽顯示記錄　351
15．1．1　教學(xué)案例──學(xué)校論文查閱系統(tǒng)數(shù)據(jù)瀏覽　351
15．1．2　創(chuàng)建記錄集　356
15．1．3　動(dòng)態(tài)數(shù)據(jù)　358
15．1．4　重復(fù)區(qū)域　358
15．1．5　記錄集分頁(yè)　359
15．1．6　顯示記錄記數(shù)　359
15．1．7　設(shè)置顯示區(qū)域　360
15．1．8　URL參數(shù)　360
15．2　通過(guò)搜索顯示記錄　362
15．2．1　教學(xué)案例──學(xué)校論文查閱系統(tǒng)數(shù)據(jù)搜索　362
15．2．2　表單參數(shù)　363
15．3　插入和編輯記錄　364
15．3．1　教學(xué)案例──學(xué)校論文查閱系統(tǒng)數(shù)據(jù)插入和編輯　364
15．3．2　插入記錄　371
15．3．3　更新記錄　372
15．3．4　刪除記錄　373
15．4　用戶身份驗(yàn)證　373
15．4．1　教學(xué)案例──學(xué)校論文查閱系統(tǒng)用戶身份驗(yàn)證　373
15．4．2　登錄用戶　376
15．4．3　注銷(xiāo)用戶　377
15．4．4　限制對(duì)頁(yè)的訪問(wèn)　377
15．4．5　檢查新用戶名　378
15．5　小結(jié)　378
15．6　習(xí)題　378
第16章　網(wǎng)站制作綜合實(shí)訓(xùn)　1
16．1　網(wǎng)站規(guī)劃　1
16．1．1　網(wǎng)站建設(shè)目標(biāo)　1
16．1．2　網(wǎng)站欄目和風(fēng)格　1
16．2　網(wǎng)站頁(yè)面設(shè)計(jì)　2
16．2．1　素材準(zhǔn)備　2
16．2．2　頁(yè)面設(shè)計(jì)　2
16．3　網(wǎng)站頁(yè)面制作　4
16．3．1　主頁(yè)面制作　4
16．3．2　二級(jí)頁(yè)面制作　14
16．4　小結(jié)　20
16．5　習(xí)題　20