第１章 交互界面設(shè)計概述 1

1.1　交互界面概念　1

1.2　交互界面歷史　2

1.3　交互用戶體驗　3

1.3.1　用戶體驗概念　3

1.3.2　生活中的用戶體驗　4

1.3.3　用戶體驗五要素　4

1.3.4　用戶體驗案例　9

1.4　交互界面設(shè)計與開發(fā)流程　11

1.5　本章小結(jié)　13

1.6　本章習(xí)題　13

第　2章 Web交互界面設(shè)計基礎(chǔ)　14

2.1　設(shè)計思路　14

2.2　設(shè)計要素　14

2.3　設(shè)計原則與準(zhǔn)則　17

2.3.1　基本原則　17

2.3.2　基本準(zhǔn)則　18

2.4　設(shè)計工具介紹　18

2.4.1　Photoshop概述　19

2.4.2　圖層基本操作　22

2.4.3　案例實現(xiàn)：圖層蒙版　25

2.4.4　案例實現(xiàn)：切片工具的應(yīng)用　27

2.5　Web交互界面設(shè)計　31

2.5.1　案例實現(xiàn)：網(wǎng)站界面設(shè)計　31

2.5.2　案例實現(xiàn)：網(wǎng)頁banner設(shè)計　37

2.6　本章小結(jié)　41

2.7　本章習(xí)題　41

1.選擇題　41

2.簡答題　41

第3章　Web交互界面技術(shù)概述　42

3.1　Web交互界面技術(shù)相關(guān)概念　42

3.1.1　Internet介紹　42

3.1.2　Web瀏覽器介紹　45

3.2　Web交互界面核心技術(shù)　45

3.2.1　網(wǎng)頁開發(fā)基本要素　45

3.2.2　Web標(biāo)準(zhǔn)　46

3.2.3　HTML5概述　47

3.2.4　CSS3概述　47

3.2.5　JavaScript簡介　48

3.2.6交互界面開發(fā)工具　49

3.3　本章小結(jié)　50

3.4　本章習(xí)題　50



第4章　HTML5和CSS3基礎(chǔ)　51

4.1　HTML5基礎(chǔ)　51

4.1.1　網(wǎng)頁基本結(jié)構(gòu)　51

4.1.2　標(biāo)簽類型　55

4.1.3　HTML5結(jié)構(gòu)標(biāo)簽　56

4.1.4　HTML5文本標(biāo)簽　60

4.2　CSS3基礎(chǔ)　62

4.2.1　CSS3的引用方法　63

4.2.2　CSS3選擇器和聲明　64

4.2.3　id和類命名規(guī)則　68

4.2.4　顏色值語法　68

4.2.5　CSS中的注釋　68

4.2.6　CSS3文本屬性　69

4.2.7　CSS3背景屬性　72

4.3　案例實現(xiàn)：文章界面美化　75

4.4　本章小結(jié)　77

4.5　本章習(xí)題　77

第5章　Web交互界面設(shè)計案例　79

5.1　新聞列表制作　79

5.1.1　超鏈接　79

5.1.2　列表標(biāo)簽　80

5.1.3　列表樣式屬性　82

5.1.4　案例實現(xiàn)：新聞列表制作　83

5.2　導(dǎo)航制作　85

5.2.1　標(biāo)準(zhǔn)流　85

5.2.2　浮動（float）與清除浮動（clear）　85

5.2.3　案例實現(xiàn)：導(dǎo)航制作　87

5.3　圖文板塊制作　89

5.3.1　盒子模型　89

5.3.2　寬度和高度　90

5.3.3　邊框　91

5.3.4　內(nèi)邊距　93

5.3.5　外邊距　93

5.3.6　Web常見圖片格式　94

5.3.7　Web中的插入圖片　95

5.3.8　相對路徑與絕對路徑　95

5.3.9　案例實現(xiàn)：圖文板塊制作　96

5.4　圖文列表制作　98

5.4.1　相對定位　99

5.4.2　絕對定位　99

5.4.3　層級z-index　100

5.4.4　CSS3的過渡動畫　100

5.　transition的簡寫屬性　101

5.4.5　CSS3的2D變形　101

5.4.6　CSS3的3D變形　103

5.4.7　隱藏與顯示屬性　104

5.4.8　案例實現(xiàn)：圖文列表制作　105

5.5　本章小結(jié)　106

5.6　本章習(xí)題　106

第6章　HTML5和CSS3拓展　109

6.1　HTML5表格　109

6.1.1　表格基本屬性　109

6.1.2　單元格的合并及拆分　111

6.1.3　表格的嵌套　111

6.1.4　案例實現(xiàn)：課程表制作　111

6.2　HTML5表單　114

6.2.1　表單基本屬性　114

6.2.2　HTML5新增表單控件　115

8.　datepickers日期選擇器　118

6.2.3　HTML5新增表單屬性　119

6.3　媒體對象　121

6.3.1　Object對象　121

6.3.2　embed對象　122

6.3.3　Video對象　122

6.3.4　Audio對象　123

6.3.5　source媒體元素　124

6.4　CSS3進階　124

6.4.1　偽類偽對象　125

6.4.2　幀動畫(animation)　126

6.4.3　flex布局　128

6.4.4　響應(yīng)式布局　129

6.5　案例實現(xiàn)：flex彈性盒子　132

1.　請思考　132

2.　案例分析　132

代碼6-5　flex布局中HTML5部分　132

6.6　本章小結(jié)　133

6.7　本章習(xí)題　133

1.選擇題　133

2.　簡答題　133

3.　操作題　133

第7章　JavaScript基礎(chǔ)　135

7.1　JavaScript簡介　135

7.1.1　JS基本概念　135

7.1.2　JS發(fā)展歷程　136

7.2　JS使用方法　136

7.2.1在頁面嵌入JS代碼　136

7.2.2　引入外部JS文件　138

7.2.3　JS代碼位置　139

7.2.4　JS調(diào)試方法　140

7.3　JS語法基礎(chǔ)　141

7.3.1　基本語法規(guī)則　141

7.3.2　變量和常量　143

7.3.3　基本數(shù)據(jù)類型　145

7.3.4　運算符與表達式　151

7.3.5　數(shù)學(xué)方法　155

7.4　流程控制語句　156

7.4.1　條件語句　156

7.4.2　循環(huán)語句　158

7.5　函數(shù)　160

7.5.1　函數(shù)的定義　160

7.5.2　函數(shù)的作用域　162

7.5.3　函數(shù)參數(shù)和參數(shù)對象　163

7.6　DOM基礎(chǔ)　166

7.6.1　DOM 樹與節(jié)點　166

7.6.2　標(biāo)簽節(jié)點常用屬性　167

7.6.3　DOM獲取標(biāo)簽節(jié)點　168

7.6.4　DOM生成或刪除標(biāo)簽　172

7.6.5　DOM操作標(biāo)簽屬性　173

7.8　案例實現(xiàn)：頁面動態(tài)廣告　174

7.9　本章小結(jié)　177

7.10　本章習(xí)題　177

第8章　Web交互界面開發(fā)　180

8.1　簡易計算器開發(fā)　180

8.1.1　事件　180

8.1.2　案例實現(xiàn)：簡易計算器　184

8.2　二級導(dǎo)航開發(fā)　186

8.2.1　JS修改樣式　186

8.2.2　案例實現(xiàn)：二級導(dǎo)航　188

代碼8-　15 一級導(dǎo)航HTML和CSS代碼示例　188

8.3　時間走動制作　192

8.3.1　時間類　192

8.3.2　數(shù)組類　194

8.3.3　計時器　199

8.3.4　案例實現(xiàn)：時間走動　200

8.4　Web交互界面開發(fā)進階　201

8.4.1　案例實現(xiàn)：圖片輪播現(xiàn)　201

8.4.2　案例實現(xiàn)：選項卡　206

8.5　本章小結(jié)　209

8.6　本章習(xí)題　209

第9章　綜合案例：企業(yè)網(wǎng)站交互界面開發(fā)　212

9.1　交互界面分析　212

9.2　初始化CSS　213

9.3　界面HTML框架搭建　215

9.4　時間走動特效實現(xiàn)　218

9.5　二級導(dǎo)航制作及交互實現(xiàn)　218

9.6　新聞列表制作及欄目復(fù)用　224

9.7　選項卡制作及交互實現(xiàn)　225

9.8　圖片輪播制作及交互實現(xiàn)　229

9.9　本章小結(jié)　232

9.10　本章習(xí)題　233