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