巧學(xué)巧用：Dreamweaver Fireworks Flash制作網(wǎng)頁習(xí)題精解

第一部分　Dreamweaver

第1章　基礎(chǔ)知識　1
　　本章練習(xí)主要涉及Dreamweaver必備的知識和技能，包括在網(wǎng)頁中插入圖片、變換標(biāo)題格式、文字的換行、字體的設(shè)置、為圖片和文字添加鏈接等內(nèi)容。
1.1　在網(wǎng)頁中插入圖片　2
　　在網(wǎng)頁制作過程中，插入圖片的方法
1.2　變換標(biāo)題的格式　2
　　更改文字屬性的基礎(chǔ)操作
1.3　段落換行　3
　　掌握文本屬性的應(yīng)用
1.4　字體大小、顏色的設(shè)置　4
　　利用屬性面板，改變網(wǎng)頁中文本的字體和顏色
1.5　列表符號的應(yīng)用　4
　　練習(xí)設(shè)置特殊列表符號，并將其應(yīng)用到網(wǎng)頁中
1.6　用CSS定義文字樣式　5
　　初步認(rèn)識CSS樣式，并應(yīng)用CSS定義文字樣式
1.7　圖片與文字的對齊方式　6
　　掌握屬性面板中的幾種對齊方式
1.8　為按鈕添加鏈接　6
　　鏈接的設(shè)置方法
1.9　為文字添加鏈接　7
　　為文字添加鏈接
1.10　設(shè)置錨記鏈接　8
　　“插入→命名錨記”命令的應(yīng)用
1.11　熱區(qū)的設(shè)置　9
　　“矩形熱點工具”和“多邊型熱點工具”的應(yīng)用
1.12　插入水平線　9
　　水平線的插入方法
1.13　交換圖像(一)　10
　　“交換圖像”命令的應(yīng)用
1.14　交換圖像(二)　10
　　為按鈕添加“交換圖像”行為并設(shè)置相應(yīng)的鏈接
1.15　設(shè)置郵件鏈接　11
　　為文字設(shè)置郵件鏈接
1.16　設(shè)置下載鏈接　12
　　給文字添加下載鏈接

第2章　頁面布局　13
　　本章主要介紹常見的網(wǎng)頁布局和實現(xiàn)方法。
2.1　標(biāo)準(zhǔn)模式下使用表格設(shè)計版式　13
2.1.1　自定義表格樣式　13
　　“命令→格式化表格”命令的應(yīng)用
2.1.2　單線表格的制作　14
　　單線表格的制作方法
2.1.3　表格屬性的綜合應(yīng)用　14
　　表格屬性的綜合應(yīng)用
2.2　使用框架設(shè)計版式　15
2.2.1　“上方固定”模式的框架　15
　　創(chuàng)建一個“上方固定”模式的框架，并制作成頁面
2.2.2　制作上下結(jié)構(gòu)的框架頁面　16
　　“插入→HTML→框架→對齊上緣”命令的應(yīng)用
2.2.3　廠字型框架布局設(shè)計　16
　　“上方固定，左側(cè)嵌套”模式的應(yīng)用
2.2.4　上中下結(jié)構(gòu)框架的布局　17
　　“對齊上緣”命令的應(yīng)用
2.3　使用布局表格設(shè)計版式　18
2.3.1　國字型頁面布局　18
　　在布局模式下繪制表格樣式
2.3.2　不規(guī)則布局　19
　　繪制布局表格
2.3.3　左右對稱型布局　20
　　左右結(jié)構(gòu)頁面的布局方法
2.4　結(jié)合Fireworks進行頁面綜合布局設(shè)計　22
　　Fireworks與Dreamweaver的技術(shù)銜接
2.4.1　左中右布局　22
2.4.2　右導(dǎo)航布局　23
2.4.3　上中下結(jié)構(gòu)的布局　24
2.4.4　大型綜合主頁面布局(一)　26
2.4.5　大型綜合主頁面布局(二)　27

第3章　網(wǎng)站中的交互　29
　　本章主要通過練習(xí)借助JavaScript和Dreamweaver提供的“行為”功能為頁面添加互動的特性。
3.1　交換圖像　29
　　掌握在網(wǎng)頁制作過程中插入圖片的方法
3.2　彈出式對話框　29
　　設(shè)置彈出信息行為
3.3　彈出瀏覽器窗口　30
　　添加彈出瀏覽器行為
3.4　拼圖效果　31
　　拖動層行為的應(yīng)用
3.5　調(diào)用JavaScript　32
　　JavaScript程序的調(diào)用方法

第4章　模板與庫　34
　　本章主要練習(xí)使用Dreamweaver中的模板與庫功能來制作相同結(jié)構(gòu)的網(wǎng)頁。
4.1　制作基于模板的實例　34
　　制作基于模板的實例
4.2　套用模板到頁面　35
　　套用模板
4.3　嵌套模板　36
　　套用模板
4.4　在頁面中添加和使用庫項目　37
　　庫的應(yīng)用
4.5　修改庫項目以更新整個站點　38
　　修改庫項目更新站點

第5章　CSS的應(yīng)用　40
　　本章主要通過練習(xí)掌握使用CSS控制和美化網(wǎng)頁的方法。
5.1　內(nèi)置CSS樣式效果　40
　　內(nèi)置CSS樣式效果的應(yīng)用
5.2　用CSS定義背景色　41
　　使用CSS定義背景顏色
5.3　自定義項目符號的圖像　42
　　應(yīng)用CSS樣式自定義項目符號的圖像
5.4　附加外部CSS樣式文件　42
　　導(dǎo)入CSS樣式

第二部分　Fireworks

第6章　按鈕的制作　44
　　本章主要練習(xí)利用Fireworks設(shè)計制作網(wǎng)頁的按鈕圖片的方法。
6.1　簡單按鈕　44
　　填充的應(yīng)用
6.2　繪制立體按鈕　45
　　“線形漸變”的運用
6.3　繪制水晶按鈕　45
　　熟悉透明顏色的操作，給按鈕添加高光感
6.4　繪制播放器開關(guān)按鈕　46
　　“邊緣羽化”的應(yīng)用
6.5　繪制郵件按鈕　46
　　高光和透明漸變的運用
6.6　使用資源效果的按鈕　47
　　“資源樣式”的應(yīng)用
6.7　繪制開關(guān)按鈕　47
　　“紋理”的運用
6.8　繪制圓形水晶按鈕　48
　　使用矢量剪切繪制水晶按鈕
6.9　金屬按鈕　48
　　“凸起浮雕”、“內(nèi)斜角”和“外斜角”的應(yīng)用
6.10　立體漸變按鈕　49
　　“橫排文字蒙版工具”和“透視變換”的結(jié)合應(yīng)用

第7章　Banner的制作　50
　　本章通過練習(xí)掌握利用Fireworks制作網(wǎng)頁Banner的方法。
7.1　簡單的卡通Banner　50
　　將連續(xù)圖片在Fireworks中制作為GIF格式的動態(tài)畫面
7.2　制作背景層Banner　51
　　“圖層→共享交疊幀”的運用
7.3　運用分散到幀制作Banner　51
　　“幀→分散到幀”的運用
7.4　制作化妝品Banner　52
　　使用圖片制作商業(yè)Banner
7.5　制作按鈕Banner　52
　　按鈕和動態(tài)圖片制作結(jié)合運用

第8章　制作導(dǎo)航欄　53
　　本章通過練習(xí)掌握利用Fireworks制作各類網(wǎng)頁導(dǎo)航欄的方法。
8.1　立體導(dǎo)航欄　53
　　使用“線形漸變”工具繪制導(dǎo)航欄
8.2　漸變效果的導(dǎo)航欄　54
　　“修改→組合路徑→聯(lián)合/交集/打孔/裁切”等命令的綜合應(yīng)用
8.3　使用材質(zhì)制作導(dǎo)航欄　55
　　使用“屬性→紋理”的效果
8.4　對比效果的導(dǎo)航　56
　　合理應(yīng)用顏色對比度來提高導(dǎo)航欄的制作效果
8.5　情人網(wǎng)站導(dǎo)航　57
　　應(yīng)用“漸變”和“羽化”制作出適合情人節(jié)使用的網(wǎng)頁導(dǎo)航欄
8.6　裝飾型導(dǎo)航欄　57
　　填充邊緣顏色繪制裝飾導(dǎo)航欄
8.7　融合網(wǎng)頁　58
　　利用網(wǎng)頁中的效果制作導(dǎo)航欄
8.8　金屬導(dǎo)航欄　59
　　應(yīng)用金屬漸變效果制作導(dǎo)航欄
8.9　使用素材創(chuàng)建導(dǎo)航　60
　　利用素材制作導(dǎo)航欄
8.10　水晶效果的導(dǎo)航欄　61
　　利用水晶效果繪制導(dǎo)航欄

第9章　網(wǎng)頁風(fēng)格設(shè)計　62
　　本章通過練習(xí)掌握利用Fireworks制作出各種風(fēng)格的、漂亮的網(wǎng)頁的方法。
9.1　左置導(dǎo)航欄　62
　　使用“線形漸變”工具繪制接角
9.2　立體風(fēng)格網(wǎng)頁　63
　　對“修改→組合路徑→聯(lián)合/交集/打孔/裁切”等命令的綜合應(yīng)用
9.3　圓形接角　64
　　使用“圓角矩形”工具繪制圓形接角
9.4　分離式網(wǎng)頁風(fēng)格　65
　　“線形漸變”工具的應(yīng)用
9.5　動感網(wǎng)頁風(fēng)格　66
　　“線形漸變”工具的應(yīng)用
9.6　公告欄效果　67
　　剪切的應(yīng)用
9.7　圓形風(fēng)格在網(wǎng)頁中的應(yīng)用　68
　　“圓形”工具的應(yīng)用
9.8　區(qū)域構(gòu)圖的運用　68
　　“線形漸變”工具的應(yīng)用
9.9　流線形在網(wǎng)頁中的運用　69
　　使用“鋼筆”工具
9.10　色塊風(fēng)格的網(wǎng)頁　69
　　使用色塊變化制作接角效果

第10章　設(shè)計配飾　70
　　本章通過練習(xí)掌握利用Fireworks設(shè)計網(wǎng)頁配飾的方法。
10.1　簡單便條裝飾　70
　　使用透明漸變繪制便條效果
10.2　分割裝飾　71
　　在一些按鈕中添加不同元素，制作為網(wǎng)頁圖標(biāo)效果
10.3　按鈕裝飾(一)　72
　　在一些按鈕中添加不同元素，制作為網(wǎng)頁圖標(biāo)效果
10.4　按鈕裝飾(二)　72
　　繼續(xù)上一節(jié)的練習(xí)，同時添加一些暗示形裝飾，目的是強調(diào)裝飾區(qū)域
10.5　居中裝飾效果　73
　　當(dāng)頁面都是橫向排版時，添加小的裝飾打破呆板的構(gòu)圖效果
10.6　情人網(wǎng)站　74
　　“紋理”和“羽化”效果的應(yīng)用
10.7　公告樣式的裝飾　75
　　在實際網(wǎng)頁應(yīng)用中的裝飾效果
10.8　目錄效果的裝飾　76
　　漸變和透明度的結(jié)合使用
10.9　廣告樣式的裝飾　77
　　掌握制作廣告欄的裝飾
10.10　左置效果的裝飾　78
　　利用素材圖片制作導(dǎo)航欄的裝飾效果

第11章　網(wǎng)頁細(xì)節(jié)調(diào)整　79
　　本章通過練習(xí)掌握網(wǎng)頁設(shè)計中的細(xì)節(jié)調(diào)整，讓讀者體會細(xì)節(jié)對于設(shè)計的整體效果的巨大作用和影響。
11.1　鏈接按鈕的制作　79
　　將連續(xù)圖片在Fireworks中制作為GIF格式的動態(tài)畫面
11.2　中心裝飾細(xì)節(jié)的制作　80
　　“線形漸變”的運用
11.3　鏈接導(dǎo)航的細(xì)節(jié)制作　80
　　光照效果的繪制方法
11.4　情人網(wǎng)站導(dǎo)航按鈕　81
　　“羽化”邊緣的應(yīng)用
11.5　使用圖片制作細(xì)節(jié)效果　82
　　素材在網(wǎng)頁中的應(yīng)用

第12章　頁面布局　83
　　本章通過練習(xí)掌握精致的網(wǎng)頁設(shè)計的布局方法。
12.1　右置布局　83
　　在網(wǎng)頁設(shè)計中常見的布局方法之一
12.2　居中布局　84　　一般應(yīng)用于網(wǎng)站內(nèi)容不是很多的情況
12.3　三分欄布局　85
　　可以有條理地將網(wǎng)頁內(nèi)容分割出來，主要應(yīng)用于一些門戶網(wǎng)站
12.4　左置布局 86
　　將鏈接子頁面放置在視覺最容易發(fā)現(xiàn)的地方
12.5　中心布局　86
　　這個構(gòu)圖方法很常用，視覺上比較舒服
12.6　分散型布局　87
　　分散型構(gòu)圖的網(wǎng)頁大多文字和圖形面積一致

第三部分　Flash

第13章　圖形的繪制及編輯　90
　　本章在第1章中CSS基礎(chǔ)練習(xí)的基礎(chǔ)上，進一步練習(xí)使用CSS制作網(wǎng)頁。
13.1　繪制月亮　90
　　使用“選擇工具”對線條進行變形處理
13.2　繪制玻璃杯　91
　　練習(xí)“任意變形工具”、“線性漸變填充”以及濾鏡中“調(diào)整顏色”命令的應(yīng)用
13.3　繪制蝴蝶　92
　　練習(xí)使用“線條工具”、“選擇工具”和“任意變形工具”
13.4　繪制煙囪　94
　　熟練應(yīng)用“鉛筆工具”和“矩形工具”繪制圖形
13.5　繪制鬧鐘　95
　　“矩形工具”、“橢圓工具”和“線條工具”的使用方法
13.6　繪制花朵　96
　　理解“繪制對象”功能的含義，以及“復(fù)制并應(yīng)用變形”功能的作用
13.7　繪制桌子　98
　　對“線條工具”和“鉛筆工具”以及“顏料桶工具”的使用
13.8　繪制QQ表情　99
　　著重掌握濾鏡中“調(diào)整顏色”和“投影”效果的含義以及用法
13.9　繪制氣球　100
　　“放射狀漸變填充”以及應(yīng)用“填充變形工具”對漸變填充進行變形
13.10　繪制魚兒　101
　　使用“線條工具”、“橢圓工具”、“鉛筆工具”和“顏料桶工具”

第14章　靜態(tài)文字效果　103
　　本章是對上一章的復(fù)習(xí)，制作一些生動有趣的文字效果，深入對各種繪圖工具以及相關(guān)屬性的掌握。
14.1　金屬文字　103
　　“線性填充”和“填充變形工具”綜合應(yīng)用
14.2　彩色線框文字　104
　　將“線性填充”和“填充變形工具”作用于線條之上
14.3　浮雕文字　105
　　對文字進行重疊放置，制作出浮雕效果
14.4　彩圖文字　105
　　“混色器”面板中的“位圖填充”模式的應(yīng)用
14.5　塑料文字　106
　　“修改→形狀→柔化填充邊緣”命令的含義以及用法
14.6　發(fā)光文字　107
　　使用濾鏡中的“發(fā)光”和“投影”效果
14.7　披雪文字　108
　　“橡皮擦工具”和筆觸樣式中“點描”效果的應(yīng)用
14.8　立體文字　109
　　“線性漸變填充”和不透明度的設(shè)置

第15章　創(chuàng)建動畫　111
　　本章通過練習(xí)掌握變形動畫、運動動畫和逐幀動畫的制作方法。
15.1　視覺變幻效果　111
　　創(chuàng)建形狀補間動畫以及溢出模式中“鏡像”模式的應(yīng)用
15.2　行駛的汽車　111
　　練習(xí)創(chuàng)建動畫補間動畫，達到汽車行駛的效果
15.3　舞動翅膀的蝴蝶　113
　　創(chuàng)建動畫補間動畫，根據(jù)蝴蝶翅膀揮動時的規(guī)律制作出動畫效果
15.4　漏水的龍頭　114
　　創(chuàng)建形狀補間動畫，掌握滴水時狀態(tài)變化
15.5　圓形變方形　115
　　練習(xí)創(chuàng)建形狀補間動畫
15.6　樹葉上滴下的水珠　115
　　創(chuàng)建形狀補間動畫
15.7　飛行的小鳥　116
　　掌握逐幀動畫的制作方法
15.8　倒計數(shù)　116
　　練習(xí)逐幀動畫的制作方法
15.9　制作打印機打印動畫　117
　　練習(xí)創(chuàng)建形狀補間動畫
15.10　制作閃電　118
　　練習(xí)閃電的繪制方法，掌握元件與元件之間的相互嵌套關(guān)系

第16章　引導(dǎo)線動畫和遮罩動畫　119
　　本章通過練習(xí)掌握引導(dǎo)線圖層和遮罩圖層的應(yīng)用。
16.1　眼冒金星　119
　　練習(xí)創(chuàng)建引導(dǎo)層，并通過繪制引導(dǎo)線制作動畫效果
16.2　制作地球旋轉(zhuǎn)動畫　119
　　動態(tài)遮罩效果的制作技巧
16.3　放大鏡效果　120
　　遮罩動畫的制作方法以及濾鏡中“投影”效果的應(yīng)用
16.4　手電照射動畫　122
　　遮罩動畫的制作方法以及不透明度的設(shè)置方法
16.5　波浪文字　123
　　遮罩層和運動、形狀動畫的結(jié)合運用
16.6　上升的水泡　125
　　應(yīng)用引導(dǎo)層原理，制作一個水泡上升并逐漸消失的動畫效果
16.7　百葉窗效果　126
　　影片剪輯元件的相互嵌套以及遮罩原理的應(yīng)用
16.8　螢火蟲　126
　　練習(xí)創(chuàng)建影片剪輯，并在影片剪輯中應(yīng)用引導(dǎo)層動畫效果
16.9　水波漣漪　127
　　影片剪輯的嵌套使用
16.10　飄落的楓葉　128
　　“套索”工具和引導(dǎo)線的綜合應(yīng)用

第17章　制作按鈕　129
　　本章通過練習(xí)掌握利用Flash制作動態(tài)的、具有交互性的按鈕的方法。
17.1　變換表情的按鈕　129
　　理解按鈕元件中的“彈起”、“指針經(jīng)過”和“按下”3種狀態(tài)含義
17.2　立體按鈕　129
　　理解按鈕元件中的“彈起”和“指針經(jīng)過”狀態(tài)的含義及用法
17.3　繪制一個靜態(tài)的播放按鈕　130
　　運用“橢圓工具”繪制一個圓形按鈕，并為其填充適當(dāng)?shù)纳?br />17.4　搖晃的鈴鐺　131
　　在按鈕元件中套用影片剪輯元件
17.5　抓不住的蜻蜓　132
　　練習(xí)為按鈕添加腳本行為，使其控制影片中的按鈕行為
17.6　制作3D方塊按鈕　133
　　3D按鈕的制作技巧
17.7　彈出菜單　134
　　為按鈕添加“點擊”動作腳本
17.8　電視畫面效果　134
　　為按鈕添加“滑過”動作行為

第18章　添加聲音　135
　　本章通過練習(xí)掌握為按鈕、動畫添加聲音的方法。
18.1　電鈴聲　135
　　聲音的導(dǎo)入方法與添加聲音效果
18.2　添加流水聲　135
　　練習(xí)在圖層上添加聲音
18.3　添加碰撞聲　136
　　理解聲音效果中“淡出”和“從左到右淡出”效果的含義
18.4　聲音的播放和停止　137
　　練習(xí)使用動作腳本控制聲音
18.5　控制音量的大小　138
　　用動作腳本控制聲音的增大和減小
18.6　選擇播放歌曲　138
　　“全局函數(shù)→時間軸控制→gotoAndPlay”命令的應(yīng)用

第19章　ActionScript的應(yīng)用　139
　　本章通過練習(xí)掌握ActionScript的應(yīng)用方法，對動畫中的元素進行更靈活的控制。
19.1　隨鼠標(biāo)移動的探照燈　139
　　“startDrag”函數(shù)的應(yīng)用
19.2　活動的坐標(biāo)軸　139
　　使用“全局函數(shù)→影片剪輯控制→getProperty”函數(shù)控制影片剪輯的坐標(biāo)位置
19.3　制作下雨效果　140
　　“duplicateMovieClip”和“if ”語句的應(yīng)用
19.4　制作風(fēng)景導(dǎo)航　141
　　“On”語句和“gotoAndPlay”函數(shù)的應(yīng)用
19.5　隨光標(biāo)移動的蜜蜂　141
　　“全局函數(shù)→影片剪輯控制→start Drag”函數(shù)和“mouse.hide()”方法的運用
19.6　制作控制影片大小的動畫　141
　　“setProperty”函數(shù)和“getProperty”函數(shù)的運用
19.7　光標(biāo)經(jīng)過處出現(xiàn)螢光效果　142
　　在影片剪輯中嵌套按鈕元件，使用(.)方法控制影片播放
19.8　可隨意拖動的圖片　142
　　使用影片剪輯控制腳本

第四部分　綜合練習(xí)

第20章　實戰(zhàn)練習(xí)(一)　144
　　本章練習(xí)結(jié)合使用Dreamweaver、Fireworks、Flash等3個軟件從零開始制作一個完整的、專業(yè)的網(wǎng)站。
20.1　繪制網(wǎng)頁草圖　144
20.2　處理素材圖片　144
20.3　使用Fireworks繪制主頁和子頁　145
20.4　使用Fireworks制作主頁切片并輸出網(wǎng)頁　146
20.5　用Fireworks制作按鈕交換圖像　147
20.6　在Flash中制作Banner動畫　147
20.7　使用Dreamweaver建立站點　148
20.8　在Dreamweaver中編輯主頁面　148
20.9　為頁面添加文字內(nèi)容　149
20.10　設(shè)置主頁圖像鏈接按鈕　150
20.11　輸出鏈接頁切片和頁面　151
20.12　制作鏈接頁　151
20.13　制作其他鏈接頁　152
20.14　檢查所有的頁面和鏈接，完成整個制作　153

第21章　實戰(zhàn)練習(xí)(二)　155
　　本章練習(xí)結(jié)合使用Dreamweaver、Fireworks、Flash等3個軟件從零開始制作一個商業(yè)網(wǎng)站。
21.1　繪制網(wǎng)頁草圖　155
21.2　處理素材圖片　155
21.3　使用Fireworks制作主頁面和子頁面　156
21.4　使用Dreamweaver創(chuàng)建站點　157
21.5　使用Fireworks切片并輸出為HTML頁　157
21.6　使用Fireworks制作按鈕交換圖像　158
21.7　在Flash中制作Banner動畫　159
21.8　將制作完成的Flash Banner導(dǎo)入頁面　159
21.9　為主頁添加文字內(nèi)容　160
21.10　設(shè)置主頁動態(tài)按鈕(交換圖像的應(yīng)用)　161
21.11　輸出鏈接頁切片和頁面　161
21.12　在Dreamweaver中繼續(xù)制作鏈接頁　162
21.13　以鏈接頁為基礎(chǔ)創(chuàng)建模板　163
21.14　應(yīng)用模板創(chuàng)建其他二級鏈接頁面　164
21.15　將做好的二級頁面與首頁鏈接　165
21.16　檢查所有的頁面和鏈接，完成整個制作　165

第22章　實戰(zhàn)練習(xí)(三)　167
　　本章練習(xí)結(jié)合使用Dreamweaver、Fireworks、Flash等3個軟件從零開始制作一個商業(yè)網(wǎng)站。
22.1　繪制網(wǎng)頁草圖　167
22.2　處理素材圖片　167
22.3　使用Fireworks繪制網(wǎng)頁頁面　168
22.4　使用Dreamweaver創(chuàng)建站點　169
22.5　使用Fireworks切片并輸出為HTML頁　169
22.6　使用Fireworks制作按鈕交換圖像　170
22.7　制作Banner動畫　171
22.8　將制作完成的Flash Banner導(dǎo)入頁面　172
22.9　為主頁添加文字內(nèi)容　172
22.10　設(shè)置主頁動態(tài)按鈕(交換圖像的應(yīng)用)　173
22.11　輸出鏈接頁切片和頁面　174
22.12　在Dreamweaver中繼續(xù)制作鏈接頁　175
22.13　以鏈接頁為基礎(chǔ)創(chuàng)建模板　176
22.14　應(yīng)用模板創(chuàng)建其他二級鏈接頁面　177
22.15　將做好的二級頁面與首頁鏈接　177
22.16　檢查所有的頁面和鏈接，完成整個制作　178