中文版Dreamweaver CC基礎培訓教程（移動學習版）

第 1 章 網頁的基本操作 ．．．．．． 1
1．1　網頁設計基礎 ．．．．．．．．．．．．．．．．．．．． 2 1．1．1 網站與網頁的關系 ．．．．．．．．．．．．． 2 1．1．2 常見的網站類型 ．．．．．．．．．．．．．．．． 2 1．1．3 網頁的分類 ．．．．．．．．．．．．．．．．．．．．．．． 3 1．1．4 網站的基本結構 ．．．．．．．．．．．．．．．． 4 1．1．5 網頁的構成要素 ．．．．．．．．．．．．．．．． 4 1．1．6 網頁制作的核心語言 ．．．．．．．．． 5 1．1．7 屏幕分辨率和網頁編輯器．．． 8 1．1．8 網頁色彩搭配 ．．．．．．．．．．．．．．．．．．．． 9 1．1．9 網頁制作遵循的原則 ．．．．．．．．．　11
1．2　制作網站的基本流程 ．．．．．．．．．．． 12 1．2．1 網站分析與策劃 ．．．．．．．．．．．．．．．． 12 1．2．2 網頁效果圖設計 ．．．．．．．．．．．．．．．． 13 1．2．3 創(chuàng)建并編輯網頁文檔 ．．．．．．．．． 13 1．2．4 優(yōu)化與加工網頁文檔 ．．．．．．．．． 13 1．2．5 測試并發(fā)布 HTML 文檔 ．．．． 13 1．2．6 網站的更新與維護 ．．．．．．．．．．．．．　14
1．3　上機實訓—— 賞析特色網站 ．．． 14 1．3．1 實訓要求 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 14 1．3．2 實訓分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 14 1．3．3 操作思路 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　14
1．4　課后練習 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．　15
1．　練習 1——規(guī)劃個人網站 ．．．．．．．．．．15 2． 練習 2——規(guī)劃燈飾照明網站 ．．．16
第　2 章 Dreamweaver CC 的
基本操作 ．．．．．．．．．．．．．．　17
2．1　認識 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)境設置 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　24
2．2　創(chuàng)建與管理站點 ．．．．．．．．．．．．．．．．． 26 2．2．1 課堂案例——創(chuàng)建并編輯
“寶萊燈飾”網站?。?26 2．2．2 創(chuàng)建本地站點 ．．．．．．．．．．．．．．．．．．．． 28 2．2．3 管理站點 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 29 2．2．4 管理站點中的文件
和文件夾 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　31
2．3　網頁文檔的基本操作 ．．．．．．．．．．．　31
2．3．1　課堂案例——創(chuàng)建并保存
zhuce．html 網頁 ．．．．．．．．．．．．．．． 32 2．3．2 新建網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 33 2．3．3 保存文檔 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 35 2．3．4 打開與關閉文檔 ．．．．．．．．．．．．．．．．　35
2．4　設置頁面屬性 ．．．．．．．．．．．．．．．．．．．． 36 2．4．1 課堂案例——設置“djqsm．html”
網頁屬性 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 36 2．4．2 設置“外觀（CSS）”屬性 ．．． 38 2．4．3 設置“外觀（HTML）”
屬性 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 38 2．4．4 設置“鏈接（CSS）”屬性 ．．． 39 2．4．5 設置標題 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 39 2．4．6 設置標題 / 編碼 ．．．．．．．．．．．．．．．．． 39 2．4．7 跟蹤圖像 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　40
2．5　上機實訓—— 創(chuàng)建“花火植物”
站點 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 40 2．5．1 實訓要求 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　40
2．5．2　實訓分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　40
2．5．3　操作思路 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　41
2．6　課后練習 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．　41
1．　練習 1——自定義“我的工作區(qū)”．．．41
2．　練習 2——創(chuàng)建并規(guī)劃“珠寶”
網站 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．42
第　3 章 制作基礎的文本網頁 ．．43
3．1　插入文本對象 ．．．．．．．．．．．．．．．．．．．． 44 3．1．1 課堂案例——制作“花火簡介”
網頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 44 3．1．2 輸入文本 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 47 3．1．3 設置文本屬性 ．．．．．．．．．．．．．．．．．．．． 48 3．1．4 插入特殊符號 ．．．．．．．．．．．．．．．．．．．． 50 3．1．5 插入日期 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 50 3．1．6 插入水平線 ．．．．．．．．．．．．．．．．．．．．．．． 51 3．1．7 插入列表 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　52
3．2　設置網頁頭部內容 ．．．．．．．．．．．．．． 53 3．2．1 課堂案例——設置
“Index．html”文件頭?。?53 3．2．2 Meta ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 55 3．2．3 關鍵字 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 55 3．2．4 說明 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 55 3．2．5 視口 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　55
3．3　上機實訓—— 制作企業(yè)簡介
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　56
3．3．1　實訓要求 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 56 3．3．2 實訓分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 56 3．3．3 操作思路 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　57
3．4　課后練習 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．　57
1．　練習 1——制作學校簡介網頁 ．．．57 2． 練習 2——制作代金券說明網頁 ．．．58
第　4 章 制作豐富的圖像網頁 ．　59
4．1　插入與設置圖像 ．．．．．．．．．．．．．．．．． 60 4．1．1 課堂案例——制作“植物分類”
網頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 60 4．1．2 網頁中常用的圖像格式 ．．．．．． 62 4．1．3 插入圖像 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 63 4．1．4 設置圖像屬性 ．．．．．．．．．．．．．．．．．．．． 63 4．1．5 插入鼠標經過圖像 ．．．．．．．．．．．．． 66 4．1．6 插入 Fireworks HTML ．．．．．　67
4．2　插入并設置多媒體元素 ．．．．．．．． 68 4．2．1 課堂案例——制作“花火團購”
網頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 68 4．2．2 使用 Edge Animate 動畫 ．．． 71 4．2．3 使用 HTML5 Video 文件 ．．． 72 4．2．4 使用 HTML5 Audio
音頻文件 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 74 4．2．5 使用 Flash SWF 動畫文件 74 4．2．6 使用 Flash Video
視頻文件 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 76 4．2．7 使用插件 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　76
4．3　上機實訓—— 美化“幫助中心”
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　78
4．3．1　實訓要求 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 78 4．3．2 實訓分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 78 4．3．3 操作思路 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　79
4．4　課后練習 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．　80
1．　練習 1——制作“訂餐”網頁 ．．．80 2． 練習 2——制作“家居”網頁 ．．．80
第　5 章 為網頁添加超鏈接 ．．．81
5．1　認識超鏈接 ．．．．．．．．．．．．．．．．．．．．．．．． 82 5．1．1 超鏈接的定義 ．．．．．．．．．．．．．．．．．．．． 82 5．1．2 超鏈接的類型 ．．．．．．．．．．．．．．．．．．．． 83 5．1．3 鏈接路徑 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　83
5．2　創(chuàng)建超鏈接 ．．．．．．．．．．．．．．．．．．．．．．．． 84 5．2．1 課堂案例——為植物網站
設計跳轉 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 84 5．2．2 創(chuàng)建文本超鏈接 ．．．．．．．．．．．．．．．． 88 5．2．3 創(chuàng)建圖像超鏈接和熱點
鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 89 5．2．4 創(chuàng)建電子郵件超鏈接 ．．．．．．．．． 90 5．2．5 創(chuàng)建錨點超鏈接 ．．．．．．．．．．．．．．．． 90 5．2．6 創(chuàng)建其他超鏈接 ．．．．．．．．．．．．．．．．　91
5．3　管理超鏈接 ．．．．．．．．．．．．．．．．．．．．．．．． 93 5．3．1 檢查超鏈接 ．．．．．．．．．．．．．．．．．．．．．．． 93 5．3．2 在站點范圍內更改超鏈接 ．．． 93 5．3．3 自動更新超鏈接 ．．．．．．．．．．．．．．．．　93
5．4　上機實訓—— 設計“詳情頁”
網頁的跳轉 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　94
5．4．1　實訓要求 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 94 5．4．2 實訓分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 94 5．4．3 操作思路 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　95
5．5　課后練習 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．　96
1．　練習 1——為“企業(yè)新聞”網頁
創(chuàng)建超鏈接 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．96
2．　練習 2——為“幫助”網頁創(chuàng)建
超鏈接 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．96
第　6 章 網頁布局設計 ．．．．．．．．　97
6．1　使用表格布局網頁 ．．．．．．．．．．．．．． 98 6．1．1 課堂案例——制作“上新活動”
網頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　98
6．1．2　插入表格 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 101 6．1．3 選擇表格和單元格 ．．．．．．．．．．．．． 103 6．1．4 調整表格或單元格的大?。?104 6．1．5 增加和刪除表格的行或列．．． 104 6．1．6 合并與拆分單元格 ．．．．．．．．．．．．． 105 6．1．7 設置表格和單元格的屬性．．． 106 6．1．8 表格的高級操作 ．．．．．．．．．．．．．．．．　108
6．2　創(chuàng)建 CSS 樣式表 ．．．．．．．．．．．．．．． 110 6．2．1 課堂案例——制作“style．css”
樣式表 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 110 6．2．2 CSS 概述 ．．．．．．．．．．．．．．．．．．．．．．．．． 113 6．2．3 CSS 樣式表的基本語法 ．．．． 114 6．2．4 CSS 樣式表的類型 ．．．．．．．．．．． 114 6．2．5 認識 CSS 設計器 ．．．．．．．．．．．．．． 115 6．2．6 創(chuàng)建樣式表 ．．．．．．．．．．．．．．．．．．．．．．． 116 6．2．7 使用豐富的 CSS 樣式 ．．．．．．． 118 6．2．8 CSS 過渡效果的應用 ．．．．．．．．　123
6．3　DIV+CSS 美化網頁 ．．．．．．．．．．． 125 6．3．1 課堂案例——制作花火植物
家居館首頁 ．．．．．．．．．．．．．．．．．．．．．．． 125 6．3．2 認識 DIV 標簽 ．．．．．．．．．．．．．．．．．．． 131 6．3．3 認識 DIV+CSS 布局模式 ．． 131 6．3．4 插入 DIV 元素 ．．．．．．．．．．．．．．．．．．． 131 6．3．5 HTML5 結構元素 ．．．．．．．．．．．．． 132 6．3．6 使用 jQuery UI ．．．．．．．．．．．．．．．．．　133
6．4　上機實訓—— 制作“產品展示”
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　137
6．4．1　實訓要求 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 137 6．4．2 實訓分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 137 6．4．3 操作思路 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　138
6．4　課后練習 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．　138
1．　練習 1——制作“蓉錦大學
教務處”網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．138 2． 練習 2——制作“花店”網頁 ．．．139
第　7 章 使用模板與庫文件 ．．153
7．1　創(chuàng)建并編輯模板 ．．．．．．．．．．．．．．．．．142 7．1．1 課堂案例——制作“宅家優(yōu)購”
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 142 7．1．2 模板的概述 ．．．．．．．．．．．．．．．．．．．．．．． 146 7．1．3 創(chuàng)建模板 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 146 7．1．4 編輯模板 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 147 7．1．5 應用模板 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　149
7．2　創(chuàng)建并使用庫 ．．．．．．．．．．．．．．．．．．．．150 7．2．1 課堂案例——制作“新品體驗”
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 150 7．2．2 認識庫 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 154 7．2．3 創(chuàng)建庫項目 ．．．．．．．．．．．．．．．．．．．．．．． 155 7．2．4 庫項目的其他操作 ．．．．．．．．．．．．． 155 7．2．5 設置庫屬性 ．．．．．．．．．．．．．．．．．．．．．．．　155
7．3　上機實訓—— 制作“婚紗詳情頁”
網頁模板 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．157
7．3．1　實訓要求 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 157 7．3．2 實訓分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 157 7．3．3 操作思路 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　158
7．4　課后練習 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．158 1． 練習 1——制作“精品推廣”
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．158 2． 練習 2——制作“合作交流”模板
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．159
第　8 章 使用表單和行為 ．．．．173
8．1　使用表單 ．．．．．．．．．．．．．．．．．．．．．．．．．．．162 8．1．1 課堂案例——制作“植物網
登錄”網頁 ．．．．．．．．．．．．．．．．．．．．．．．． 162 8．1．2 表單的概述 ．．．．．．．．．．．．．．．．．．．．．．． 165 8．1．3 創(chuàng)建表單并設置屬性 ．．．．．．．．． 167 8．1．4 插入表單元素 ．．．．．．．．．．．．．．．．．．．． 168 8．1．5 使用 jQuery UI 的表單部分 ．．　174
8．2　應用 JavaScript 行為 ．．．．．．．．．177 8．2．1 課堂案例——完善“植物網
注冊”效果 ．．．．．．．．．．．．．．．．．．．．．．．． 178 8．2．2 認識行為 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 180 8．2．3 彈出窗口信息 ．．．．．．．．．．．．．．．．．．．． 181 8．2．4 打開瀏覽器窗口 ．．．．．．．．．．．．．．．． 182 8．2．5 調用 JavaScript 行為．．．．．．．． 182 8．2．6 轉到 URL 行為 ．．．．．．．．．．．．．．．．． 183 8．2．7 顯示文本行為 ．．．．．．．．．．．．．．．．．．．． 183 8．2．8 圖像與多媒體的行為 ．．．．．．．．． 184 8．2．9 用行為控制表單 ．．．．．．．．．．．．．．．． 186 8．2．10 使用行為添加 jQueryt
效果 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 187 8．3 上機實訓—— 制作“用戶注冊”
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．190 8．3．1 實訓要求 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 190 8．3．2 實訓分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 190 8．3．3 操作思路 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　190
8．4　課后練習 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．191 1． 練習 1——制作“小兒郎注冊
網頁”．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．191 2． 練習 2——制作“宅粉注冊”
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．192
第　9 章 制作移動端網頁 ．．．．205 9．1 使用 jQuery Mobile ．．．．．．．．．．．194
9．1．1　課堂案例——制作美食 App
主頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．． 194 9．1．2 認識 jQuery Mobile ．．．．．．．．．． 197 9．1．3 創(chuàng)建 jQuery Mobile 頁面 ．． 198 9．1．4 使用 jQuery Mobile 組件 ．．　199
9．2　使用 PhoneGap Build 打包
移動應用．．．．．．．．．．．．．．．．．．．．．．．．．．．202
9．2．1　認識 PhoneGap Build ．．．．．． 202 9．2．2 注冊 PhoneGap Build ．．．．．．　203
9．2．3　打包移動應用程序 ．．．．．．．．．．．．． 203 9．3 上機實訓—— 制作移動端頁面　204
9．3．1　實訓要求 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 204 9．3．2 實訓分析 ．．．．．．．．．．．．．．．．．．．．．．．．．．． 204 9．3．3 操作思路 ．．．．．．．．．．．．．．．．．．．．．．．．．．．　205
9．4　課后練習 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．205 1． 練習 1——制作手機軟件網頁 ．．．205 2． 練習 2——制作“App 個人信息”
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．206
第　10 章 綜合案例——制作“御
茶”官方網站 ．．．．．．208
10．1　制作“御茶主頁”網頁 ．．．．．．208 10．1．1 案例分析 ．．．．．．．．．．．．．．．．．．．．．．．．．　209
10．1．2　設計思路 ．．．．．．．．．．．．．．．．．．．．．．．．． 209 10．1．3 制作過程 ．．．．．．．．．．．．．．．．．．．．．．．．．　213
10．2　制作移動端御茶網站頁面 ．．232 10．2．1 案例分析 ．．．．．．．．．．．．．．．．．．．．．．．．． 234 10．2．2 設計思路 ．．．．．．．．．．．．．．．．．．．．．．．．． 234 10．2．3 制作過程 ．．．．．．．．．．．．．．．．．．．．．．．．．　236
10．3　上機實訓—— 制作珠寶網頁
頁面 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．238
10．3．1　實訓要求 ．．．．．．．．．．．．．．．．．．．．．．．．． 238 10．3．2 實訓分析 ．．．．．．．．．．．．．．．．．．．．．．．．． 238 10．3．3 操作思路 ．．．．．．．．．．．．．．．．．．．．．．．．．　240
10．4　課后練習 ．．．．．．．．．．．．．．．．．．．．．．．．．．241 1．練習 1——制作珠寶官網首頁．．．241 2．練習 2——制作墨韻箱包館
網頁 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．242