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

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

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

第3章 圖像效果應(yīng)用 38
3.1 圖像效果實例——添加圖像 38
3.1.1 插入圖像 38
3.1.2 導入圖像 38
3.2 圖像效果實例——插入圖像占位符 41
3.3 圖像效果實例——替換圖像占位符 42
3.4 圖像效果實例——鼠標替換圖像 44
3.5 圖像效果實例——創(chuàng)建導航條 48
3.5.1 設(shè)置導航條項目 49
3.5.2 添加導航條項目 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 項目實訓 63
4.2.1 項目實訓一：立體效果表格 63
4.2.2 項目實訓二：“圓角表格美化”網(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 站點根目錄相對路徑 67
5.2 鏈接的設(shè)置 67
5.2.1 文本鏈接 67
5.2.2 用CSS定義鏈接文本狀態(tài) 69
5.2.3 錨點鏈接 70
5.2.4 電子郵件鏈接 71
5.2.5 下載鏈接與空鏈接 72
5.2.6 一般圖像鏈接 74
5.2.7 圖像熱點鏈接 75
5.2.8 鼠標經(jīng)過圖像 75
5.2.9 導航條 77
5.2.10 更改鏈接名稱 78
5.3 項目實訓 78
5.3.1 實訓項目一：制作“古今傳奇”網(wǎng)頁 78
5.3.2 實訓項目二：制作“日常生活”網(wǎng)頁 79
5.3.3 實訓項目三：制作圖像超鏈接 80

第6章 CSS樣式應(yīng)用 81
6.1 創(chuàng)建層疊樣式表 81
6.1.1 認識“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è)置擴展屬性 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 在庫面板中注冊項目 99
8.2 應(yīng)用庫中的注冊項 101
8.2.1 利用庫中注冊的項目制作網(wǎng)頁文檔 101
8.2.2 修改庫中注冊的項目 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 認識“框架”面板 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 項目實訓 120
9.8.1 項目實訓一：為框架設(shè)置不同背景 120
9.8.2 項目實訓二：使用框架制作網(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 項目實訓 132
10.4.1 項目實訓一：制作會員注冊 表單 132
10.4.2 項目實訓二：制作大型購物 中心訂單頁面 138

第11章 多媒體的應(yīng)用 152
11.1 插入Flash動畫 152
11.1.1 認識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 認識FLV視頻 156
11.3.2 在網(wǎng)頁中插入FLV視頻 157
11.4 插入Applet 159
11.5 插入ActiveX控件 160
11.6 插入插件 161
11.6.1 插入插件圖標 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 把鼠標移至瞬間跳轉(zhuǎn) 177
12.10.2 跳轉(zhuǎn)到菜單相關(guān)頁面 179
12.10.3 添加GO按鈕 182
12.11 制作對鼠標動作做出反應(yīng)的導航條 182
12.11.1 制作導航條的基本信息 182
12.11.2 添加可以知道當前所選菜單的行為 185
12.12 在網(wǎng)頁中顯示事件窗口 187
12.12.1 在網(wǎng)頁中顯示指定大小的彈出窗口 187
12.12.2 添加導航條和菜單欄 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實現(xiàn)關(guān)閉網(wǎng)頁 201

參考文獻 203