網頁設計與製作案例教程(HTML5+CSS3+JavaScript)(微課版)(第2版)
李志雲 田 潔
相關主題
商品描述
本書共六大模塊、26 個案例,以案例驅動組織學習內容,按照“應用為主,理論夠用”的原則編寫。前24 個案例為小案例,每個案例通過製作網頁、網站或實現某種功能,介紹 HTML5、CSS3 和 JavaScript 基礎知識。最後兩個案例是綜合案例,按照真實網站開發流程,學習小米商城網站和美麗山東網站的設計與製作。小米商城網站案例模模擬實的小米商城網站開發,將真實的小米商城網站適當簡化處理,便於初學者學習。美麗山東網站案例充分運用 CSS3 的過渡、變形和動畫等屬性實現圖片的移動、遮罩和翻轉等動畫效果,代碼簡潔、高效,頁面表現力強。
作者簡介
李志云,工学硕士学位,副教授,研究方向为Web应用技术、数据库技术和高职教育研究;主持的“标准对接、项目引领、价值融入:《Web前端开发》教学内容和模式改革实践”获省级教学成果二等奖;山东省职业教育课程思政示范课程《Web前端开发》主持人;主编教材四部,其中两部获批“十四五”“十三五”职业教育国家规划教材,发表论文二十余篇。
目錄大綱
目錄CONTENTS
模塊一 使用HTML5搭建網頁
案例1 第一個HTML5網頁 2
1.1 案例描述 2
1.2 案例實現 2
1.3 相關知識點 4
1.3.1 網頁相關概念 4
1.3.2 常用的網頁編輯軟件 6
1.3.3 常用的瀏覽器 7
案例小結 7
習題與實訓 7
擴展閱讀 8
案例2 公司介紹網頁 8
2.1 案例描述 9
2.2 案例實現 9
2.3 相關知識點 10
2.3.1 HTML5文檔的基本結構 10
2.3.2 HTML標記及其屬性 11
2.3.3 HTML文本標記 12
案例小結 15
習題與實訓 15
案例3 新聞列表網頁 17
3.1 案例描述 17
3.2 案例實現 17
3.3 相關知識點 18
3.3.1 無序列表 18
3.3.2 有序列表 19
3.3.3 列表嵌套 20
3.3.4 自定義列表 21
案例小結 23
習題與實訓 23
案例4 簡單公司網站 23
4.1 案例描述 24
4.2 案例實現 25
4.2.1 新建項目 25
4.2.2 創建網站首頁 25
4.2.3 創建公司簡介頁面 26
4.2.4 創建所獲榮譽頁面 27
4.2.5 創建管理團隊頁面 27
4.3 相關知識點 29
4.3.1 HTML超鏈接標記 29
4.3.2 HTML圖像標記 30
4.3.3 絕對路徑和相對路徑 33
案例小結 34
習題與實訓 34
擴展閱讀 35
模塊二 使用CSS3美化網頁
案例5 新聞詳情網頁 37
5.1 案例描述 37
5.2 案例實現 37
5.3 相關知識點 39
5.3.1 引入CSS樣式 39
5.3.2 CSS常用文本屬性 43
案例小結 47
習題與實訓 47
案例6 百度搜索結果網頁 49
6.1 案例描述 49
6.2 案例實現 49
6.3 相關知識點 51
6.3.1 CSS常用選擇器 51
6.3.2 CSS的高級特性 55
案例小結 57
習題與實訓 57
案例7 手機展示網頁 58
7.1 案例描述 58
7.2 案例實現 59
7.3 相關知識點 60
7.3.1 盒子模型的概念 60
7.3.2 盒子模型的相關屬性 62
案例小結 68
習題與實訓 68
案例8 山東介紹網頁 69
8.1 案例描述 69
8.2 案例實現 70
8.3 相關知識點 72
8.3.1 設置背景顏色及背景圖像 72
8.3.2 設置不透明度 77
8.3.3 設置漸變效果 79
案例小結 80
習題與實訓 80
擴展閱讀 81
案例9 美麗風光網頁 81
9.1 案例描述 81
9.2 案例實現 82
9.3 相關知識點 83
9.3.1 元素的類型 83
9.3.2 塊元素間的外邊距 84
9.3.3 元素的浮動 87
案例小結 91
習題與實訓 91
案例10 筆記本電腦展示網頁 91
10.1 案例描述 91
10.2 案例實現 92
10.3 相關知識點 95
10.3.1 元素的定位 95
10.3.2 定位類型 95
10.3.3 z-index屬性 99
案例小結 99
習題與實訓 99
案例11 公司新聞塊 100
11.1 案例描述 101
11.2 案例實現 101
11.3 相關知識點 104
11.3.1 列表樣式設置 104
11.3.2 超鏈接樣式設置 105
案例小結 106
習題與實訓 106
案例12 導航條 107
12.1 案例描述 107
12.2 案例實現 108
12.3 相關知識點 110
元素類型的轉換 110
案例小結 112
習題與實訓 112
模塊三 創建表格和表單
案例13 手機型號表 114
13.1 案例描述 114
13.2 案例實現 114
13.3 相關知識點 117
13.3.1 表格標記 117
13.3.2 合並單元格 118
13.3.3 定義表格CSS樣式 119
案例小結 122
習題與實訓 122
案例14 登錄表單 123
14.1 案例描述 123
14.2 案例實現 123
14.3 相關知識點 125
14.3.1 表單標記 125
14.3.2 控件 126
案例小結 129
習題與實訓 129
案例15 調查問捲表單 131
15.1 案例描述 131
15.2 案例實現 131
15.3 相關知識點 135
15.3.1
15.3.2
案例小結 138
習題與實訓 138
模塊四 使用CSS3實現動畫效果
案例16 圖片遮罩效果 140
16.1 案例描述 140
16.2 案例實現 140
16.3 相關知識點 142
16.3.1 過渡屬性 142
16.3.2 遮罩動畫原理 146
案例小結 146
習題與實訓 146
案例17 圖片變形效果 147
17.1 案例描述 147
17.2 案例實現 148
17.3 相關知識點 151
案例小結 155
習題與實訓 155
案例18 圖片翻轉效果 155
18.1 案例描述 156
18.2 案例實現 156
18.3 相關知識點 158
18.3.1 翻轉動畫原理 158
18.3.2 3D變形 159
案例小結 163
習題與實訓 163
案例19 魔方動畫效果 164
19.1 案例描述 164
19.2 案例實現 164
19.3 相關知識點 166
19.3.1 @keyframes—定義動畫的
關鍵幀 166
19.3.2 設置動畫屬性 167
案例小結 170
習題與實訓 170
模塊五 使用JavaScript添加動態效果
案例20 輸出信息 173
20.1 案例描述 173
20.2 案例實現 173
20.3 相關知識點 174
20.3.1 JavaScript的常見應用 174
20.3.2 JavaScript的語法規則 175
20.3.3 JavaScript的引入方式 175
20.3.4 輸入/輸出方法 177
案例小結 178
習題與實訓 178
案例21 表單驗證 179
21.1 案例描述 179
21.2 案例實現 180
21.3 相關知識點 183
21.3.1 變量 183
21.3.2 數據類型 184
21.3.3 運算符 185
21.3.4 函數 186
21.3.5 DOM簡介 187
案例小結 188
習題與實訓 188
案例22 簡單計算器 189
22.1 案例描述 189
22.2 案例實現 190
22.3 相關知識點 192
22.3.1 分支語句 192
22.3.2 數據類型轉換 195
22.3.3 事件與事件調用 197
案例小結 198
習題與實訓 199
案例23 限時促銷 200
23.1 案例描述 200
23.2 案例實現 201
23.3 相關知識點 204
23.3.1 面向對象簡介 204
23.3.2 Date對象 205
23.3.3 BOM簡介 207
案例小結 209
習題與實訓 210
案例24 輪播圖 211
24.1 案例描述 211
24.2 案例實現 211
24.3 相關知識點 214
24.3.1 設置元素樣式 214
24.3.2 獲取元素尺寸和位置 215
案例小結 217
習題與實訓 217
模塊六 綜合案例
案例25 小米商城網站 219
25.1 案例描述 219
25.2 前期工作 220
25.3 製作網站主頁 221
25.4 製作網站登錄頁 243
25.5 製作網站註冊頁 243
案例小結 243
案例26 美麗山東網站 243
26.1 案例描述 243
26.2 網站規劃 245
26.3 製作網站主頁 248
26.4 製作初識山東頁面 264
26.5 製作景點詳情頁 264
案例小結 264