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

第1章　基礎(chǔ)知識　1
　　本章練習(xí)主要涉及Dreamweaver必備的知識和技能，包括在網(wǎng)頁中插入圖片、變換標(biāo)題格式、文字的換行、字體的設(shè)置、為圖片和文字添加鏈接等內(nèi)容。
1.1　在網(wǎng)頁中插入圖片　1
　　掌握在網(wǎng)頁制作過程中插入圖片的方法
1.2　變換標(biāo)題的格式　1
　　掌握更改文字屬性的方法
1.3　文本的強制換行　3
　　文本中強制換行的方法
1.4　字體大小、顏色的設(shè)置　4
　　文本屬性的應(yīng)用
1.5　列表符號的應(yīng)用　5
　　列表符號的應(yīng)用
1.6　用CSS定義文字樣式　6
　　掌握簡單的定義和使用CSS樣式的方法
1.7　圖片與文字的對齊方式　7
　　掌握屬性面板中的幾種對齊方式
1.8　為圖片添加鏈接　8
　　圖片鏈接的設(shè)置方法
1.9　為文字添加鏈接　9
　　為文字添加鏈接
1.10　設(shè)置錨記鏈接　10
　　“插入→命名錨記”命令的應(yīng)用
1.11　熱區(qū)的設(shè)置　11
　　“矩形熱點工具”和“多邊形熱點工具”的應(yīng)用
1.12　插入水平線　12
　　水平線的插入方法
1.13　交換圖像(一)　13
　　“交換圖像”行為的應(yīng)用
1.14　交換圖像(二)　14
　　為按鈕添加“交換圖像”行為并設(shè)置相應(yīng)的鏈接
1.15　設(shè)置郵件鏈接　15
　　為文字設(shè)置郵件鏈接
1.16　設(shè)置下載鏈接　16
　　給文字添加下載鏈接
第2章　網(wǎng)頁布局　17
　　本章主要介紹常見的網(wǎng)頁布局和實現(xiàn)方法。
2.1　標(biāo)準(zhǔn)模式下使用表格設(shè)計版式　17
2.1.1　在頁面中插入表格　17
　　標(biāo)準(zhǔn)模式下插入表格
2.1.2　自定義表格樣式　17
　　“命令→格式化表格”命令的應(yīng)用
2.1.3　隱藏表格邊框　18
　　在“屬性”面板中更改表格邊框的屬性
2.1.4　雙線表格的制作　18
　　表格間距和邊框顏色等參數(shù)的設(shè)置方法
2.1.5　單線表格的制作　19
　　單線表格制作方法
2.1.6　表格屬性的綜合應(yīng)用　19
　　表格屬性的綜合應(yīng)用
2.2　使用框架設(shè)計版式　20
2.2.1　“上方固定”模式的框架　20
　　創(chuàng)建一個“上方固定”模式的框架，并制作成頁面
2.2.2　制作上中下結(jié)構(gòu)的框架頁面　21
　　“插入→HTML→框架→對齊上緣”命令的應(yīng)用
2.2.3　廠字型框架布局設(shè)計(一)　21
　　“上方固定，左側(cè)嵌套”模式框架的應(yīng)用
2.2.4　廠字型框架布局設(shè)計(二)　21
　　“上方固定，左側(cè)嵌套”模式框架的應(yīng)用
2.2.5　上中下結(jié)構(gòu)框架的布局　22
　　“對齊上緣”命令的應(yīng)用
2.2.6　在框架頁面中使用鏈接　23
　　使用框架在左側(cè)列出導(dǎo)航鏈接
2.3　在布局視圖模式下設(shè)計版式　24
2.3.1　國字型頁面布局(一)　24
　　在布局模式下，使用“布局表格”和“繪制布局單元格”
2.3.2　國字型頁面布局(二)　25
　　在布局模式下繪制表格樣式
2.3.3　不規(guī)則布局　26
　　使用布局視圖模式進行不規(guī)則頁面的設(shè)計
2.3.4　左中右對稱型布局　27
　　左中右結(jié)構(gòu)頁面的布局方法
2.3.5　最常見的左右布局　28
　　在布局模式下，構(gòu)建最常見的左右布局網(wǎng)頁
2.3.6　在網(wǎng)頁中的色系搭配練習(xí)　28
　　相同結(jié)構(gòu)的網(wǎng)頁可以使用不同的色系
2.3.7　水平導(dǎo)航欄的網(wǎng)頁布局　28
　　在布局模式下，使用“布局表格”繪制上下結(jié)構(gòu)的表格樣式
2.3.8　復(fù)雜結(jié)構(gòu)的頁面布局　29
　　繪制布局表格，以及頁面顏色的搭配
第3章　網(wǎng)頁布局設(shè)計　31
　　在上一章的基礎(chǔ)上，結(jié)合實際工作中常用的Photoshop和Fireworks等圖像處理軟件制作網(wǎng)頁布局效果，并進行切分，然后再進入Dreamweaver中制作成網(wǎng)頁。
3.1　常用的網(wǎng)頁布局　31
3.1.1　暖色調(diào)網(wǎng)頁布局練習(xí)　31
　　在Photoshop中運用填充效果制作網(wǎng)頁，在Dreamweaver中完成該網(wǎng)頁
3.1.2　冷色調(diào)基本網(wǎng)頁布局練習(xí)　32
　　在上面練習(xí)的基礎(chǔ)上，制作冷色調(diào)網(wǎng)頁
3.1.3　廠字型網(wǎng)頁布局(一)　33
　　在Photoshop中設(shè)計廠字型網(wǎng)頁布局
3.1.4　廠字型網(wǎng)頁布局(二)　34
　　更充分地使用Photoshop的功能來加強網(wǎng)頁的視覺效果
3.1.5　素材圖片作背景的網(wǎng)頁　34
　　利用素材圖片制作網(wǎng)頁
3.1.6　包圍型網(wǎng)頁布局　35
　　利用“填充”工具制作出網(wǎng)頁布局
3.1.7　三分欄布局　35
　　制作基本的三分欄結(jié)構(gòu)的網(wǎng)頁
3.1.8　復(fù)雜的三分欄布局(一)　36
　　Photoshop中“圖層樣式”的應(yīng)用
3.1.9　復(fù)雜的三分欄布局(二)　36
　　三分欄布局的變化
3.1.10　綜合網(wǎng)頁的布局　36
　　分欄布局的綜合應(yīng)用
3.2　不規(guī)則的頁面布局　37
3.2.1　不規(guī)則布局(一)　37
　　Photoshop中“投影”和“填充”命令的結(jié)合應(yīng)用
3.2.2　不規(guī)則布局(二)　38
　　Photoshop的“斜面和浮雕”效果的應(yīng)用
3.2.3　不規(guī)則布局(三)　39
　　Photoshop中“填充”的應(yīng)用
3.2.4　不規(guī)則布局(四)　39
　　“斜面和浮雕”效果的應(yīng)用
3.2.5　不規(guī)則布局(五)　40
　　描邊效果的應(yīng)用
3.3　特殊頁面布局　41
3.3.1　特殊頁面(一)　41
　　Photoshop中“斜面和浮雕”效果的應(yīng)用
3.3.2　特殊頁面(二)　42
　　Photoshop中“斜面和浮雕”效果的應(yīng)用
3.3.3　特殊頁面(三)　43
　　Photoshop中“漸變疊加”和“光澤”效果的應(yīng)用
3.3.4　特殊頁面(四)　44
　　特殊頁面的布局方法
3.3.5　特殊頁面(五)　44
　　特殊頁面的布局方法
第4章　制作網(wǎng)頁中的按鈕　45
　　網(wǎng)頁上的按鈕對瀏覽者起著至關(guān)重要的引導(dǎo)作用，本章主要介紹如何設(shè)計制作出漂亮的網(wǎng)頁按鈕。
4.1　在網(wǎng)頁中插入Dreamweaver自帶的Flash按鈕　45
4.1.1　插入Flash按鈕(一)　45
　　在頁面中插入圓形Flash按鈕
4.1.2　插入Flash按鈕(二)　45
　　在頁面中插入方形Flash按鈕
4.1.3　插入Flash按鈕(三)　45
　　在頁面中插入異形的Flash按鈕
4.2　不同質(zhì)感的按鈕　46
4.2.1　淡入淡出按鈕　46
　　Photoshop 中“線性漸變”填充的應(yīng)用
4.2.2　石質(zhì)按鈕　46
　　“圖層混合樣式”中的“斜面和浮雕”效果的應(yīng)用
4.2.3　軟塑料按鈕　47
　　“圖層混合樣式”的應(yīng)用
4.2.4　漸變按鈕　47
　　“漸變”和“描邊”工具的結(jié)合使用
4.2.5　浮雕效果按鈕　48
　　“漸變疊加”功能的使用
4.3　不同形狀的按鈕　48
4.3.1　書夾形狀的按鈕　48
　　“漸變疊加”和“描邊”的結(jié)合應(yīng)用
4.3.2　磚形按鈕　49
　　Photoshop填充的應(yīng)用
4.3.3　熒光按鈕　49
　　Photoshop的填充功能的應(yīng)用
4.3.4　螺母形按鈕　49
　　“漸變疊加”和“內(nèi)發(fā)光”效果的結(jié)合應(yīng)用
4.3.5　水膜按鈕　50
　　Photoshop中“描邊”的應(yīng)用
4.4　動態(tài)按鈕　50
4.4.1　動態(tài)按鈕(一)　50
　　Photoshop中的“色相/飽和度”工具的應(yīng)用
4.4.2　動態(tài)按鈕(二)　51
　　“漸變”和“描邊”工具的結(jié)合應(yīng)用
4.4.3　動態(tài)按鈕(三)　52
　　“斜面和浮雕”效果的應(yīng)用
4.4.4　動態(tài)按鈕(四)　52
　　“動感模糊”和“圖案疊加”效果的結(jié)合應(yīng)用
4.4.5　動態(tài)按鈕(五)　53
　　“云彩”和“漸變疊加”效果的結(jié)合應(yīng)用
第5章　網(wǎng)頁Banner的設(shè)計　55
　　本章主要介紹網(wǎng)頁中另一重要元素—Banner的設(shè)計和制作方法。
5.1　純文字的Banner設(shè)計　55
　　使用ImageReady制作動畫GIF圖片的方法
5.2　制作美食Banner(一)　55
　　使用ImageReady制作動畫的方法，色彩的搭配
5.3　制作美食Banner(二)　56
　　ImageReady的應(yīng)用
5.4　應(yīng)用插畫制作Banner　56
　　在ImageReady中，把一幅插畫制作成動畫
5.5　漫畫效果的Banner　57
　　漫畫效果的制作技巧
5.6　制作圣誕節(jié)Banner　57
　　節(jié)日Banner的制作方法
5.7　制作游戲Banner　58
　　在ImageReady中，多圖層Banner的制作方法
5.8　制作公益廣告Banner　58
　　在ImageReady中制作動畫的方法
5.9　制作旅游廣告Banner　58
　　ImageReady中動畫的制作方法
5.10　制作卡通動畫Banner　59
　　ImageReady中的動畫制作技巧
第6章　網(wǎng)頁導(dǎo)航欄的設(shè)計　61
　　本章主要介紹各類網(wǎng)頁導(dǎo)航欄的設(shè)計與制作方法，與實際應(yīng)用結(jié)合緊密，涉及各類Dreamweaver功能的應(yīng)用。
6.1　最常見的左置導(dǎo)航欄　61
6.1.1　左置導(dǎo)航欄(一)　61
　　Photoshop中“斜面和浮雕”效果的應(yīng)用
6.1.2　左置導(dǎo)航欄(二)　62
　　利用選區(qū)剪切制作導(dǎo)航欄
6.1.3　左置導(dǎo)航欄(三)　63
　　“圖層混合樣式”的應(yīng)用
6.1.4　左置導(dǎo)航欄(四)　63
　　“斜面和浮雕”效果的使用
6.1.5　左置導(dǎo)航欄(五)　64
　　使用“斜面和浮雕”效果，制作書夾導(dǎo)航欄
6.1.6　左置導(dǎo)航欄(六)　65
　　“變形”命令的應(yīng)用
6.2　置頂導(dǎo)航欄　66
6.2.1　置頂導(dǎo)航欄(一)　66
　　“斜面和浮雕”的應(yīng)用
6.2.2　置頂導(dǎo)航欄(二)　67
　　“斜面和浮雕”的應(yīng)用
6.2.3　置頂導(dǎo)航欄(三)　67
　　“投影”效果的應(yīng)用
6.2.4　置頂導(dǎo)航欄(四)　68
　　矩形邊框的制作方法
6.3　右置導(dǎo)航欄　69
6.3.1　右置導(dǎo)航欄(一)　69
　　濾鏡中“扭曲”、“切變”工具的應(yīng)用
6.3.2　右置導(dǎo)航欄(二)　70
　　“漸變”和“描邊”工具的應(yīng)用
6.3.3　右置導(dǎo)航欄(三)　71
　　“斜面和浮雕”效果的應(yīng)用
6.3.4　右置導(dǎo)航欄(四)　71
　　“紋理化”效果的應(yīng)用
6.3.5　右置導(dǎo)航欄(五)　72
　　“斜面和浮雕”和“投影”效果的結(jié)合應(yīng)用
6.4　兩級導(dǎo)航欄　73
6.4.1　兩級導(dǎo)航欄(一)　73
　　“漸變”工具和“斜面和浮雕”效果的應(yīng)用
6.4.2　兩級導(dǎo)航欄(二)　74
　　“斜面和浮雕”和“投影”效果的結(jié)合應(yīng)用
6.4.3　兩級導(dǎo)航欄(三)　75
　　“斜面和浮雕”效果和“剪切”工具的應(yīng)用
6.4.4　兩級導(dǎo)航欄(四)　75
　　填充顏色應(yīng)用
6.4.5　兩級導(dǎo)航欄(五)　75
　　“云彩”和“漸變疊加”效果的結(jié)合應(yīng)用
第7章　廠字型布局深入　77
　　廠字型布局是最常用到的網(wǎng)頁布局方式，本章專門針對這種布局方式進行深入練習(xí)。
7.1　常用直角接角設(shè)計　77
7.1.1　應(yīng)用紋理的設(shè)計方案　77
　　“自定義圖案”填充的應(yīng)用
7.1.2　應(yīng)用投影效果的設(shè)計方案　78
　　“圖層混合樣式”中“投影”和“描邊”效果的應(yīng)用
7.1.3　細(xì)線條與主體配合的設(shè)計方案　79
　　填充顏色應(yīng)用
7.1.4　格子型的設(shè)計方案　80
　　選區(qū)剪切工具的使用
7.1.5　懸掛合頁式的設(shè)計　81
　　“圖層混合樣式”中“斜面和浮雕”功能的應(yīng)用
7.1.6　浮雕效果的設(shè)計方案　81
　　填充的應(yīng)用
7.2　具有一些變化的廠字型布局網(wǎng)頁　82
7.2.1　弧形接角　82
　　填充的應(yīng)用
7.2.2　轉(zhuǎn)角型接角　84
　　圓角矩形的應(yīng)用
7.2.3　浮雕效果的接角　84
　　“投影”和“等高線”的結(jié)合應(yīng)用
7.2.4　拱門形狀接角　85
　　拱門形狀的制作方法
7.2.5　曲線線條的應(yīng)用　85
　　“斜面和浮雕”效果的應(yīng)用
7.3　位圖的處理與應(yīng)用　86
7.3.1　用圖片作接角(一)　86
　　“斜面和浮雕”效果的應(yīng)用
7.3.2　用圖片作接角(二)　87
　　填充效果的應(yīng)用
7.3.3　用圖片作接角(三)　88
　　“動感模糊”的應(yīng)用
7.3.4　用圖片作接角(四)　89
　　剪切效果的應(yīng)用
7.3.5　用圖片作接角(五)　90
　　“雜色”效果的應(yīng)用
7.4　特殊銜接的接角處理　91
7.4.1　充分利用線條的設(shè)計方案　91
　　剪切效果應(yīng)用
7.4.2　方格紋理的應(yīng)用　93
　　填充效果的應(yīng)用
7.4.3　半圓接角　94
　　剪切和“投影”效果的結(jié)合應(yīng)用
7.4.4　懸浮接角　94
　　剪切效果的應(yīng)用
第8章　網(wǎng)頁圖形元素的裝飾設(shè)計　95
　　本章主要介紹網(wǎng)頁圖形元素的裝飾設(shè)計與制作，分別對網(wǎng)頁的不同元素進行了針對性設(shè)計練習(xí)。
8.1　網(wǎng)站中的按鈕裝飾　95
8.1.1　單色的按鈕裝飾　95
　　填充的應(yīng)用
8.1.2　描邊按鈕裝飾　96
　　“描邊”效果的制作
8.1.3　浮雕效果的按鈕裝飾　97
　　“斜面和浮雕”效果的應(yīng)用
8.1.4　漸變裝飾按鈕　97
　　漸變工具的使用
8.1.5　斜角按鈕　98
　　使用“鋼筆”工具和“填充”的功能
8.1.6　圖片裝飾按鈕　99
　　“圖層混合樣式”中“斜面和浮雕”效果的應(yīng)用
8.1.7　凸起按鈕裝飾　100
　　“圖層混合樣式”中 “斜面和浮雕”的應(yīng)用
8.2　導(dǎo)航條的裝飾設(shè)計　100
8.2.1　光澤導(dǎo)航條　100
　　“填充圖案”和“描邊”的結(jié)合應(yīng)用
8.2.2　石質(zhì)效果的導(dǎo)航條　101
　　“圖層混合樣式”中的“斜面和浮雕”、“紋理化”的應(yīng)用
8.2.3　路牌形狀的導(dǎo)航條　102
　　“投影”和“等高線”的結(jié)合應(yīng)用
8.2.4　木質(zhì)的導(dǎo)航條　103
　　“斜面和浮雕”效果的應(yīng)用
8.2.5　不規(guī)則的導(dǎo)航條　103
　　“橢圓選區(qū)”剪切的應(yīng)用
8.2.6　漸變效果的導(dǎo)航條　104
　　漸變填充效果的應(yīng)用
8.3　裝飾性Banner　105
8.3.1　粗線條裝飾Banner　105
　　填充效果的應(yīng)用
8.3.2　素材疊加裝飾Banner　106
　　“添加圖層蒙板”的應(yīng)用
8.3.3　漸變裝飾效果　107
　　“剪切”和“圖層混合”效果的應(yīng)用
8.3.4　半透明方塊裝飾Banner　108
　　“雜色”效果的應(yīng)用
8.3.5　顏色遞進效果的裝飾　109
　　填充效果的應(yīng)用
8.4　綜合裝飾的效果　110
8.4.1　素材圖片裝飾(一)　110
　　“填充”和“斜面和浮雕”效果的應(yīng)用
8.4.2　素材圖片裝飾(二)　110
　　“斜面和浮雕”效果的應(yīng)用
8.4.3　線條的裝飾效果　111
　　“漸變填充”效果的應(yīng)用
8.4.4　顏色拼接裝飾　111
　　“填充”和“斜面和浮雕”效果的應(yīng)用
8.4.5　背景圖片裝飾Banner　112
　　“斜面和浮雕”效果的應(yīng)用
第9章　網(wǎng)站細(xì)節(jié)　113
　　本章主要介紹在制作精美的網(wǎng)頁時需要注意的一些制作技巧。
9.1　便條紙效果　113
　　“線性漸變”填充的應(yīng)用
9.2　留言紙效果　114
　　利用圖層疊加效果
9.3　便條留言板效果(一)　115
　　“圖層混合模式”應(yīng)用
9.4　便條留言板效果(二)　115
　　“圖層混合樣式”和“羽化”工具的結(jié)合使用
9.5　金屬效果對話框(一)　116
　　使用了圖層混合樣式中的“漸變疊加”功能，制作金屬效果
9.6　金屬效果對話框(二)　117
　　“漸變疊加”和“描邊”的結(jié)合應(yīng)用
9.7　留言板(一)　118
　　“漸變”填充的應(yīng)用
9.8　留言板(二)　119
　　“斜面和浮雕”的應(yīng)用
9.9　投影效果　119
　　“描邊”和“高斯模糊”的結(jié)合應(yīng)用
9.10　描邊效果　120
　　描邊應(yīng)用
第10章　綜合練習(xí)　121
　　本章在熟練練習(xí)前面各章內(nèi)容的基礎(chǔ)上進行綜合練習(xí)。每節(jié)完成一個完整的網(wǎng)頁設(shè)計、圖片切割輸出、合成網(wǎng)頁的全過程。通過本章的練習(xí)，讀者可以掌握設(shè)計一個比較專業(yè)的網(wǎng)站的各方面技能。
10.1　綜合實例(一)　121
10.1.1　構(gòu)圖和切片　121
　　綜合應(yīng)用
10.1.2　制作按鈕　122
　　在Photoshop中制作按鈕
10.1.3　制作鏈接頁　123
　　在Photoshop中制作鏈接頁面
10.1.4　生成完整網(wǎng)站　124
　　在Dreamweaver中完成制作
10.2　綜合實例(二)　125
10.2.1　主頁的設(shè)計與切片　125
　　綜合應(yīng)用
10.2.2　制作首頁　127
　　在Dreamweaver中制作首頁
10.2.3　制作鏈接頁　128
　　在Photoshop中制作鏈接頁
10.2.4　生成完整網(wǎng)站　129
　　完成制作
10.3　綜合實例(三)　130
　　綜合應(yīng)用
10.4　綜合實例(四)　131
　　綜合應(yīng)用
第11章　使用行為制作網(wǎng)頁的交互功能　135
　　本章針對Dreamweaver中的行為功能，練習(xí)制作網(wǎng)頁中各種不同的網(wǎng)頁交互功能。
11.1　交換圖像　135
　　交換圖像
11.2　彈出式對話框　135
　　設(shè)置彈出信息行為
11.3　彈出瀏覽器窗口　136
　　添加彈出瀏覽器行為
11.4　拼圖效果　137
　　拖動層行為
11.5　控制網(wǎng)頁Flash播放　138
　　插入媒體對象、表單按鈕并給表單按鈕添加行為
11.6　為文字添加背景音樂　139
　　添加播放聲音行為
11.7　改變屬性　139
　　改變屬性行為
11.8　顯示和隱藏層　140
　　“顯示-隱藏層”命令的應(yīng)用
11.9　顯示和隱藏彈出式菜單　141
　　“顯示彈出式菜單”行為
11.10　檢查插件安裝　142
　　檢查插件行為
11.11　檢查瀏覽器　143
　　檢查瀏覽器
11.12　表單檢查　144
　　表單檢查
11.13　導(dǎo)航欄圖像行為　145
　　導(dǎo)航欄圖像行為
11.14　狀態(tài)欄文本行為　145
　　狀態(tài)欄文本行為
11.15　調(diào)用JavaScript　146
　　JavaScript的調(diào)用
11.16　跳轉(zhuǎn)菜單和跳轉(zhuǎn)菜單開始行為　147
　　跳轉(zhuǎn)菜單和跳轉(zhuǎn)菜單開始行為
11.17　自動鏈接新的站點　148
　　轉(zhuǎn)動URL行為
第12章　模板與庫　151
　　本章主要練習(xí)使用Dreamweaver中的模板與庫功能來制作相同結(jié)構(gòu)的網(wǎng)頁。
12.1　制作基于模板的實例　151
　　制作基于模板的實例
12.2　套用模板到頁面　152
　　套用模板實例
12.3　嵌套模板　152
　　套用模板實例
12.4　在頁面中添加和使用庫項目　153
　　“庫”的應(yīng)用
12.5　修改庫項目以更新整個站點　154
　　修改庫項目更新站點
第13章　CSS應(yīng)用　157
　　本章在第1章中CSS基礎(chǔ)練習(xí)的基礎(chǔ)上，進一步練習(xí)使用CSS制作網(wǎng)頁。
13.1　使用CSS定義文字的顏色和大小　157
　　CSS樣式的創(chuàng)建
13.2　創(chuàng)建CSS樣式文件　158
　　創(chuàng)建CSS樣式文件
13.3　附加外部CSS樣式文件　158
　　導(dǎo)入CSS樣式
13.4　內(nèi)置CSS樣式效果　159
　　內(nèi)置CSS樣式效果的應(yīng)用
13.5　用CSS定義背景色　159
　　使用CSS定義背景顏色
13.6　使用CSS定義對齊方式　160
　　對CSS樣式中“方框→浮動”功能的應(yīng)用
13.7　應(yīng)用CSS定義表格邊框　160
　　應(yīng)用CSS定義表格邊框
13.8　自定義項目符號的圖像　161
　　應(yīng)用CSS樣式自定義項目符號的圖像
13.9　特殊光標(biāo)效果　162
　　使用CSS樣式制作特殊光標(biāo)效果實例