HTML5+CSS3網頁設計(全案例微課版)

HTML5+CSS3網頁設計(全案例微課版)

《HTML5+CSS3網頁設計(全案例微課版)》是2021年清華大學出版社出版的圖書

基本介紹

  • 書名:HTML5+CSS3網頁設計(全案例微課版)
  • 作者:劉春茂 
  • 出版社清華大學出版社
  • 出版時間:2021年7月1日  
  • 定價:78 元 
  • ISBN: 9787302579038
內容簡介,作者簡介,圖書目錄,

內容簡介

《HTML5+CSS3網頁設計(全案例微課版)》是HTML5+CSS3網頁設計入門教材。
《HTML5+CSS3網頁設計(全案例微課版)》側重於案例,並以微課方式來講解網頁設計的相關內容。全書分為23章,主要內容包括認識HTML5,設計網頁的文本與段落,設計網頁列表,網頁中的圖像和超連結,表格與〈div〉標記,網頁中的表單,網頁中的多媒體,認識CSS樣式表,設計圖片、連結和選單的樣式,設計表格和表單的樣式,使用CSS3設計動畫效果,JavaScript和jQuery,繪製圖形,檔案與拖放,地理位置技術,離線Web應用程式,處理執行緒和伺服器事件,數據存儲和通信技術,設計流行的回響式網頁。最後通過4個熱點綜合項目,進一步鞏固讀者的項目開發知識和技能。
《HTML5+CSS3網頁設計(全案例微課版)》內容豐富,條理清晰,實用性強,適合高校非計算機專業及社會培訓機構師生,以及自學網頁設計愛好者。

作者簡介

劉春茂在鄭州輕工業大學主要負責計算機系的畢業生實訓,善於引導學生學習,讓學校所學的知識和社會的需求很好地銜接,同時具有豐富的教學經驗和開發經驗。曾做項目:電子貨幣交易系統、 B2C 電子商務平台、網上書店和評教系統等,具有很強的實戰經驗。

圖書目錄

第1章 認識HTML5 001
1.1 HTML的基本概念 002
1.1.1 什麼是HTML 002
1.1.2 HTML的發展歷程 002
1.2 HTML檔案的基本結構 003
1.3 認識HTML5基本標記 003
1.3.1 文檔類型說明 003
1.3.2 <html>標記 004
1.3.3 頭標記<head> 004
1.3.4 網頁的主體標記<body> 007
1.3.5 頁面注釋標記<!-- --> 007
1.4 HTML5網頁的開發環境 008
1.4.1 使用記事本手工編寫HTML代碼 008
1.4.2 使用WebStorm編寫HTML代碼 009
1.5 新手常見疑難問題 013
1.6 實戰技能訓練營 015
第2章 設計網頁的文本與段落 016
2.1 標題017
2.1.1 標題文字標記 017
2.1.2 標題的對齊方式 018
2.2 設定文字格式 018
2.2.1 文字的字型、字號和顏色 018
2.2.2 文字的粗體、斜體和下劃線 020
2.2.3 文字的上標和下標 021
2.3 設定段落格式 021
2.3.1 段落標記 021
2.3.2 段落的換行標記 022
2.3.3 段落的原格式標記 022
2.4 網頁的水平線 023
2.4.1 添加水平線 023
2.4.2 設定水平線的寬度與高度 023
2.5 新手常見疑難問題 024
2.6 實戰技能訓練營 024
第3章 設計網頁列表 026
3.1 無序列表 027
3.1.1 無序列表的標記 027
3.1.2 無序列表的屬性 027
3.2 有序列表 028
3.2.1 有序列表的標記 028
3.2.2 有序列表的屬性 029
3.3 自定義列表 029
3.4 列表的嵌套 030
3.5 新手常見疑難問題 031
3.6 實戰技能訓練營 031
第4章 網頁中的圖像和超連結 032
4.1 網頁中的圖像 033
4.1.1 網頁支持的圖片格式 033
4.1.2 圖像的路徑 034
4.2 在網頁中插入圖像 035
4.3 編輯網頁中的圖像 036
4.3.1 設定圖像的大小和框線 036
4.3.2 設定圖像的間距和對齊方式 037
4.3.3 設定圖像的替換文字和提示文字 038
4.4 認識網頁超連結 039
4.4.1 什麼是網頁超連結 039
4.4.2 超連結的URL 040
4.4.3 超連結的URL類型 040
4.5 建立網頁超連結 040
4.5.1 創建超文本連結 041
4.5.2 創建圖片連結 042
4.5.3 創建下載連結 042
4.5.4 使用相對路徑和絕對路徑 043
4.5.5 設定以新視窗顯示超連結頁面 043
4.5.6 設定電子郵件連結 044
4.6 使用浮動框架iframe 045
4.7 使用書籤連結製作電子書閱讀網頁 046
4.8 圖像熱點連結 048
4.9 新手常見疑難問題 050
4.10 實戰技能訓練營 051
第5 章 表格與<div> 標記 052
5.1 表格的基本結構 053
5.2 創建表格 054
5.2.1 創建普通表格 054
5.2.2 創建帶有標題的表格 055
5.3 編輯表格 055
5.3.1 定義表格的框線類型 055
5.3.2 定義表格的表頭 056
5.3.3 設定表格背景 056
5.3.4 設定單元格的背景 057
5.3.5 合併單元格 058
5.3.6 表格的分組 060
5.3.7 設定單元格的行高與列寬 061
5.4 完整的表格標記 061
5.5 設定懸浮變色的表格 062
5.6 <div> 標記 064
5.7 <span> 標記 065
5.8 新手常見疑難問題 066
5.9 實戰技能訓練營 066
第6 章 網頁中的表單 068
6.1 表單概述 069
6.2 輸入標記 069
6.2.1 文本框 069
6.2.2 單選按鈕和複選框 071
6.2.3 按鈕073
6.3 圖像域和檔案域 074
6.4 列表框 075
6.5 表單的高級元素 076
6.5.1 url 屬性 076
6.5.2 email 屬性 077
6.5.3 date 和time 屬性 077
6.5.4 number 屬性 078
6.5.5 range 屬性 079
6.5.6 required 屬性 079
6.6 新手常見疑難問題 080
6.7 實戰技能訓練營 080
第7 章 網頁中的多媒體 081
7.1 <audio> 標記概述 082
7.1.1 認識<audio> 標記 082
7.1.2 <audio> 標記的屬性 083
7.1.3 瀏覽器對<audio> 標記的支持情況083
7.2 添加音頻檔案 083
7.3 <video> 標記084
7.3.1 認識<video> 標記 085
7.3.2 <video> 標記的屬性 086
7.3.3 瀏覽器對<video> 標記的支持
情況086
7.4 添加視頻檔案 087
7.5 新手常見疑難問題 088
7.6 實戰技能訓練營 089
第8 章 認識CSS 樣式表090
8.1 CSS 概述091
8.1.1 CSS 的功能 091
8.1.2 CSS 的基礎語法 091
8.2 創建和連結CSS 檔案 092
8.3 CSS 選擇器 093
8.3.1 標記選擇器 093
8.3.2 類選擇器 094
8.3.3 ID 選擇器 095
8.3.4 偽類選擇器 096
8.3.5 屬性選擇器 096
8.4 CSS 常用樣式 098
8.4.1 使用字型樣式 098
8.4.2 使用文本樣式 101
8.4.3 使用背景樣式 104
8.4.4 設計框線樣式 107
8.4.5 設定列表樣式 109
8.5 新手常見疑難問題 112
8.6 實戰技能訓練營 112
第9 章 設計圖片、連結和選單的樣式 113
9.1 設計圖片的樣式 114
9.1.1 設定圖片的大小 114
9.1.2 圖片對齊 115
9.1.3 文字環繞圖片 117
9.1.4 圖片與文字的間距 118
9.2 為圖片添加圓角框線樣式 119
9.3 設計連結的樣式 120
9.3.1 設定連結樣式 120
9.3.2 定義下劃線樣式 121
9.3.3 定義連結背景圖 122
9.3.4 定義連結提示信息 123
9.3.5 定義連結按鈕樣式 124
9.4 設計選單的樣式 125
9.4.1 製作動態導航選單 125
9.4.2 製作多級選單列表 127
9.5 新手常見疑難問題 129
9.6 實戰技能訓練營 129
第10 章 設計表格和表單的樣式 131
10.1 設計表格的樣式 132
10.1.1 設定表格顏色132
10.1.2 設定表格框線133
10.1.3 表格框線寬度134
10.1.4 表格框線顏色135
10.1.5 表格標題的位置 135
10.1.6 隱藏空單元格136
10.1.7 單元格的邊距137
10.2 設計表單的樣式 138
10.2.1 表單的字型樣式 138
10.2.2 表單的框線樣式 139
10.2.3 表單的背景樣式 141
10.2.4 設計按鈕樣式142
10.2.5 設計下拉選單樣式143
10.3 新手常見疑難問題 144
10.4 實戰技能訓練營 144
第11 章 使用CSS3 設計動畫效果146
11.1 2D 轉換動畫效果 147
11.1.1 添加2D 移動效果 147
11.1.2 添加2D 旋轉效果 148
11.1.3 添加2D 縮放效果 149
11.1.4 添加2D 傾斜效果 150
11.1.5 添加2D 綜合變換效果 151
11.2 3D 轉換動畫效果 151
11.2.1 添加3D 移動效果 152
11.2.2 添加3D 旋轉效果 154
11.2.3 添加3D 縮放效果 157
11.3 設計過渡動畫效果 160
11.3.1 設定過渡屬性160
11.3.2 設定過渡時間161
11.3.3 設定延遲時間162
11.3.4 設定過渡動畫類型162
11.4 設計幀動畫效果 164
11.4.1 設定關鍵幀 164
11.4.2 設定動畫屬性166
11.5 新手常見疑難問題 168
11.6 實戰技能訓練營 169
第12 章 JavaScript 和jQuery 170
12.1 認識JavaScript 171
12.1.1 什麼是JavaScript 171
12.1.2 在網頁頭部嵌入JavaScript代碼 171
12.2 JavaScript 對象與函式 172
12.2.1 認識對象 172
12.2.2 認識函式173
12.3 JavaScript 事件 174
12.3.1 事件與事件處理概述174
12.3.2 JavaScript 常用事件 175
12.4 認識jQuery176
12.4.1 jQuery 能做什麼 176
12.4.2 jQuery 的配置177
12.5 jQuery 選擇器177
12.5.1 jQuery 工廠函式 177
12.5.2 常見選擇器 178
12.6 新手常見疑難問題 179
12.7 實戰技能訓練營 179
第13 章 繪製圖形 181
13.1 添加canvas 182
13.2 繪製基本形狀182
13.2.1 繪製矩形 183
13.2.2 繪製圓 183
13.2.3 使用moveTo與lineTo 繪製直線 184
13.2.4 使用bezierCurveTo 繪製貝濟埃曲線 185
13.3 繪製變形圖形186
13.3.1 繪製平移效果的圖形186
13.3.2 繪製縮放效果的圖形187
13.3.3 繪製旋轉效果的圖形188
13.3.4 繪製組合效果的圖形188
13.4 繪製文字 190
13.5 新手常見疑難問題 191
13.6 實戰技能訓練營 191
第14 章 檔案與拖放 193
14.1 選擇檔案 194
14.1.1 選擇單個檔案194
14.1.2 選擇多個檔案194
14.2 使用FileReader 接口讀取檔案 195
14.2.1 檢測瀏覽器支持FileReader 接口否 195
14.2.2  FileReader 接口的方法 195
14.2.3 使用readAsDataURL 方法預覽圖片 196
14.2.4 使用readAsText 方法讀取文本檔案 197
14.3 使用HTML5 實現檔案拖放 198
14.3.1 認識檔案拖放的過程198
14.3.2 瀏覽器支持情況 199
14.4 拖放圖片和文字 199
14.4.1 來回拖放圖片200
14.4.2 拖放文字 201
14.5 新手常見疑難問題 203
14.6 實戰技能訓練營 203
第15 章 地理位置技術205
15.1 利用Geolocation API 獲取地理位置 206
15.1.1 地理定位的原理 206
15.1.2 獲取定位信息的方法206
15.1.3 常用地理定位方法206
15.1.4 判斷瀏覽器可否獲取地理位置信息 207
15.1.5 指定緯度和經度坐標208
15.1.6 獲取當前位置的經度與緯度 209
15.1.7 處理錯誤和拒絕 210
15.2 瀏覽器對地理定位的支持情況 211
15.3 調用Google 地圖 211
15.4 新手常見疑難問題 214
15.5 實戰技能訓練營 214
第16 章 離線Web 應用程式215
16.1 HTML5 離線Web 套用概述 216
16.2 使用HTML5 離線Web 套用API 216
16.2.1 檢查瀏覽器的支持情況 216
16.2.2 搭建簡單的離線應用程式 216
16.2.3 支持離線行為217
16.2.4 Manifest 檔案217
16.2.5 ApplicationCache API218
16.3 使用HTML5 構建離線Web 套用 220
16.3.1 創建記錄資源的manifest 檔案 220
16.3.2 創建構成界面的HTML 和CSS 220
16.3.3 創建離線的JavaScript 221
16.3.4 檢查applicationCache 的支持情況 222
16.3.5 添加Update 按鈕處理函式 223
16.3.6 添加Storage 功能代碼 223
16.3.7 添加離線事件處理程式 223
16.4 離線定位跟蹤224
16.5 新手常見疑難問題 228
16.6 實戰技能訓練營 228
第17 章 處理執行緒和伺服器事件 230
17.1 Web Workers231
17.1.1 Web Workers 概述 231
17.1.2 執行緒中常用的變數、函式與類 231
17.1.3 與執行緒進行數據互動232
17.2 執行緒嵌套 234
17.2.1 執行緒嵌套 234
17.2.2 多個子執行緒之間的數據互動 236
17.3 伺服器事件概述 237
17.4 伺服器事件的實現過程 238
17.4.1  檢測瀏覽器支持Server-Sent 事件否 238
17.4.2  使用EventSource 對象 238
17.4.3  編寫伺服器端代碼 239
17.5  創建Web Worker 計數器 239
17.6 伺服器事件實戰套用 241
17.7 新手常見疑難問題 242
17.8 實戰技能訓練營 243
第18 章 數據存儲和通信技術244
18.1 認識Web 存儲 245
18.1.1 本地存儲和Cookies 的區別 245
18.1.2 Web 存儲方法245
18.2 使用HTML5 Web Storage API 245
18.2.1 測試瀏覽器的支持情況 245
18.2.2 使用sessionStorage 方法創建對象 246
18.2.3 使用localStorage 方法創建對象 247
18.2.4  Web Storage API 的其他操作 248
18.2.5 使用JSON 對象存取數據 249
18.3 瀏覽器對Web 存儲的支持情況 251
18.4 跨文檔訊息傳輸 251
18.4.1 跨文檔訊息傳輸的基本知識 251
18.4.2 跨文檔通信套用測試252
18.5 WebSocket API 254
18.5.1 什麼是WebSocket API 254
18.5.2 WebSocket 通信基礎254
18.5.3 伺服器端使用WebSocket API 256
18.5.4 客戶端使用WebSocket API 258
18.6 製作簡單的Web 留言本 259
18.7 編寫簡單的WebSocket 伺服器 261
18.8 新手常見疑難問題 265
18.9 實戰技能訓練營 266
第19 章 設計流行的回響式網頁 267
19.1 什麼是回響式網頁設計 268
19.2 像素和螢幕解析度 269
19.3 視口 269
19.3.1 視口的分類和常用屬性 269
19.3.2 媒體查詢 270
19.4 設計回響式網頁布局 271
19.4.1 常用布局類型271
19.4.2 布局的實現方式 271
19.4.3 回響式布局的設計與實現 273
19.5 回響式圖片 273
19.5.1 使用<picture> 標記 273
19.5.2 使用CSS 圖片274
19.6 回響式視頻 276
19.7 回響式導航選單 276
19.8 回響式表格 278
19.8.1 隱藏表格中的列 278
19.8.2 滾動表格中的列 279
19.8.3 轉換表格中的列 281
19.9 流行的回響式開發框架Bootstrap 283
19.10 新手常見疑難問題 284
19.11 實戰技能訓練營 285
第20 章 項目實訓1——開發線上購物網站 286
20.1 整體布局 287
20.1.1 設計分析 287
20.1.2 排版架構 287
20.2 主要模組設計288
20.2.1 Logo 與導航區288
20.2.2 Banner 與資訊區 289
20.2.3 產品類別區域290
20.2.4 頁腳區域 292
第21 章 項目實訓2——開發企業入口網站 293
21.1 構思布局 294
21.1.1 設計分析 294
21.1.2 排版架構 294
21.2 主要模組設計295
21.2.1 Logo 與導航選單 295
21.2.2 Banner 區296
21.2.3 資訊區 297
21.2.4 版權資訊 299
第22 章 項目實訓3——開發連鎖咖啡回響式網站 300
22.1 網站概述 301
22.1.1 網站結構 301
22.1.2 設計效果 301
22.1.3 設計準備 302
22.2 設計首頁布局303
22.3 設計可切換導航 304
22.4 主體內容 309
22.4.1 設計輪播廣告區 309
22.4.2 設計產品推薦區 311
22.4.3 設計登錄註冊和Logo 312
22.4.4 設計特色展示區 313
22.4.5 設計產品生產流程區315
22.5 設計底部隱藏導航 317
第23 章 項目實訓4——開發遊戲中心回響式網站 319
23.1 網站概述 320
23.1.1 網站檔案的結構 320
23.1.2 排版架構 320
23.1.3 設計準備 320
23.2 項目代碼實現321
23.2.1 設計遊戲中心網站的首頁 321
23.2.2 設計遊戲列表頁面331
23.2.3 設計遊戲評論頁面333
23.2.4 設計遊戲新聞頁面335
23.2.5 設計遊戲部落格頁面335
23.2.6 設計聯繫我們頁面338

熱門詞條

聯絡我們