巧學巧用Dreamweaver 8制作網(wǎng)頁

第0章　網(wǎng)頁設計綜述　1
　　本章對網(wǎng)站開發(fā)的流程、頁面的幾種布局類型進行介紹，讓讀者在開始學習制作網(wǎng)頁之前，對網(wǎng)站有個整體的認識和了解。
0.1　網(wǎng)站開發(fā)的流程簡介　1
　　介紹網(wǎng)站的設計、制作流程
0.1.1　明確網(wǎng)站定位　1
0.1.2　收集信息和素材　2
0.1.3　策劃欄目內(nèi)容　2
0.1.4　設計頁面方案　2
0.1.5　制作頁面　2
0.1.6　實現(xiàn)后臺功能　3
0.1.7　整合與測試網(wǎng)站　3
0.2　頁面設計布局介紹　3
　　介紹頁面設計的幾種常見布局類型
0.2.1　版面構(gòu)成的原理　3
0.2.2　網(wǎng)頁版面構(gòu)成中常見的布局形式　4
1．“Ｔ”型布局　4
2．“口”型布局　5
3．“三”型布局　5
4．對稱對比布局　6
5．宣傳單型布局　6
6．門戶型網(wǎng)頁布局　7
7．區(qū)塊型布局　7
0.2.3　網(wǎng)頁布局設計的步驟　8
1．草圖　8
2．粗略布局　8
3．定案　8
0.2.4　網(wǎng)頁版面構(gòu)成的布局技巧　9
0.3　本章小結(jié)　9
第1章　初識Dreamweaver 8　11
　　本章中對一些與Internet有關的術(shù)語進行簡單的解釋，然后闡述與HTML有關的知識，接著對Dreamweaver MX 2004的各項功能進行介紹，最后講解如何使用Fireworks輔助網(wǎng)頁設計，為制作網(wǎng)頁提供更大的方便。
1.1　HTML基本知識　11
　　介紹Internet和HTML語言的基本知識
1.1.1　Internet基本術(shù)語　11
1.1.2　HTML文件基礎　12
1．HTML語言基本知識　12
2．HTML語言的標記符　13
1.1.3　使用HTML語言編寫簡單頁面　17
1.2　Dreamweaver 8快速入門　18
　　介紹Dreamweaver的程序界面及最基本的操作
1.2.1　Dreamweaver 8用戶界面　18
1．起始頁　19
2．文檔窗口　19
3．插入工具欄　20
4．“屬性”面板　21
5．其他面板　21
6．打開和關閉面板　22
7．面板重組　22
1.2.2　設置頁面屬性　22
1.2.3　插入頁面元素　24
1．插入文本　24
2．插入和編輯圖片　25
3．插入和編輯表格　26
4．行為　27
5．Dreamweaver 8的其他功能和特性　27
1.3　使用Fireworks輔助頁面設計　28
　　講解如何使用Fireworks輔助網(wǎng)頁設計
1.3.1　Fireworks 8用戶界面簡介　28
1．打開和創(chuàng)建圖像文件　28
2．常用工具欄　30
3．層與資源面板　31
1.3.2　使用Fireworks 8進行網(wǎng)頁圖像設計　32
1．網(wǎng)頁設計思想　32
2．插入文本　33
3．切割圖片　33
4．優(yōu)化圖片　34
5．導出圖像和HTML文件方法一　35
6．導出HTML文件方法二　36
1.4　本章小結(jié)　38
第2章　創(chuàng)建網(wǎng)頁和網(wǎng)站　39
　　本章主要介紹創(chuàng)建基本的網(wǎng)頁文檔和Dreamweaver站點的方法，包括使用Dreamweaver的基本功能對頁面進行簡單的編輯，并講解網(wǎng)站的有關概念。
2.1　創(chuàng)建簡單文檔　39
　　創(chuàng)建文檔并制作一個簡單網(wǎng)頁
2.1.1　創(chuàng)建空白文檔　40
2.1.2　年輕真好——制作一個簡單網(wǎng)頁　42
2.2　創(chuàng)建本地站點　44
　　創(chuàng)建本地站點并向站點中添加文件
1．本地文件夾　44
2．遠程文件夾　44
3．測試服務器文件夾　44
2.2.1　使用Dreamweaver 8創(chuàng)建本地站點　44
2.2.2　為本地站點添加文件　47
1．向本地站點添加新文件　47
2．向站點添加已有文件　49
3．使用地圖視圖功能查看站點文件間的鏈接關系　50
2.3　創(chuàng)建以模板為基礎的文檔　51
　　使用文檔模板創(chuàng)建文檔
2.3.1　使用已有模板創(chuàng)建文檔　51
2.3.2　創(chuàng)建以范例為基礎的文檔　52
1．從“頁面設計(CSS)”創(chuàng)建新文檔　52
2．從“入門頁面”創(chuàng)建新文檔　53
3．從“頁面設計(有輔助功能的)”創(chuàng)建新文檔　54
2.3.3　打開并編輯已有文檔　55
2.4　本章小結(jié)　55
第3章　編輯文檔　57
　　本章詳細說明了編輯HTML文檔的各種具體操作，并以實例進一步說明了各種操作的具體方法，同時還講解了如何為頁面添加鏈接，包括文字鏈接、圖片鏈接和熱點鏈接等內(nèi)容。
3.1　編輯文本和圖片　57
　　介紹格式化文本及在頁面中使用圖片的操作
3.1.1　使用屬性面板格式化文本　57
1．用“大小”下拉列表設置文字大小　58
2．使用“格式”下拉列表設置文字大小　59
3．設置文字的字體列表　59
4．設置文字的加粗、傾斜和顏色屬性　60
5．設置段落的對齊方式　61
6．創(chuàng)建清單　61
3.1.2　使用層疊樣式表格式化文本　62
1．創(chuàng)建樣式表　62
2．應用層疊樣式表　63
3．其他類型的層疊樣式表　65
3.1.3　使用和處理圖片　67
1．插入圖片　67
2．改變圖片的大小　67
3．對圖片重新取樣　68
4．裁剪圖片　68
5．調(diào)整圖片的亮度和對比度　69
6．使用Fireworks對圖片進行處理　69
3.1.4　名車風范——網(wǎng)頁實例制作　70
1．設置頁面屬性　70
2．添加文本　71
3．添加圖片　71
3.2　網(wǎng)頁超級鏈接　72
　　介紹為文字和圖片添加超級鏈接的操作
3.2.1　為文字添加超級鏈接　72
3.2.2　為圖片添加超級鏈接　74
3.3　如歌歲月——網(wǎng)頁實例制作　76
　　使用Fireworks和Dreamweaver的基本操作制作了一個簡單網(wǎng)頁
3.3.1　使用Fireworks 8輔助頁面設計　76
3.3.2　使用Dreamweaver編輯網(wǎng)頁　77
3.4　本章小結(jié)　78
第4章　網(wǎng)站建設與管理　79
　　本章介紹了建設、管理網(wǎng)站的方法，還介紹了管理和維護網(wǎng)站、測試網(wǎng)站、向遠程服務器上傳文件等操作。
4.1　網(wǎng)站建設　79
　　介紹網(wǎng)站建設之前的一些準備工作
1．網(wǎng)站的題材　79
2．網(wǎng)站形象設計　80
3．網(wǎng)站主頁的制作　80
4．網(wǎng)站結(jié)構(gòu)設計　80
4.2　網(wǎng)站管理與維護　81
　　介紹設置文件結(jié)構(gòu)和管理站點內(nèi)超鏈接等操作
4.2.1　設置網(wǎng)站文件結(jié)構(gòu)　81
4.2.2　管理站點內(nèi)的超級鏈接　82
1．檢查鏈接　83
2．更新鏈接　83
4.2.3　利用查找和替換功能管理站點　84
1．查找含有特定文本的標記　84
2．修改站點中的鏈接URL　85
4.3　網(wǎng)站的測試和優(yōu)化　86
　　介紹測試網(wǎng)站的瀏覽器兼容性和HTML優(yōu)化的操作
4.3.1　測試網(wǎng)站的瀏覽器兼容性　86
4.3.2　HTML優(yōu)化　89
1．清理Word生成的HTML代碼　89
2．清理HTML　90
3．添加/刪除Netscape調(diào)整修復　91
4.4　在Internet上建立網(wǎng)站　91
　　介紹域名申請與信息發(fā)布和向服務器上傳網(wǎng)站的操作
4.4.1　域名申請與信息發(fā)布　91
1．域名申請　91
2．信息發(fā)布　92
4.4.2　向服務器上傳網(wǎng)站　92
4.5　網(wǎng)站宣傳　94
　　介紹對網(wǎng)站進行宣傳的一些技巧和注意事項
1．登錄搜索引擎　94
2．友情鏈接　95
3．提供聯(lián)系電子郵箱　95
4.6　本章小結(jié)　96
第5章　添加頁面元素　97
　　本章通過4個實例深入講解向頁面中添加頁面元素的方法，包括使用表格顯示數(shù)據(jù)和內(nèi)容，添加音樂、視頻等多媒體，添加各種Flash元素，同時講解在頁面中添加和使用表單的方法。
5.1　使用表格　97
　　介紹如何向頁面中添加表格并對表格進行相關的設置
5.1.1　表格的基本操作　98
1．創(chuàng)建表格　98
2．設置表格屬性　100
3．拆分合并單元格　101
5.1.2　新聞網(wǎng)——網(wǎng)頁實例制作　102
1．使用Fireworks對標題欄圖片進行切片　103
2．制作主頁　103
5.2　添加多媒體及控件——媒體天地　107
　　介紹添加多媒體及控件的基本操作
5.2.1　添加多媒體及控件的基礎操作　107
1．添加背景音樂　108
2．添加音頻視頻文件　108
5.2.2　媒體天地——網(wǎng)頁制作實例　110
1．首頁的制作　111
2．為首頁做超鏈接　113
5.3　添加Flash元素　113
　　介紹添加Flash文本、Flash按鈕和Flash動畫等Flash元素的操作
5.3.1　添加Flash元素的基本操作　114
1．添加Flash文本　114
2．添加Flash按鈕　116
3．添加Flash電影　118
5.3.2　Flash精品驛站——網(wǎng)頁制作實例　119
1．制作基本頁面　119
2．添加圖片和Flash元素　120
5.4　表單的使用　123
　　介紹在網(wǎng)頁中使用表單的基本操作
5.4.1　表單的基本操作　124
1．添加文本字段　124
2．添加文本區(qū)域　126
3．添加按鈕　127
4．添加復選框　128
5．添加單選按鈕　128
6．添加列表/菜單　129
7．添加文件域　130
8．添加圖像域　130
9．添加隱藏域　131
10．添加單選按鈕組　131
11．添加跳轉(zhuǎn)菜單　132
5.4.2　極限運動注冊專區(qū)——網(wǎng)頁制作實例　133
1．制作基本頁面　133
2．添加注冊表單　134
5.5　本章小結(jié)　136
第6章　層疊樣式表　137
　　本章介紹使用層疊樣式表對各種頁面元素設定樣式的基本操作，同時介紹一下對圖片做各種效果處理的操作。
6.1　層疊樣式表的基本應用　137
　　創(chuàng)建和對頁面元素應用層疊樣式表
6.1.1　創(chuàng)建和編輯層疊樣式表　138
6.1.2　應用層疊樣式表　144
1．對頁面元素應用層疊樣式表　144
2．導出層疊樣式表文件　146
3．鏈接外部樣式表　146
6.1.3　CSS濾鏡效果　148
6.2　精品軟件公司——網(wǎng)頁制作實例　153
　　通過實例介紹制作基本頁面、定義和應用層疊樣式表的方法
6.2.1　制作基本頁面　153
6.2.2　定義層疊樣式表　154
6.2.3　應用層疊樣式表　155
6.3　本章小結(jié)　156
第7章　定位頁面　157
　　本章在前面已經(jīng)學過的表格操作的基礎上介紹有關表格的高級操作，還有如何使用布局表格和布局單元格進行定位網(wǎng)頁的知識，同時還詳細介紹使用層和框架進行頁面定位的技術(shù)。
7.1　表格定位頁面　157
　　介紹使用布局表格和布局單元格來制作頁面的方法
7.1.1　表格高級操作　158
1．設置表格分隔線和邊框效果　158
2．調(diào)整表格大小　160
7.1.2　使用布局表格和布局單元格　161
1．布局視圖模式　161
2．創(chuàng)建布局表格　163
3．創(chuàng)建布局單元格　164
4．設置布局表格和布局單元格的屬性　164
5．設置布局寬度　165
6．使用空白圖片　166
7.1.3　大家一起學英文——網(wǎng)頁制作實例　168
1．使用布局表格和布局單元格規(guī)劃頁面結(jié)構(gòu)　168
2．制作基本頁面　169
7.2　層定位頁面　171
　　介紹層的基本知識和使用層制作頁面的方法
7.2.1　層的基本知識　172
1．創(chuàng)建和移動層　172
2．設置層屬性　173
3．嵌套層的使用　174
4．將層轉(zhuǎn)換成表格　176
7.2.2　網(wǎng)絡咖啡館——網(wǎng)頁制作實例　180
1．制作基本頁面　180
2．添加頁面內(nèi)容　181
7.3　嵌入式框架定位頁面　182
　　介紹使用嵌入式框架來定位頁面的方法
7.3.1　嵌入式框架基本知識　183
1．創(chuàng)建嵌入式框架　183
2．為嵌入式框架設置鏈接　186
7.3.2　文學咖啡館——網(wǎng)頁制作實例　186
1．制作首頁頁面　187
2．制作鏈接頁面　188
3．使用嵌入式框架　188
7.4　框架定位頁面　189
　　介紹使用框架和框架集來定位頁面的方法
7.4.1　框架和框架集基本知識　189
1．創(chuàng)建框架和框架集　190
2．刪除框架　192
3．編輯框架　192
4．編輯框架內(nèi)容　193
7.4.2　音樂天堂——網(wǎng)頁制作實例　194
1．制作框架集頁面　194
2．制作顯示在框架中的頁面　195
3．將HTML文件鏈接到框架　197
7.5　本章小結(jié)　200
第8章　網(wǎng)頁動態(tài)效果　201
　　本章主要講解使用Dreamweaver的行為功能和JavaScript腳本代碼及其他腳本代碼為網(wǎng)頁添加各種網(wǎng)頁動態(tài)效果的操作。
8.1　行為　201
　　介紹向頁面添加各種行為的基本方法
8.1.1　行為的基本操作　202
1．行為基本知識　202
2．交換圖像與交換圖像恢復　202
3．彈出信息　205
4．打開瀏覽器窗口　206
5．播放聲音　207
6．改變屬性　208
7．顯示彈出式菜單　209
8．檢查插件　210
9．檢查瀏覽器　211
10．設置導航欄圖像　211
11．設置狀態(tài)欄文本　213
12．轉(zhuǎn)到URL　213
13．預先載入圖像　214
14．拖動層　214
15．顯示-隱藏層　216
8.1.2　公司網(wǎng)站——網(wǎng)頁制作實例　217
1．制作基本頁面　217
2．向頁面中添加行為　218
8.2　JavaScript腳本代碼　219
　　介紹使用JavaScript代碼添加動態(tài)效果的方法
8.2.1　使用JavaScript代碼的基本操作　220
1．在網(wǎng)頁中顯示時間　220
2．垂直滾動的文字　221
3．隨時間顯示不同的問候　222
4．彩色鏈接文字　223
8.2.2　文化長廊——網(wǎng)頁制作實例　225
1．制作基本網(wǎng)頁　225
2．為首頁添加JavaScript腳本代碼　225
3．為圖片欣賞頁面添加JavaScript腳本代碼　231
8.3　拼圖游戲　232
　　介紹制作更為復雜的完全不借助任何插件的網(wǎng)頁游戲，需要綜合運用“時間軸”和“拖拽圖層”的行為
8.3.1　準備圖層　233
8.3.2　使圖片動態(tài)分離　234
8.3.3　加入開始按鈕　235
8.3.4　設置可拖拽圖層　237
8.3.5　調(diào)用JavaScript技巧　239
8.3.6　進一步地完善和改進　242
8.4　本章小結(jié)　243
第9章　庫和模板的應用　245
　　本章詳細介紹利用模板和庫功能來提高工作效率，減少在制作網(wǎng)頁和建設網(wǎng)站過程中的許多勞動，同時使網(wǎng)站和網(wǎng)頁的更新和維護更加方便的方法。
9.1　庫　245
　　介紹使用庫功能的基本方法
9.1.1　庫的基本操作　246
1．定義本地站點　246
2．創(chuàng)建庫項目　247
3．使用庫項目　247
4．更新庫項目　248
9.1.2　電視在線——使用庫功能來制作網(wǎng)站　248
1．定義本地站點　249
2．制作標題欄庫項目　249
3．制作版權(quán)信息庫項目　251
4．制作首頁基本頁面　251
5．制作二級頁面　253
6．更改庫項目和更新網(wǎng)頁　254
7．從源文件中分離庫項目　255
9.2　模板　256
　　介紹使用模板功能的基本方法
9.2.1　模板的基礎知識　257
9.2.2　網(wǎng)絡商務驛站——使用模板制作網(wǎng)頁　257
1．創(chuàng)建空白網(wǎng)頁模板　257
2．編輯模板頁　258
3．應用模板制作網(wǎng)頁　261
4．修改模板并更新網(wǎng)頁　263
5．分離模板　264
9.3　本章小結(jié)　264
第10章　服務器端程序開發(fā)入門　265
　　這一章是本書惟一介紹服務器端技術(shù)的一章，目的是使讀者對如何使用Dreamweaver來開發(fā)服務器端的程序有一個初步的了解。
10.1　動態(tài)網(wǎng)頁與ASP　265
　　介紹動態(tài)網(wǎng)頁的概念和作用
10.2　ASP的開發(fā)　267
　　介紹ASP運行環(huán)境的配置方法和幾種基本的ASP程序
10.2.1　ASP運行環(huán)境及配置　267
10.2.2　熟悉ASP程序　269
10.3　制作留言簿　272
　　通過完整的網(wǎng)上留言簿實例掌握ASP的應用方法
10.3.1　準備工作　273
10.3.2　建立站點　274
10.3.3　建立數(shù)據(jù)庫　274
10.3.4　制作演示留言頁面(index.asp)　275
10.3.5　制作添加留言頁面(insert.asp)　280
第11章　綜合實例(一)——網(wǎng)絡公司網(wǎng)站　283
　　本章通過制作完整的網(wǎng)站的綜合實例，引導讀者掌握開發(fā)網(wǎng)站的基本技術(shù)和整個網(wǎng)站制作的工作流程。
11.1　實例概述　283
11.2　網(wǎng)站策劃　284
11.3　使用Fireworks制作網(wǎng)頁效果　285
11.3.1　繪制網(wǎng)頁基本效果　285
11.3.2　繪制導航欄　287
11.3.3　繪制網(wǎng)頁正文效果　288
11.3.4　添加裝飾圖標　289
11.3.5　繪制子頁面效果　291
11.4　使用Dreamweaver 8創(chuàng)建站點　291
11.5　使用Fireworks切片并輸出首頁　292
1．繪制首頁的切片　292
2．切片輸出　293
11.6　在Dreamweaver 8中編輯首頁　294
1．背景化處理相應位置圖像　294
2．插入文本內(nèi)容　294
3．設置熱區(qū)并定義熱區(qū)鏈接　295
11.7　使用Fireworks切片并導出二級頁面　295
1．將二級頁面作為JPEG格式圖片插入到首頁PNG文件的新圖層中　295
2．修改二級頁面切片并導出　296
11.8　在Dreamweaver中編輯導出的二級頁面　296
11.9　使用Fireworks切片并輸出模板　297
1．繪制切片參考線　297
2．輸出切片　297
11.10　使用Dreamweaver編輯模板頁　298
1．設置熱區(qū)并定義熱區(qū)鏈接　299
2．背景化處理相應位置的圖像　299
3．設置可編輯區(qū)域完成模板的制作　299
11.11　應用模板創(chuàng)建其他二級頁面　300
11.12　重新檢查所有頁面鏈接并瀏覽最終效果　300
第12章　綜合實例(二)——汽車時代網(wǎng)站　303
　　本章通過制作完整的網(wǎng)站的綜合實例，引導讀者掌握開發(fā)網(wǎng)站的基本技術(shù)和整個網(wǎng)站制作的工作流程。
12.1　實例概述　303
12.2　網(wǎng)站策劃　304
12.3　使用Fireworks制作網(wǎng)頁效果　305
12.3.1　繪制網(wǎng)頁基本效果　305
12.3.2　繪制導航欄　306
12.3.3　繪制正文欄效果　308
12.3.4　添加素材圖片　310
12.3.5　繪制網(wǎng)頁鏈接頁效果　311
12.4　使用Dreamweaver 8創(chuàng)建站點　311
12.5　使用Fireworks切片并輸出模板　312
1．繪制切片參考線　312
2．輸出切片　312
12.6　使用Dreamweaver編輯模板頁　313
1．設置熱區(qū)并定義熱區(qū)鏈接　313
2．背景化處理相應位置圖像　314
3．制作表單區(qū)域　314
4．設置可編輯區(qū)域完成模板的制作　315
12.7　在Fireworks中制作首頁并切片輸出HTML　315
12.8　在Dreamweaver中制作首頁　317
　　將Fireworks導出的首頁初始文檔插入到可編輯區(qū)域中　317
12.9　用Flash制作Banner　318
12.9.1　制作動態(tài)文字效果　318
12.9.2　制作遮罩效果　320
12.10　使用Fireworks切片并導出二級頁面　322
　　制作僅包含可編輯區(qū)域的二級頁面文檔　322
12.11　使用Dreamweaver編輯二級頁面　323
12.12　應用模板創(chuàng)建其他二級頁面　324
12.13　為所有頁面輸入文本內(nèi)容　324
12.14　重新檢查所有頁面鏈接　324
12.15　插入Flash Banner并瀏覽最終效果　325