HTML5+CSS3網頁設計(全案例微課版)
劉春茂
買這商品的人也買了...
-
$680$537 -
$600$468 -
$709C# 入門經典:更新至 C# 9 和.NET 5 (C# 9 and .NET 5 - Modern Cross-Platform Development, 5/e)
-
$580$435 -
$880$695 -
$1,200$792 -
$407$383 -
$505$475
相關主題
商品描述
《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 認識jQuery 176
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 API 218
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 Workers 231
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