本書是“新起點電腦教程”系列叢書的一個分冊，以通俗易懂的語言、翔實生動的操作案例、精挑細選的使用技巧，指導初學者快速掌握DreamweaverCC中文版的基礎知識與使用方法。
本書共14章，主要內容包括網頁設計與制作基礎、創建與管理站點、在網頁中編排文本和多媒體對象、設計網頁超級鏈接、使用表格和CSS布局頁面、使用模板和庫創建網頁、在網頁中應用表單和行為、制作jQueryMobile頁面以及站點的發布與推廣等方面的知識。
本書配套一張多媒體全景教學光盤，收錄了本書全部知識點的視頻教學課程，同時還贈送了4套相關視頻教學課程。超低的學習門檻和超大光盤內容含量，可以幫助讀者循序漸進的學習、掌握和提高。
本書面向學習該軟件的初中級用戶，適合無基礎知識又想快速掌握DreamweaverCC入門操作經驗的讀者，同時對有經驗的DreamweaverCC使用者也有很高的參考價值，還可以作為高等院校專業課教材和社會培訓機構平面設計培訓教材。
本書是學習電腦知識的新起點，是您邁向成功的開始！本書免費贈送多媒體全景立體視頻教學光盤，傾囊相贈4套圖書視頻教程，可享受在線實時技術支持與全程學習指導，更可加盟實戰技術群與作者和網友面對面交流。教師購書免費提供PPT課件資源。
Dreamweaver CC是由Adobe公司開發的網頁設計與制作軟件，主要用于Web站點、Web頁面和Web應用程序的設計、編碼和開發，利用它可以輕松制作出跨越平臺限制、充滿動感的網頁。它功能強大、易學易用，深受網頁制作愛好者和網頁設計師的喜愛，已經成為這一領域最流行的軟件之一。為幫助讀者快速掌握與應用Dreamweaver CC軟件，以便在工作中學以致用，我們編寫了本書。
本書為讀者快速入門Dreamweaver CC提供了一個嶄新的學習和實踐平臺，無論從基礎知識安排還是應用能力的訓練，都充分考慮了用戶的需求，可以快速達到理論知識與應用能力的同步提高。
本書根據電腦初學者的學習習慣，采用由淺入深、由易到難的方式講解。讀者還可以通過隨書贈送的多媒體視頻光盤學習。全書結構清晰、內容豐富，主要內容包括以下4個方面。
1. 基礎入門
第1～2章，介紹Dreamweaver CC的基礎知識，包括網頁的基本要素、網頁中的色彩特性以及Dreamweaver CC的工作環境等內容。
2. 網頁設計與制作
第3～7章，介紹網頁設計與制作的內容，包括創建與管理站點、在網頁中編排文本、使用圖像與多媒體豐富網頁內容、網頁超級鏈接的應用和使用表格布局頁面的方法與技巧。
3. CSS樣式布局頁面
第8～9章，主要講解利用樣式布局頁面，包括CSS樣式表、創建CSS樣式、將CSS應用到網頁、CSS布局方式和使用AP Div元素布局頁面等方面的方法與技巧。
4. 動態網頁設計
第10～14章，全面講解動態網頁設計方面的知識，包括利用模板和庫創建網頁、使用表單、使用行為創建動態效果、制作jQuery Mobile頁面以及站點的發布和推廣方面的知識。
本書由文杰書院組織編寫，參與本書編寫工作的有李軍、袁帥、文雪、肖微微、李強、高桂華、藺丹、張艷玲、李統財、安國英、賈亞軍、藺影、李偉、馮臣、宋艷輝等。
我們真切希望讀者在閱讀本書之后，可以開闊視野，增長實踐操作技能，并從中學習和總結操作的經驗和規律，達到靈活運用的水平。鑒于編者水平有限，書中紕漏和考慮不周之處在所難免，熱忱歡迎讀者予以批評、指正，以便我們日后能為您編寫更好的圖書。
編 者
文杰書院，是一支專職并專業化的圖書撰稿團隊，擁有一支高水平的作者隊伍，自成立以來，力爭成為圖書出版領域的一個知名工作室，先后成功與清華大學出版社等多家出版媒體合作編著出版圖書200多個品種。
第1章 網頁設計與制作基礎 1
1.1 網頁概述 2
1.1.1 網頁基本要素 2
1.1.2 網頁基本術語 4
1.1.3 靜態網頁和動態網頁 6
1.2 網頁編輯器和屏幕分辨率 7
1.2.1 網頁編輯器 7
1.2.2 屏幕分辨率 7
1.3 網站制作的基本流程 8
1.3.1 前期策劃 8
1.3.2 收集素材 8
1.3.3 規劃網站 8
1.3.4 制作HTML頁面 9
1.3.5 測試并上傳網站 9
1.3.6 網站的更新與維護 9
1.4 網頁設計中的色彩應用 9
1.4.1 網頁色彩的特性 9
1.4.2 網頁安全色 10
1.4.3 色彩模式 11
1.4.4 網頁配色的基本原則 12
1.4.5 網頁配色中的文本顏色 14
1.5 網頁制作常用軟件 16
1.5.1 網頁編輯排版軟件
Dreamweaver CC 16
1.5.2 圖像制作軟件Photoshop CC
和Fireworks CC 16
1.5.3 網頁動畫制作軟件Flash CC 16
1.5.4 網頁標記語言HTML 17
1.5.5 網頁腳本語言JavaScript 17
1.5.6 動態網頁編程語言ASP 17
1.6 思考與練習 17
第2章 Dreamweaver CC輕松入門 19
2.1 Dreamweaver CC工作界面 20
2.1.1 界面布局 20
2.1.2 工具欄、窗口和面板 20
2.1.3 【插入】面板 22
2.1.4 屬性檢查器 23
2.1.5 管理面板和面板組 24
2.2 Dreamweaver 工作流程 24
2.3 使用可視化助理布局 24
2.3.1 使用標尺 25
2.3.2 設置網格 26
2.4 實踐案例與上機指導 28
2.4.1 使用輔助線 28
2.4.2 使用跟蹤圖像功能 30
2.4.3 設置縮放比率 30
2.4.4 設置窗口大小 31
2.5 思考與練習 32
第3章 創建與管理站點 33
3.1 站點及站點結構 34
3.1.1 站點 34
3.1.2 站點結構 35
3.2 創建本地站點 35
3.2.1 使用向導搭建站點 35
3.2.2 使用【高級設置】選項
面板創建站點 37
3.3 管理站點 40
3.3.1 打開站點 40
3.3.2 切換站點 41
3.3.3 【管理站點】對話框 41
3.4 管理站點中的文件 42
3.4.1 在站點中新建文件夾 42
3.4.2 在站點中新建頁面 43
3.4.3 移動和復制文件或文件夾 43
3.4.4 刪除文件或文件夾 44
3.5 實踐案例與上機指導 44
3.5.1 使用【新建文檔】對話框
創建新文件 45
3.5.2 Business Catalyst站點 46
3.5.3 Edge Animate資源 47
3.6 思考與練習 47
第4章 在網頁中編排文本 49
4.1 文本的基本操作 50
4.1.1 輸入文本 50
4.1.2 設置字體 51
4.1.3 設置字號 52
4.1.4 設置字體顏色 52
4.1.5 設置字體樣式 53
4.1.6 設置段落對齊方式 53
4.1.7 設置是否顯示不可見元素 54
4.2 插入特殊文本對象 55
4.2.1 插入特殊字符 55
4.2.2 插入水平線 56
4.2.3 插入日期 57
4.3 設置項目列表 57
4.3.1 創建項目列表與編號列表 58
4.3.2 設置列表屬性 59
4.4 設置頁面的頭信息 59
4.4.1 設置網頁標題 60
4.4.2 添加關鍵字 60
4.4.3 添加說明 61
4.4.4 插入視口 61
4.4.5 設置鏈接 62
4.4.6 設置頁面的Meta信息 63
4.5 實踐案例與上機指導 63
4.5.1 查找與替換功能 63
4.5.2 設置頁邊距 64
4.5.3 設置網頁的默認格式 64
4.5.4 設置文本縮進格式 65
4.6 思考與練習 65
第5章 使用圖像與多媒體豐富
網頁內容 67
5.1 網頁中的常用圖像格式 68
5.1.1 JPEG格式圖像 68
5.1.2 GIF格式圖像 68
5.1.3 PNG格式圖像 68
5.2 插入與設置圖像 69
5.2.1 在網頁中插入圖像文件 69
5.2.2 設置網頁背景圖 70
5.2.3 設置圖像對齊方式 71
5.2.4 更改圖像基本屬性 72
5.2.5 使用圖像編輯器 72
5.3 插入其他圖像元素 74
5.3.1 插入鼠標經過圖像 74
5.3.2 插入Fireworks HTML 75
5.4 多媒體在網頁中的應用 75
5.4.1 插入并設置Flash動畫 76
5.4.2 插入FLV視頻 77
5.4.3 插入音樂 79
5.5 實踐案例與上機指導 80
5.5.1 插入HTML5 Video 80
5.5.2 插入HTML5 Audio 82
5.6 思考與練習 83
第6章 網頁超級鏈接 85
6.1 超級鏈接 86
6.1.1 超鏈接的定義 86
6.1.2 內部、外部與腳本鏈接 86
6.2 鏈接路徑 87
6.2.1 絕對路徑 87
6.2.2 相對路徑 88
6.2.3 站點根目錄相對路徑 88
6.3 創建超級鏈接 88
6.3.1 使用【指向文件】按鈕
創建鏈接 89
6.3.2 使用【屬性】面板創建
鏈接 89
6.4 創建不同種類的超鏈接 89
6.4.1 文本超鏈接 90
6.4.2 圖像熱點鏈接 90
6.4.3 空鏈接 91
6.4.4 電子郵件鏈接 92
6.4.5 腳本鏈接 93
6.5 管理與設置超級鏈接 93
6.5.1 自動更新鏈接 93
6.5.2 在站點范圍內更改鏈接 94
6.5.3 檢查站點中的鏈接錯誤 95
6.6 實踐案例與上機指導 96
6.6.1 創建錨記鏈接 96
6.6.2 制作文件下載鏈接 98
6.7 思考與練習 99
第7章 使用表格布局頁面 101
7.1 表格的創建與應用 102
7.1.1 表格的定義與用途 102
7.1.2 創建基本表格 103
7.1.3 向表格中輸入文本 104
7.1.4 在單元格中插入圖像 104
7.2 設置表格和單元格屬性 105
7.2.1 設置表格屬性 105
7.2.2 設置單元格屬性 106
7.3 調整表格結構 107
7.3.1 選擇表格和單元格 107
7.3.2 調整單元格和表格的大小 109
7.3.3 插入與刪除表格的行和列 110
7.3.4 拆分單元格 112
7.3.5 合并單元格 113
7.3.6 復制、剪切和粘貼表格 114
7.4 處理表格數據 116
7.4.1 導入Excel表格數據 116
7.4.2 排序表格 117
7.5 應用數據表格樣式控制 118
7.5.1 表格模型 118
7.5.2 表格標題 119
7.5.3 表格樣式控制 120
7.6 實踐案例與上機指導 121
7.6.1 在表格中插入圖像 121
7.6.2 在表格中插入表格 122
7.6.3 制作網頁細線表格 122
7.7 思考與練習 123
第8章 應用CSS樣式美化網頁 125
8.1 什么是CSS樣式表 126
8.1.1 認識CSS 126
8.1.2 CSS樣式的類型 126
8.1.3 CSS基本語法 127
8.2 創建CSS樣式 128
8.2.1 建立標簽樣式 128
8.2.2 建立類樣式 129
8.2.3 建立復合內容樣式 131
8.2.4 鏈接外部樣式表 132
8.2.5 建立ID樣式 133
8.3 將CSS應用到網頁 135
8.3.1 內聯樣式表 135
8.3.2 數據透視表的排序 135
8.3.3 外部樣式表 136
8.4 設置CSS樣式 136
8.4.1 設置背景類型 136
8.4.2 設置方框樣式 137
8.4.3 設置區塊樣式 138
8.4.4 設置邊框樣式 139
8.4.5 設置定位樣式 140
8.4.6 設置擴展樣式 140
8.4.7 設置過渡樣式 141
8.5 實踐案例與上機指導 142
8.5.1 CSS靜態過濾器 142
8.5.2 樣式沖突 143
8.5.3 CSS動態過濾器 143
8.6 思考與練習 143
第9章 應用Div+CSS靈活布局
網頁 145
9.1 Div概述 146
9.1.1 初識Div 146
9.1.2 Div CSS布局的優勢 146
9.1.3 盒模型 146
9.2 常見的布局方式 148
9.2.1 居中版式布局 148
9.2.2 浮動版式布局 149
9.2.3 高度自適應布局 151
9.3 應用Div布局網頁 152
9.3.1 頁面布局分析 152
9.3.2 插入和編輯Div標簽 153
9.3.3 使用CSS定位 155
9.4 實踐案例與上機指導 155
9.4.1 一列自適應寬度 156
9.4.2 兩列自適應寬度 156
9.4.3 兩列右列寬度自適應 157
9.4.4 三列浮動中間寬度自適應 157
9.5 思考與練習 158
第10章 使用模板和庫創建網頁 159
10.1 使用模板 160
10.1.1 模板的特點 160
10.1.2 創建模板 160
10.1.3 嵌套模板 161
10.2 設置模板 162
10.2.1 定義可編輯區域 162
10.2.2 定義可選區域 163
10.2.3 定義重復區域 163
10.2.4 設置可編輯標簽屬性 164
10.3 管理模板 165
10.3.1 創建基于模板的網頁 165
10.3.2 更新模板和基于模板的
網頁 166
10.3.3 刪除頁面中使用的模板 167
10.4 創建與應用庫項目 168
10.4.1 認識庫項目 168
10.4.2 創建庫項目 169
10.4.3 插入庫項目 170
10.4.4 修改庫項目 171
10.4.5 更新庫項目 171
10.5 實踐案例與上機指導 172
10.5.1 重命名庫項目 172
10.5.2 刪除庫項目 173
10.5.3 恢復刪除的庫項目 173
10.6 思考與練習 174
第11章 在網頁中插入表單 177
11.1 表單概述 178
11.1.1 關于表單 178
11.1.2 常用表單元素 178
11.1.3 HTML5表單元素 180
11.2 添加表單 181
11.2.1 插入表單域 182
11.2.2 插入文本域 183
11.3 網頁元素 185
11.3.1 表單密碼 185
11.3.2 Url對象 186
11.3.3 Tel對象 186
11.3.4 搜索對象 187
11.3.5 數字對象 187
11.3.6 范圍對象 188
11.3.7 顏色對象 189
11.3.8 電子郵件對象 189
11.4 日期與時間元素 190
11.4.1 月對象 190
11.4.2 周對象 191
11.4.3 日期對象 192
11.4.4 時間對象 192
11.4.5 日期時間對象 193
11.4.6 本地日期時間對象 194
11.5 選擇元素 195
11.5.1 選擇對象 195
11.5.2 單選按鈕對象 196
11.5.3 單選按鈕組對象 196
11.5.4 復選框對象 197
11.5.5 復選框組對象 198
11.6 按鈕元素 199
11.6.1 普通按鈕 199
11.6.2 "提交"按鈕對象 200
11.6.3 "重置"按鈕對象 201
11.6.4 圖像按鈕對象 201
11.7 實踐案例與上機指導 202
11.7.1 文件對象 202
11.7.2 隱藏對象 203
11.7.3 文本區域對象 204
11.8 思考與練習 205
第12章 使用行為創建動態效果 207
12.1 認識網頁行為 208
12.1.1 事件與動作 208
12.1.2 使用【行為】面板 208
12.1.3 常見動作類型 209
12.1.4 編輯網頁行為 210
12.2 使用行為調節瀏覽器 210
12.2.1 打開瀏覽器窗口 210
12.2.2 調用JavaScript 212
12.2.3 轉到URL 212
12.3 使用行為控制圖像 213
12.3.1 交換圖像 213
12.3.2 預先載入圖像 214
12.4 使用行為顯示文本 215
12.4.1 設置彈出信息 215
12.4.2 設置狀態欄文本 216
12.4.3 設置容器的文本 217
12.4.4 設置文本域文字 218
12.5 使用行為加載多媒體 219
12.5.1 檢查插件 219
12.5.2 改變屬性 220
12.5.3 顯示和隱藏元素 221
第2章 Dreamweaver CC輕松入門
* Dreamweaver CC工作界面
* Dreamweaver CC工作流程
* 使用可視化助理布局
本章主要介紹Dreamweaver CC工作界面、Dreamweaver CC工作流程、使用可視化助理布局方面的知識與技巧，在本章的最后還針對實際工作需求，講解了使用輔助線、使用跟蹤圖像功能、設置縮放比率、設置窗口大小的方法。通過本章的學習，讀者可以掌握Dreamweaver CC入門方面的知識，為深入學習Dreamweaver CC奠定基礎。
2.1 Dreamweaver CC工作界面
Dreamweaver CC包含了一個嶄新、高效的頁面，性能也得到了改進。此外，還包含了眾多新增功能，改善了軟件的操作性，用戶無論使用【設計】視圖還是【代碼】視圖，都可以方便地創建網頁。本節主要講述Dreamweaver CC的工作環境。
2.1.1 界面布局
啟動Dreamweaver CC，進入Dreamweaver CC工作界面，其中包括菜單欄、工具欄、【插入】面板、編輯窗口、【屬性】面板和浮動面板組6個部分，如圖2-1所示。
圖2-1
2.1.2 工具欄、窗口和面板
Dreamweaver CC工作界面中的工具欄、窗口和面板分別有著各自的功能和作用，本節將詳細介紹。
1. 工具欄
工具欄中包含了各種工具按鈕，單擊工作界面左側的【代碼】、【拆分】、【設計】按鈕，可以在文檔的不同視圖間快速切換，包括【代碼】視圖、【設計】視圖，以及同時顯示【代碼】視圖和【設計】視圖的【拆分】視圖。工具欄還包含一些與查看文檔、在本地和遠程站點間傳輸文檔有關的常用命令和選項，如圖2-2所示。
圖2-2
> 【代碼】按鈕：單擊此按鈕，可以在窗口中顯示【代碼】視圖。
> 【拆分】按鈕：在窗口的一部分顯示【代碼】視圖，而在另一部分顯示【設計】視圖。
> 【設計】按鈕：單擊此按鈕，可以在窗口中顯示【設計】視圖。
> 【實時視圖】按鈕：顯示不可編輯的、交互式的、基于瀏覽器的文檔視圖。
> 【在瀏覽器中預覽/調試】按鈕：單擊此按鈕，可以在瀏覽器中預覽或調試文檔。從下拉菜單中可以選擇一個瀏覽器。
> 【標題】文本框：可以為文檔輸入一個標題，將顯示在瀏覽器的標題欄中。如果文檔已經有了一個標題，則該標題將顯示在該文本框中。
> 【文件管理】按鈕：當有多人對一個頁面進行操作時，可以分別進行獲取、取出、打開文件、導出和設計附注等操作。
2. 窗口
在編輯窗口中，網頁制作者可以實時查看網頁制作的效果，從而進一步地完善修改工作，如圖2-3所示。
圖2-3
3. 面板
Dreamweaver CC有很多面板，選擇【窗口】菜單，在彈出的子菜單中可以根據需要將各個面板調出，如圖2-4所示。
圖2-4
Dreamweaver CC界面默認打開的面板有【插入】面板、【文件】面板以及【屬性】面板(也稱屬性檢查器)。
2.1.3 【插入】面板
在【插入】面板中包括【常用】、【結構】、【媒體】、【表單】、jQuery Mobile、jQuery UI、【模板】、【收藏夾】8個選項，每個選項又包含多個子選項，用戶可以根據需要在網頁中插入適合網頁的內容，如圖2-5所示。
圖2-5
下面以【常用】選項為例，介紹如何創建和插入最常用的對象，如圖2-6和圖2-7所示。
> Div：單擊該按鈕，可以使用Div標簽創建CSS布局塊，并進行相應的定位。
> 【圖像】：單擊該按鈕，可以在文檔中插入圖像。
> 【表格】：單擊該按鈕，可以在網頁中插入表格。
> 【腳本】：包含幾個與腳本有關聯的按鈕。
> 【電子郵件鏈接】：在【文本】文本框中輸入E-mail地址或其他文字信息，然后在E-mail文本框中輸入準確的郵件地址，就可以自動插入郵件地址發送鏈接。
> 【水平線】：單擊該按鈕，可以在網頁中插入水平線。
> 【日期】：單擊該按鈕，可以插入當前的時間和日期。
圖2-6 圖2-7
2.1.4 屬性檢查器
Dreamweaver CC的屬性檢查器，主要用于查看和更改所選擇對象的各種屬性。其中包含兩個選項，即HTML選項和CSS選項，HTML選項為默認格式；單擊不同的選項可以設置不同的屬性，如圖2-8所示。
圖2-8
使用屬性檢查器，可以檢查和編輯當前頁面選定元素的最常用屬性，如文本和插入的對象。屬性檢查器的內容根據選定元素的不同會有所不同。例如，如果選擇了頁面上的圖像，則屬性檢查器就會顯示該圖像的屬性，如圖像的文件路徑、圖像的寬度和高度、圖像周圍的邊框等。
默認情況下，屬性檢查器位于工作區的底部邊緣，但是可以將其取消停靠并使其成為工作區中的浮動面板。單擊屬性檢查器右上角的下拉按鈕，在彈出的下拉菜單中選擇【關閉】菜單項，即可關閉屬性檢查器，如圖2-9所示。
圖2-9
新書資訊