網頁制作與網站建設從入門到精通

目　錄

第一部分　入門篇　1

第1章　網頁設計基礎　3
1.1　預備知識　3
1.2　如何設計網頁　6
1.2.1　網頁設計的任務　6
1.2.2　網頁設計的實現　8
1.2.3　網頁設計的基本原則　8
1.3　常用網頁設計軟件　9
1.4　經典習題與解答　11
1.4.1　填空題　11
1.4.2　簡答題　11

第2章　HTML入門　12
2.1　HTML的基本語法　12
2.1.1　HTML基本語法結構　12
2.1.2　創(chuàng)建HTML文件　14
2.2　頁面布局與文字標記　15
2.2.1　標題　16
2.2.2　換行
　17
2.2.3　段落標記　18
2.2.4　水平線段　19
2.2.5　文字的大小設置　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　表格標記　25
2.4.1　表格的基本結構　25
2.4.2　表格的標題　25
2.4.3　表格的尺寸設置　26
2.4.4　表格內文字的對齊、布局　27
2.4.5　表格的顏色　27
2.5　超級鏈接標記　28
2.6　框架標記　28
2.6.1　框架結構的基本格式　29
2.6.2　各窗口的尺寸設置　29
2.6.3　各窗口間相互操作　29
2.7　表單標記　30
2.7.1　表單標記　30
2.7.2　文本域　30
2.7.3　單選按鈕　31
2.7.4　復選框　31
2.7.5　按鈕　32
2.7.6　列表/菜單　33
2.8　經典習題與解答　33
2.8.1　填空題　33
2.8.2　上機操作題　34

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

第4章　網頁中的色彩知識　43
4.1　色彩基礎知識　43
4.1.1　色彩的基本概念　43
4.1.2　常見色彩表達的意義　44
4.2　網頁色彩的搭配　45
4.2.1　網頁色彩搭配原理　46
4.2.2　網頁設計中色彩搭配的技巧　46
4.2.3　常見的幾種網頁配色方案　47
4.3　經典習題與解答　49
4.3.1　填空題　49
4.3.2　簡答題　49

第二部分 網頁設計與制作篇　51

第5章　熟悉Dreamweaver CS6的工作環(huán)境　53
5.1　Dreamweaver CS6工作區(qū)　53
5.2　Dreamweaver CS6工具欄　54
5.2.1　標準工具欄　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　數據插入欄　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　站點菜單　61
5.5.9　窗口菜單　62
5.5.10　幫助菜單　62
5.6　Dreamweaver CS6的面板組　63
5.7　經典習題與解答　63
5.7.1　填空題　63
5.7.2　操作題　64

第6章　創(chuàng)建與管理站點　65
6.1　創(chuàng)建本地站點　65
6.1.1　使用站點向導創(chuàng)建本地站點　65
6.1.2　使用高級設置建立站點　67
6.2　管理站點文件　69
6.2.1　創(chuàng)建文件夾和文件　69
6.2.2　移動和復制文件　69
6.3　使用站點地圖　70
6.4　經典習題與解答　71
6.4.1　填空題　71
6.4.2　簡答題　71

第7章　使用表格排列網頁數據　72
7.1　網頁的基本構成　72
7.2　網頁布局方法　74
7.2.1　紙上布局法　74
7.2.2　軟件布局法　74
7.3　常見的網頁布局類型　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　設置表格屬性　79
7.4.3　合并單元格　79
7.4.4　選取表格對象　80
7.5　利用表格布局網頁實例　81
7.5.1　實例——利用表格排列數據　81
7.5.2　實例——“廠”字型布局　82
7.5.3　實例——“封面”型布局　87
7.5.4　實例——“國”字型布局網頁　90
7.6　經典習題與解答　97
7.6.1　填空題　97
7.6.2　上機操作題　98

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

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

第10章　CSS+div布局網頁　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定位網頁　154
10.2.1　創(chuàng)建div　154
10.2.2　Div的基本操作　156
10.2.3　div與表格的轉換　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　設計各塊的位置　161
10.4.3　用CSS定位　162
10.5　常見的布局類型　163
10.5.1　列固定寬度　163
10.5.2　列自適應　164
10.5.3　兩列固定寬度　165
10.5.4　兩列寬度自適應　166
10.5.5　兩列右列寬度自適應　167
10.5.6　三列浮動中間寬度自適應　168
10.6　經典習題與解答　169
10.6.1　填空題　169
10.6.2　上機操作題　169

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

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

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

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

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

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

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

第四部分 網站發(fā)布與維護篇　311

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

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

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

第五部分 綜合案例篇　341

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

第21章　設計在線購物網站　370
21.1　購物網站設計概述　370
21.2　購物網站主要特點分析　372
21.2.1　大信息量的頁面　372
21.2.2　頁面結構設計合理　372
21.2.3　完善的分類體系　373
21.2.4　商品圖片的使用　374
21.3　購物網站主要功能和欄目　374
21.4　設計數據庫和數據庫連接　377
21.4.1　創(chuàng)建數據庫表　377
22.4.2　創(chuàng)建數據庫連接　379
21.5　制作購物系統(tǒng)前臺頁面　379
21.5.1　制作商品分類展示頁面　379
21.5.2　制作商品詳細信息頁面　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　經典習題與解答　406

附錄A　網頁制作常見問題精解　407
答案　451