前 言

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

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

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

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

本書面向初學者，是理想的網頁設計與制作首選教材。也可以作為有一定基礎學習者的參考書與職業培訓教材。

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

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

目 錄
前言

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

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