邊做邊學(xué)：Dreamweaver CS6網(wǎng)頁(yè)設(shè)計(jì)案例教程（第3版 微課版）

第 1章
初識(shí)Dreamweaver　CS6　1
1．1　操作界面　2
1．1．1　【操作目的】　2
1．1．2　【操作步驟】　2
1．1．3　【相關(guān)工具】　2
1．開(kāi)始頁(yè)面　2
2．不同風(fēng)格的界面　3
3．伸縮自如的功能面板　3
4．多文檔的編輯界面　4
5．“插入”面板　4
6．更完整的CSS功能　4
1．2　創(chuàng)建網(wǎng)站框架　5
1．2．1　【操作目的】　5
1．2．2　【操作步驟】　5
1．2．3　【相關(guān)工具】　6
1．3　管理站點(diǎn)　8
1．3．1　【操作目的】　8
1．3．2　【操作步驟】　8
1．3．3　【相關(guān)工具】　10
1．站點(diǎn)管理器　10
2．創(chuàng)建文件夾　12
3．定義新站點(diǎn)　12
1．4　網(wǎng)頁(yè)文件頭設(shè)置　13
1．4．1　【操作目的】　13
1．4．2　【操作步驟】　13
1．4．3　【相關(guān)工具】　13
1．插入搜索關(guān)鍵字　13
2．插入作者和版權(quán)信息　14
3．設(shè)置刷新時(shí)間　14
4．設(shè)置描述信息　15
5．設(shè)置頁(yè)面中所有鏈接的
基準(zhǔn)鏈接　15
6．設(shè)置當(dāng)前文檔與其他
文件的關(guān)系　16
第　2章
文本和文檔　17
2．1　軒宇門窗網(wǎng)頁(yè)　18
2．1．1　【案例分析】　18
2．1．2　【設(shè)計(jì)理念】　18
2．1．3　【操作步驟】　18
1．設(shè)置頁(yè)面屬性　18
2．輸入空格和文字　19
2．1．4　【相關(guān)工具】　22
1．輸入文本　22
2．設(shè)置文本屬性　23
3．輸入連續(xù)的空格　23
4．設(shè)置是否顯示不可見(jiàn)元素　24
5．設(shè)置頁(yè)邊距　24
6．設(shè)置網(wǎng)頁(yè)的標(biāo)題　25
7．設(shè)置網(wǎng)頁(yè)的默認(rèn)格式　25
2．1．5　【實(shí)戰(zhàn)演練】——
青山別墅網(wǎng)頁(yè)　26
2．2　休閑旅游網(wǎng)頁(yè)　26
2．2．1　【案例分析】　26
2．2．2　【設(shè)計(jì)理念】　26
2．2．3　【操作步驟】　27
1．添加字體　27
2．改變文字外觀　28
2．2．4　【相關(guān)工具】　29
1．改變文本的大小　29
2．改變文本的顏色　30



3．改變文本的字體　31
4．改變文本的對(duì)齊方式　32
5．設(shè)置文本樣式　33
6．段落文本　33
7．插入換行符　35
8．設(shè)置項(xiàng)目符號(hào)或編號(hào)　35
9．修改項(xiàng)目符號(hào)或編號(hào)　35
10．設(shè)置文本縮進(jìn)格式　36
11．插入日期　36
12．特殊字符　36
2．2．5　【實(shí)戰(zhàn)演練】——電器城網(wǎng)頁(yè)　37
2．3　休閑度假村網(wǎng)頁(yè)　37
2．3．1　【案例分析】　37
2．3．2　【設(shè)計(jì)理念】　38
2．3．3　【操作步驟】　38
2．3．4　【相關(guān)工具】　40
1．水平線　40
2．顯示和隱藏網(wǎng)格　41
3．標(biāo)尺　41
2．3．5　【實(shí)戰(zhàn)演練】——
攝影藝術(shù)網(wǎng)頁(yè)　42
2．4　綜合演練——電商網(wǎng)頁(yè)　43
2．4．1　【案例分析】　43
2．4．2　【設(shè)計(jì)理念】　43
2．4．3　【知識(shí)要點(diǎn)】　43
2．5　綜合演練——有機(jī)果蔬網(wǎng)頁(yè)　44
2．5．1　【案例分析】　44
2．5．2　【設(shè)計(jì)理念】　44
2．5．3　【知識(shí)要點(diǎn)】　44
第3章
圖像和多媒體　45
3．1　紙杯蛋糕網(wǎng)頁(yè)　46


3．1．1　【案例分析】　46
3．1．2　【設(shè)計(jì)理念】　46
3．1．3　【操作步驟】　46
3．1．4　【相關(guān)工具】　48
1．網(wǎng)頁(yè)中的圖像格式　48
2．插入圖像　48
3．設(shè)置圖像屬性　49
4．插入圖像占位符　50
5．跟蹤圖像　50
3．1．5　【實(shí)戰(zhàn)演練】——
環(huán)球旅游網(wǎng)頁(yè)　51
3．2　物流運(yùn)輸網(wǎng)頁(yè)　51
3．2．1　【案例分析】　51
3．2．2　【設(shè)計(jì)理念】　51
3．2．3　【操作步驟】　52
3．2．4　【相關(guān)工具】　53
1．插入Flash動(dòng)畫　53
2．插入FLV　54
3．插入Shockwave影片　56
4．影片插入Applet程序　56
5．插入ActiveX控件　57
3．2．5　【實(shí)戰(zhàn)演練】——
準(zhǔn)媽媽課堂網(wǎng)頁(yè)　57
3．3　綜合演練——
咖啡館網(wǎng)頁(yè)　57
3．3．1　【案例分析】　57
3．3．2　【設(shè)計(jì)理念】　58
3．3．3　【知識(shí)要點(diǎn)】　58
3．4　綜合演練——
綠色農(nóng)場(chǎng)網(wǎng)頁(yè)　58
3．4．1　【案例分析】　58
3．4．2　【設(shè)計(jì)理念】　58
3．4．3　【知識(shí)要點(diǎn)】　58



第4章
超鏈接　60
4．1　建筑模型網(wǎng)頁(yè)　61
4．1．1　【案例分析】　61
4．1．2　【設(shè)計(jì)理念】　61
4．1．3　【操作步驟】　61
1．制作電子郵件鏈接　61
2．制作下載文件鏈接　62
4．1．4　【相關(guān)工具】　63
1．超鏈接的概念與路徑知識(shí)　63
2．創(chuàng)建文本鏈接　63
3．文本鏈接的狀態(tài)　65
4．下載文件鏈接　65
5．電子郵件鏈接　66
4．1．5　【實(shí)戰(zhàn)演練】——
創(chuàng)意設(shè)計(jì)網(wǎng)頁(yè)　66
4．2　溫泉度假網(wǎng)頁(yè)　67
4．2．1　【案例分析】　67
4．2．2　【設(shè)計(jì)理念】　67
4．2．3　【操作步驟】　67
1．制作鼠標(biāo)經(jīng)過(guò)　67
2．創(chuàng)建熱點(diǎn)鏈接　68
4．2．4　【相關(guān)工具】　69
1．圖像超鏈接　69
2．鼠標(biāo)經(jīng)過(guò)圖像鏈接　69
3．命名錨記鏈接　70
4．創(chuàng)建熱區(qū)鏈接　71
4．2．5　【實(shí)戰(zhàn)演練】——
金融投資網(wǎng)頁(yè)　72
4．3　綜合演練——世界景觀網(wǎng)頁(yè)　73
4．3．1　【案例分析】　73
4．3．2　【設(shè)計(jì)理念】　73
4．3．3　【知識(shí)要點(diǎn)】　73
4．4　綜合演練——獅立地板網(wǎng)頁(yè)　74


4．4．1　【案例分析】　74
4．4．2　【設(shè)計(jì)理念】　74
4．4．3　【知識(shí)要點(diǎn)】　74
第5章
使用表格　75
5．1　營(yíng)養(yǎng)美食網(wǎng)頁(yè)　76
5．1．1　【案例分析】　76
5．1．2　【設(shè)計(jì)理念】　76
5．1．3　【操作步驟】　76
5．1．4　【相關(guān)工具】　80
1．表格的組成　80
2．插入表格　81
3．表格各元素的屬性　82
4．在表格中插入內(nèi)容　83
5．選擇表格元素　83
6．復(fù)制、粘貼表格　85
7．縮放表格　86
8．刪除表格和表格內(nèi)容　86
9．合并和拆分單元格　87
10．增加、刪除表格的行或列　88
5．1．5　【實(shí)戰(zhàn)演練】——
火鍋餐廳網(wǎng)頁(yè)　88
5．2　綠色糧倉(cāng)網(wǎng)頁(yè)　89
5．2．1　【案例分析】　89
5．2．2　【設(shè)計(jì)理念】　89
5．2．3　【操作步驟】　89
1．導(dǎo)入表格式數(shù)據(jù)　89
2．排序表格　92
5．2．4　【相關(guān)工具】　93
1．導(dǎo)入和導(dǎo)出表格的數(shù)據(jù)　93
2．排序表格　95
3．復(fù)雜表格的排版　95
5．2．5　【實(shí)戰(zhàn)演練】——
典藏博物館網(wǎng)頁(yè)　96


5．3　綜合演練——茶文化網(wǎng)頁(yè)　96
5．3．1　【案例分析】　96
5．3．2　【設(shè)計(jì)理念】　96
5．3．3　【知識(shí)要點(diǎn)】　96
5．4　綜合演練——信用卡網(wǎng)頁(yè)　97
5．4．1　【案例分析】　97
5．4．2　【設(shè)計(jì)理念】　97
5．4．3　【知識(shí)要點(diǎn)】　97
第6章
使用框架　98
6．1　牛奶飲料網(wǎng)頁(yè)　99
6．1．1　【案例分析】　99
6．1．2　【設(shè)計(jì)理念】　99
6．1．3　【操作步驟】　99
1．新建框架并編輯　99
2．插入圖像　101
6．1．4　【相關(guān)工具】　102
1．建立框架集　102
2．為框架添加內(nèi)容　103
3．保存框架　104
4．框架的選擇　104
5．修改框架的大小　105
6．拆分框架　106
7．刪除框架　106
6．1．5　【實(shí)戰(zhàn)演練】——
獻(xiàn)愛(ài)心活動(dòng)中心網(wǎng)頁(yè)　107
6．2　建筑規(guī)劃網(wǎng)頁(yè)　107
6．2．1　【案例分析】　107
6．2．2　【設(shè)計(jì)理念】　107
6．2．3　【操作步驟】　108
1．設(shè)置保存的文檔　108
2．插入表格、圖像和
鼠標(biāo)經(jīng)過(guò)圖像　109


3．修改頁(yè)面屬性并插入圖像　111
4．創(chuàng)建圖像超鏈接　111
6．2．4　【相關(guān)工具】　112
1．框架屬性　112
2．框架集的屬性　113
3．框架中的鏈接　113
6．2．5　【實(shí)戰(zhàn)演練】——
陽(yáng)光外語(yǔ)小學(xué)網(wǎng)頁(yè)　114
6．3　綜合演練——
健康定制網(wǎng)頁(yè)1　115
6．3．1　【案例分析】　115
6．3．2　【設(shè)計(jì)理念】　115
6．3．3　【知識(shí)要點(diǎn)】　115
6．4　綜合演練——
健康定制網(wǎng)頁(yè)2　116
6．4．1　【案例分析】　116
6．4．2　【設(shè)計(jì)理念】　116
6．4．3　【知識(shí)要點(diǎn)】　116
第7章
使用層　117
7．1　聯(lián)創(chuàng)網(wǎng)絡(luò)技術(shù)網(wǎng)頁(yè)　118
7．1．1　【案例分析】　118
7．1．2　【設(shè)計(jì)理念】　118
7．1．3　【操作步驟】　118
7．1．4　【相關(guān)工具】　119
1．創(chuàng)建并編輯層　119
2．選擇層　121
3．設(shè)置層的默認(rèn)屬性　121
4．AP元素面板　122
5．更改層的堆疊順序　122
6．更改層的可見(jiàn)性　123
7．調(diào)整層的大小　123
8．嵌套層　124


9．移動(dòng)層　124
10．對(duì)齊層　125
11．層靠齊到網(wǎng)格　125
7．1．5　【實(shí)戰(zhàn)演練】——
時(shí)尚前沿網(wǎng)頁(yè)　126
7．2　海貸金融網(wǎng)頁(yè)　127
7．2．1　【案例分析】　127
7．2．2　【設(shè)計(jì)理念】　127
7．2．3　【操作步驟】　127
7．2．4　【相關(guān)工具】　128
1．將AP　Div轉(zhuǎn)換為表格　128
2．將表格轉(zhuǎn)換為AP　Div　129
7．2．5　【實(shí)戰(zhàn)演練】——
信業(yè)融資網(wǎng)頁(yè)　129
7．3　綜合演練——投資理財(cái)網(wǎng)頁(yè)　130
7．3．1　【案例分析】　130
7．3．2　【設(shè)計(jì)理念】　130
7．3．3　【知識(shí)要點(diǎn)】　130
7．4　綜合演練——
購(gòu)物狂歡節(jié)網(wǎng)頁(yè)　131
7．4．1　【案例分析】　131
7．4．2　【設(shè)計(jì)理念】　131
7．4．3　【知識(shí)要點(diǎn)】　131
第8章
CSS樣式　132
8．1　國(guó)畫展覽館網(wǎng)頁(yè)　133
8．1．1　【案例分析】　133
8．1．2　【設(shè)計(jì)理念】　133
8．1．3　【操作步驟】　133
8．1．4　【相關(guān)工具】　135
1．CSS樣式的概念　135


2．“CSS樣式”面板　135
3．CSS樣式的類型　136
4．重定義HTML標(biāo)簽樣式　137
5．創(chuàng)建CSS選擇器　138
6．創(chuàng)建和應(yīng)用自定義樣式　140
7．創(chuàng)建和引用外部樣式　140
8．編輯樣式　141
8．1．5　【實(shí)戰(zhàn)演練】——跑酷網(wǎng)頁(yè)　142
8．2　打印機(jī)網(wǎng)頁(yè)　143
8．2．1　【案例分析】　143
8．2．2　【設(shè)計(jì)理念】　143
8．2．3　【操作步驟】　143
1．插入表格并輸入文字　143
2．設(shè)置CSS屬性　144
8．2．4　【相關(guān)工具】　147
1．類型　147
2．背景　148
3．區(qū)塊　149
4．方框　150
5．邊框　150
6．列表　151
7．定位　151
8．?dāng)U展　152
9．過(guò)渡　152
8．2．5　【實(shí)戰(zhàn)演練】——山地車網(wǎng)頁(yè)　153
8．3　愛(ài)晚工程網(wǎng)頁(yè)　153
8．3．1　【案例分析】　153
8．3．2　【設(shè)計(jì)理念】　153
8．3．3　【操作步驟】　154
8．3．4　【相關(guān)工具】　155
1．可應(yīng)用過(guò)濾的HTML標(biāo)簽　155
2．CSS的靜態(tài)過(guò)濾器　155
3．CSS的動(dòng)態(tài)過(guò)濾器　157
8．3．5　【實(shí)戰(zhàn)演練】——
傲多特?cái)z影網(wǎng)頁(yè)　157
8．4　綜合演練——愛(ài)插畫網(wǎng)頁(yè)　157


8．4．1　【案例分析】　157
8．4．2　【設(shè)計(jì)理念】　157
8．4．3　【知識(shí)要點(diǎn)】　157
8．5　綜合演練——
優(yōu)選購(gòu)物網(wǎng)頁(yè)　158
8．5．1　【案例分析】　158
8．5．2　【設(shè)計(jì)理念】　158
8．5．3　【知識(shí)要點(diǎn)】　158
第9章
模板和庫(kù)　159
9．1　電子吉他網(wǎng)頁(yè)　160
9．1．1　【案例分析】　160
9．1．2　【設(shè)計(jì)理念】　160
9．1．3　【操作步驟】　160
1．創(chuàng)建模板　160
2．創(chuàng)建可編輯區(qū)域　161
9．1．4　【相關(guān)工具】　162
1．“資源”面板　162
2．創(chuàng)建模板　162
3．定義和取消可編輯區(qū)域　163
4．創(chuàng)建基于模板的網(wǎng)頁(yè)　166
5．管理模板　167
9．1．5　【實(shí)戰(zhàn)演練】——
水果慕斯網(wǎng)頁(yè)　168
9．2　水果批發(fā)網(wǎng)頁(yè)　169
9．2．1　【案例分析】　169
9．2．2　【設(shè)計(jì)理念】　169
9．2．3　【操作步驟】　169
1．把經(jīng)常用的圖標(biāo)
注冊(cè)到庫(kù)中　169
2．利用庫(kù)中注冊(cè)的項(xiàng)目
制作網(wǎng)頁(yè)文檔　170


3．修改庫(kù)中注冊(cè)的項(xiàng)目　171
9．2．4　【相關(guān)工具】　173
1．創(chuàng)建庫(kù)文件　173
2．頁(yè)面添加庫(kù)項(xiàng)目　174
3．更新庫(kù)文件　174
9．2．5　【實(shí)戰(zhàn)演練】——
精品沙發(fā)網(wǎng)頁(yè)　176
9．3　綜合演練——游天下網(wǎng)頁(yè)　176
9．3．1　【案例分析】　176
9．3．2　【設(shè)計(jì)理念】　176
9．3．3　【知識(shí)要點(diǎn)】　176
9．4　綜合演練——
律師事務(wù)所網(wǎng)頁(yè)　177
9．4．1　【案例分析】　177
9．4．2　【設(shè)計(jì)理念】　177
9．4．3　【知識(shí)要點(diǎn)】　177
第　10章
表單和行為　178
10．1　廢品回收網(wǎng)頁(yè)　179
10．1．1　【案例分析】　179
10．1．2　【設(shè)計(jì)理念】　179
10．1．3　【操作步驟】　179
1．插入文本字段和
文本區(qū)域　179
2．插入圖像域　180
10．1．4　【相關(guān)工具】　181
1．創(chuàng)建表單　181
2．表單的屬性　181
3．單行文本域　182
4．隱藏域　184
5．單選按鈕　184
6．單選按鈕組　185
7．復(fù)選框　185


8．創(chuàng)建列表和菜單　186
9．創(chuàng)建跳轉(zhuǎn)菜單　188
10．創(chuàng)建文件域　189
11．創(chuàng)建圖像域　190
12．“提交”按鈕、“重置”
按鈕和普通按鈕　191
10．1．5　【實(shí)戰(zhàn)演練】——
愛(ài)尚家裝網(wǎng)頁(yè)　192
10．2　愛(ài)在七夕網(wǎng)頁(yè)　192
10．2．1　【案例分析】　192
10．2．2　【設(shè)計(jì)理念】　192
10．2．3　【操作步驟】　193
1．顯示指定大小的彈出窗口　193
2．添加導(dǎo)航條和菜單欄　194
10．2．4　【相關(guān)工具】　195
1．“行為”面板　195
2．應(yīng)用行為　195
3．調(diào)用JavaScript　196
4．打開(kāi)瀏覽器窗口　196
5．轉(zhuǎn)到URL　198
6．檢查插件　199
7．檢查表單　199
8．交換圖像　200
9．顯示-隱藏層　201
10．設(shè)置容器的文本　203
11．設(shè)置狀態(tài)欄文本　204
12．設(shè)置文本域文字　204
13．設(shè)置框架文本　205
14．跳轉(zhuǎn)菜單　206
15．跳轉(zhuǎn)菜單開(kāi)始　206
10．2．5　【實(shí)戰(zhàn)演練】——
風(fēng)景攝影網(wǎng)頁(yè)　207
10．3　綜合演練——房屋
評(píng)估網(wǎng)頁(yè)　207
10．3．1　【案例分析】　207
10．3．2　【設(shè)計(jì)理念】　207
10．3．3　【知識(shí)要點(diǎn)】　207

10．4　綜合演練——品牌
商城網(wǎng)頁(yè)　208
10．4．1　【案例分析】　208
10．4．2　【設(shè)計(jì)理念】　208
10．4．3　【知識(shí)要點(diǎn)】　208
第　11章
網(wǎng)頁(yè)代碼　209
11．1　品質(zhì)狂歡節(jié)網(wǎng)頁(yè)　210
11．1．1　【案例分析】　210
11．1．2　【設(shè)計(jì)理念】　210
11．1．3　【操作步驟】　210
11．1．4　【相關(guān)工具】　212
1．使用“參考”面板　212
2．代碼提示功能　212
3．使用標(biāo)簽庫(kù)插入標(biāo)簽　213
4．使用標(biāo)簽選擇器插入標(biāo)簽　214
5．使用標(biāo)簽檢查器編輯代碼　215
6．使用標(biāo)簽編輯器編輯代碼　216
11．1．5　【實(shí)戰(zhàn)演練】——
商業(yè)公司網(wǎng)頁(yè)　216
11．2　油畫藝術(shù)館網(wǎng)頁(yè)　216
11．2．1　【案例分析】　216
11．2．2　【設(shè)計(jì)理念】　217
11．2．3　【操作步驟】　217
1．制作瀏覽器窗口
（永遠(yuǎn)都不出現(xiàn)滾動(dòng)條）　217
2．制作禁止使用單擊右鍵　218
11．2．4　【相關(guān)工具】　219
1．常用的HTML標(biāo)簽　219
2．腳本語(yǔ)言　220
3．響應(yīng)HTML事件　220
11．2．5　【實(shí)戰(zhàn)演練】——
人壽保險(xiǎn)網(wǎng)頁(yè)　222


11．3　綜合演練——
活動(dòng)詳情網(wǎng)頁(yè)　222
11．3．1　【案例分析】　222
11．3．2　【設(shè)計(jì)理念】　222
11．3．3　【知識(shí)要點(diǎn)】　222
11．4　綜合演練——消防
在線網(wǎng)頁(yè)　223
11．4．1　【案例分析】　223
11．4．2　【設(shè)計(jì)理念】　223
11．4．3　【知識(shí)要點(diǎn)】　223
第　12章
綜合設(shè)計(jì)實(shí)訓(xùn)　224
12．1　個(gè)人網(wǎng)頁(yè)——張美麗的
個(gè)人網(wǎng)頁(yè)　225
12．1．1　【項(xiàng)目背景及要求】　225
1．客戶名稱　225
2．客戶需求　225
3．設(shè)計(jì)要求　225
12．1．2　【項(xiàng)目創(chuàng)意及制作】　225
1．設(shè)計(jì)素材　225
2．設(shè)計(jì)作品　225
3．步驟提示　225
12．2　游戲娛樂(lè)網(wǎng)頁(yè)——
娛樂(lè)星聞網(wǎng)頁(yè)　228
12．2．1　【項(xiàng)目背景及要求】　228
1．客戶名稱　228
2．客戶需求　228
3．設(shè)計(jì)要求　228
12．2．2　【項(xiàng)目創(chuàng)意及制作】　228




1．設(shè)計(jì)素材　228
2．設(shè)計(jì)作品　228
3．步驟提示　228
12．3　旅游休閑網(wǎng)頁(yè)——
籃球運(yùn)動(dòng)網(wǎng)頁(yè)　231
12．3．1　【項(xiàng)目背景及要求】　231
1．客戶名稱　231
2．客戶需求　231
3．設(shè)計(jì)要求　231
12．3．2　【項(xiàng)目創(chuàng)意及制作】　232
1．設(shè)計(jì)素材　232
2．設(shè)計(jì)作品　232
3．步驟提示　232
12．4　房產(chǎn)網(wǎng)頁(yè)——
焦點(diǎn)房產(chǎn)網(wǎng)頁(yè)　235
12．4．1　【項(xiàng)目背景及要求】　235
1．客戶名稱　235
2．客戶需求　235
3．設(shè)計(jì)要求　235
12．4．2　【項(xiàng)目創(chuàng)意及制作】　235
1．設(shè)計(jì)素材　235
2．設(shè)計(jì)作品　235
3．步驟提示　236
12．5　文化藝術(shù)網(wǎng)頁(yè)——
書(shū)法藝術(shù)網(wǎng)頁(yè)　237
12．5．1　【項(xiàng)目背景及要求】　237
1．客戶名稱　237
2．客戶需求　237
3．設(shè)計(jì)要求　237
12．5．2　【項(xiàng)目創(chuàng)意及制作】　238
1．設(shè)計(jì)素材　238
2．設(shè)計(jì)作品　238
3．步驟提示　238