基本介紹
- 中文名：HTML5網頁前端設計實戰
- 作者：周文潔
- 出版社：清華大學出版社
- 出版時間：2017年7月
- 定價：35 元
- ISBN：9787302464686
內容簡介,圖書目錄,
內容簡介
本書是《HTML5網頁前端設計》一書的配套實戰項目教程，也可單獨為具有一定Web前端基礎的讀者使用。本書的電子資源包括全套例題原始碼可供讀者下載。
全書共包含10章，每章均配套兩個實例項目。全部內容可分為以下4個部分：踏祝舟
第一部分是基礎知識篇，包括第1、2章的內容。其中，第1章是HTML+CSS基礎項目，介紹導航選單與商務風格表格的設計與實現；第2章是JavaScript基礎項目，介紹電子時鐘與電子日曆的設計與實現。
第二部分是重點篇，包括第3～8章的內容。這6章分別介紹基於HTML5拖放API、表單API、畫布API、媒體API、地理定位API以及Web存儲API的項目案例。其中較有特色的綜合項目有手繪時鐘、拼店雅地圖遊戲、網頁日誌本、音樂播放器、線上教學視頻等。
第三部分是提高篇，包括第9章的內容。第9章是CSS3基礎項目，主要講解使用CSS3製作火焰和霓虹文字特效以及使用CSS3動畫製作回響式放大選單。
第四部分是綜合篇，包括第10章的內容。第10章提供了兩個完整的項目實例，包括貪吃蛇遊戲的開發和企業文化用品展示網站的設計與實現。這兩個項目實例綜合套用了全書所學的知識，讓讀者所學即所用。
本書可作為高校計算機相關專業HTML5 課程的實踐教材，也可作為學習HTML5開發的自學教材或培訓教材。
圖書目錄
第1章 HTML+CSS基礎項目 1
1.1 導航欄選單的設計與實現 1
1.1.1 界面設計多和尋棗 1
1.1.2 滑鼠事件 4
1.1.3 完整代碼展示 5
1.2 商務風格表格的設計與實現拔多駝 6
1.2.1 創建表格 6
1.2.2 樣式設計 7
1.2.3 完整代碼展示 11
第2章 JavaScript基礎項目 13
2.1 電子時鐘的設計與實現 13
2.1.1 界面設計 13
2.1.2 時鐘動態效果的實現 16
2.1.3 完整代碼展凝廈道漿示 18
2.2 電子日曆的設計與實現 19
2.2.1 界面設計 19
2.2.2 顯示屑兵狀態欄中的年份和月份 22
2.2.3 顯示當前月份的所有日期 23
2.2.4 按鈕控制項功能的實現 26
2.2.5 完整代碼展示 27
第3章 HTML5拖放API項目 31
3.1 仿資源回收筒效果的設計與實現 31
3.1.1 界面設計 31
3.1.2 檔案拖曳與回收功能的實現 34
3.1.3 完整代碼展示 37
3.2 圖片相框展示的設計與實現 39
3.2.1 界面設計 39
3.2.2 相框自動生成功能的實現 41
3.2.3 完整代碼展示 46
第4章 HTML5表單API項目 49
4.1 用戶註冊頁面的設計與實現 49
4.1.1 界面設計 50
4.1.2 表單設計 51
4.1.3 提示與驗證功能的實現 54
4.1.4 完整代碼展示 58
4.2 問卷調查頁面的設計與實現 60
4.2.1 界面設計 61
4.2.2 表單設計 62
4.2.3 驗證功能的實現 69
4.2.4 完整代碼展示 73
第5章 HTML5畫布API項目 79
5.1 手繪時鐘的設計與實現 79
5.1.1 界面設計 79
5.1.2 實時更新效果 87
5.1.3 完整代碼展示 88
5.2 拼圖遊戲的設計與實現 91
5.2.1 界面設計 91
5.2.2 實現遊戲邏輯 95
5.2.3 遊戲成功與重新開始 102
5.2.4 完整代碼展示 105
第6章 HTML5媒體API項目 111
6.1 音樂播放器的設計與實現 111
6.1.1 界面設計 111
6.1.2 媒體檔案的載入 115
6.1.3 控制項功能的實現 115
6.1.4 完整代碼展示 119
6.2 線上教學視頻的設計與實現 122
6.2.1 界面設計 122
6.2.2 視頻檔案的載入與播放 127
6.2.3 視頻時間跳轉的實現 128
6.2.4 完整代碼展示 130
第7章 HTML5地理定位API項目 133
7.1 運動數據記錄頁面的設計與實現 133
7.1.1 界面設計 134
7.1.2 實時監控地理定位 135
7.1.3 開始與結束按鈕的切換 136
7.1.4 計算與顯示距離 138
7.1.5 完整代碼展示 140
7.2 運動軌跡繪製頁面的設計與實現 144
7.2.1 界面設計 144
7.2.2 開始與結束按鈕的切換 146
7.2.3 繪製地坑腿地圖與運動軌跡 146
7.2.4 計時功能的實現 151
7.2.5 完整代碼展示 153
第8章 HTML5 Web存儲API項目 157
8.1 基於Web存儲技術的網頁主題設定 157
8.1.1 界面設計 157
8.1.2 重置網頁主題顏色的實現 160
8.1.3 載入網頁主題顏色的實現 162
8.1.4 完整代碼展示 163
8.2 基於Web存儲技術的網頁日誌本 165
8.2.1 界面設計 165
8.2.2 讀取日誌功能的實現 168
8.2.3 保存日誌功能的實現 169
8.2.4 刪除日誌功能的實現 170
8.2.5 完整代碼展示 171
第9章 CSS3基礎項目 175
9.1 使用CSS3文本陰影製作特殊字型效果 175
9.1.1 整體設計 175
9.1.2 火焰文字效果的實現 177
9.1.3 霓虹文字效果的實現 178
9.1.4 完整代碼展示 179
9.2 使用CSS3動畫製作回響式放大選單 180
9.2.1 整體設計 180
9.2.2 動畫效果的實現 182
9.2.3 完整代碼展示 183
第10章 綜合套用設計實例 185
10.1 基於HTML5的貪吃蛇遊戲的設計與實現 185
10.1.1 貪吃蛇遊戲簡介 185
10.1.2 界面布局設計 185
10.1.3 數據模型設計 190
10.1.4 遊戲的邏輯實現 192
10.1.5 完整代碼展示 203
10.2 實戰項目——企業文化用品展示網頁的開發 207
10.2.1 項目簡介 207
10.2.2 整體布局設計 208
10.2.3 頁眉和頁腳的實現 210
10.2.4 主體內容的實現 212
10.2.5 完整代碼展示 225
第4章 HTML5表單API項目 49
4.1 用戶註冊頁面的設計與實現 49
4.1.1 界面設計 50
4.1.2 表單設計 51
4.1.3 提示與驗證功能的實現 54
4.1.4 完整代碼展示 58
4.2 問卷調查頁面的設計與實現 60
4.2.1 界面設計 61
4.2.2 表單設計 62
4.2.3 驗證功能的實現 69
4.2.4 完整代碼展示 73
第5章 HTML5畫布API項目 79
5.1 手繪時鐘的設計與實現 79
5.1.1 界面設計 79
5.1.2 實時更新效果 87
5.1.3 完整代碼展示 88
5.2 拼圖遊戲的設計與實現 91
5.2.1 界面設計 91
5.2.2 實現遊戲邏輯 95
5.2.3 遊戲成功與重新開始 102
5.2.4 完整代碼展示 105
第6章 HTML5媒體API項目 111
6.1 音樂播放器的設計與實現 111
6.1.1 界面設計 111
6.1.2 媒體檔案的載入 115
6.1.3 控制項功能的實現 115
6.1.4 完整代碼展示 119
6.2 線上教學視頻的設計與實現 122
6.2.1 界面設計 122
6.2.2 視頻檔案的載入與播放 127
6.2.3 視頻時間跳轉的實現 128
6.2.4 完整代碼展示 130
第7章 HTML5地理定位API項目 133
7.1 運動數據記錄頁面的設計與實現 133
7.1.1 界面設計 134
7.1.2 實時監控地理定位 135
7.1.3 開始與結束按鈕的切換 136
7.1.4 計算與顯示距離 138
7.1.5 完整代碼展示 140
7.2 運動軌跡繪製頁面的設計與實現 144
7.2.1 界面設計 144
7.2.2 開始與結束按鈕的切換 146
7.2.3 繪製地圖與運動軌跡 146
7.2.4 計時功能的實現 151
7.2.5 完整代碼展示 153
第8章 HTML5 Web存儲API項目 157
8.1 基於Web存儲技術的網頁主題設定 157
8.1.1 界面設計 157
8.1.2 重置網頁主題顏色的實現 160
8.1.3 載入網頁主題顏色的實現 162
8.1.4 完整代碼展示 163
8.2 基於Web存儲技術的網頁日誌本 165
8.2.1 界面設計 165
8.2.2 讀取日誌功能的實現 168
8.2.3 保存日誌功能的實現 169
8.2.4 刪除日誌功能的實現 170
8.2.5 完整代碼展示 171
第9章 CSS3基礎項目 175
9.1 使用CSS3文本陰影製作特殊字型效果 175
9.1.1 整體設計 175
9.1.2 火焰文字效果的實現 177
9.1.3 霓虹文字效果的實現 178
9.1.4 完整代碼展示 179
9.2 使用CSS3動畫製作回響式放大選單 180
9.2.1 整體設計 180
9.2.2 動畫效果的實現 182
9.2.3 完整代碼展示 183
第10章 綜合套用設計實例 185
10.1 基於HTML5的貪吃蛇遊戲的設計與實現 185
10.1.1 貪吃蛇遊戲簡介 185
10.1.2 界面布局設計 185
10.1.3 數據模型設計 190
10.1.4 遊戲的邏輯實現 192
10.1.5 完整代碼展示 203
10.2 實戰項目——企業文化用品展示網頁的開發 207
10.2.1 項目簡介 207
10.2.2 整體布局設計 208
10.2.3 頁眉和頁腳的實現 210
10.2.4 主體內容的實現 212
10.2.5 完整代碼展示 225
