中文版Dreamweaver CC基礎(chǔ)培訓教程(移動學習版)
Dreamweaver 是用戶需求量最大、最受個人和企業(yè)青睞的網(wǎng)頁制作軟件之一。本書以目前
廣泛流行的 Dreamweaver CC 為藍本,講解使用 Dreamweaver 制作網(wǎng)頁的方法。首先對網(wǎng)頁的 基礎(chǔ)知識進行詳細介紹,然后再介紹使用 Dreamweaver CC 制作簡單網(wǎng)頁的方法,如制作基礎(chǔ)
的文本網(wǎng)頁、圖像網(wǎng)頁。再逐步深入,探討超鏈接、網(wǎng)頁布局、模板、行為、表單和庫等相關(guān) 知識的操作。最后將 Dreamweaver 操作與網(wǎng)頁設計實戰(zhàn)進行結(jié)合,通過一個完整網(wǎng)頁的設計與
制作來對全書知識進行綜合應用。
為了便于讀者更好地學習本書內(nèi)容,本書除了提供“疑難解答”“技巧”與“提示”小欄
目來輔助學習外,在對應需要擴展、詳解的知識點及操作步驟旁均附有對應的二維碼,通過手 機或平板電腦掃描二維碼,即可觀看該知識點的詳解及操作步驟視頻演示。
本書不僅可作為各類學校網(wǎng)頁設計相關(guān)專業(yè)的教材使用,還可供相關(guān)行業(yè)及專業(yè)工作人員 進行學習和參考。
1.配移動學習平臺,方便學生隨時學習。通過掃描封面二維碼,添加“人郵云課”公眾號,即可將課程添加到我的課程里,隨時可以移動學習。
2.配套豐富的教學資源,提供素材文件,PPT課件,教學教案等資源,方便老師教學。
3.雙色印刷,成品質(zhì)量好。
作者多年從事計算機教育工作,有著豐富的教學經(jīng)驗,參與企業(yè)項目制作,有著豐富的實踐經(jīng)驗,主編過多部教材,得到老師們的認可。作者專注于計算機教材以及教輔資源研發(fā),為學校提供全套完整的教學方案。
第 1 章 網(wǎng)頁的基本操作 ...... 1
1.1 網(wǎng)頁設計基礎(chǔ) .................... 2 1.1.1 網(wǎng)站與網(wǎng)頁的關(guān)系 ............. 2 1.1.2 常見的網(wǎng)站類型 ................ 2 1.1.3 網(wǎng)頁的分類 ....................... 3 1.1.4 網(wǎng)站的基本結(jié)構(gòu) ................ 4 1.1.5 網(wǎng)頁的構(gòu)成要素 ................ 4 1.1.6 網(wǎng)頁制作的核心語言 ......... 5 1.1.7 屏幕分辨率和網(wǎng)頁編輯器... 8 1.1.8 網(wǎng)頁色彩搭配 .................... 9 1.1.9 網(wǎng)頁制作遵循的原則 ......... 11
1.2 制作網(wǎng)站的基本流程 ........... 12 1.2.1 網(wǎng)站分析與策劃 ................ 12 1.2.2 網(wǎng)頁效果圖設計 ................ 13 1.2.3 創(chuàng)建并編輯網(wǎng)頁文檔 ......... 13 1.2.4 優(yōu)化與加工網(wǎng)頁文檔 ......... 13 1.2.5 測試并發(fā)布 HTML 文檔 .... 13 1.2.6 網(wǎng)站的更新與維護 ............. 14
1.3 上機實訓—— 賞析特色網(wǎng)站 ... 14 1.3.1 實訓要求 ........................... 14 1.3.2 實訓分析 ........................... 14 1.3.3 操作思路 ........................... 14
1.4 課后練習 ............................ 15
1. 練習 1——規(guī)劃個人網(wǎng)站 ..........15 2. 練習 2——規(guī)劃燈飾照明網(wǎng)站 ...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)建并編輯
“寶萊燈飾”網(wǎng)站 ............... 26 2.2.2 創(chuàng)建本地站點 .................... 28 2.2.3 管理站點 ........................... 29 2.2.4 管理站點中的文件
和文件夾 ........................... 31
2.3 網(wǎng)頁文檔的基本操作 ........... 31
2.3.1 課堂案例——創(chuàng)建并保存
zhuce.html 網(wǎng)頁 ............... 32 2.3.2 新建網(wǎng)頁 ........................... 33 2.3.3 保存文檔 ........................... 35 2.3.4 打開與關(guān)閉文檔 ................ 35
2.4 設置頁面屬性 .................... 36 2.4.1 課堂案例——設置“djqsm.html”
網(wǎng)頁屬性 ........................... 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ī)劃“珠寶”
網(wǎng)站 .........................................42
第 3 章 制作基礎(chǔ)的文本網(wǎng)頁 ..43
3.1 插入文本對象 .................... 44 3.1.1 課堂案例——制作“花火簡介”
網(wǎng)頁.................................. 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 設置網(wǎng)頁頭部內(nèi)容 .............. 53 3.2.1 課堂案例——設置
“Index.html”文件頭 ........ 53 3.2.2 Meta ................................ 55 3.2.3 關(guān)鍵字 .............................. 55 3.2.4 說明 .................................. 55 3.2.5 視口 .................................. 55
3.3 上機實訓—— 制作企業(yè)簡介
網(wǎng)頁 ................................. 56
3.3.1 實訓要求 ........................... 56 3.3.2 實訓分析 ........................... 56 3.3.3 操作思路 ........................... 57
3.4 課后練習 ............................ 57
1. 練習 1——制作學校簡介網(wǎng)頁 ...57 2. 練習 2——制作代金券說明網(wǎng)頁 ...58
第 4 章 制作豐富的圖像網(wǎng)頁 . 59
4.1 插入與設置圖像 ................. 60 4.1.1 課堂案例——制作“植物分類”
網(wǎng)頁.................................. 60 4.1.2 網(wǎng)頁中常用的圖像格式 ...... 62 4.1.3 插入圖像 ........................... 63 4.1.4 設置圖像屬性 .................... 63 4.1.5 插入鼠標經(jīng)過圖像 ............. 66 4.1.6 插入 Fireworks HTML ..... 67
4.2 插入并設置多媒體元素 ........ 68 4.2.1 課堂案例——制作“花火團購”
網(wǎng)頁.................................. 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 上機實訓—— 美化“幫助中心”
網(wǎng)頁 ........................................... 78
4.3.1 實訓要求 ........................... 78 4.3.2 實訓分析 ........................... 78 4.3.3 操作思路 ........................... 79
4.4 課后練習 ............................ 80
1. 練習 1——制作“訂餐”網(wǎng)頁 ...80 2. 練習 2——制作“家居”網(wǎng)頁 ...80
第 5 章 為網(wǎng)頁添加超鏈接 ...81
5.1 認識超鏈接 ........................ 82 5.1.1 超鏈接的定義 .................... 82 5.1.2 超鏈接的類型 .................... 83 5.1.3 鏈接路徑 ........................... 83
5.2 創(chuàng)建超鏈接 ........................ 84 5.2.1 課堂案例——為植物網(wǎng)站
設計跳轉(zhuǎn) ........................... 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 在站點范圍內(nèi)更改超鏈接 ... 93 5.3.3 自動更新超鏈接 ................ 93
5.4 上機實訓—— 設計“詳情頁”
網(wǎng)頁的跳轉(zhuǎn) ................................ 94
5.4.1 實訓要求 ........................... 94 5.4.2 實訓分析 ........................... 94 5.4.3 操作思路 ........................... 95
5.5 課后練習 ............................ 96
1. 練習 1——為“企業(yè)新聞”網(wǎng)頁
創(chuàng)建超鏈接 ..............................96
2. 練習 2——為“幫助”網(wǎng)頁創(chuàng)建
超鏈接 .....................................96
第 6 章 網(wǎng)頁布局設計 ........ 97
6.1 使用表格布局網(wǎng)頁 .............. 98 6.1.1 課堂案例——制作“上新活動”
網(wǎng)頁.................................. 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 設置表格和單元格的屬性... 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 美化網(wǎng)頁 ........... 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 結(jié)構(gòu)元素 ............. 132 6.3.6 使用 jQuery UI ................. 133
6.4 上機實訓—— 制作“產(chǎn)品展示”
網(wǎng)頁 ........................................... 137
6.4.1 實訓要求 ........................... 137 6.4.2 實訓分析 ........................... 137 6.4.3 操作思路 ........................... 138
6.4 課后練習 ............................ 138
1. 練習 1——制作“蓉錦大學
教務處”網(wǎng)頁 ...........................138 2. 練習 2——制作“花店”網(wǎng)頁 ...139
第 7 章 使用模板與庫文件 ..153
7.1 創(chuàng)建并編輯模板 .................142 7.1.1 課堂案例——制作“宅家優(yōu)購”
網(wǎng)頁 ................................. 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 課堂案例——制作“新品體驗”
網(wǎng)頁 ................................. 150 7.2.2 認識庫 .............................. 154 7.2.3 創(chuàng)建庫項目 ....................... 155 7.2.4 庫項目的其他操作 ............. 155 7.2.5 設置庫屬性 ....................... 155
7.3 上機實訓—— 制作“婚紗詳情頁”
網(wǎng)頁模板 ...................................157
7.3.1 實訓要求 ........................... 157 7.3.2 實訓分析 ........................... 157 7.3.3 操作思路 ........................... 158
7.4 課后練習 ............................158 1. 練習 1——制作“精品推廣”
網(wǎng)頁 .........................................158 2. 練習 2——制作“合作交流”模板
網(wǎng)頁 .........................................159
第 8 章 使用表單和行為 ....173
8.1 使用表單 ...........................162 8.1.1 課堂案例——制作“植物網(wǎng)
登錄”網(wǎng)頁 ........................ 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 課堂案例——完善“植物網(wǎng)
注冊”效果 ........................ 178 8.2.2 認識行為 ........................... 180 8.2.3 彈出窗口信息 .................... 181 8.2.4 打開瀏覽器窗口 ................ 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 上機實訓—— 制作“用戶注冊”
網(wǎng)頁 ...........................................190 8.3.1 實訓要求 ........................... 190 8.3.2 實訓分析 ........................... 190 8.3.3 操作思路 ........................... 190
8.4 課后練習 ............................191 1. 練習 1——制作“小兒郎注冊
網(wǎng)頁”.......................................191 2. 練習 2——制作“宅粉注冊”
網(wǎng)頁 .........................................192
第 9 章 制作移動端網(wǎng)頁 ....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——制作手機軟件網(wǎng)頁 ...205 2. 練習 2——制作“App 個人信息”
網(wǎng)頁 .........................................206
第 10 章 綜合案例——制作“御
茶”官方網(wǎng)站 ......208
10.1 制作“御茶主頁”網(wǎng)頁 ......208 10.1.1 案例分析 ......................... 209
10.1.2 設計思路 ......................... 209 10.1.3 制作過程 ......................... 213
10.2 制作移動端御茶網(wǎng)站頁面 ..232 10.2.1 案例分析 ......................... 234 10.2.2 設計思路 ......................... 234 10.2.3 制作過程 ......................... 236
10.3 上機實訓—— 制作珠寶網(wǎng)頁
頁面 ........................................238
10.3.1 實訓要求 ......................... 238 10.3.2 實訓分析 ......................... 238 10.3.3 操作思路 ......................... 240
10.4 課后練習 ..........................241 1.練習 1——制作珠寶官網(wǎng)首頁...241 2.練習 2——制作墨韻箱包館
網(wǎng)頁 .......................................242