網(wǎng)頁制作與網(wǎng)站建設(shè)從入門到精通

目　錄

第一部分　入門篇　1

第1章　網(wǎng)頁設(shè)計(jì)基礎(chǔ)　3
1.1　預(yù)備知識　3
1.2　如何設(shè)計(jì)網(wǎng)頁　6
1.2.1　網(wǎng)頁設(shè)計(jì)的任務(wù)　6
1.2.2　網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)　8
1.2.3　網(wǎng)頁設(shè)計(jì)的基本原則　8
1.3　常用網(wǎng)頁設(shè)計(jì)軟件　9
1.4　經(jīng)典習(xí)題與解答　11
1.4.1　填空題　11
1.4.2　簡答題　11

第2章　HTML入門　12
2.1　HTML的基本語法　12
2.1.1　HTML基本語法結(jié)構(gòu)　12
2.1.2　創(chuàng)建HTML文件　14
2.2　頁面布局與文字標(biāo)記　15
2.2.1　標(biāo)題　16
2.2.2　換行
　17
2.2.3　段落標(biāo)記　18
2.2.4　水平線段　19
2.2.5　文字的大小設(shè)置　20
2.2.6　文字的字體與樣式　21
2.2.7　文字的顏色　22
2.3　多媒體　23
2.3.1　插入圖像　23
2.3.2　播放音樂　24
2.3.3　播放視頻　25
2.4　表格標(biāo)記　25
2.4.1　表格的基本結(jié)構(gòu)　25
2.4.2　表格的標(biāo)題　25
2.4.3　表格的尺寸設(shè)置　26
2.4.4　表格內(nèi)文字的對齊、布局　27
2.4.5　表格的顏色　27
2.5　超級鏈接標(biāo)記　28
2.6　框架標(biāo)記　28
2.6.1　框架結(jié)構(gòu)的基本格式　29
2.6.2　各窗口的尺寸設(shè)置　29
2.6.3　各窗口間相互操作　29
2.7　表單標(biāo)記　30
2.7.1　表單標(biāo)記　30
2.7.2　文本域　30
2.7.3　單選按鈕　31
2.7.4　復(fù)選框　31
2.7.5　按鈕　32
2.7.6　列表/菜單　33
2.8　經(jīng)典習(xí)題與解答　33
2.8.1　填空題　33
2.8.2　上機(jī)操作題　34

第3章　網(wǎng)站建設(shè)基礎(chǔ)　35
3.1　預(yù)備知識　35
3.1.1　什么是WWW　35
3.1.2　申請域名　35
3.1.3　申請服務(wù)器空間　36
3.2　網(wǎng)站建設(shè)的一般流程　36
3.2.1　確定網(wǎng)站主題　36
3.2.2　網(wǎng)站整體規(guī)劃　37
3.2.3　收集資料與素材　37
3.2.4　設(shè)計(jì)網(wǎng)頁圖像　38
3.2.5　制作網(wǎng)頁　39
3.2.6　開發(fā)動態(tài)網(wǎng)站模塊　39
3.2.7　發(fā)布與上傳　41
3.2.8　后期更新與維護(hù)　41
3.2.9　網(wǎng)站的推廣　41
3.3　經(jīng)典習(xí)題與解答　42
3.3.1　填空題　42
3.3.2　簡答題　42

第4章　網(wǎng)頁中的色彩知識　43
4.1　色彩基礎(chǔ)知識　43
4.1.1　色彩的基本概念　43
4.1.2　常見色彩表達(dá)的意義　44
4.2　網(wǎng)頁色彩的搭配　45
4.2.1　網(wǎng)頁色彩搭配原理　46
4.2.2　網(wǎng)頁設(shè)計(jì)中色彩搭配的技巧　46
4.2.3　常見的幾種網(wǎng)頁配色方案　47
4.3　經(jīng)典習(xí)題與解答　49
4.3.1　填空題　49
4.3.2　簡答題　49

第二部分 網(wǎng)頁設(shè)計(jì)與制作篇　51

第5章　熟悉Dreamweaver CS6的工作環(huán)境　53
5.1　Dreamweaver CS6工作區(qū)　53
5.2　Dreamweaver CS6工具欄　54
5.2.1　標(biāo)準(zhǔn)工具欄　54
5.2.2　文檔工具欄　54
5.3　屬性面板　55
5.4　插入欄　55
5.4.1　常用插入欄　56
5.4.2　布局插入欄　56
5.4.3　表單插入欄　57
5.4.4　文本插入欄　58
5.4.5　Spry插入欄　58
5.4.6　數(shù)據(jù)插入欄　58
5.4.7　收藏夾插入欄　59
5.5　Dreamweaver CS6的菜單欄　60
5.5.1　文件菜單　60
5.5.2　編輯菜單　60
5.5.3　查看菜單　60
5.5.4　插入菜單　60
5.5.5　修改菜單　60
5.5.6　格式菜單　61
5.5.7　命令菜單　61
5.5.8　站點(diǎn)菜單　61
5.5.9　窗口菜單　62
5.5.10　幫助菜單　62
5.6　Dreamweaver CS6的面板組　63
5.7　經(jīng)典習(xí)題與解答　63
5.7.1　填空題　63
5.7.2　操作題　64

第6章　創(chuàng)建與管理站點(diǎn)　65
6.1　創(chuàng)建本地站點(diǎn)　65
6.1.1　使用站點(diǎn)向?qū)?chuàng)建本地站點(diǎn)　65
6.1.2　使用高級設(shè)置建立站點(diǎn)　67
6.2　管理站點(diǎn)文件　69
6.2.1　創(chuàng)建文件夾和文件　69
6.2.2　移動和復(fù)制文件　69
6.3　使用站點(diǎn)地圖　70
6.4　經(jīng)典習(xí)題與解答　71
6.4.1　填空題　71
6.4.2　簡答題　71

第7章　使用表格排列網(wǎng)頁數(shù)據(jù)　72
7.1　網(wǎng)頁的基本構(gòu)成　72
7.2　網(wǎng)頁布局方法　74
7.2.1　紙上布局法　74
7.2.2　軟件布局法　74
7.3　常見的網(wǎng)頁布局類型　74
7.3.1　“國”字型布局　74
7.3.2　“廠”字型布局　75
7.3.3　“框架”型布局　76
7.3.4　“封面”型布局　76
7.3.5　“Flash”型布局　76
7.4　基本的表格布局方法　77
7.4.1　插入表格　77
7.4.2　設(shè)置表格屬性　79
7.4.3　合并單元格　79
7.4.4　選取表格對象　80
7.5　利用表格布局網(wǎng)頁實(shí)例　81
7.5.1　實(shí)例——利用表格排列數(shù)據(jù)　81
7.5.2　實(shí)例——“廠”字型布局　82
7.5.3　實(shí)例——“封面”型布局　87
7.5.4　實(shí)例——“國”字型布局網(wǎng)頁　90
7.6　經(jīng)典習(xí)題與解答　97
7.6.1　填空題　97
7.6.2　上機(jī)操作題　98

第8章　創(chuàng)建基本圖文混合網(wǎng)頁　99
8.1　文本的輸入和編輯　99
8.1.1　輸入文本　99
8.1.2　設(shè)置文本屬性　100
8.1.3　輸入特殊字符　102
8.2　在網(wǎng)頁中插入圖像　103
8.2.1　插入圖像　103
8.2.2　設(shè)置圖像屬性　104
8.2.3　插入鼠標(biāo)經(jīng)過圖像　106
8.3　創(chuàng)建網(wǎng)頁鏈接　109
8.3.1　創(chuàng)建圖像鏈接　109
8.3.2　創(chuàng)建錨點(diǎn)鏈接　110
8.3.3　創(chuàng)建電子郵件鏈接　112
8.3.4　創(chuàng)建圖像熱點(diǎn)鏈接　113
8.4　利用CSS美化網(wǎng)頁　115
8.4.1　添加CSS的方法　115
8.4.2　應(yīng)用CSS固定字體大小　116
8.4.3　應(yīng)用CSS改變文本間行距　119
8.5　插入媒體　120
8.5.1　插入Flash動畫　120
8.5.2　插入Flash視頻　123
8.5.3　利用插件制作背景音樂網(wǎng)頁　124
8.6　經(jīng)典習(xí)題與解答　127
8.6.1　填空題　127
8.6.2　上機(jī)操作題　127

第9章　使用模板和庫提高網(wǎng)頁制作效率　128
9.1　創(chuàng)建模板網(wǎng)頁　128
9.1.1　直接創(chuàng)建模板　128
9.1.2　從現(xiàn)有文檔創(chuàng)建模板　129
9.2　使用模板　130
9.2.1　定義可編輯區(qū)　131
9.2.2　定義新的可選區(qū)域　131
9.2.3　定義重復(fù)區(qū)域　132
9.2.4　基于模板創(chuàng)建網(wǎng)頁　132
9.3　管理模板　135
9.3.1　更新模板　135
9.3.2　從模板中脫離　137
9.4　創(chuàng)建與應(yīng)用庫項(xiàng)目　137
9.4.1　關(guān)于庫項(xiàng)目　137
9.4.2　創(chuàng)建庫項(xiàng)目　138
9.4.3　應(yīng)用庫項(xiàng)目　140
9.4.4　修改庫項(xiàng)目　141
9.5　模板應(yīng)用實(shí)例　142
9.5.1　實(shí)例1——創(chuàng)建網(wǎng)站模板　142
9.5.2　實(shí)例2——利用模板創(chuàng)建網(wǎng)頁　146
9.6　經(jīng)典習(xí)題與解答　150
9.6.1　填空題　150
9.6.2　上機(jī)操作題　150

第10章　CSS+div布局網(wǎng)頁　151
10.1　初識div　151
10.1.1　div概述　151
10.1.2　div與span的區(qū)別　151
10.1.3　Div與CSS布局優(yōu)勢　153
10.2　使用div定位網(wǎng)頁　154
10.2.1　創(chuàng)建div　154
10.2.2　Div的基本操作　156
10.2.3　div與表格的轉(zhuǎn)換　156
10.3　CSS定位　158
10.3.1　盒子模型的概念　158
10.3.2　float定位　159
10.3.3　position定位　160
10.4　CSS布局理念　161
10.4.1　將頁面用Div分塊　161
10.4.2　設(shè)計(jì)各塊的位置　161
10.4.3　用CSS定位　162
10.5　常見的布局類型　163
10.5.1　列固定寬度　163
10.5.2　列自適應(yīng)　164
10.5.3　兩列固定寬度　165
10.5.4　兩列寬度自適應(yīng)　166
10.5.5　兩列右列寬度自適應(yīng)　167
10.5.6　三列浮動中間寬度自適應(yīng)　168
10.6　經(jīng)典習(xí)題與解答　169
10.6.1　填空題　169
10.6.2　上機(jī)操作題　169

第11章　使用行為和 JavaScript 制作動感特效網(wǎng)頁　170
11.1　行為概述　170
11.1.1　認(rèn)識事件　171
11.1.2　動作類型　172
11.2　使用Dreamweaver內(nèi)置行為　172
11.2.1　交換圖像　172
11.2.2　轉(zhuǎn)到URL　175
11.2.3　打開瀏覽器窗口　176
11.2.4　彈出信息　178
11.2.5　設(shè)置狀態(tài)欄文本　180
11.2.6　顯示-隱藏元素　181
11.2.7　預(yù)先載入圖像　183
11.2.8　檢查表單　185
11.2.9　拖動AP元素　186
11.3　利用腳本制作特效網(wǎng)頁　188
11.3.1　制作滾動公告網(wǎng)頁　188
11.3.2　制作自動關(guān)閉網(wǎng)頁　193
11.3.3　利用JavaScript函數(shù)實(shí)現(xiàn)打印功能　194
11.4　經(jīng)典習(xí)題與解答　195
11.4.1　填空題　195
11.4.2　上機(jī)操作題　196

第12章　處理與優(yōu)化網(wǎng)頁中的圖片　197
12.1　Photoshop CS6的工作環(huán)境簡介　197
12.2　調(diào)整圖像大小　201
12.3　網(wǎng)頁圖像的色彩調(diào)整　203
12.3.1　使用【色階】命令優(yōu)化網(wǎng)頁圖像　203
12.3.2　使用【曲線】命令優(yōu)化網(wǎng)頁圖像　205
12.3.3　使用【色彩平衡】命令優(yōu)化網(wǎng)頁圖像　206
12.3.4　使用【亮度/對比度】命令優(yōu)化網(wǎng)頁圖像　208
12.3.5　使用【色相/飽和度】命令優(yōu)化網(wǎng)頁圖像　208
12.4　處理產(chǎn)品圖像　209
12.5　經(jīng)典習(xí)題與解答　213
12.5.1　填空題　213
12.5.2　上機(jī)操作題　214

第13章　設(shè)計(jì)網(wǎng)站的Logo和按鈕　215
13.1　VI簡介　215
13.1.1　VI設(shè)計(jì)的概念　215
13.1.2　VI在網(wǎng)站設(shè)計(jì)中的意義　216
13.2　網(wǎng)站標(biāo)識設(shè)計(jì)概述　216
13.2.1　網(wǎng)站Logo設(shè)計(jì)標(biāo)準(zhǔn)　217
13.2.2　網(wǎng)站Logo的標(biāo)準(zhǔn)尺寸　217
13.3　按鈕設(shè)計(jì)　218
13.3.1　制作導(dǎo)航按鈕　218
13.3.2　制作發(fā)光按鈕　221
13.4　經(jīng)典習(xí)題與解答　222
13.4.1　填空題　222
13.4.2　上機(jī)操作題　223

第14章　設(shè)計(jì)網(wǎng)站動畫和網(wǎng)絡(luò)廣告　224
14.1　Flash的工作環(huán)境簡介　224
14.2　網(wǎng)站廣告設(shè)計(jì)指南　226
14.2.1　網(wǎng)站廣告設(shè)計(jì)基本原則　227
14.2.2　網(wǎng)站廣告的類型　228
14.3　制作網(wǎng)頁廣告實(shí)例　229
14.3.1　設(shè)計(jì)banner宣傳廣告實(shí)例　229
14.3.2　給Flash首頁添加鏈接　236
14.3.3　制作控制聲音播放動畫　239
14.4　經(jīng)典習(xí)題與解答　243
14.4.1　填空題　243
14.4.2　上機(jī)操作題　243

第三部分 動態(tài)網(wǎng)站開發(fā)篇　245

第15章　動態(tài)網(wǎng)站創(chuàng)建實(shí)例　247
15.1　搭建服務(wù)器平臺　247
15.1.1　IIS的安裝　247
15.1.2　設(shè)置IIS服務(wù)器　249
15.2　設(shè)計(jì)數(shù)據(jù)庫　250
15.3　建立數(shù)據(jù)庫連接　251
15.3.1　了解DSN　251
15.3.2　定義系統(tǒng)DSN　251
15.3.3　建立系統(tǒng)DSN連接　252
15.4　定義記錄集(查詢)　253
15.4.1　簡單記錄集(查詢)的定義　253
15.4.2　高級記錄集的定義　254
15.4.3　調(diào)用存儲過程　255
15.4.4　簡單的SQL查詢語句　256
15.5　其他數(shù)據(jù)源的定義　257
15.5.1　請求變量　257
15.5.2　階段變量　258
15.5.3　應(yīng)用程序變量　258
15.6　動態(tài)數(shù)據(jù)的綁定　259
15.6.1　綁定動態(tài)文本　259
15.6.2　設(shè)置動態(tài)文本數(shù)據(jù)格式　259
15.6.3　綁定動態(tài)圖像　260
15.6.4　向表單對象綁定動態(tài)數(shù)據(jù)　261
15.7　添加服務(wù)器行為　262
15.7.1　顯示多條記錄　262
15.7.2　移動記錄　263
15.7.3　顯示區(qū)域　264
15.7.4　頁面之間信息傳遞　264
15.7.5　用戶驗(yàn)證　265
15.3　經(jīng)典習(xí)題與解答　268
15.3.1　填空題　268
15.3.2　上機(jī)操作題　268

第16章　動態(tài)網(wǎng)站常用模塊設(shè)計(jì)　269
16.1　制作留言系統(tǒng)　269
16.1.1　主要功能頁面　269
16.1.2　設(shè)計(jì)數(shù)據(jù)庫　270
16.1.3　創(chuàng)建數(shù)據(jù)庫連接　272
16.1.4　制作模板頁面　273
16.1.5　制作留言顯示列表頁面　277
16.1.6　制作留言詳細(xì)信息頁　280
16.1.7　制作發(fā)表留言頁面　282
16.2　制作新聞發(fā)布系統(tǒng)　285
16.2.1　主要功能頁面　285
16.2.2　設(shè)計(jì)數(shù)據(jù)庫　286
16.2.3　創(chuàng)建數(shù)據(jù)庫連接　287
16.2.4　制作顯示全部新聞列表頁面　288
16.2.5　制作新聞詳細(xì)顯示頁面　291
16.2.6　制作新聞添加頁面　293
16.3　制作會員登錄系統(tǒng)　298
16.3.1　數(shù)據(jù)庫設(shè)計(jì)　298
16.3.2　制作會員注冊頁面　299
16.3.3　制作登錄成功與失敗頁面　304
16.3.4　制作登錄頁面　305
16.5　經(jīng)典習(xí)題與解答　309
16.5.1　填空題　309
16.5.2　上機(jī)操作題　309

第四部分 網(wǎng)站發(fā)布與維護(hù)篇　311

第17章　網(wǎng)站的發(fā)布　313
17.1　站點(diǎn)的測試　313
17.1.1　檢查斷掉的鏈接　313
17.1.2　檢查外部鏈接　313
17.1.3　檢查孤立文件　314
17.2　網(wǎng)頁的上傳　314
17.2.1　利用Dreamweaver上傳網(wǎng)頁　314
17.2.2　LeadFTP上傳文件　316
17.3　經(jīng)典習(xí)題與解答　318
17.3.1　填空題　318
17.3.2　上機(jī)操作題　319

第18章　網(wǎng)站的日常維護(hù)　320
18.1　網(wǎng)站的運(yùn)營維護(hù)　320
18.2　網(wǎng)站數(shù)據(jù)庫內(nèi)容維護(hù)　322
18.3　網(wǎng)頁維護(hù)　323
18.4　網(wǎng)站安全維護(hù)　323
18.4.1　取消文件夾隱藏共享　324
18.4.2　刪掉不必要的協(xié)議　325
18.4.3　關(guān)閉文件和打印共享　325
18.4.4　把Guest賬號禁用　326
18.4.5　禁止建立空連接　327
18.4.6　NTFS權(quán)限的設(shè)置　327
18.4.7　操作系統(tǒng)賬號的管理　328
18.4.8　安裝必要的殺毒軟件　329
18.4.9　做好Internet Explorer瀏覽器的安全設(shè)置　329
18.5　經(jīng)典習(xí)題與解答　330
18.5.1　填空題　330
18.5.2　簡答題　330

第19章　網(wǎng)站的宣傳推廣　331
19.1　注冊到搜索引擎　331
19.2　導(dǎo)航網(wǎng)站登錄　333
19.3　友情鏈接　334
19.4　網(wǎng)絡(luò)廣告　335
19.5　郵件廣告　335
19.6　聊天工具推廣網(wǎng)站　336
19.7　發(fā)布信息推廣　336
19.8　博客推廣　337
19.9　傳統(tǒng)媒體廣告　338
19.10　商業(yè)資源合作推廣　338
19.11　經(jīng)典習(xí)題與解答　339
19.11.1　填空題　339
19.11.2　上機(jī)操作題　339

第五部分 綜合案例篇　341

第20章　創(chuàng)建企業(yè)展示型網(wǎng)站　343
20.1　網(wǎng)站前期策劃　343
20.1.1　企業(yè)網(wǎng)站分類　343
20.1.2　企業(yè)網(wǎng)站主要功能頁面　345
20.1.3　本例網(wǎng)站頁面　347
20.2　設(shè)計(jì)網(wǎng)站首頁　348
20.2.1　首頁的設(shè)計(jì)　348
20.2.2　切割首頁　353
20.3　在Dreamweaver中進(jìn)行頁面排版制作　354
20.3.1　創(chuàng)建本地站點(diǎn)　355
20.3.2　創(chuàng)建二級模板頁面　356
20.3.3　利用模板制作其他網(wǎng)頁　362
20.4　給網(wǎng)頁添加特效　365
20.4.1　滾動公告　365
20.4.2　制作彈出窗口頁面　366
20.5　本地測試及發(fā)布上傳　368
20.6　經(jīng)典習(xí)題與解答　369
20.6.1　填空題　369
20.6.2　上機(jī)操作題　369

第21章　設(shè)計(jì)在線購物網(wǎng)站　370
21.1　購物網(wǎng)站設(shè)計(jì)概述　370
21.2　購物網(wǎng)站主要特點(diǎn)分析　372
21.2.1　大信息量的頁面　372
21.2.2　頁面結(jié)構(gòu)設(shè)計(jì)合理　372
21.2.3　完善的分類體系　373
21.2.4　商品圖片的使用　374
21.3　購物網(wǎng)站主要功能和欄目　374
21.4　設(shè)計(jì)數(shù)據(jù)庫和數(shù)據(jù)庫連接　377
21.4.1　創(chuàng)建數(shù)據(jù)庫表　377
22.4.2　創(chuàng)建數(shù)據(jù)庫連接　379
21.5　制作購物系統(tǒng)前臺頁面　379
21.5.1　制作商品分類展示頁面　379
21.5.2　制作商品詳細(xì)信息頁面　385
21.6　制作購物系統(tǒng)后臺管理　387
21.6.1　制作管理員登錄頁面　387
21.6.2　制作添加商品分類頁面　390
21.6.3　制作添加商品頁面　393
21.6.4　制作商品管理頁面　395
21.6.5　制作修改頁面　400
21.6.6　制作刪除頁面　403
21.7　經(jīng)典習(xí)題與解答　406

附錄A　網(wǎng)頁制作常見問題精解　407
答案　451