Dreamweaver CS6 網(wǎng)頁設(shè)計與制作教程

第1章 認(rèn)識網(wǎng)頁及網(wǎng)頁制作工具 1
1.1 網(wǎng)頁制作基礎(chǔ)知識 1
1.1.1 認(rèn)識網(wǎng)頁 1
1.1.2 認(rèn)識網(wǎng)站 1
1.1.3 網(wǎng)頁的類型 5
1.1.4 網(wǎng)頁設(shè)計前的考慮 5
1.1.5 基本版式設(shè)計風(fēng)格 6
1.1.6 網(wǎng)頁頁面的基本組成元素 7
1.2 網(wǎng)站的一般開發(fā)流程 8
1.2.1 收集素材 8
1.2.2 規(guī)劃站點(diǎn) 8
1.2.3 制作網(wǎng)頁 8
1.2.4 測試站點(diǎn) 8
1.2.5 發(fā)布站點(diǎn) 9
1.2.6 更新和維護(hù)站點(diǎn) 9
1.3 網(wǎng)頁制作中的技巧 9
1.3.1 網(wǎng)頁基本元素的標(biāo)準(zhǔn)及使用技巧 9
1.3.2 頁面風(fēng)格技巧 11
1.3.3 網(wǎng)頁構(gòu)圖技巧 12
1.3.4 色彩使用技巧 13
1.4 網(wǎng)頁制作中的專業(yè)術(shù)語 14
1.5 認(rèn)識Dreamweaver CS6 15
1.5.1 Dreamweaver CS6簡介 15
1.5.2 啟動和退出Dreamweaver CS6 15
1.5.3 認(rèn)識Dreamweaver CS6的工作界面 15
1.6 站點(diǎn)的創(chuàng)建與管理 16
1.6.1 創(chuàng)建本地站點(diǎn) 16
1.6.2 新建網(wǎng)頁文件與文件夾 17
1.6.3 打開網(wǎng)頁文件 17
1.6.4 保存網(wǎng)頁文件 17
1.6.5 網(wǎng)頁版面布局 18
1.7 項(xiàng)目實(shí)訓(xùn) 18

第2章 網(wǎng)頁設(shè)計語言HTML 19
2.1 HTML簡介 19
2.2 HTML語言基礎(chǔ) 19
2.2.1 HTML標(biāo)記符基礎(chǔ) 19
2.2.2 HTML標(biāo)記符屬性 20
2.2.3 HTML的基本結(jié)構(gòu) 20
2.3 頭部標(biāo)記之間的主要標(biāo)記 22
2.4 主體標(biāo)記之間的常用標(biāo)記 23
2.4.1 文字與段落標(biāo)記 23
2.4.2 列表標(biāo)記 26
2.4.3 圖像標(biāo)記 28
2.4.4 超鏈接標(biāo)記 28
2.4.5 表格標(biāo)記 29
2.4.6 多媒體標(biāo)記 30
2.5 項(xiàng)目實(shí)訓(xùn) 31
2.5.1 項(xiàng)目實(shí)訓(xùn)一：“第1個HTML”網(wǎng)頁 31
2.5.2 項(xiàng)目實(shí)訓(xùn)二：“中國詩詞佳句-作者”網(wǎng)頁 32
2.5.3 項(xiàng)目實(shí)訓(xùn)三：“圖像邊框”網(wǎng)頁 34
2.5.4 項(xiàng)目實(shí)訓(xùn)四：“鏈接技術(shù)演示”網(wǎng)頁 34
2.5.5 項(xiàng)目實(shí)訓(xùn)五：“最新消息公告”網(wǎng)頁 35
2.5.6 項(xiàng)目實(shí)訓(xùn)六：“圖像切換”網(wǎng)頁 36

第3章 圖像效果應(yīng)用 38
3.1 圖像效果實(shí)例——添加圖像 38
3.1.1 插入圖像 38
3.1.2 導(dǎo)入圖像 38
3.2 圖像效果實(shí)例——插入圖像占位符 41
3.3 圖像效果實(shí)例——替換圖像占位符 42
3.4 圖像效果實(shí)例——鼠標(biāo)替換圖像 44
3.5 圖像效果實(shí)例——創(chuàng)建導(dǎo)航條 48
3.5.1 設(shè)置導(dǎo)航條項(xiàng)目 49
3.5.2 添加導(dǎo)航條項(xiàng)目 50

第4章 表格的應(yīng)用 53
4.1 創(chuàng)建表格 53
4.1.1 設(shè)置頁面屬性 53
4.1.2 設(shè)置表格屬性 55
4.1.3 插入圖像 58
4.1.4 插入表格并設(shè)置背景圖像 59
4.1.5 網(wǎng)頁中的數(shù)據(jù)表格 61
4.2 項(xiàng)目實(shí)訓(xùn) 63
4.2.1 項(xiàng)目實(shí)訓(xùn)一：立體效果表格 63
4.2.2 項(xiàng)目實(shí)訓(xùn)二：“圓角表格美化”網(wǎng)頁 64

第5章 超級鏈接的應(yīng)用 66
5.1 網(wǎng)頁鏈接路徑 66
5.1.1 絕對路徑（Absolute Path） 66
5.1.2 相對路徑（Relative Path） 66
5.1.3 站點(diǎn)根目錄相對路徑 67
5.2 鏈接的設(shè)置 67
5.2.1 文本鏈接 67
5.2.2 用CSS定義鏈接文本狀態(tài) 69
5.2.3 錨點(diǎn)鏈接 70
5.2.4 電子郵件鏈接 71
5.2.5 下載鏈接與空鏈接 72
5.2.6 一般圖像鏈接 74
5.2.7 圖像熱點(diǎn)鏈接 75
5.2.8 鼠標(biāo)經(jīng)過圖像 75
5.2.9 導(dǎo)航條 77
5.2.10 更改鏈接名稱 78
5.3 項(xiàng)目實(shí)訓(xùn) 78
5.3.1 實(shí)訓(xùn)項(xiàng)目一：制作“古今傳奇”網(wǎng)頁 78
5.3.2 實(shí)訓(xùn)項(xiàng)目二：制作“日常生活”網(wǎng)頁 79
5.3.3 實(shí)訓(xùn)項(xiàng)目三：制作圖像超鏈接 80

第6章 CSS樣式應(yīng)用 81
6.1 創(chuàng)建層疊樣式表 81
6.1.1 認(rèn)識“CSS樣式”面板 81
6.1.2 創(chuàng)建層疊樣式表 81
6.2 定義層疊樣式表屬性 83
6.2.1 設(shè)置類型屬性 83
6.2.2 設(shè)置背景屬性 83
6.2.3 設(shè)置區(qū)塊屬性 84
6.2.4 設(shè)置方框?qū)傩?84
6.2.5 設(shè)置邊框?qū)傩?84
6.2.6 設(shè)置列表屬性 85
6.2.7 設(shè)置定位屬性 85
6.2.8 設(shè)置擴(kuò)展屬性 85
6.2.9 設(shè)置過渡屬性 86
6.3 使用CSS過濾器 87
6.3.1 Alpha濾鏡 87
6.3.2 Blur濾鏡 87
6.3.3 FlipH濾鏡 88
6.3.4 Glow濾鏡 88
6.3.5 Gray濾鏡 88
6.3.6 Invert濾鏡 88
6.3.7 Shadow濾鏡 89
6.3.8 Wave濾鏡 89
6.3.9 Xray濾鏡 89
6.4 應(yīng)用并管理層疊樣式 89
6.4.1 應(yīng)用層疊樣式 89
6.4.2 編輯層疊樣式 90
6.4.3 刪除層疊樣式 90
6.5 CSS樣式制作步驟解析 90
6.5.1 創(chuàng)建CSS樣式 90
6.5.2 應(yīng)用CSS樣式 92

第7章 Div+CSS靈活布局網(wǎng)頁 94
7.1 關(guān)于Div+CSS布局 94
7.1.1 了解基于CSS的頁面布局 94
7.1.2 塊元素 94
7.1.3 行內(nèi)元素 94
7.2 在網(wǎng)頁中插入Div 94
7.2.1 插入Div 94
7.2.2 Div的嵌套 95
7.3 關(guān)于Div+CSS盒模型 95
7.3.1 Margin（邊界） 95
7.3.2 Border（邊框） 96
7.3.3 Padding（填充） 96
7.3.4 Content（內(nèi)容） 96
7.4 Div+CSS布局定位 96
7.4.1 relative（相對定位） 96
7.4.2 absolute（絕對定位） 97
7.4.3 fixed（懸浮定位） 97
7.4.4 float（浮動定位） 97
7.5 常用的Div+CSS布局方式 97
7.5.1 Div高度自適應(yīng) 97
7.5.2 網(wǎng)頁內(nèi)容居中布局 97
7.5.3 網(wǎng)頁元素浮動布局 98
7.5.4 流體網(wǎng)格布局 98

第8章 模板和庫的應(yīng)用 99
8.1 在庫面板中注冊項(xiàng)目 99
8.2 應(yīng)用庫中的注冊項(xiàng) 101
8.2.1 利用庫中注冊的項(xiàng)目制作網(wǎng)頁文檔 101
8.2.2 修改庫中注冊的項(xiàng)目 102
8.2.3 直接在網(wǎng)頁文檔中修改 103
8.3 創(chuàng)建模板 104
8.3.1 將現(xiàn)有的網(wǎng)頁另存為模板 104
8.3.2 創(chuàng)建空白模板 104
8.4 使用模板輕松制作大量文檔 105
8.4.1 在模板文檔中定義可編輯區(qū)域 105
8.4.2 使用模板文檔制作其他網(wǎng)頁文檔 107
8.4.3 修改模板文檔 108

第9章 框架的應(yīng)用 111
9.1 創(chuàng)建框架 111
9.1.1 創(chuàng)建預(yù)定義框架集 111
9.1.2 創(chuàng)建嵌套框架集 112
9.2 保存框架和框架文件 113
9.2.1 保存框架文件 113
9.2.2 保存框架集文件 113
9.2.3 保存所有的框架集文件 114
9.3 選擇框架和框架集 114
9.3.1 認(rèn)識“框架”面板 114
9.3.2 在“框架”面板中選擇框架或框架集 115
9.4 設(shè)置框架和框架集屬性 115
9.4.1 設(shè)置框架屬性 116
9.4.2 設(shè)置框架集屬性 116
9.5 框架的基本操作 117
9.6 為框架頁設(shè)置鏈接 119
9.7 框架的嵌套 119
9.8 項(xiàng)目實(shí)訓(xùn) 120
9.8.1 項(xiàng)目實(shí)訓(xùn)一：為框架設(shè)置不同背景 120
9.8.2 項(xiàng)目實(shí)訓(xùn)二：使用框架制作網(wǎng)頁 121

第10章 表單的應(yīng)用 125
10.1 表單概述 125
10.2 表單的創(chuàng)建及設(shè)置 125
10.2.1 創(chuàng)建表單 125
10.2.2 設(shè)置表單屬性 125
10.3 創(chuàng)建表單對象 126
10.3.1 創(chuàng)建文本域 126
10.3.2 創(chuàng)建單選按鈕 127
10.3.3 制作單選按鈕組 128
10.3.4 創(chuàng)建復(fù)選框 130
10.3.5 創(chuàng)建下拉菜單 130
10.3.6 創(chuàng)建表單按鈕 131
10.3.7 創(chuàng)建圖像域 131
10.4 項(xiàng)目實(shí)訓(xùn) 132
10.4.1 項(xiàng)目實(shí)訓(xùn)一：制作會員注冊 表單 132
10.4.2 項(xiàng)目實(shí)訓(xùn)二：制作大型購物 中心訂單頁面 138

第11章 多媒體的應(yīng)用 152
11.1 插入Flash動畫 152
11.1.1 認(rèn)識Flash動畫 152
11.1.2 制作“古色古香”的網(wǎng)頁 153
11.2 為網(wǎng)頁添加音頻 154
11.2.1 插入聲音 154
11.2.2 制作音樂播放網(wǎng)頁 155
11.3 插入FLV視頻 156
11.3.1 認(rèn)識FLV視頻 156
11.3.2 在網(wǎng)頁中插入FLV視頻 157
11.4 插入Applet 159
11.5 插入ActiveX控件 160
11.6 插入插件 161
11.6.1 插入插件圖標(biāo) 161
11.6.2 使用插件嵌入音樂播放器 162

第12章 行為的應(yīng)用 163
12.1 行為簡介 163
12.2 行為面板 163
12.3 使用行為 164
12.4 在網(wǎng)頁文檔中組合“西瓜人” 165
12.4.1 繪制層并插入圖像 165
12.4.2 在瀏覽器中組合“西瓜人” 166
12.5 制作拼圖游戲頁面 167
12.5.1 繪制層插入圖片 167
12.5.2 設(shè)置層的拖動范圍 168
12.6 符合使用者電腦環(huán)境的行為 169
12.6.1 顯示適合的網(wǎng)頁文檔 169
12.6.2 加載大容量圖像 171
12.7 制作自動跳絲頁面 172
12.8 檢查表單 173
12.9 調(diào)整Flash動畫的行為 174
12.9.1 插入Flash動畫 174
12.9.2 控制動畫 175
12.9.3 添加單擊按鈕的效果音 176
12.10 快捷而高效地鏈接相關(guān)行為 177
12.10.1 把鼠標(biāo)移至瞬間跳轉(zhuǎn) 177
12.10.2 跳轉(zhuǎn)到菜單相關(guān)頁面 179
12.10.3 添加GO按鈕 182
12.11 制作對鼠標(biāo)動作做出反應(yīng)的導(dǎo)航條 182
12.11.1 制作導(dǎo)航條的基本信息 182
12.11.2 添加可以知道當(dāng)前所選菜單的行為 185
12.12 在網(wǎng)頁中顯示事件窗口 187
12.12.1 在網(wǎng)頁中顯示指定大小的彈出窗口 187
12.12.2 添加導(dǎo)航條和菜單欄 188
12.13 顯示隱藏層 189
12.13.1 繪制層并且插入圖片 189
12.13.2 隱藏顯示層 190
12.13.3 設(shè)置層的可見性 191
12.14 顯示大圖像的縮略圖效果 192
12.14.1 繪制層并插入圖像 192
12.14.2 單擊小圖像時顯示大圖像 193
12.14.3 更換圖層內(nèi)圖像的行為 195
12.14.4 把圖像替換為其他圖像的行為 196
12.15 把替換的圖像恢復(fù)為原圖像 199
12.15.1 替換圖像 199
12.15.2 恢復(fù)交換圖像 201
12.16 利用JavaScript實(shí)現(xiàn)關(guān)閉網(wǎng)頁 201

參考文獻(xiàn) 203