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

目　錄

第一部分　入門(mén)篇　1

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

第2章　HTML入門(mén)　12
2.1　HTML的基本語(yǔ)法　12
2.1.1　HTML基本語(yǔ)法結(jié)構(gòu)　12
2.1.2　創(chuàng)建HTML文件　14
2.2　頁(yè)面布局與文字標(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　播放音樂(lè)　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)文字的對(duì)齊、布局　27
2.4.5　表格的顏色　27
2.5　超級(jí)鏈接標(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ù)備知識(shí)　35
3.1.1　什么是WWW　35
3.1.2　申請(qǐng)域名　35
3.1.3　申請(qǐng)服務(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)頁(yè)圖像　38
3.2.5　制作網(wǎng)頁(yè)　39
3.2.6　開(kāi)發(fā)動(dòng)態(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　簡(jiǎn)答題　42

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

第二部分 網(wǎng)頁(yè)設(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　使用高級(jí)設(shè)置建立站點(diǎn)　67
6.2　管理站點(diǎn)文件　69
6.2.1　創(chuàng)建文件夾和文件　69
6.2.2　移動(dòng)和復(fù)制文件　69
6.3　使用站點(diǎn)地圖　70
6.4　經(jīng)典習(xí)題與解答　71
6.4.1　填空題　71
6.4.2　簡(jiǎn)答題　71

第7章　使用表格排列網(wǎng)頁(yè)數(shù)據(jù)　72
7.1　網(wǎng)頁(yè)的基本構(gòu)成　72
7.2　網(wǎng)頁(yè)布局方法　74
7.2.1　紙上布局法　74
7.2.2　軟件布局法　74
7.3　常見(jiàn)的網(wǎng)頁(yè)布局類型　74
7.3.1　“國(guó)”字型布局　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　選取表格對(duì)象　80
7.5　利用表格布局網(wǎng)頁(yè)實(shí)例　81
7.5.1　實(shí)例——利用表格排列數(shù)據(jù)　81
7.5.2　實(shí)例——“廠”字型布局　82
7.5.3　實(shí)例——“封面”型布局　87
7.5.4　實(shí)例——“國(guó)”字型布局網(wǎng)頁(yè)　90
7.6　經(jīng)典習(xí)題與解答　97
7.6.1　填空題　97
7.6.2　上機(jī)操作題　98

第8章　創(chuàng)建基本圖文混合網(wǎng)頁(yè)　99
8.1　文本的輸入和編輯　99
8.1.1　輸入文本　99
8.1.2　設(shè)置文本屬性　100
8.1.3　輸入特殊字符　102
8.2　在網(wǎng)頁(yè)中插入圖像　103
8.2.1　插入圖像　103
8.2.2　設(shè)置圖像屬性　104
8.2.3　插入鼠標(biāo)經(jīng)過(guò)圖像　106
8.3　創(chuàng)建網(wǎng)頁(yè)鏈接　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)頁(yè)　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動(dòng)畫(huà)　120
8.5.2　插入Flash視頻　123
8.5.3　利用插件制作背景音樂(lè)網(wǎng)頁(yè)　124
8.6　經(jīng)典習(xí)題與解答　127
8.6.1　填空題　127
8.6.2　上機(jī)操作題　127

第9章　使用模板和庫(kù)提高網(wǎng)頁(yè)制作效率　128
9.1　創(chuàng)建模板網(wǎng)頁(yè)　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)頁(yè)　132
9.3　管理模板　135
9.3.1　更新模板　135
9.3.2　從模板中脫離　137
9.4　創(chuàng)建與應(yīng)用庫(kù)項(xiàng)目　137
9.4.1　關(guān)于庫(kù)項(xiàng)目　137
9.4.2　創(chuàng)建庫(kù)項(xiàng)目　138
9.4.3　應(yīng)用庫(kù)項(xiàng)目　140
9.4.4　修改庫(kù)項(xiàng)目　141
9.5　模板應(yīng)用實(shí)例　142
9.5.1　實(shí)例1——?jiǎng)?chuàng)建網(wǎng)站模板　142
9.5.2　實(shí)例2——利用模板創(chuàng)建網(wǎng)頁(yè)　146
9.6　經(jīng)典習(xí)題與解答　150
9.6.1　填空題　150
9.6.2　上機(jī)操作題　150

第10章　CSS+div布局網(wǎng)頁(yè)　151
10.1　初識(shí)div　151
10.1.1　div概述　151
10.1.2　div與span的區(qū)別　151
10.1.3　Div與CSS布局優(yōu)勢(shì)　153
10.2　使用div定位網(wǎng)頁(yè)　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　將頁(yè)面用Div分塊　161
10.4.2　設(shè)計(jì)各塊的位置　161
10.4.3　用CSS定位　162
10.5　常見(jiàn)的布局類型　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　三列浮動(dòng)中間寬度自適應(yīng)　168
10.6　經(jīng)典習(xí)題與解答　169
10.6.1　填空題　169
10.6.2　上機(jī)操作題　169

第11章　使用行為和 JavaScript 制作動(dòng)感特效網(wǎng)頁(yè)　170
11.1　行為概述　170
11.1.1　認(rèn)識(shí)事件　171
11.1.2　動(dòng)作類型　172
11.2　使用Dreamweaver內(nèi)置行為　172
11.2.1　交換圖像　172
11.2.2　轉(zhuǎn)到URL　175
11.2.3　打開(kāi)瀏覽器窗口　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　拖動(dòng)AP元素　186
11.3　利用腳本制作特效網(wǎng)頁(yè)　188
11.3.1　制作滾動(dòng)公告網(wǎng)頁(yè)　188
11.3.2　制作自動(dòng)關(guān)閉網(wǎng)頁(yè)　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)頁(yè)中的圖片　197
12.1　Photoshop CS6的工作環(huán)境簡(jiǎn)介　197
12.2　調(diào)整圖像大小　201
12.3　網(wǎng)頁(yè)圖像的色彩調(diào)整　203
12.3.1　使用【色階】命令優(yōu)化網(wǎng)頁(yè)圖像　203
12.3.2　使用【曲線】命令優(yōu)化網(wǎng)頁(yè)圖像　205
12.3.3　使用【色彩平衡】命令優(yōu)化網(wǎng)頁(yè)圖像　206
12.3.4　使用【亮度/對(duì)比度】命令優(yōu)化網(wǎng)頁(yè)圖像　208
12.3.5　使用【色相/飽和度】命令優(yōu)化網(wǎng)頁(yè)圖像　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簡(jiǎn)介　215
13.1.1　VI設(shè)計(jì)的概念　215
13.1.2　VI在網(wǎng)站設(shè)計(jì)中的意義　216
13.2　網(wǎng)站標(biāo)識(shí)設(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)站動(dòng)畫(huà)和網(wǎng)絡(luò)廣告　224
14.1　Flash的工作環(huán)境簡(jiǎ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)頁(yè)廣告實(shí)例　229
14.3.1　設(shè)計(jì)banner宣傳廣告實(shí)例　229
14.3.2　給Flash首頁(yè)添加鏈接　236
14.3.3　制作控制聲音播放動(dòng)畫(huà)　239
14.4　經(jīng)典習(xí)題與解答　243
14.4.1　填空題　243
14.4.2　上機(jī)操作題　243

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

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

第16章　動(dòng)態(tài)網(wǎng)站常用模塊設(shè)計(jì)　269
16.1　制作留言系統(tǒng)　269
16.1.1　主要功能頁(yè)面　269
16.1.2　設(shè)計(jì)數(shù)據(jù)庫(kù)　270
16.1.3　創(chuàng)建數(shù)據(jù)庫(kù)連接　272
16.1.4　制作模板頁(yè)面　273
16.1.5　制作留言顯示列表頁(yè)面　277
16.1.6　制作留言詳細(xì)信息頁(yè)　280
16.1.7　制作發(fā)表留言頁(yè)面　282
16.2　制作新聞發(fā)布系統(tǒng)　285
16.2.1　主要功能頁(yè)面　285
16.2.2　設(shè)計(jì)數(shù)據(jù)庫(kù)　286
16.2.3　創(chuàng)建數(shù)據(jù)庫(kù)連接　287
16.2.4　制作顯示全部新聞列表頁(yè)面　288
16.2.5　制作新聞詳細(xì)顯示頁(yè)面　291
16.2.6　制作新聞添加頁(yè)面　293
16.3　制作會(huì)員登錄系統(tǒng)　298
16.3.1　數(shù)據(jù)庫(kù)設(shè)計(jì)　298
16.3.2　制作會(huì)員注冊(cè)頁(yè)面　299
16.3.3　制作登錄成功與失敗頁(yè)面　304
16.3.4　制作登錄頁(yè)面　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)的測(cè)試　313
17.1.1　檢查斷掉的鏈接　313
17.1.2　檢查外部鏈接　313
17.1.3　檢查孤立文件　314
17.2　網(wǎng)頁(yè)的上傳　314
17.2.1　利用Dreamweaver上傳網(wǎng)頁(yè)　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)營(yíng)維護(hù)　320
18.2　網(wǎng)站數(shù)據(jù)庫(kù)內(nèi)容維護(hù)　322
18.3　網(wǎng)頁(yè)維護(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賬號(hào)禁用　326
18.4.5　禁止建立空連接　327
18.4.6　NTFS權(quán)限的設(shè)置　327
18.4.7　操作系統(tǒng)賬號(hào)的管理　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　簡(jiǎn)答題　330

第19章　網(wǎng)站的宣傳推廣　331
19.1　注冊(cè)到搜索引擎　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)站主要功能頁(yè)面　345
20.1.3　本例網(wǎng)站頁(yè)面　347
20.2　設(shè)計(jì)網(wǎng)站首頁(yè)　348
20.2.1　首頁(yè)的設(shè)計(jì)　348
20.2.2　切割首頁(yè)　353
20.3　在Dreamweaver中進(jìn)行頁(yè)面排版制作　354
20.3.1　創(chuàng)建本地站點(diǎn)　355
20.3.2　創(chuàng)建二級(jí)模板頁(yè)面　356
20.3.3　利用模板制作其他網(wǎng)頁(yè)　362
20.4　給網(wǎng)頁(yè)添加特效　365
20.4.1　滾動(dòng)公告　365
20.4.2　制作彈出窗口頁(yè)面　366
20.5　本地測(cè)試及發(fā)布上傳　368
20.6　經(jīng)典習(xí)題與解答　369
20.6.1　填空題　369
20.6.2　上機(jī)操作題　369

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

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