網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目案例教程（Dreamweaver CS6）

前 言

本書是基于Dreamweaver CS6平臺(tái)來(lái)編寫的。Dreamweaver CS6是繼Dreamweaver CS5之后推出的完美的網(wǎng)站及網(wǎng)絡(luò)應(yīng)用程序制作軟件，新版本趨向于易用快捷，使用了自適應(yīng)網(wǎng)格版面創(chuàng)建頁(yè)面，在發(fā)布前可使用多屏幕預(yù)覽審閱設(shè)計(jì)，大大提高了用戶的工作效率，而改善的FTP性能可更高效地傳輸大型文件。“實(shí)時(shí)視圖”和“多屏幕預(yù)覽”面板可呈現(xiàn)HTML5 代碼，用戶能更方便地檢查自己的工作。

本書在編寫過(guò)程中以學(xué)習(xí)者為本，站在學(xué)習(xí)者的角度去思考在網(wǎng)頁(yè)設(shè)計(jì)與制作學(xué)習(xí)過(guò)程中會(huì)遇到的問(wèn)題，然后通過(guò)相應(yīng)知識(shí)的學(xué)習(xí)來(lái)一步步解決這些問(wèn)題，從而引導(dǎo)學(xué)習(xí)者逐步掌握網(wǎng)頁(yè)設(shè)計(jì)與制作相關(guān)的知識(shí)與網(wǎng)頁(yè)設(shè)計(jì)與制作的方法。通過(guò)認(rèn)真分析總結(jié)提煉這些問(wèn)題形成一個(gè)個(gè)項(xiàng)目，然后以案例貫穿于項(xiàng)目，讓學(xué)習(xí)者在制作網(wǎng)頁(yè)的過(guò)程中學(xué)習(xí)知識(shí)，既學(xué)到了知識(shí)，又掌握了技能，累積了經(jīng)驗(yàn)。

學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)與制作就像建房子，第一步就是要夯實(shí)基礎(chǔ)，掌握網(wǎng)頁(yè)設(shè)計(jì)與制作的基礎(chǔ)知識(shí)，然后把站點(diǎn)結(jié)構(gòu)搭建起來(lái)，再在站點(diǎn)中創(chuàng)建網(wǎng)頁(yè)，搭建網(wǎng)頁(yè)框架結(jié)構(gòu)，添加網(wǎng)頁(yè)元素，美化網(wǎng)頁(yè)，最后測(cè)試并發(fā)布網(wǎng)站。本書的內(nèi)容就圍繞這些層層展開，步步遞進(jìn)，主要內(nèi)容為：項(xiàng)目一基礎(chǔ)知識(shí)，項(xiàng)目二工具的學(xué)習(xí)與建站，項(xiàng)目三美化利器CSS，項(xiàng)目四各種網(wǎng)頁(yè)元素的添加方法，項(xiàng)目五表格布局網(wǎng)頁(yè)，項(xiàng)目六DIV+CSS布局網(wǎng)頁(yè)，項(xiàng)目七框架網(wǎng)頁(yè)，項(xiàng)目八行為與表單，項(xiàng)目九模板網(wǎng)頁(yè)，項(xiàng)目十測(cè)試與發(fā)布、維護(hù)與推廣，項(xiàng)目十一綜合案例。最后的綜合案例完全按照網(wǎng)站制作流程進(jìn)行設(shè)計(jì)與制作。

為了鞏固對(duì)知識(shí)的掌握，拓寬視野，提升技能，本書還配備了課后思考練習(xí)題，拓展訓(xùn)練實(shí)戰(zhàn)題。

本書面向初學(xué)者，是理想的網(wǎng)頁(yè)設(shè)計(jì)與制作首選教材。也可以作為有一定基礎(chǔ)學(xué)習(xí)者的參考書與職業(yè)培訓(xùn)教材。

本書由楊麗芳、劉琳擔(dān)任主編，由牟向宇、楊秀杰、蘇云鳳、王秀麗擔(dān)任副主編。劉明、任航瓔參與了本書的編寫工作。全書統(tǒng)稿、定稿由楊麗芳負(fù)責(zé)完成。本書的順利出版，還要感謝重慶電子工程職業(yè)學(xué)院計(jì)算機(jī)學(xué)院的領(lǐng)導(dǎo)和老師給予的大力支持和幫助。

由于編者水平有限，加之時(shí)間倉(cāng)促，書中錯(cuò)誤之處難免，敬請(qǐng)讀者批評(píng)指正。

目 錄
前言

項(xiàng)目一 夯實(shí)基礎(chǔ)―網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ) 1
1.1 任務(wù)1：了解網(wǎng)頁(yè)相關(guān)基礎(chǔ)知識(shí) 1
1.1.1 網(wǎng)站與網(wǎng)頁(yè)概述 1
1.1.2 網(wǎng)頁(yè)的版塊結(jié)構(gòu) 3
1.1.3 網(wǎng)頁(yè)的基本構(gòu)成要素 5
1.1.4 網(wǎng)頁(yè)設(shè)計(jì)與制作軟件 6
1.2 任務(wù)2：了解網(wǎng)站建設(shè)的基本流程 6
1.2.1 需求分析 7
1.2.2 網(wǎng)站規(guī)劃設(shè)計(jì) 7
1.2.3 搜集資料 13
1.2.4 網(wǎng)頁(yè)制作 13
1.2.5 測(cè)試發(fā)布與管理維護(hù) 14
1.3 任務(wù)3：學(xué)習(xí)HTML標(biāo)記語(yǔ)言 14
1.3.1 HTML概念 14
1.3.2 HTML的結(jié)構(gòu)與語(yǔ)法 15
1.3.3 HTML常用標(biāo)簽 16
1.3.4 HTML與XHTML 21
1.4 任務(wù)4：HTML網(wǎng)頁(yè)簡(jiǎn)單實(shí)例—
相約春天 22
1.4.1 案例效果展示與分析 22
1.4.2 網(wǎng)頁(yè)制作 23
1.4.3 保存網(wǎng)頁(yè) 26
1.4.4 預(yù)覽網(wǎng)頁(yè) 26
1.4.5 編輯網(wǎng)頁(yè) 26
思考練習(xí) 26
項(xiàng)目二 安營(yíng)扎寨―在Dreamweaver中創(chuàng)建與
管理站點(diǎn) 28
2.1 任務(wù)1：認(rèn)識(shí)Dreamweaver CS6 28
2.1.1 Dreamweaver CS6概述 28
2.1.2 Dreamweaver CS6工作界面 29
2.1.3 Dreamweaver CS6基本操作 32
2.2 任務(wù)2：創(chuàng)建與管理站點(diǎn)—驢行天下 34
2.2.1 規(guī)劃站點(diǎn)結(jié)構(gòu) 34
2.2.2 創(chuàng)建本地站點(diǎn) 34
2.2.3 創(chuàng)建網(wǎng)頁(yè)文件與文件夾 36
2.2.4 管理站點(diǎn) 38
2.3 任務(wù)3：使用Dreamweaver創(chuàng)建一個(gè)
簡(jiǎn)單網(wǎng)頁(yè)—My Zone 39
2.3.1 案例效果展示與分析 40
2.3.2 創(chuàng)建站點(diǎn) 40
2.3.3 添加內(nèi)容 40
2.3.4 美化網(wǎng)頁(yè) 44
思考練習(xí) 47
項(xiàng)目三 美化利器―CSS樣式 49
3.1 任務(wù)1：認(rèn)識(shí)CSS樣式表 49
3.1.1 CSS概述 49
3.1.2 CSS基本語(yǔ)法 50
3.1.3 CSS選擇器類型 51
3.2 任務(wù)2：在HTML中使用CSS 54
3.2.1 CSS在HTML中的位置 54
3.2.2 CSS的繼承性 57
3.2.3 CSS的優(yōu)先級(jí) 57
3.3 任務(wù)3：在Dreamweaver中創(chuàng)建
編輯CSS 58
3.3.1 創(chuàng)建CSS樣式 58
3.3.2 編輯CSS樣式 62
3.4 任務(wù)4：使用CSS美化網(wǎng)頁(yè)—
教務(wù)管理系統(tǒng)頁(yè)面 63
3.4.1 效果分析 64
3.4.2 美化網(wǎng)頁(yè) 64
思考練習(xí) 68
項(xiàng)目四 基本功練習(xí)―添加網(wǎng)頁(yè)基本元素 71
4.1 任務(wù)1：制作文本網(wǎng)頁(yè)—“古典音樂(lè)”
之基本簡(jiǎn)介 71
4.1.1 案例效果展示與分析 71
4.1.2 添加網(wǎng)頁(yè)內(nèi)容 72
4.1.3 美化網(wǎng)頁(yè) 77
4.2 任務(wù)2：制作圖文混排網(wǎng)頁(yè)—
“古典音樂(lè)”之歷史起源 80
4.2.1 案例效果展示與分析 81
4.2.2 添加網(wǎng)頁(yè)內(nèi)容 81
4.2.3 美化網(wǎng)頁(yè) 83
4.3 任務(wù)3：制作多媒體網(wǎng)頁(yè)—
“古典音樂(lè)”之樂(lè)器音色 84
4.3.1 案例效果展示與分析 85
4.3.2 制作網(wǎng)頁(yè) 85
4.4 任務(wù)4：整合網(wǎng)頁(yè)—添加超鏈接 91
4.4.1 文本與圖像超鏈接 91
4.4.2 電子郵件超鏈接 93
4.4.3 錨記超鏈接 94
4.4.4 熱點(diǎn)超鏈接 95
思考練習(xí) 96
項(xiàng)目五 井然有序―應(yīng)用表格 98
5.1 任務(wù)1：認(rèn)識(shí)表格—制作崗位競(jìng)聘表 98
5.1.1 案例效果展示與分析 98
5.1.2 創(chuàng)建表格 99
5.1.3 調(diào)整表格 100
5.1.4 輸入內(nèi)容 103
5.1.5 設(shè)置表格與單元格的屬性 103
5.1.6 嵌套表格 105
5.2 任務(wù)2：制作表格布局網(wǎng)頁(yè)—
Dreamweaver學(xué)習(xí)園地 106
5.2.1 案例效果展示與分析 106
5.2.2 創(chuàng)建布局表格 106
5.2.3 添加網(wǎng)頁(yè)內(nèi)容 107
5.2.4 美化網(wǎng)頁(yè) 110
思考練習(xí) 116
項(xiàng)目六 更上一層樓―DIV+CSS布局網(wǎng)頁(yè) 118
6.1 任務(wù)1：認(rèn)識(shí)盒模型 118
6.1.1 盒模型概述 118
6.1.2 元素類型 120
6.2 任務(wù)2：認(rèn)識(shí)DIV標(biāo)簽 121
6.2.1 插入DIV標(biāo)簽 121
6.2.2 設(shè)置DIV屬性 122
6.3 任務(wù)3：制作DIV+CSS布局網(wǎng)頁(yè)—
茶業(yè)公司首頁(yè) 128
6.3.1 案例效果展示與分析 128
6.3.2 搭建框架 129
6.3.3 添加內(nèi)容 130
6.3.4 CSS美化網(wǎng)頁(yè) 133
思考練習(xí) 137
項(xiàng)目七 統(tǒng)籌兼顧―框架網(wǎng)頁(yè) 140
7.1 任務(wù)1：認(rèn)識(shí)和創(chuàng)建框架 140
7.1.1 認(rèn)識(shí)框架和框架集 140
7.1.2 創(chuàng)建與保存框架 142
7.1.3 框架基本操作 145
7.2 任務(wù)2：制作框架網(wǎng)頁(yè)——婚禮策劃
公司網(wǎng)頁(yè) 148
7.2.1 案例效果展示與分析 148
7.2.2 制作框架集網(wǎng)頁(yè) 149
7.2.3 制作框架網(wǎng)頁(yè) 151
7.2.4 創(chuàng)建框架中的鏈接 160
7.3 任務(wù)3：制作iframe框架網(wǎng)頁(yè) 162
7.3.1 案例效果展示與分析 162
7.3.2 制作iframe網(wǎng)頁(yè) 163
思考練習(xí) 169
項(xiàng)目八 靜里有動(dòng)―行為與表單 171
8.1 任務(wù)1：認(rèn)識(shí)行為 171
8.1.1 行為相關(guān)概念 171
8.1.2 “行為”面板 173
8.2 任務(wù)2：應(yīng)用行為 173
8.2.1 應(yīng)用彈出信息行為 173
8.2.2 打開瀏覽器窗口行為 174
8.2.3 改變屬性行為 176
8.2.4 顯示隱藏行為 178
8.2.5 設(shè)置文本行為 180
8.3 任務(wù)3：認(rèn)識(shí)表單 181
8.3.1 表單域 182
8.3.2 表單對(duì)象 183
8.4 任務(wù)4：表單使用—制作新用戶
注冊(cè)頁(yè)面 184
8.4.1 案例效果展示與分析 184
8.4.2 搭建框架 185
8.4.3 添加內(nèi)容 185
8.4.4 美化網(wǎng)頁(yè) 191
思考練習(xí) 193
項(xiàng)目九 一模多用―模板與庫(kù) 195
9.1 任務(wù)1：認(rèn)識(shí)模板 195
9.1.1 模板概述 195
9.1.2 創(chuàng)建模板 196
9.2 任務(wù)2：使用模板制作網(wǎng)站—
“星語(yǔ)星愿”網(wǎng)站制作 197
9.2.1 案例效果展示與分析 198
9.2.2 創(chuàng)建模板 198
9.2.3 制作模板 200
9.2.4 定義可編輯區(qū)域 204
9.2.5 制作基于此模板的頁(yè)面—首頁(yè) 204
9.2.6 制作基于此模板的頁(yè)面—
處女座二級(jí)頁(yè)面 207
9.3 任務(wù)3：操作模板 208
9.3.1 編輯模板 208
9.3.2 文檔脫離模板 209
9.4 任務(wù)4：庫(kù)的應(yīng)用—運(yùn)動(dòng)文字 209
9.4.1 創(chuàng)建庫(kù)項(xiàng)目 210
9.4.2 使用庫(kù)項(xiàng)目 211
思考練習(xí) 212
項(xiàng)目十 整裝待發(fā)―測(cè)試與發(fā)布、維護(hù)與推廣 214
10.1 任務(wù)1：測(cè)試與發(fā)布網(wǎng)站 214
10.1.1 測(cè)試網(wǎng)站 214
10.1.2 發(fā)布網(wǎng)站 217
10.2 任務(wù)2：維護(hù)網(wǎng)站 221
10.2.1 同步本地與遠(yuǎn)程站點(diǎn) 221
10.2.2 取出與存回文件 222
10.2.3 遮蓋 224
10.3 任務(wù)3：網(wǎng)站的優(yōu)化推廣 225
10.3.1 注冊(cè)搜索引擎 225
10.3.2 SEO搜索引擎優(yōu)化 225
10.3.3 其他推廣策略 228
思考練習(xí) 229
項(xiàng)目十一 綜合案例―在線鮮花網(wǎng)站首頁(yè)制作 230
11.1 任務(wù)1：網(wǎng)站建設(shè)規(guī)劃 230
11.1.1 需求分析 230
11.1.2 確定網(wǎng)站風(fēng)格 230
11.1.3 規(guī)劃網(wǎng)站結(jié)構(gòu) 231
11.2 任務(wù)2：前期制作準(zhǔn)備 232
11.2.1 搜集素材 232
11.2.2 制作Banner動(dòng)畫 232
11.2.3 繪制偽界面 232
11.2.4 拆分圖紙獲取素材 233
11.3 任務(wù)3：案例效果分析 237
11.4 任務(wù)4：制作網(wǎng)頁(yè) 238
11.4.1 創(chuàng)建站點(diǎn) 238
11.4.2 搭建框架 239
11.4.3 網(wǎng)頁(yè)細(xì)化 240
思考練習(xí) 249
參考文獻(xiàn) 250

1. HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目化教程 [范佳　胡卓舒　馮迎]
2. 網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)驗(yàn)指導(dǎo) [主編　鄧文鋒 利珊]
3. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [主編　溫凱峰 葉仕通]
4. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [主編 王瀟 章明珠]
5. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [主編 李佼輝 聶樹成]
6. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [主編 楊毅]
7. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [主編 陳建國(guó) 項(xiàng)煒]
8. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [孫娜 蒲秋梅 南洋 編著]
9. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [王鐵樁 聶衛(wèi)獻(xiàn)]
10. 網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)實(shí)戰(zhàn)教程 [李云程]
11. 網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目化教程 [周觀民 梁雪梅]
12. 網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版） [馬占欣]
13. 動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第三版） [程偉淵 倪燃]
14. 網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用技術(shù)（第二版） [齊建玲 楊艷杰]
15. 網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版）實(shí)訓(xùn)指導(dǎo) [任正云 賴玲 嚴(yán)永松 王婭紛]
16. 網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版） [任正云 賴玲 嚴(yán)永松 編著]
17. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [主編 陳彥許 陳維華]
18. Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作教程 [楊繼 主編]
19. 網(wǎng)頁(yè)設(shè)計(jì)與制作（第二版） [李京文]
20. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [主編 鄔錦雯]
21. 網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用技術(shù) [齊建玲 主編]
22. 網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程 [雷運(yùn)發(fā) 主編]
23. 網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)教程 [白征 李云程 主編]
24. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [任正云 陸大修 編著]
25. 網(wǎng)頁(yè)設(shè)計(jì)與制作 [馬占欣 主編 周文剛 支建飛 副主]
26. 動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程（第二版） [程偉淵 主編]