第1章 互動網(wǎng)頁設(shè)計背景知識
1.1 什么是網(wǎng)頁設(shè)計 2
1.1.1 網(wǎng)頁設(shè)計的具體定義 2
1.1.2 網(wǎng)站搭建的3個層面 3
1.1.3 從單向到雙向，再到多向溝通機制的發(fā)展 3
1.1.4 網(wǎng)站的類型和特點 4
1.2 網(wǎng)頁交互設(shè)計發(fā)展簡史 5
1.2.1 互聯(lián)網(wǎng)絡的誕生 5
1.2.2 20世紀90 年代初期：純文本網(wǎng)頁 6
1.2.3 20世紀90 年代中期：基于Table表格的排版設(shè)計興起 7
1.2.4 20世紀90 年代后期：Flash 技術(shù)的崛起 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)頁設(shè)計總則 15
1.3.1 以用戶為中心的設(shè)計 15
1.3.2 形式與功能的平衡 16
1.3.3 網(wǎng)頁的執(zhí)行效率 17
1.3.4 標準與創(chuàng)新的相互作用與影響 18
1.4 視覺設(shè)計主要原則 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)頁設(shè)計方法和軟件 23
1.5.1 概念原型設(shè)計 24
1.5.2 界面設(shè)計 24
1.5.3 客戶端互動網(wǎng)頁設(shè)計 26
1.5.4 服務器端相關(guān)程序語言 27
第2章 從平面設(shè)計到網(wǎng)頁設(shè)計28
2.1 Keepwalk 教學網(wǎng)站切圖設(shè)計實例 29
2.1.1 根據(jù)內(nèi)容結(jié)構(gòu)和功能分區(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 切片屬性和類型設(shè)定 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)頁設(shè)計實例48
3.1 設(shè)計效果預覽 49
3.2 從架設(shè)站點開始 50
3.2.1 新建和修改站點 50
3.2.2 上傳和更新站點 51
3.3 頁面結(jié)構(gòu)設(shè)計 57
3.3.1 如何插入圖片 58
3.3.2 HTML 基礎(chǔ)知識 60
3.3.3 如何導入文本 62
3.3.4 如何設(shè)置標題文本 62
3.3.5 如何用區(qū)域標記環(huán)繞特殊文本 63
3.3.6 如何應用編號列表 65
3.3.7 如何應用符號列表 66
3.3.8 如何創(chuàng)建超鏈接 67
3.4 頁面樣式設(shè)計 69
3.4.1 CSS 入門 70
3.4.2 如何創(chuàng)建和應用外部CSS 文檔 70
3.4.3 CSS 基礎(chǔ)語法 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 關(guān)聯(lián)選擇符的應用 82
3.5 擴展知識其他常用關(guān)聯(lián)選擇符 86
3.5.1 限定子關(guān)聯(lián)選擇符 86
3.5.2 隔代關(guān)聯(lián)選擇符 86
3.6 擴展知識HTML 如何同時應用多個CSS 類 87
3.7 擴展知識CSS 樣式列表的繼承和層疊 88
3.7.1 關(guān)于繼承 88
3.7.2 關(guān)于層疊 89
3.8 擴展知識HTML5 標記 89
第4章 明苑畫廊作品展示設(shè)計實例91
4.1 設(shè)計效果預覽 92
4.2 盒子對象的概念和應用 92
4.2.1 從盒子對象的概念開始 93
4.2.2 盒子對象的設(shè)計與應用 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)先權(quán)權(quán)重計算方法 117
第5章 Keepwalk 教學網(wǎng)站排版實例121
5.1 設(shè)計效果預覽 122
5.2 HTML 文檔的構(gòu)成 122
5.2.1 DTD 文檔標準的定義 124
5.2.2 關(guān)于 標記 125
5.2.3 字符編碼的定義 126
5.2.4 文檔流的概念 126
5.3 頁面框架結(jié)構(gòu)設(shè)計 127
5.4 block 和inline 對象 138
5.5 float 浮動和clear 清除浮動 139
5.6 塊類型對象浮動排版 141
5.7 擴展知識使用CSS 樣式制作互動翻轉(zhuǎn)按鈕效果 168
5.8 擴展知識使用模板提高效率 177
5.8.1 創(chuàng)建空白模板 180
5.8.2 根據(jù)已有設(shè)計創(chuàng)建模板 180
5.8.3 創(chuàng)建可編輯區(qū)域 182
5.8.4 對已有內(nèi)容頁面應用模板 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 動畫基礎(chǔ) 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 的基礎(chǔ)設(shè)置 227
6.5.2 keyframes 的進階設(shè)置 229
6.5.3 關(guān)鍵幀動畫的動畫模式 230
6.5.4 關(guān)鍵幀動畫的迭代計數(shù)屬性 231
6.5.5 為關(guān)鍵幀創(chuàng)建緩動特效 232
6.5.6 動畫播放方向?qū)傩?232
6.5.7 動畫屬性的簡寫方式 233
6.6 基于keyframes 的按鈕動效案例 233
6.7 擴展知識Animate.css 動畫庫的應用 238