前 言

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

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

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

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

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

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

由于編者水平有限，加之時間倉促，書中錯誤之處難免，敬請讀者批評指正。

目 錄
前言

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

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