Adobe Dreamweaver官方認證標準教材

第1章 互動網(wǎng)頁設計背景知識
1.1 什么是網(wǎng)頁設計 2
1.1.1 網(wǎng)頁設計的具體定義 2
1.1.2 網(wǎng)站搭建的3個層面 3
1.1.3 從單向到雙向，再到多向溝通機制的發(fā)展 3
1.1.4 網(wǎng)站的類型和特點 4
1.2 網(wǎng)頁交互設計發(fā)展簡史 5
1.2.1 互聯(lián)網(wǎng)絡的誕生 5
1.2.2 20世紀90 年代初期：純文本網(wǎng)頁 6
1.2.3 20世紀90 年代中期：基于Table表格的排版設計興起 7
1.2.4 20世紀90 年代后期：Flash 技術的崛起 8
1.2.5 21世紀千禧年：CSS 的盛行 9
1.2.6 21世紀00 年代初期：JavaScript異軍突起 11
1.2.7 21世紀00 年代中期：語義型網(wǎng)頁概念的誕生 12
1.2.8 21世紀00 年代后期：Web2.0 時代的來臨 12
1.2.9 當今：移動終端網(wǎng)頁的風靡 14
1.3 網(wǎng)頁設計總則 15
1.3.1 以用戶為中心的設計 15
1.3.2 形式與功能的平衡 16
1.3.3 網(wǎng)頁的執(zhí)行效率 17
1.3.4 標準與創(chuàng)新的相互作用與影響 18
1.4 視覺設計主要原則 18
1.4.1 主次！主次！還是主次！ 19
1.4.2 平衡 19
1.4.3 對齊 21
1.4.4 對比 22
1.4.5 重復 23
1.5 當前流行的網(wǎng)頁設計方法和軟件 23
1.5.1 概念原型設計 24
1.5.2 界面設計 24
1.5.3 客戶端互動網(wǎng)頁設計 26
1.5.4 服務器端相關程序語言 27
第2章 從平面設計到網(wǎng)頁設計28
2.1 Keepwalk 教學網(wǎng)站切圖設計實例 29
2.1.1 根據(jù)內容結構和功能分區(qū)規(guī)劃頁面 29
2.1.2 根據(jù)圖層自動產(chǎn)生切片 32
2.1.3 用戶自定義切片 33
2.1.4 解決切片干擾混亂問題 34
2.1.5 組合與拆分切片 35
2.1.6 切片屬性和類型設定 37
2.1.7 根據(jù)情況輸出圖片格式 39
2.2 從Photoshop 跨越到Dreamweaver的其他方法 41
2.2.1 在Dreamweaver 中直接置入PSD 文檔 41
2.2.2 從Photoshop 中復制粘貼到Dreamweaver 45
2.3 擴展知識——詳解適合網(wǎng)頁的幾種圖片格式 46
2.3.1 GIF 圖片和GIF 動畫 46
2.3.2 JPEG 圖片 47
2.3.3 PNG 圖片 47
第3章 新聞網(wǎng)頁設計實例48
3.1 設計效果預覽 49
3.2 從架設站點開始 50
3.2.1 新建和修改站點 50
3.2.2 上傳和更新站點 51
3.3 頁面結構設計 57
3.3.1 如何插入圖片 58
3.3.2 HTML 基礎知識 60
3.3.3 如何導入文本 62
3.3.4 如何設置標題文本 62
3.3.5 如何用區(qū)域標記環(huán)繞特殊文本 63
3.3.6 如何應用編號列表 65
3.3.7 如何應用符號列表 66
3.3.8 如何創(chuàng)建超鏈接 67
3.4 頁面樣式設計 69
3.4.1 CSS 入門 70
3.4.2 如何創(chuàng)建和應用外部CSS 文檔 70
3.4.3 CSS 基礎語法 72
3.4.4 使用“標記”選擇符 73
3.4.5 使用“id”選擇符 76
3.4.6 使用“class”類選擇符 78
3.4.7 使用“偽標記”選擇符 79
3.4.8 群組選擇符的應用 80
3.4.9 關聯(lián)選擇符的應用 82
3.5 擴展知識——其他常用關聯(lián)選擇符 86
3.5.1 “限定子”關聯(lián)選擇符 86
3.5.2 “隔代”關聯(lián)選擇符 86
3.6 擴展知識——HTML 如何同時應用多個CSS 類 87
3.7 擴展知識——CSS 樣式列表的繼承和層疊 88
3.7.1 關于繼承 88
3.7.2 關于層疊 89
3.8 擴展知識——HTML5 標記 89
第4章 明苑畫廊作品展示設計實例91
4.1 設計效果預覽 92
4.2 盒子對象的概念和應用 92
4.2.1 從盒子對象的概念開始 93
4.2.2 盒子對象的設計與應用 94
4.3 文檔流浮動排版 vs 坐標系定位排版 103
4.3.1 兩種定位排版的理念與四類定位方式 103
4.3.2 absolute 方式定位的應用范例 104
4.3.3 fixed 固定方式定位的應用范例 108
4.4 JavaScript 互動圖片展示制作 109
4.4.1 交換圖像互動制作 109
4.4.2 顯示或隱藏元素互動制作 111
4.5 擴展知識——圖片間隙的解決方法 114
4.5.1 圖片源代碼不折行、無空格方法去除間隙 115
4.5.2 圖片父級“font-size: 0px;”方法去除間隙 116
4.5.3 垂直堆疊圖片“display: block;”方法去除間隙 116
4.5.4 水平圖片“float”浮動方法去除間隙 117
4.6 擴展知識——優(yōu)先權權重計算方法 117
第5章 Keepwalk 教學網(wǎng)站排版實例121
5.1 設計效果預覽 122
5.2 HTML 文檔的構成 122
5.2.1 DTD 文檔標準的定義 124
5.2.2 關于 標記 125
5.2.3 字符編碼的定義 126
5.2.4 文檔流的概念 126
5.3 頁面框架結構設計 127
5.4 block 和inline 對象 138
5.5 float 浮動和clear 清除浮動 139
5.6 塊類型對象浮動排版 141
5.7 擴展知識——使用CSS 樣式制作互動翻轉按鈕效果 168
5.8 擴展知識——使用模板提高效率 177
5.8.1 創(chuàng)建空白模板 180
5.8.2 根據(jù)已有設計創(chuàng)建模板 180
5.8.3 創(chuàng)建可編輯區(qū)域 182
5.8.4 對已有內容頁面應用模板 183
5.8.5 對新頁面應用模板 184
5.8.6 更新模板 188
5.8.7 令屬性可編輯 189
5.8.8 從模板中分離 190
5.9 擴展知識——使用庫提高效率 191
5.9.1 如何創(chuàng)建庫對象 191
5.9.2 將庫對象插入頁面中 196
5.9.3 編輯和更新庫對象 197
5.9.4 分離庫對象 198
第6章 通過CSS 實現(xiàn)網(wǎng)頁動畫200
6.1 什么是CSS Animations（CSS 動畫） 201
6.2 什么是Transition（過渡） 201
6.2.1 Transition 動畫基礎 202
6.2.2 進階Transition 屬性 205
6.2.3 Transition 屬性的其他寫法 210
6.3 Transform（變換）動畫 213
6.3.1 基于二維的translate 變換動畫 213
6.3.2 基于三維的translate 變換動畫 217
6.4 基于transition 和transform 的按鈕動效案例 220
6.5 基于keyframes 的動畫與應用 227
6.5.1 keyframes 的基礎設置 227
6.5.2 keyframes 的進階設置 229
6.5.3 關鍵幀動畫的動畫模式 230
6.5.4 關鍵幀動畫的迭代計數(shù)屬性 231
6.5.5 為關鍵幀創(chuàng)建緩動特效 232
6.5.6 動畫播放方向屬性 232
6.5.7 動畫屬性的簡寫方式 233
6.6 基于keyframes 的按鈕動效案例 233
6.7 擴展知識——Animate.css 動畫庫的應用 238