《Dreamweaver CC從入門到精通》是2016年新視角文化行出版的圖書,作者是楊璐。
基本介紹
- 書名:Dreamweaver CC從入門到精通
- 作者:楊璐
- ISBN:978-7-115-41992-7
- 頁數:408頁
- 出版時間:2016-06
內容簡介,目錄,
內容簡介
本書由一線講師和設計師傾力編寫,深入挖掘Dreamweaver CC 的核心工具、命令與功能,並全面介紹了軟體的理論知識及具體案例的製作方法,幫助讀者在短時間內迅速掌握Dreamweaver CC 的套用方法與技巧,並將其運用到實際操作中。
全書結構系統、全面,語言淺顯易懂,整合了“入門類”圖書的優勢,汲取了“從入門到精通”圖書的精華,借鑑了“實戰型”圖書的特點,112 個上機練習,32 個課後練習,做到處處有案例,步步有操作,便於讀者學以致用。隨書附送教學光碟,包括147 集近245 分鐘多媒體語音教學視頻,詳細記錄了關鍵知識點講解,以及大部分上機練習和課後練習的具體操作過程。還提供了書中操作案例所需要的源檔案,以及超值的商業教程與配套素材。讀者通過閱讀本書不僅能掌握網頁設計各方面知識,還能夠在網頁設計製作基礎上做到活學活用,提高設計水平,提升職場競爭力。
本書適合廣大Dreamweaver CC 國中、級讀者使用,幫助相關從業人員提高技術水平。也可以作為高等院校相關專業及各類培訓班的教材。
全書結構系統、全面,語言淺顯易懂,整合了“入門類”圖書的優勢,汲取了“從入門到精通”圖書的精華,借鑑了“實戰型”圖書的特點,112 個上機練習,32 個課後練習,做到處處有案例,步步有操作,便於讀者學以致用。隨書附送教學光碟,包括147 集近245 分鐘多媒體語音教學視頻,詳細記錄了關鍵知識點講解,以及大部分上機練習和課後練習的具體操作過程。還提供了書中操作案例所需要的源檔案,以及超值的商業教程與配套素材。讀者通過閱讀本書不僅能掌握網頁設計各方面知識,還能夠在網頁設計製作基礎上做到活學活用,提高設計水平,提升職場競爭力。
本書適合廣大Dreamweaver CC 國中、級讀者使用,幫助相關從業人員提高技術水平。也可以作為高等院校相關專業及各類培訓班的教材。
目錄
第1部分 Dreamweaver CC基礎
第01章 初識Dreamwerver CC…………… 13
1.1 什麼是網頁 …………………………………… 14
1.1.1 什麼是網頁設計 ……………………… 14
1.1.2 網頁設計與網頁製作 ………………… 15
1.1.3 網頁設計術語 ………………………… 15
1.2 網頁編輯軟體和螢幕解析度 ………………… 17
1.2.1 網頁編輯軟體 ………………………… 17
1.2.2 螢幕解析度 …………………………… 17
1.3 Dreamweaver CC 簡介 ………………… 18
1.4 Dreamweaver CC 的安裝與卸載 ……… 18
1.4.1 Dreamweaver CC 的系統要求 …… 18
1.4.2 安裝Dreamweaver CC …………… 19
上機練習:安裝Dreamweaver CC …………… 19
1.4.3 卸載Dreamweaver CC …………… 21
上機練習:卸載Dreamweaver CC …………… 21
1.4.4 啟動Dreamweaver CC …………… 22
1.5 Dreamweaver CC 的新增功能 ………… 22
1.5.1 全新簡化的用戶界面 ………………… 23
1.5.2 改進的“新建文檔”對話框 ………… 23
1.5.3 新增HTML5 畫布插入按鈕 ………… 23
1.5.4 新增HTML5 音頻和視頻插入按鈕 … 23
1.5.5 新增HTML5 網頁結構元素 ………… 23
1.5.6 新增Edge Web Fonts ……………… 24
1.5.7 新增插入Adobe Edge Animate動畫 … 24
1.5.8 新增HTML5 表單元素 ……………… 24
1.5.9 新增適用於jQuery Mobile的表單元素 … 24
1.5.10 新增jQuery 效果 …………………… 24
1.5.11 增強表單元素對HTML5的支持 …… 25
1.5.12 全新布局的“插入”面板…………… 25
1.5.13 全新的“CSS 設計器”面板 ……… 25
1.5.14 全面的系統平台支持 ……………… 25
1.5.15 增強FTP 的功能 …………………… 26
1.5.16 Dreamweaver與Creative Cloud雲同步 … 26
1.6 Dreamweaver CC 的工作界面 ………… 26
1.6.1 Dreamweaver CC 工作區概述 …… 26
1.6.2 選單欄 ………………………………… 28
1.6.3 “插入”面板 …………………………… 29
1.6.4 文檔工具列 …………………………… 31
1.6.5 狀態欄 ………………………………… 31
1.6.6 浮動面板 ……………………………… 32
1.7 網頁檔案的基本操作 ………………………… 32
1.7.1 新建網頁 ……………………………… 32
1.7.2 保存網頁 ……………………………… 34
1.7.3 打開網頁 ……………………………… 35
1.7.4 預覽網頁 ……………………………… 36
1.8 輔助工具的使用 ……………………………… 36
1.8.1 標尺 …………………………………… 36
1.8.2 輔助線 ………………………………… 37
1.8.3 格線 …………………………………… 38
1.9 課後練習 ……………………………………… 38
課後練習1:新建並保存網頁檔案 ………………… 38
課後練習2:打開並預覽網頁檔案 ………………… 40
第02章 在Dreamweaver CC中創建與管理站點 …… 41
2.1 創建站點 ……………………………………… 42
2.1.1 創建本地站點 ………………………… 42
上機練習:創建本地靜態站點……………………… 42
2.1.2 設定站點伺服器 ……………………… 43
2.1.3 站點伺服器基本選項 ………………… 43
2.1.4 站點伺服器高級選項 ………………… 44
上機練習:創建企業站點並設定站點伺服器……… 45
2.1.5 設定版本控制 ………………………… 46
2.2 站點的高級設定 ……………………………… 47
2.2.1 本地信息 ……………………………… 47
2.2.2 遮蓋 …………………………………… 48
2.2.3 設計備註 ……………………………… 48
2.2.4 檔案視圖列 …………………………… 48
2.2.5 Contribute …………………………… 49
2.2.6 模板 …………………………………… 49
2.2.7 jQuery ………………………………… 49
2.2.8 Web 字型 ……………………………… 49
2.2.9 Edge Animate 資源 ………………… 50
2.3 Business Catalyst 站點 ………………… 50
2.3.1 什麼是Business Catalyst ………… 50
2.3.2 創建Business Catalyst 站點 ……… 51
上機練習:創建Business Catalyst 站點 …… 51
2.3.3 Business Catalyst 面板 …………… 52
2.4 站點的基本操作 ……………………………… 53
2.4.1 創建頁面 ……………………………… 53
2.4.2 創建資料夾 …………………………… 54
2.4.3 移動和複製檔案或資料夾 …………… 54
2.4.4 重命名檔案或資料夾 ………………… 55
2.4.5 刪除檔案或資料夾 …………………… 55
2.5 管理站點 ……………………………………… 55
2.5.1 站點的切換 …………………………… 55
2.5.2 “管理站點”對話框 …………………… 56
2.6 課後練習 ……………………………………… 57
課後練習1:在站點中新建資料夾 ………………… 57
課後練習2:在站點中新建網頁檔案 ……………… 58
第03章 認識HTML和HTML5 ……………… 59
3.1 HTML 簡介 ………………………………… 60
3.1.1 什麼是HTML ………………………… 60
3.1.2 HTML 的語法結構 …………………… 60
3.1.3 HTML 中的3 種標籤形式 …………… 61
3.2 HTML 中的重要標籤 ……………………… 62
3.2.1 網頁結構標籤 ………………………… 62
3.2.2 字元格式標籤 ………………………… 62
3.2.3 區段格式標籤 ………………………… 63
3.2.4 列表標籤 ……………………………… 63
3.2.5 表格標籤 ……………………………… 64
3.2.6 連結標籤 ……………………………… 64
3.2.7 多媒體標籤 …………………………… 64
3.2.8 表單標籤 ……………………………… 65
3.2.9 分區標籤 ……………………………… 65
3.3 在Dreamweaver CC 中編輯HTML … 66
3.3.1 在代碼視圖中創建HTML 頁面 ……… 66
上機練習:在代碼視圖中創建HTML 頁面 ……… 66
3.3.2 在設計視圖中創建HTML 頁面 ……… 67
上機練習:在設計視圖中創建HTML 頁面 ……… 67
3.3.3 代碼視圖詳解 ………………………… 68
3.3.4 摺疊代碼 ……………………………… 69
3.3.5 選擇父標籤 …………………………… 70
3.3.6 代碼的注釋 …………………………… 70
3.3.7 環繞標籤 ……………………………… 70
3.4 使用快速標籤編輯器 ………………………… 71
3.4.1 使用插入模式的快速標籤編輯器 …… 71
3.4.2 使用編輯模式的快速標籤編輯器 …… 72
3.4.3 使用環繞模式的快速標籤編輯器 …… 72
3.4.4 設定標籤編輯器屬性 ………………… 72
3.5 代碼最佳化 ……………………………………… 72
3.5.1 最佳化HTML 代碼 ……………………… 72
3.5.2 清理Word生成的HTML 代碼 ……… 73
3.6 網頁中的其他原始碼 ………………………… 74
3.6.1 CSS 樣式代碼 ………………………… 74
3.6.2 JavaScript 腳本代碼 ………………… 74
3.6.3 原始碼中的注釋 ……………………… 75
3.7 了解HTML5 ………………………………… 76
3.7.1 HTML5 的改變 ……………………… 76
3.7.2 HTML5 標籤 ………………………… 76
3.7.3 HTML5 標準屬性 …………………… 79
3.7.4 HTML5 事件屬性 …………………… 80
3.8 使用HTML5 中的canvs 標籤 ……… 81
3.8.1 插入畫布並設定畫布屬性 …………… 81
3.8.2 使用JavaScript在畫布中繪圖的流程 ………… 82
3.8.3 在網頁中插入HTML5 畫布 ………… 82
上機練習:在網頁中實現圓形圖像………………… 82
3.9 使用HTML5 中的audio 標籤 ………… 84
3.9.1 插入HTML5 Audio 並設定屬性 ……… 84
3.9.2 HTML5 所支持的音頻檔案格式 ……… 85
3.9.3 在網頁中插入HTML5 音頻 ………… 85
上機練習:製作HTML5 音頻頁面 ……………… 85
3.10 使用HTML5 中的video 標籤 ……… 86
3.10.1 插入HTML5 Video並設定屬性 ……… 86
3.10.2 HTML5所支持的視頻檔案格式 ……… 87
3.10.3 在網頁中插入HTML5 視頻 ………… 87
上機練習:製作HTML5 視頻頁面 ……………… 87
3.11 課後練習 …………………………………… 88
課後練習1:使用畫布在網頁中繪製矩形 ………… 88
課後練習2:使用畫布在網頁中繪製圓形 ………… 89
第04章 設定網頁整體屬性 …………………… 91
4.1 設定網頁頭信息 ……………………………… 92
4.1.1 設定網頁標題 ………………………… 92
4.1.2 添加關鍵字 …………………………… 93
上機練習:為網頁添加關鍵字……………………… 93
4.1.3 添加說明 ……………………………… 94
上機練習:為網頁添加說明………………………… 94
4.1.4 插入視口 ……………………………… 94
4.2 設定頁面META 信息 ……………………… 95
4.2.1 設定網頁文字編碼格式 ……………… 95
4.2.2 設定網頁到期時間 …………………… 95
4.2.3 禁止瀏覽器從本地計算機的快取中
調閱頁面內容 ………………………… 95
4.2.4 設定網頁cookie 過期時間 …………… 96
4.2.5 強制頁面在當前視窗以獨立頁面顯示 … 96
4.2.6 設定網頁打開時的效果 ……………… 96
4.2.7 設定網頁退出時的效果 ……………… 96
4.2.8 其他設定 ……………………………… 96
4.3 設定頁面屬性 ………………………………… 97
4.3.1 設定外觀(CSS) …………………… 97
上機練習:設定網頁整體外觀效果………………… 98
4.3.2 設定外觀(HTML) …………………… 99
4.3.3 設定連結(CSS) …………………… 99
上機練習:設定網頁連結文字效果……………… 100
4.3.4 設定標題(CSS) ………………… 101
上機練習:設定網頁中標題文字效果…………… 102
4.3.5 設定標題和編碼 …………………… 103
4.3.6 設定跟蹤圖像 ……………………… 104
4.4 課後練習 …………………………………… 105
課後練習1:為網頁設定頭信息 ………………… 105
課後練習2:為個人網頁設定整體屬性 ………… 106
第05章 認識並套用CSS樣式 …………………107
5.1 認識CSS ………………………………… 108
5.1.1 什麼是CSS 樣式 …………………… 108
5.1.2 CSS 樣式的基本寫法 ……………… 108
5.1.3 CSS 樣式的優越性 ………………… 108
5.2 認識全新的“CSS 設計器”面板 ……… 109
5.2.1 “源”選項區 ………………………… 109
5.2.2 “@媒體”選項區 ………………… 110
5.2.3 “選擇器”選項區 …………………… 112
5.2.4 “屬性”選項區 ……………………… 112
5.3 CSS 選擇器類型 ………………………… 113
5.3.1 通配符選擇器 ……………………… 113
5.3.2 標籤選擇器 ………………………… 113
5.3.3 ID 選擇器 …………………………… 113
5.3.4 類選擇器 …………………………… 114
5.3.5 偽類及偽對象選擇器 ……………… 115
5.3.6 群選擇器 …………………………… 115
5.3.7 派生選擇器 ………………………… 116
5.4 使用CSS 樣式的4 種方式 ……………… 116
5.4.1 內聯CSS 樣式 ……………………… 116
上機練習:使用內聯CSS 樣式 ………………… 116
5.4.2 內部CSS 樣式 ……………………… 117
上機練習:使用內部CSS 樣式 ………………… 118
5.4.3 連結外部CSS 樣式表 ……………… 119
上機練習:使用外部CSS 樣式表 ……………… 119
5.4.4 導入外部CSS 樣式表 ……………… 121
上機練習:導入外部CSS 樣式表檔案 ………… 121
5.5 CSS 樣式的創建與編輯 ………………… 123
5.5.1 創建標籤CSS 樣式 ………………… 123
上機練習:創建標籤CSS 樣式 ………………… 123
5.5.2 創建類CSS 樣式 …………………… 124
上機練習:創建類CSS 樣式 …………………… 125
5.5.3 創建ID CSS 樣式 ………………… 126
上機練習:創建ID CSS 樣式 ………………… 127
5.5.4 創建複合CSS 樣式 ………………… 128
上機練習:創建複合CSS 樣式 ………………… 128
5.5.5 編輯CSS 樣式 ……………………… 129
5.6 豐富的CSS 樣式設定 …………………… 130
5.6.1 布局樣式設定 ……………………… 130
上機練習:布局樣式設定………………………… 131
5.6.2 文本樣式設定 ……………………… 132
上機練習:文本樣式設定………………………… 133
5.6.3 框線樣式設定 ……………………… 135
上機練習:框線樣式設定………………………… 136
5.6.4 背景樣式設定 ……………………… 138
上機練習:背景樣式設定………………………… 138
5.6.5 其他樣式設定 ……………………… 139
上機練習:其他樣式設定………………………… 139
5.7 CSS 樣式的單位和值 …………………… 141
5.7.1 單位 ………………………………… 141
5.7.2 顏色值 ……………………………… 141
5.8 CSS 類選區 ……………………………… 143
上機練習:CSS 類選區 ………………………… 143
5.9 課後練習 …………………………………… 144
課後練習1:連結外部CSS 樣式表檔案 ……… 144
課後練習2:為網頁中的文字套用類CSS 樣式 … 145
第2部分 精通CSS樣式
第06章 CSS 3.0屬性 …………………………147
6.1 CSS 3.0 新增選擇器類型 ……………… 148
6.1.1 屬性選擇器 ………………………… 148
6.1.2 結構偽類選擇器 …………………… 148
6.1.3 UI 元素狀態偽類選擇器 …………… 149
6.2 CSS 3.0 新增顏色定義方法 …………… 149
6.2.1 HSL 顏色方式 ……………………… 150
6.2.2 HSLA 顏色方式 …………………… 150
6.2.3 RGBA 顏色方式 …………………… 150
上機練習:使用RGBA 顏色方式設定背景顏色 … 150
6.3 CSS 3.0 新增文本相關屬性 …………… 151
6.3.1 word-wrap 屬性 …………………… 151
6.3.2 text-overflow屬性 ………………… 151
6.3.3 text-shadow 屬性 ………………… 152
上機練習:為網頁文字添加陰影效果…………… 152
6.4 CSS 3.0 新增背景設定屬性 …………… 152
6.4.1 background-origin 屬性 ………… 153
6.4.2 background-clip 屬性 …………… 153
6.4.3 background-size 屬性 …………… 153
上機練習:控制網頁中背景圖像的大小………… 153
6.5 CSS 3.0 新增框線設定屬性 …………… 154
6.5.1 border-colors 屬性 ………………… 154
6.5.2 border-image 屬性 ……………… 155
6.5.3 border-radius 屬性 ……………… 155
上機練習:在網頁中實現圓角效果……………… 155
6.6 CSS 3.0 新增內容和透明度屬性 ……… 156
6.6.1 content 屬性 ……………………… 157
6.6.2 opacity 屬性 ………………………… 157
上機練習:實現網頁中半透明的圖像效果……… 157
6.7 CSS 3.0 新增的多列布局屬性 ………… 158
6.7.1 column-width 屬性 ……………… 158
6.7.2 column-count 屬性 ……………… 158
6.7.3 column-gap 屬性 ………………… 158
6.7.4 column-rule 屬性 ………………… 158
上機練習:在網頁中實現文本分欄效果………… 158
6.8 CSS 3.0 新增其他屬性 ………………… 160
6.8.1 overflow 屬性 ……………………… 160
6.8.2 outline 屬性 ………………………… 160
6.8.3 resize 屬性 ………………………… 161
6.8.4 box-shadow 屬性 ………………… 161
上機練習:為網頁中的元素添加陰影效果……… 161
6.9 CSS 3.0 過渡效果 ……………………… 162
6.9.1 “CSS 過渡效果”面板 …………… 162
6.9.2 創建CSS 過渡效果 ………………… 163
上機練習:使用CSS 過渡效果實現網頁特效 … 163
6.10 課後練習 ………………………………… 166
課後練習1:使用border-image 屬性實現圖像
框線效果 …………………………… 166
課後練習2:使用content 屬性為Div 賦予內容 … 167
第07章 Div+CSS布局網頁 …………………168
7.1 了解Div …………………………………… 169
7.1.1 什麼是Div ………………………… 169
7.1.2 Div與span 的區別 ………………… 169
7.1.3 在網頁中插入Div ………………… 170
7.1.4 Div+CSS 布局的優勢 ……………… 171
7.2 可視化盒模型 ……………………………… 171
7.2.1 盒模型的概念 ……………………… 171
7.2.2 CSS 盒模型的要點 ………………… 172
7.2.3 margin 屬性 ………………………… 172
上機練習:製作歡迎頁面………………………… 173
7.2.4 border 屬性 ………………………… 174
上機練習:為網頁中的圖像添加框線…………… 174
7.2.5 padding 屬性 ……………………… 175
上機練習:控制網頁中元素位置………………… 175
7.2.6 空白邊疊加 ………………………… 176
上機練習:空白邊疊加在網頁中的套用………… 176
7.3 CSS 3.0 新增的彈性盒子模型 ………… 177
7.3.1 box-orient 屬性 …………………… 178
7.3.2 box-direction 屬性 ………………… 178
7.3.3 box-ordinal-group 屬性 ………… 178
7.3.4 box-flex 屬性 ……………………… 178
7.3.5 box-pack屬性和box-align 屬性 … 179
7.3.6 box-lines 屬性 ……………………… 179
7.4 塊元素和行內元素 ………………………… 179
7.4.1 塊元素 ……………………………… 179
7.4.2 行內元素 …………………………… 180
7.4.3 display 屬性 ………………………… 180
7.5 CSS 布局定位 …………………………… 180
7.5.1 浮動定位 …………………………… 181
上機練習:網頁元素的浮動定位………………… 184
7.5.2 position 屬性 ……………………… 186
7.5.3 相對定位 …………………………… 186
上機練習:網頁元素的相對定位………………… 186
7.5.4 絕對定位 …………………………… 187
上機練習:網頁元素的絕對定位………………… 188
7.5.5 固定定位 …………………………… 189
上機練習:固定的網頁元素……………………… 189
7.6 居中的頁面布局方式 ……………………… 190
7.6.1 使用自動空白邊讓設計居中 ……… 190
7.6.2 使用定位和負值空白邊讓設計居中 … 190
7.7 浮動的頁面布局方式 ……………………… 191
7.7.1 兩列固定寬度布局 ………………… 191
7.7.2 兩列固定寬度居中布局 …………… 192
7.7.3 兩列寬度自適應布局 ……………… 192
7.7.4 兩列右列寬度自適應布局 ………… 193
7.7.5 三列浮動中間列寬度自適應布局 … 194
7.7.6 高度自適應 ………………………… 195
7.8 流體格線布局 ……………………………… 195
上機練習:製作適用於手機瀏覽的網頁………… 196
7.9 課後練習 …………………………………… 200
課後練習1:使用z-index 屬性控制元素層疊位置 … 200
課後練習2:使用overflow 屬性實現溢出定位 200
第3部分 插入基本網頁元素
第08章 插入文本元素 ……………………… 202
8.1 在網頁中輸入文本 ………………………… 203
上機練習:製作文本介紹頁面…………………… 203
8.2 輸入文本時的注意事項 …………………… 204
8.2.1 頁面編碼格式 ……………………… 204
8.2.2 插入段落 …………………………… 204
8.2.3 插入換行符 ………………………… 205
8.3 設定網頁文本屬性 ………………………… 206
8.3.1 HTML 屬性 ………………………… 206
8.3.2 CSS 屬性 …………………………… 207
8.4 插入特殊的文本對象 ……………………… 209
8.4.1 插入項目列表 ……………………… 209
上機練習:製作新聞列表欄目…………………… 209
8.4.2 插入編號列表 ……………………… 211
上機練習:製作排行榜欄目……………………… 211
8.4.3 設定列表屬性 ……………………… 213
8.4.4 插入水平線 ………………………… 214
上機練習:在網頁中插入水平線………………… 214
8.4.5 插入時間 …………………………… 215
上機練習:在網頁中插入系統日期……………… 215
8.4.6 插入特殊字元 ……………………… 216
上機練習:在網頁中插入特殊字元……………… 217
8.5 在網頁中實現滾動文本效果 ……………… 218
上機練習:實現文本滾動效果…………………… 218
8.6 在網頁中實現特殊文字效果 ……………… 220
8.6.1 使用Web 字型 ……………………… 220
上機練習:使用Web 字型在網頁中實現特殊字型效果… 220
8.6.2 使用Adobe Edge Web Fonts功能 … 222
上機練習:使用Adobe Edge Web Fonts在網頁中實現特殊字型… 222
8.7 課後習題 …………………………………… 224
課後練習1:製作文本網頁 ……………………… 224
課後練習2:在網頁中實現圖文混排 …………… 225
第09章 插入圖像元素 ……………………… 226
9.1 網頁中常用圖像格式 ……………………… 227
9.1.1 GIF 格式 …………………………… 227
9.1.2 JPEG 格式 ………………………… 227
9.1.3 PNG 格式 …………………………… 228
9.2 插入圖像 …………………………………… 228
9.2.1 在網頁中插入圖像 ………………… 228
上機練習:製作圖像歡迎頁面…………………… 228
9.2.2 設定圖像屬性 ……………………… 229
9.3 插入其他圖像元素 ………………………… 232
9.3.1 插入滑鼠經過圖像 ………………… 233
上機練習:製作網站導航選單…………………… 233
9.3.2 插入Fireworks HTML …………… 234
9.4 課後練習 …………………………………… 235
課後練習1:製作圖片滾動效果 ………………… 235
課後練習2:製作圖像翻轉效果 ………………… 236
第10章 插入多媒體元素 …………………… 237
10.1 插入Flash ……………………………… 238
10.1.1 插入Flash SWF 檔案 …………… 238
上機練習:製作Flash 動畫頁面 ……………… 238
10.1.2 設定Flash SWF 檔案屬性 ……… 239
10.1.3 “插入FLV”對話框 ……………… 240
10.1.4 插入Flash Video ………………… 241
上機練習:在網頁中插入Flash 視頻 ………… 241
10.2 插入Edge Animate 作品 …………… 243
上機練習:製作網頁中焦點輪換大圖效果……… 243
10.3 在網頁中添加聲音 ……………………… 244
10.3.1 網頁中常用聲音格式 …………… 244
10.3.2 添加背景音樂……………………… 245
上機練習:為網頁添加背景音樂………………… 245
10.3.3 嵌入音頻…………………………… 246
上機練習:在網頁中嵌入音頻播放……………… 246
10.4 在網頁中插入視頻 ……………………… 247
10.4.1 網頁中常用視頻格式 …………… 247
10.4.2 插入視頻 ………………………… 247
上機練習:製作視頻網頁………………………… 248
10.5 課後習題 ………………………………… 249
課後練習1:在網頁中插入Flash 動畫 ……… 249
課後練習2:在網頁中插入視頻並播放 ………… 250
第4部分 插入高級網頁元素
第11章 設定網頁連結 …………………………251
11.1 了解連結路徑 …………………………… 252
11.1.1 絕對路徑 ………………………… 252
11.1.2 相對路徑…………………………… 253
11.1.3 根路徑 …………………………… 253
11.2 文字連結 ………………………………… 253
11.2.1 創建文字連結……………………… 254
上機練習:為網頁中的文字設定連結…………… 254
11.2.2 使用Hyperlink 對話框 …………… 256
11.3 圖像連結 ………………………………… 256
上機練習:為網頁中的圖像設定連結…………… 256
11.4 設定網頁中的特殊連結 ………………… 257
11.4.1 空連結 …………………………… 257
上機練習:在網頁中創建空連結………………… 257
11.4.2 檔案下載連結 …………………… 258
上機練習:在網頁中創建檔案下載連結………… 258
11.4.3 熱點連結 ………………………… 259
上機練習:創建圖像熱點連結…………………… 259
11.4.4 E-mail 連結 ……………………… 260
上機練習:在網頁中創建電子郵件連結………… 261
11.4.5 腳本連結 ………………………… 263
上機練習:在網頁中創建腳本連結……………… 263
11.5 控制文字超連結屬性 …………………… 263
11.5.1 a:link ……………………………… 264
11.5.2 a:active …………………………… 264
11.5.3 a:hover …………………………… 265
11.5.4 a:visited …………………………… 265
11.6 課後練習 ………………………………… 266
課後練習1:在網頁中創建各種不同連結 ……… 266
課後練習2:使用CSS 樣式美化網頁中的超連結 … 267
第12章 插入表單元素 ……………………… 268
12.1 表單概述 ………………………………… 269
12.1.1 關於表單…………………………… 269
12.1.2 常用表單元素……………………… 269
12.1.3 HTML5 表單元素 ………………… 270
12.2 常用表單元素在網頁中的套用 ………… 271
12.2.1 插入表單域………………………… 271
上機練習:插入表單域…………………………… 271
12.2.2 插入文本域 ………………………… 273
上機練習:插入文本域…………………………… 273
12.2.3 插入密碼域 ………………………… 275
上機練習:插入密碼域…………………………… 275
12.2.4 插入文本區域……………………… 276
上機練習:插入文本區域………………………… 277
12.2.5 插入按鈕…………………………… 278
12.2.6 插入提交按鈕……………………… 278
12.2.7 插入重置按鈕……………………… 278
上機練習:插入提交和重置按鈕………………… 278
12.2.8 插入檔案域 ……………………… 281
上機練習:插入檔案域…………………………… 281
12.2.9 插入圖像按鈕……………………… 282
上機練習:插入圖像按鈕………………………… 282
12.2.10 插入隱藏域 ……………………… 284
12.2.11 插入選擇域 ……………………… 284
上機練習:插入選擇域…………………………… 285
12.2.12 插入單選按鈕與單選按鈕組 …… 287
上機練習:在網頁中插入單選按鈕……………… 287
12.2.13 插入複選框與複選框組 ………… 289
上機練習:在網頁中插入複選框………………… 289
12.3 HTML5 表單元素在網頁中的套用 …… 290
12.3.1 插入電子郵件……………………… 290
12.3.2 插入Url …………………………… 291
12.3.3 插入Tel …………………………… 291
上機練習:製作留言表單頁面…………………… 291
12.3.4 插入搜尋…………………………… 293
12.3.5 插入數字…………………………… 294
12.3.6 插入範圍…………………………… 294
12.3.7 插入顏色…………………………… 295
12.3.8 插入時間日期相關表單元素 …… 296
12.4 設計製作網站註冊頁面 ………………… 296
上機練習:設計製作網站註冊頁面……………… 297
12.5 課後練習 ………………………………… 302
課後練習1:製作網站登錄頁面 ………………… 302
課後練習2:製作發表日誌表單頁面 …………… 303
第5部分 網頁布局與製作技巧
第13章 表格與IFrame框架的套用 ……… 305
13.1 認識表格 ………………………………… 306
13.1.1 插入表格 ………………………… 306
13.1.2 在HTML 代碼中插入表格 ……… 307
13.1.3 表格的標題與表頭………………… 308
13.2 表格的基本操作 ………………………… 308
13.2.1 選擇表格和單元格………………… 309
上機練習:選擇表格和單元格…………………… 309
13.2.2 表格屬性設定 ……………………… 310
13.2.3 單元格屬性設定…………………… 311
13.3 調整表格結構 …………………………… 311
13.3.1 拆分單元格………………………… 311
13.3.2 插入行或列………………………… 312
13.3.3 刪除行或列………………………… 312
13.3.4 單元格的複製和貼上 …………… 312
13.4 表格數據的處理 ………………………… 312
13.4.1 排序表格 ………………………… 312
上機練習:對表格數據進行排序………………… 313
13.4.2 導入表格數據……………………… 313
上機練習:在網頁中導入外部數據……………… 314
13.4.3 導出表格數據 …………………… 315
13.5 IFrame 框架 …………………………… 316
13.5.1 插入IFrame 框架 ………………… 316
上機練習:製作IFrame 框架頁面 …………… 316
13.5.2 IFrame 框架頁面連結 …………… 317
上機練習:設定IFrame 框架頁面連結 ……… 318
13.6 使用HTML5 結構元素 ………………… 319
13.6.1 頁眉 ……………………………… 319
13.6.2 頁腳………………………………… 320
13.6.3 Navigation ……………………… 320
13.6.4 章節 ……………………………… 320
13.6.5 文章 ……………………………… 321
13.6.6 側邊 ……………………………… 321
13.6.7 圖 ………………………………… 321
13.7 課後練習 ………………………………… 321
課後練習1:使用HTML5 結構元素製作網頁 … 321
課後練習2:使用IFrame 框架製作網頁 …… 322
第14章 模板和庫在網頁中的套用 ………… 324
14.1 使用模板 ………………………………… 325
14.1.1 模板的特點 ……………………… 325
14.1.2 創建模板 ………………………… 325
上機練習:將網頁創建為模板…………………… 325
14.1.3 嵌套模板 ………………………… 327
14.1.4 定義可編輯區域 ………………… 327
上機練習:定義可編輯區域……………………… 327
14.1.5 定義可選區域 …………………… 328
上機練習:定義可選區域………………………… 328
14.1.6 定義可編輯可選區域 …………… 329
上機練習:定義可編輯可選區域………………… 330
14.1.7 定義重複區域 …………………… 330
14.1.8 設定可編輯標籤屬性 …………… 331
14.2 套用模板 ………………………………… 331
14.2.1 創建基於模板的頁面 …………… 331
上機練習:創建基於模板的頁面………………… 332
14.2.2 更新模板及基於模板的網頁……… 334
14.2.3 刪除頁面中使用的模板…………… 335
14.3 使用庫 …………………………………… 335
14.3.1 創建庫項目 ……………………… 335
上機練習:創建庫項目…………………………… 335
14.3.2 插入庫項目………………………… 337
上機練習:插入庫項目…………………………… 337
14.3.3 庫項目的編輯和更新 …………… 338
14.4 課後習題 ………………………………… 339
課後練習1:創建網站庫項目 …………………… 339
課後練習2:在網站頁面中插入庫項目 ………… 340
第6部分 實現網頁特效
第15章 使用行為創建動態效果 ………………341
15.1 了解Dreamweaver 行為 …………… 342
15.1.1 什麼是Dreamweaver 事件 …… 342
15.1.2 什麼是Dreamweaver 動作 …… 342
15.2 為網頁添加Dreamweaver 行為 …… 342
15.2.1 交換圖像…………………………… 343
上機練習:套用“交換圖像”行為……………… 343
15.2.2 彈出信息…………………………… 344
上機練習:為網頁添加彈出信息………………… 344
15.2.3 恢復交換圖像……………………… 345
15.2.4 打開瀏覽器視窗 ………………… 346
上機練習:套用“打開瀏覽器視窗”行為……… 346
15.2.5 拖動AP 元素 ……………………… 347
上機練習:實現網頁中可拖動元素……………… 347
15.2.6 改變屬性 ………………………… 348
上機練習:改變網頁元素屬性…………………… 349
15.2.7 顯示/ 隱藏元素 …………………… 350
上機練習:顯示和隱藏網頁元素………………… 350
15.2.8 檢查外掛程式 ………………………… 352
上機練習:添加“檢查外掛程式”行為……………… 352
15.2.9 檢查表單 ………………………… 353
上機練習:使用行為驗證表單…………………… 353
15.2.10 調用JavaScript ………………… 355
15.2.11 跳轉選單 ………………………… 356
上機練習:在網頁中插入跳轉選單……………… 356
15.2.12 跳轉選單開始 …………………… 358
15.2.13 轉到URL ………………………… 358
上機練習:實現網頁跳轉………………………… 358
15.2.14 預先載入圖像 …………………… 359
15.3 為網頁添加文本行為 …………………… 359
15.3.1 設定容器的文本 ………………… 360
15.3.2 設定文本域文本…………………… 360
上機練習:設定文本域默認文字內容…………… 360
15.3.3 設定框架文本……………………… 361
15.3.4 設定狀態欄文本 ………………… 361
上機練習:為網頁添加狀態欄文本……………… 361
15.4 為網頁添加jQuery 效果 ……………… 362
15.4.1 了解jQuery 效果 ………………… 362
15.4.2 套用“Blind”行為 ……………… 363
上機練習:實現網頁元素的動態隱藏…………… 363
15.4.3 套用“Highlight”行為 ………… 365
上機練習:實現網頁元素的高光過渡…………… 365
15.5 課後習題 ………………………………… 367
課後練習1:為網頁添加“調用JavaScript”行為… 367
課後練習2:添加Drop 效果實現網頁元素
漸隱漸現 …………………………… 368
第16章 使用Dreamweaver維護並上傳網站… 369
16.1 站點維護 ………………………………… 370
16.1.1 檢查連結 ………………………… 370
上機練習:檢查網頁連結………………………… 370
16.1.2 W3C 驗證 ………………………… 371
上機練習:對網頁進行W3C 驗證 …………… 371
16.1.3 創建站點報告 …………………… 372
16.2 上傳網站 ………………………………… 372
16.2.1 設定FTP 伺服器 ………………… 372
上機練習:設定站點FTP 伺服器 ……………… 373
16.2.2 連線到遠程伺服器………………… 374
16.2.3 上傳檔案…………………………… 374
上機練習:上傳檔案……………………………… 375
16.2.4 下載檔案 ………………………… 376
16.3 課後練習 ………………………………… 376
課後練習1:使用Dreamweaver 下載網頁檔案… 376
課後練習2:使用FlashFXP 上傳網頁檔案 … 377
第7部分 商業實戰
第17章 綜合商業網站案例 ………………… 379
17.1 制化妝品網站 …………………………… 380
17.1.1 設計分析 ………………………… 380
17.1.2 製作步驟…………………………… 380
17.1.3 案例小結 ………………………… 388
17.2 製作休閒樂園網站 ……………………… 388
17.2.1 設計分析…………………………… 388
17.2.2 製作步驟…………………………… 388
17.2.3 案例小結…………………………… 398
17.3 製作遊戲網站 …………………………… 398
17.3.1 設計分析 ………………………… 398
17.3.2 製作步驟…………………………… 398
17.3.3 案例小結…………………………… 408