巧學巧用Dreamweaver制作網頁習題精解

第1章　基礎知識　1
　　本章練習主要涉及Dreamweaver必備的知識和技能，包括在網頁中插入圖片、變換標題格式、文字的換行、字體的設置、為圖片和文字添加鏈接等內容。
1.1　在網頁中插入圖片　1
　　掌握在網頁制作過程中插入圖片的方法
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章　網頁布局　17
　　本章主要介紹常見的網頁布局和實現方法。
2.1　標準模式下使用表格設計版式　17
2.1.1　在頁面中插入表格　17
　　標準模式下插入表格
2.1.2　自定義表格樣式　17
　　“命令→格式化表格”命令的應用
2.1.3　隱藏表格邊框　18
　　在“屬性”面板中更改表格邊框的屬性
2.1.4　雙線表格的制作　18
　　表格間距和邊框顏色等參數的設置方法
2.1.5　單線表格的制作　19
　　單線表格制作方法
2.1.6　表格屬性的綜合應用　19
　　表格屬性的綜合應用
2.2　使用框架設計版式　20
2.2.1　“上方固定”模式的框架　20
　　創(chuàng)建一個“上方固定”模式的框架，并制作成頁面
2.2.2　制作上中下結構的框架頁面　21
　　“插入→HTML→框架→對齊上緣”命令的應用
2.2.3　廠字型框架布局設計(一)　21
　　“上方固定，左側嵌套”模式框架的應用
2.2.4　廠字型框架布局設計(二)　21
　　“上方固定，左側嵌套”模式框架的應用
2.2.5　上中下結構框架的布局　22
　　“對齊上緣”命令的應用
2.2.6　在框架頁面中使用鏈接　23
　　使用框架在左側列出導航鏈接
2.3　在布局視圖模式下設計版式　24
2.3.1　國字型頁面布局(一)　24
　　在布局模式下，使用“布局表格”和“繪制布局單元格”
2.3.2　國字型頁面布局(二)　25
　　在布局模式下繪制表格樣式
2.3.3　不規(guī)則布局　26
　　使用布局視圖模式進行不規(guī)則頁面的設計
2.3.4　左中右對稱型布局　27
　　左中右結構頁面的布局方法
2.3.5　最常見的左右布局　28
　　在布局模式下，構建最常見的左右布局網頁
2.3.6　在網頁中的色系搭配練習　28
　　相同結構的網頁可以使用不同的色系
2.3.7　水平導航欄的網頁布局　28
　　在布局模式下，使用“布局表格”繪制上下結構的表格樣式
2.3.8　復雜結構的頁面布局　29
　　繪制布局表格，以及頁面顏色的搭配
第3章　網頁布局設計　31
　　在上一章的基礎上，結合實際工作中常用的Photoshop和Fireworks等圖像處理軟件制作網頁布局效果，并進行切分，然后再進入Dreamweaver中制作成網頁。
3.1　常用的網頁布局　31
3.1.1　暖色調網頁布局練習　31
　　在Photoshop中運用填充效果制作網頁，在Dreamweaver中完成該網頁
3.1.2　冷色調基本網頁布局練習　32
　　在上面練習的基礎上，制作冷色調網頁
3.1.3　廠字型網頁布局(一)　33
　　在Photoshop中設計廠字型網頁布局
3.1.4　廠字型網頁布局(二)　34
　　更充分地使用Photoshop的功能來加強網頁的視覺效果
3.1.5　素材圖片作背景的網頁　34
　　利用素材圖片制作網頁
3.1.6　包圍型網頁布局　35
　　利用“填充”工具制作出網頁布局
3.1.7　三分欄布局　35
　　制作基本的三分欄結構的網頁
3.1.8　復雜的三分欄布局(一)　36
　　Photoshop中“圖層樣式”的應用
3.1.9　復雜的三分欄布局(二)　36
　　三分欄布局的變化
3.1.10　綜合網頁的布局　36
　　分欄布局的綜合應用
3.2　不規(guī)則的頁面布局　37
3.2.1　不規(guī)則布局(一)　37
　　Photoshop中“投影”和“填充”命令的結合應用
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章　制作網頁中的按鈕　45
　　網頁上的按鈕對瀏覽者起著至關重要的引導作用，本章主要介紹如何設計制作出漂亮的網頁按鈕。
4.1　在網頁中插入Dreamweaver自帶的Flash按鈕　45
4.1.1　插入Flash按鈕(一)　45
　　在頁面中插入圓形Flash按鈕
4.1.2　插入Flash按鈕(二)　45
　　在頁面中插入方形Flash按鈕
4.1.3　插入Flash按鈕(三)　45
　　在頁面中插入異形的Flash按鈕
4.2　不同質感的按鈕　46
4.2.1　淡入淡出按鈕　46
　　Photoshop 中“線性漸變”填充的應用
4.2.2　石質按鈕　46
　　“圖層混合樣式”中的“斜面和浮雕”效果的應用
4.2.3　軟塑料按鈕　47
　　“圖層混合樣式”的應用
4.2.4　漸變按鈕　47
　　“漸變”和“描邊”工具的結合使用
4.2.5　浮雕效果按鈕　48
　　“漸變疊加”功能的使用
4.3　不同形狀的按鈕　48
4.3.1　書夾形狀的按鈕　48
　　“漸變疊加”和“描邊”的結合應用
4.3.2　磚形按鈕　49
　　Photoshop填充的應用
4.3.3　熒光按鈕　49
　　Photoshop的填充功能的應用
4.3.4　螺母形按鈕　49
　　“漸變疊加”和“內發(fā)光”效果的結合應用
4.3.5　水膜按鈕　50
　　Photoshop中“描邊”的應用
4.4　動態(tài)按鈕　50
4.4.1　動態(tài)按鈕(一)　50
　　Photoshop中的“色相/飽和度”工具的應用
4.4.2　動態(tài)按鈕(二)　51
　　“漸變”和“描邊”工具的結合應用
4.4.3　動態(tài)按鈕(三)　52
　　“斜面和浮雕”效果的應用
4.4.4　動態(tài)按鈕(四)　52
　　“動感模糊”和“圖案疊加”效果的結合應用
4.4.5　動態(tài)按鈕(五)　53
　　“云彩”和“漸變疊加”效果的結合應用
第5章　網頁Banner的設計　55
　　本章主要介紹網頁中另一重要元素—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章　網頁導航欄的設計　61
　　本章主要介紹各類網頁導航欄的設計與制作方法，與實際應用結合緊密，涉及各類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
　　“斜面和浮雕”和“投影”效果的結合應用
6.4　兩級導航欄　73
6.4.1　兩級導航欄(一)　73
　　“漸變”工具和“斜面和浮雕”效果的應用
6.4.2　兩級導航欄(二)　74
　　“斜面和浮雕”和“投影”效果的結合應用
6.4.3　兩級導航欄(三)　75
　　“斜面和浮雕”效果和“剪切”工具的應用
6.4.4　兩級導航欄(四)　75
　　填充顏色應用
6.4.5　兩級導航欄(五)　75
　　“云彩”和“漸變疊加”效果的結合應用
第7章　廠字型布局深入　77
　　廠字型布局是最常用到的網頁布局方式，本章專門針對這種布局方式進行深入練習。
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　具有一些變化的廠字型布局網頁　82
7.2.1　弧形接角　82
　　填充的應用
7.2.2　轉角型接角　84
　　圓角矩形的應用
7.2.3　浮雕效果的接角　84
　　“投影”和“等高線”的結合應用
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
　　剪切和“投影”效果的結合應用
7.4.4　懸浮接角　94
　　剪切效果的應用
第8章　網頁圖形元素的裝飾設計　95
　　本章主要介紹網頁圖形元素的裝飾設計與制作，分別對網頁的不同元素進行了針對性設計練習。
8.1　網站中的按鈕裝飾　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
　　“填充圖案”和“描邊”的結合應用
8.2.2　石質效果的導航條　101
　　“圖層混合樣式”中的“斜面和浮雕”、“紋理化”的應用
8.2.3　路牌形狀的導航條　102
　　“投影”和“等高線”的結合應用
8.2.4　木質的導航條　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章　網站細節(jié)　113
　　本章主要介紹在制作精美的網頁時需要注意的一些制作技巧。
9.1　便條紙效果　113
　　“線性漸變”填充的應用
9.2　留言紙效果　114
　　利用圖層疊加效果
9.3　便條留言板效果(一)　115
　　“圖層混合模式”應用
9.4　便條留言板效果(二)　115
　　“圖層混合樣式”和“羽化”工具的結合使用
9.5　金屬效果對話框(一)　116
　　使用了圖層混合樣式中的“漸變疊加”功能，制作金屬效果
9.6　金屬效果對話框(二)　117
　　“漸變疊加”和“描邊”的結合應用
9.7　留言板(一)　118
　　“漸變”填充的應用
9.8　留言板(二)　119
　　“斜面和浮雕”的應用
9.9　投影效果　119
　　“描邊”和“高斯模糊”的結合應用
9.10　描邊效果　120
　　描邊應用
第10章　綜合練習　121
　　本章在熟練練習前面各章內容的基礎上進行綜合練習。每節(jié)完成一個完整的網頁設計、圖片切割輸出、合成網頁的全過程。通過本章的練習，讀者可以掌握設計一個比較專業(yè)的網站的各方面技能。
10.1　綜合實例(一)　121
10.1.1　構圖和切片　121
　　綜合應用
10.1.2　制作按鈕　122
　　在Photoshop中制作按鈕
10.1.3　制作鏈接頁　123
　　在Photoshop中制作鏈接頁面
10.1.4　生成完整網站　124
　　在Dreamweaver中完成制作
10.2　綜合實例(二)　125
10.2.1　主頁的設計與切片　125
　　綜合應用
10.2.2　制作首頁　127
　　在Dreamweaver中制作首頁
10.2.3　制作鏈接頁　128
　　在Photoshop中制作鏈接頁
10.2.4　生成完整網站　129
　　完成制作
10.3　綜合實例(三)　130
　　綜合應用
10.4　綜合實例(四)　131
　　綜合應用
第11章　使用行為制作網頁的交互功能　135
　　本章針對Dreamweaver中的行為功能，練習制作網頁中各種不同的網頁交互功能。
11.1　交換圖像　135
　　交換圖像
11.2　彈出式對話框　135
　　設置彈出信息行為
11.3　彈出瀏覽器窗口　136
　　添加彈出瀏覽器行為
11.4　拼圖效果　137
　　拖動層行為
11.5　控制網頁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　調用JavaScript　146
　　JavaScript的調用
11.16　跳轉菜單和跳轉菜單開始行為　147
　　跳轉菜單和跳轉菜單開始行為
11.17　自動鏈接新的站點　148
　　轉動URL行為
第12章　模板與庫　151
　　本章主要練習使用Dreamweaver中的模板與庫功能來制作相同結構的網頁。
12.1　制作基于模板的實例　151
　　制作基于模板的實例
12.2　套用模板到頁面　152
　　套用模板實例
12.3　嵌套模板　152
　　套用模板實例
12.4　在頁面中添加和使用庫項目　153
　　“庫”的應用
12.5　修改庫項目以更新整個站點　154
　　修改庫項目更新站點
第13章　CSS應用　157
　　本章在第1章中CSS基礎練習的基礎上，進一步練習使用CSS制作網頁。
13.1　使用CSS定義文字的顏色和大小　157
　　CSS樣式的創(chuàng)建
13.2　創(chuàng)建CSS樣式文件　158
　　創(chuàng)建CSS樣式文件
13.3　附加外部CSS樣式文件　158
　　導入CSS樣式
13.4　內置CSS樣式效果　159
　　內置CSS樣式效果的應用
13.5　用CSS定義背景色　159
　　使用CSS定義背景顏色
13.6　使用CSS定義對齊方式　160
　　對CSS樣式中“方框→浮動”功能的應用
13.7　應用CSS定義表格邊框　160
　　應用CSS定義表格邊框
13.8　自定義項目符號的圖像　161
　　應用CSS樣式自定義項目符號的圖像
13.9　特殊光標效果　162
　　使用CSS樣式制作特殊光標效果實例