網頁設計與製作案例教程(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