中文版Dreamweaver CC基礎(chǔ)培訓(xùn)教程（移動(dòng)學(xué)習(xí)版）
Dreamweaver 是用戶需求量最大、最受個(gè)人和企業(yè)青睞的網(wǎng)頁(yè)制作軟件之一。本書(shū)以目前
廣泛流行的 Dreamweaver CC 為藍(lán)本，講解使用 Dreamweaver 制作網(wǎng)頁(yè)的方法。首先對(duì)網(wǎng)頁(yè)的 基礎(chǔ)知識(shí)進(jìn)行詳細(xì)介紹，然后再介紹使用 Dreamweaver CC 制作簡(jiǎn)單網(wǎng)頁(yè)的方法，如制作基礎(chǔ)
的文本網(wǎng)頁(yè)、圖像網(wǎng)頁(yè)。再逐步深入，探討超鏈接、網(wǎng)頁(yè)布局、模板、行為、表單和庫(kù)等相關(guān) 知識(shí)的操作。最后將 Dreamweaver 操作與網(wǎng)頁(yè)設(shè)計(jì)實(shí)戰(zhàn)進(jìn)行結(jié)合，通過(guò)一個(gè)完整網(wǎng)頁(yè)的設(shè)計(jì)與
制作來(lái)對(duì)全書(shū)知識(shí)進(jìn)行綜合應(yīng)用。
為了便于讀者更好地學(xué)習(xí)本書(shū)內(nèi)容，本書(shū)除了提供“疑難解答”“技巧”與“提示”小欄
目來(lái)輔助學(xué)習(xí)外，在對(duì)應(yīng)需要擴(kuò)展、詳解的知識(shí)點(diǎn)及操作步驟旁均附有對(duì)應(yīng)的二維碼，通過(guò)手 機(jī)或平板電腦掃描二維碼，即可觀看該知識(shí)點(diǎn)的詳解及操作步驟視頻演示。
本書(shū)不僅可作為各類學(xué)校網(wǎng)頁(yè)設(shè)計(jì)相關(guān)專業(yè)的教材使用，還可供相關(guān)行業(yè)及專業(yè)工作人員 進(jìn)行學(xué)習(xí)和參考。
1.配移動(dòng)學(xué)習(xí)平臺(tái)，方便學(xué)生隨時(shí)學(xué)習(xí)。通過(guò)掃描封面二維碼，添加“人郵云課”公眾號(hào)，即可將課程添加到我的課程里，隨時(shí)可以移動(dòng)學(xué)習(xí)。
2.配套豐富的教學(xué)資源，提供素材文件，PPT課件，教學(xué)教案等資源，方便老師教學(xué)。
3.雙色印刷，成品質(zhì)量好。
作者多年從事計(jì)算機(jī)教育工作,有著豐富的教學(xué)經(jīng)驗(yàn),參與企業(yè)項(xiàng)目制作,有著豐富的實(shí)踐經(jīng)驗(yàn),主編過(guò)多部教材,得到老師們的認(rèn)可。作者專注于計(jì)算機(jī)教材以及教輔資源研發(fā)，為學(xué)校提供全套完整的教學(xué)方案。
第 1 章 網(wǎng)頁(yè)的基本操作 ...... 1
1.1 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ) .................... 2 1.1.1 網(wǎng)站與網(wǎng)頁(yè)的關(guān)系 ............. 2 1.1.2 常見(jiàn)的網(wǎng)站類型 ................ 2 1.1.3 網(wǎng)頁(yè)的分類 ....................... 3 1.1.4 網(wǎng)站的基本結(jié)構(gòu) ................ 4 1.1.5 網(wǎng)頁(yè)的構(gòu)成要素 ................ 4 1.1.6 網(wǎng)頁(yè)制作的核心語(yǔ)言 ......... 5 1.1.7 屏幕分辨率和網(wǎng)頁(yè)編輯器... 8 1.1.8 網(wǎng)頁(yè)色彩搭配 .................... 9 1.1.9 網(wǎng)頁(yè)制作遵循的原則 ......... 11
1.2 制作網(wǎng)站的基本流程 ........... 12 1.2.1 網(wǎng)站分析與策劃 ................ 12 1.2.2 網(wǎng)頁(yè)效果圖設(shè)計(jì) ................ 13 1.2.3 創(chuàng)建并編輯網(wǎng)頁(yè)文檔 ......... 13 1.2.4 優(yōu)化與加工網(wǎng)頁(yè)文檔 ......... 13 1.2.5 測(cè)試并發(fā)布 HTML 文檔 .... 13 1.2.6 網(wǎng)站的更新與維護(hù) ............. 14
1.3 上機(jī)實(shí)訓(xùn)—— 賞析特色網(wǎng)站 ... 14 1.3.1 實(shí)訓(xùn)要求 ........................... 14 1.3.2 實(shí)訓(xùn)分析 ........................... 14 1.3.3 操作思路 ........................... 14
1.4 課后練習(xí) ............................ 15
1. 練習(xí) 1——規(guī)劃個(gè)人網(wǎng)站 ..........15 2. 練習(xí) 2——規(guī)劃燈飾照明網(wǎng)站 ...16
第 2 章 Dreamweaver CC 的
基本操作 .............. 17
2.1 認(rèn)識(shí) Dreamweaver CC 工作
界面 .................................. 18
2.1.1 課堂案例——自定義工作
界面 .................................. 18 2.1.2 文檔窗口 ........................... 19 2.1.3 面板組 .............................. 20 2.1.4 “屬性”面板 ...................... 21 2.1.5 工作區(qū)布局 ....................... 21 2.1.6 視圖模式 ........................... 22 2.1.7 環(huán)境設(shè)置 ........................... 24
2.2 創(chuàng)建與管理站點(diǎn) ................. 26 2.2.1 課堂案例——?jiǎng)?chuàng)建并編輯
“寶萊燈飾”網(wǎng)站 ............... 26 2.2.2 創(chuàng)建本地站點(diǎn) .................... 28 2.2.3 管理站點(diǎn) ........................... 29 2.2.4 管理站點(diǎn)中的文件
和文件夾 ........................... 31
2.3 網(wǎng)頁(yè)文檔的基本操作 ........... 31
2.3.1 課堂案例——?jiǎng)?chuàng)建并保存
zhuce.html 網(wǎng)頁(yè) ............... 32 2.3.2 新建網(wǎng)頁(yè) ........................... 33 2.3.3 保存文檔 ........................... 35 2.3.4 打開(kāi)與關(guān)閉文檔 ................ 35
2.4 設(shè)置頁(yè)面屬性 .................... 36 2.4.1 課堂案例——設(shè)置“djqsm.html”
網(wǎng)頁(yè)屬性 ........................... 36 2.4.2 設(shè)置“外觀（CSS）”屬性 ... 38 2.4.3 設(shè)置“外觀（HTML）”
屬性 .................................. 38 2.4.4 設(shè)置“鏈接（CSS）”屬性 ... 39 2.4.5 設(shè)置標(biāo)題 ........................... 39 2.4.6 設(shè)置標(biāo)題 / 編碼 ................. 39 2.4.7 跟蹤圖像 ........................... 40
2.5 上機(jī)實(shí)訓(xùn)—— 創(chuàng)建“花火植物”
站點(diǎn) .................................. 40 2.5.1 實(shí)訓(xùn)要求 ........................... 40
2.5.2 實(shí)訓(xùn)分析 ........................... 40
2.5.3 操作思路 ........................... 41
2.6 課后練習(xí) ............................ 41
1. 練習(xí) 1——自定義“我的工作區(qū)”...41
2. 練習(xí) 2——?jiǎng)?chuàng)建并規(guī)劃“珠寶”
網(wǎng)站 .........................................42
第 3 章 制作基礎(chǔ)的文本網(wǎng)頁(yè) ..43
3.1 插入文本對(duì)象 .................... 44 3.1.1 課堂案例——制作“花火簡(jiǎn)介”
網(wǎng)頁(yè).................................. 44 3.1.2 輸入文本 ........................... 47 3.1.3 設(shè)置文本屬性 .................... 48 3.1.4 插入特殊符號(hào) .................... 50 3.1.5 插入日期 ........................... 50 3.1.6 插入水平線 ....................... 51 3.1.7 插入列表 ........................... 52
3.2 設(shè)置網(wǎng)頁(yè)頭部?jī)?nèi)容 .............. 53 3.2.1 課堂案例——設(shè)置
“Index.html”文件頭 ........ 53 3.2.2 Meta ................................ 55 3.2.3 關(guān)鍵字 .............................. 55 3.2.4 說(shuō)明 .................................. 55 3.2.5 視口 .................................. 55
3.3 上機(jī)實(shí)訓(xùn)—— 制作企業(yè)簡(jiǎn)介
網(wǎng)頁(yè) ................................. 56
3.3.1 實(shí)訓(xùn)要求 ........................... 56 3.3.2 實(shí)訓(xùn)分析 ........................... 56 3.3.3 操作思路 ........................... 57
3.4 課后練習(xí) ............................ 57
1. 練習(xí) 1——制作學(xué)校簡(jiǎn)介網(wǎng)頁(yè) ...57 2. 練習(xí) 2——制作代金券說(shuō)明網(wǎng)頁(yè) ...58
第 4 章 制作豐富的圖像網(wǎng)頁(yè) . 59
4.1 插入與設(shè)置圖像 ................. 60 4.1.1 課堂案例——制作“植物分類”
網(wǎng)頁(yè).................................. 60 4.1.2 網(wǎng)頁(yè)中常用的圖像格式 ...... 62 4.1.3 插入圖像 ........................... 63 4.1.4 設(shè)置圖像屬性 .................... 63 4.1.5 插入鼠標(biāo)經(jīng)過(guò)圖像 ............. 66 4.1.6 插入 Fireworks HTML ..... 67
4.2 插入并設(shè)置多媒體元素 ........ 68 4.2.1 課堂案例——制作“花火團(tuán)購(gòu)”
網(wǎng)頁(yè).................................. 68 4.2.2 使用 Edge Animate 動(dòng)畫(huà) ... 71 4.2.3 使用 HTML5 Video 文件 ... 72 4.2.4 使用 HTML5 Audio
音頻文件 ........................... 74 4.2.5 使用 Flash SWF 動(dòng)畫(huà)文件 74 4.2.6 使用 Flash Video
視頻文件 ........................... 76 4.2.7 使用插件 ........................... 76
4.3 上機(jī)實(shí)訓(xùn)—— 美化“幫助中心”
網(wǎng)頁(yè) ........................................... 78
4.3.1 實(shí)訓(xùn)要求 ........................... 78 4.3.2 實(shí)訓(xùn)分析 ........................... 78 4.3.3 操作思路 ........................... 79
4.4 課后練習(xí) ............................ 80
1. 練習(xí) 1——制作“訂餐”網(wǎng)頁(yè) ...80 2. 練習(xí) 2——制作“家居”網(wǎng)頁(yè) ...80
第 5 章 為網(wǎng)頁(yè)添加超鏈接 ...81
5.1 認(rèn)識(shí)超鏈接 ........................ 82 5.1.1 超鏈接的定義 .................... 82 5.1.2 超鏈接的類型 .................... 83 5.1.3 鏈接路徑 ........................... 83
5.2 創(chuàng)建超鏈接 ........................ 84 5.2.1 課堂案例——為植物網(wǎng)站
設(shè)計(jì)跳轉(zhuǎn) ........................... 84 5.2.2 創(chuàng)建文本超鏈接 ................ 88 5.2.3 創(chuàng)建圖像超鏈接和熱點(diǎn)
鏈接.................................. 89 5.2.4 創(chuàng)建電子郵件超鏈接 ......... 90 5.2.5 創(chuàng)建錨點(diǎn)超鏈接 ................ 90 5.2.6 創(chuàng)建其他超鏈接 ................ 91
5.3 管理超鏈接 ........................ 93 5.3.1 檢查超鏈接 ....................... 93 5.3.2 在站點(diǎn)范圍內(nèi)更改超鏈接 ... 93 5.3.3 自動(dòng)更新超鏈接 ................ 93
5.4 上機(jī)實(shí)訓(xùn)—— 設(shè)計(jì)“詳情頁(yè)”
網(wǎng)頁(yè)的跳轉(zhuǎn) ................................ 94
5.4.1 實(shí)訓(xùn)要求 ........................... 94 5.4.2 實(shí)訓(xùn)分析 ........................... 94 5.4.3 操作思路 ........................... 95
5.5 課后練習(xí) ............................ 96
1. 練習(xí) 1——為“企業(yè)新聞”網(wǎng)頁(yè)
創(chuàng)建超鏈接 ..............................96
2. 練習(xí) 2——為“幫助”網(wǎng)頁(yè)創(chuàng)建
超鏈接 .....................................96
第 6 章 網(wǎng)頁(yè)布局設(shè)計(jì) ........ 97
6.1 使用表格布局網(wǎng)頁(yè) .............. 98 6.1.1 課堂案例——制作“上新活動(dòng)”
網(wǎng)頁(yè).................................. 98
6.1.2 插入表格 ........................... 101 6.1.3 選擇表格和單元格 ............. 103 6.1.4 調(diào)整表格或單元格的大小... 104 6.1.5 增加和刪除表格的行或列... 104 6.1.6 合并與拆分單元格 ............. 105 6.1.7 設(shè)置表格和單元格的屬性... 106 6.1.8 表格的高級(jí)操作 ................ 108
6.2 創(chuàng)建 CSS 樣式表 ............... 110 6.2.1 課堂案例——制作“style.css”
樣式表 .............................. 110 6.2.2 CSS 概述 ......................... 113 6.2.3 CSS 樣式表的基本語(yǔ)法 .... 114 6.2.4 CSS 樣式表的類型 ........... 114 6.2.5 認(rèn)識(shí) CSS 設(shè)計(jì)器 .............. 115 6.2.6 創(chuàng)建樣式表 ....................... 116 6.2.7 使用豐富的 CSS 樣式 ....... 118 6.2.8 CSS 過(guò)渡效果的應(yīng)用 ........ 123
6.3 DIV+CSS 美化網(wǎng)頁(yè) ........... 125 6.3.1 課堂案例——制作花火植物
家居館首頁(yè) ....................... 125 6.3.2 認(rèn)識(shí) DIV 標(biāo)簽 ................... 131 6.3.3 認(rèn)識(shí) DIV+CSS 布局模式 .. 131 6.3.4 插入 DIV 元素 ................... 131 6.3.5 HTML5 結(jié)構(gòu)元素 ............. 132 6.3.6 使用 jQuery UI ................. 133
6.4 上機(jī)實(shí)訓(xùn)—— 制作“產(chǎn)品展示”
網(wǎng)頁(yè) ........................................... 137
6.4.1 實(shí)訓(xùn)要求 ........................... 137 6.4.2 實(shí)訓(xùn)分析 ........................... 137 6.4.3 操作思路 ........................... 138
6.4 課后練習(xí) ............................ 138
1. 練習(xí) 1——制作“蓉錦大學(xué)
教務(wù)處”網(wǎng)頁(yè) ...........................138 2. 練習(xí) 2——制作“花店”網(wǎng)頁(yè) ...139
第 7 章 使用模板與庫(kù)文件 ..153
7.1 創(chuàng)建并編輯模板 .................142 7.1.1 課堂案例——制作“宅家優(yōu)購(gòu)”
網(wǎng)頁(yè) ................................. 142 7.1.2 模板的概述 ....................... 146 7.1.3 創(chuàng)建模板 ........................... 146 7.1.4 編輯模板 ........................... 147 7.1.5 應(yīng)用模板 ........................... 149
7.2 創(chuàng)建并使用庫(kù) ....................150 7.2.1 課堂案例——制作“新品體驗(yàn)”
網(wǎng)頁(yè) ................................. 150 7.2.2 認(rèn)識(shí)庫(kù) .............................. 154 7.2.3 創(chuàng)建庫(kù)項(xiàng)目 ....................... 155 7.2.4 庫(kù)項(xiàng)目的其他操作 ............. 155 7.2.5 設(shè)置庫(kù)屬性 ....................... 155
7.3 上機(jī)實(shí)訓(xùn)—— 制作“婚紗詳情頁(yè)”
網(wǎng)頁(yè)模板 ...................................157
7.3.1 實(shí)訓(xùn)要求 ........................... 157 7.3.2 實(shí)訓(xùn)分析 ........................... 157 7.3.3 操作思路 ........................... 158
7.4 課后練習(xí) ............................158 1. 練習(xí) 1——制作“精品推廣”
網(wǎng)頁(yè) .........................................158 2. 練習(xí) 2——制作“合作交流”模板
網(wǎng)頁(yè) .........................................159
第 8 章 使用表單和行為 ....173
8.1 使用表單 ...........................162 8.1.1 課堂案例——制作“植物網(wǎng)
登錄”網(wǎng)頁(yè) ........................ 162 8.1.2 表單的概述 ....................... 165 8.1.3 創(chuàng)建表單并設(shè)置屬性 ......... 167 8.1.4 插入表單元素 .................... 168 8.1.5 使用 jQuery UI 的表單部分 .. 174
8.2 應(yīng)用 JavaScript 行為 .........177 8.2.1 課堂案例——完善“植物網(wǎng)
注冊(cè)”效果 ........................ 178 8.2.2 認(rèn)識(shí)行為 ........................... 180 8.2.3 彈出窗口信息 .................... 181 8.2.4 打開(kāi)瀏覽器窗口 ................ 182 8.2.5 調(diào)用 JavaScript 行為........ 182 8.2.6 轉(zhuǎn)到 URL 行為 ................. 183 8.2.7 顯示文本行為 .................... 183 8.2.8 圖像與多媒體的行為 ......... 184 8.2.9 用行為控制表單 ................ 186 8.2.10 使用行為添加 jQueryt
效果 ............................... 187 8.3 上機(jī)實(shí)訓(xùn)—— 制作“用戶注冊(cè)”
網(wǎng)頁(yè) ...........................................190 8.3.1 實(shí)訓(xùn)要求 ........................... 190 8.3.2 實(shí)訓(xùn)分析 ........................... 190 8.3.3 操作思路 ........................... 190
8.4 課后練習(xí) ............................191 1. 練習(xí) 1——制作“小兒郎注冊(cè)
網(wǎng)頁(yè)”.......................................191 2. 練習(xí) 2——制作“宅粉注冊(cè)”
網(wǎng)頁(yè) .........................................192
第 9 章 制作移動(dòng)端網(wǎng)頁(yè) ....205 9.1 使用 jQuery Mobile ...........194
9.1.1 課堂案例——制作美食 App
主頁(yè) .................................. 194 9.1.2 認(rèn)識(shí) jQuery Mobile .......... 197 9.1.3 創(chuàng)建 jQuery Mobile 頁(yè)面 .. 198 9.1.4 使用 jQuery Mobile 組件 .. 199
9.2 使用 PhoneGap Build 打包
移動(dòng)應(yīng)用...........................202
9.2.1 認(rèn)識(shí) PhoneGap Build ...... 202 9.2.2 注冊(cè) PhoneGap Build ...... 203
9.2.3 打包移動(dòng)應(yīng)用程序 ............. 203 9.3 上機(jī)實(shí)訓(xùn)—— 制作移動(dòng)端頁(yè)面 204
9.3.1 實(shí)訓(xùn)要求 ........................... 204 9.3.2 實(shí)訓(xùn)分析 ........................... 204 9.3.3 操作思路 ........................... 205
9.4 課后練習(xí) ............................205 1. 練習(xí) 1——制作手機(jī)軟件網(wǎng)頁(yè) ...205 2. 練習(xí) 2——制作“App 個(gè)人信息”
網(wǎng)頁(yè) .........................................206
第 10 章 綜合案例——制作“御
茶”官方網(wǎng)站 ......208
10.1 制作“御茶主頁(yè)”網(wǎng)頁(yè) ......208 10.1.1 案例分析 ......................... 209
10.1.2 設(shè)計(jì)思路 ......................... 209 10.1.3 制作過(guò)程 ......................... 213
10.2 制作移動(dòng)端御茶網(wǎng)站頁(yè)面 ..232 10.2.1 案例分析 ......................... 234 10.2.2 設(shè)計(jì)思路 ......................... 234 10.2.3 制作過(guò)程 ......................... 236
10.3 上機(jī)實(shí)訓(xùn)—— 制作珠寶網(wǎng)頁(yè)
頁(yè)面 ........................................238
10.3.1 實(shí)訓(xùn)要求 ......................... 238 10.3.2 實(shí)訓(xùn)分析 ......................... 238 10.3.3 操作思路 ......................... 240
10.4 課后練習(xí) ..........................241 1．練習(xí) 1——制作珠寶官網(wǎng)首頁(yè)...241 2．練習(xí) 2——制作墨韻箱包館
網(wǎng)頁(yè) .......................................242
書(shū)單推薦
