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

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