Web前端開發案例教程(HTML5+CSS3)(微課版)

HTML5+CSS3,完整案例詳解Web前端開發技術
分享 推薦 0 收藏 6 閱讀 507
李志云 (作者)

關于本書的內容有任何問題,請聯系 馬小霞

HTML5+CSS3,完整案例詳解Web前端開發技術
微課視頻,掃碼學習,易教易學
每章小案例跟最后大案例能連貫系統
學完之后,學生可以順利做出完整的網站

內容摘要

本書以真實案例組織內容,介紹如何利用網頁制作技術HTML5和CSS3等制作網站。全書共12章,前10章將學院網站制作過程中的知識點進行分解,每章以小案例引導,介紹Web開發設計中的關鍵知識點,第11章完成學院網站的完整制作,第12章介紹當前流行的電商網站的制作,充分運用HTML5的新增結構元素構建網頁內容,利用CSS3的過渡、變形和動畫等屬性實現圖片的變換和旋轉。
本書可以作為高職高專院校計算機相關專業“Web前端開發”課程的教材,也可以作為Web前端開發愛好者學習Web前端程序設計的參考書。

目錄

第 1章
Web前端開發概述 1
1.1 認識Web前端開發 1
1.2 Web相關概念 1
1.3 HTML5概述 3
1.4 常用的瀏覽器 3
1.5 創建第 一個HTML5頁面 4
1.5.1 Dreamweaver工具簡介 4
1.5.2 案例:創建第 一個HTML5
網頁 4
本章小結 6
實訓1 6
第 2章
HTML5基礎 8
2.1 案例:簡單學院網站 8
2.2 知識準備 9
2.2.1 HTML5文檔的基本結構 9
2.2.2 HTML標記及其屬性 10
2.2.3 HTML文本標記 11
2.2.4 HTML列表標記 16
2.2.5 HTML超鏈接標記 20
2.2.6 HTML圖像標記 23
2.3 案例實現 25
2.3.1 創建站點 25
2.3.2 創建首頁 27
2.3.3 創建學院簡介頁面 28
2.3.4 創建學院新聞頁面 28
2.3.5 創建專業介紹頁面 29
本章小結 30
實訓2 30
第3章
HTML5新增頁面元素 32
3.1 案例:旅游部落網頁 32
3.2 知識準備 33
3.2.1 HTML5結構元素 33
3.2.2 HTML5分組元素 37
3.2.3 HTML5頁面交互元素 38
3.2.4 HTML5文本語義元素 40
3.3 案例實現 42
3.3.1 創建站點 42
3.3.2 頁面分析 43
本章小結 45
實訓3 45

第4章
CSS3基礎 47
4.1 案例:學院新聞詳情頁面 47
4.2 知識準備 48
4.2.1 初識CSS 48
4.2.2 CSS發展歷史 48
4.2.3 引入CSS樣式 48
4.2.4 CSS基礎選擇器 52
4.2.5 CSS常用文本屬性 57
4.2.6 CSS的高級特性 62
4.3 案例實現 63
4.3.1 創建新聞詳情頁面 63
4.3.2 定義CSS樣式 64
本章小結 65
實訓4 65

第5章
CSS3高級選擇器 66
5.1 案例:景點介紹頁面 66
5.2 知識準備 66
5.2.1 屬性選擇器 67
5.2.2 關系選擇器 68
5.2.3 結構化偽類選擇器 69
5.2.4 偽元素選擇器 74
5.3 案例實現 75
本章小結 78
實訓5 78

第6章
CSS3盒子模型 79
6.1 案例:學院簡介頁面 79
6.2 知識準備 80
6.2.1 盒子模型的概念 80
6.2.2 盒子模型的相關屬性 81
6.2.3 CSS設置背景 90
6.2.4 元素的類型與轉換 98
6.2.5 塊元素間的外邊距 100
6.3 案例實現 101
6.3.1 制作頁面結構 101
6.3.2 添加CSS樣式 103
本章小結 103
實訓6 104

第7章
列表與超鏈接 105
7.1 案例:通知公告塊與學院網站
導航條 105
7.2 知識準備 106
7.2.1 列表樣式設置 106
7.2.2 超鏈接樣式設置 108
7.3 案例實現 109
7.3.1 制作通知公告塊 109
7.3.2 制作學院網站導航條 112
本章小結 113
實訓7 114

第8章
表格與表單 115
8.1 表格案例:學生信息表 115
8.2 表格相關知識 116
8.2.1 表格標記 116
8.2.2 合并單元格 117
8.2.3 使用CSS設置表格樣式 118
8.3 表格案例實現 120
8.3.1 學生信息表的頁面結構 120
8.3.2 添加CSS樣式 122
8.4 表單案例:用戶注冊表單 122
8.5 表單相關知識 123
8.5.1 認識表單 123
8.5.2 表單標記 123
8.5.3 表單控件 124
8.5.4 使用CSS設置表單樣式 126
8.6 表單案例實現 129
8.6.1 用戶注冊表單的頁面結構 129
8.6.2 添加CSS樣式 131
本章小結 132
實訓8 132

第9章
HTML5+CSS3布局
網頁 134
9.1 案例:學院網站主頁布局 134
9.2 知識準備 135
9.2.1 元素的浮動 135
9.2.2 元素的定位 140
9.2.3 元素的overflow屬性 145
9.2.4 HTML5+CSS3布局 147
9.3 案例實現 153
9.3.1 制作頁面結構 153
9.3.2 添加CSS樣式 154
本章小結 157
實訓9 157

第 10章
CSS3動畫 159
10.1 過渡屬性 159
10.2 變形屬性 159
10.3 動畫屬性 160
10.4 案例 162
10.4.1 圖片遮罩效果 162
10.4.2 圖片翻轉效果 163
10.4.3 照片墻效果 164
10.4.4 魔方效果 166
本章小結 168
實訓10 168

第 11章
完整案例:學院網站設計與
制作 170
11.1 信息學院網站描述 170
11.2 網站規劃 171

11.3 效果圖設計 172
11.3.1 效果圖設計原則 172
11.3.2 效果圖設計步驟 173
11.3.3 效果圖切片導出網頁 178
11.4 網站主頁設計 178
11.5 新聞列表頁設計 194
11.6 制作新聞詳情頁面 200
11.7 制作視頻宣傳頁面 202
11.8 添加網站中的JavaScript
或jQuery腳本 203
本章小結 205

第 12章
完整案例:化妝品公司網站設計與制作 206
12.1 化妝品公司網站描述 206
12.2 網站規劃 208
12.2.1 網站需求分析 208
12.2.2 網站的風格定位 208
12.2.3 規劃草圖 208
12.2.4 素材準備 209
12.3 網站主頁設計 209
12.4 網站其他頁設計 223
本章小結 223
參考文獻 224

讀者評論

趕緊搶沙發哦!

我要評論

作者介紹

李志云,副教授,山東信息職業技術學院教師,主編《數據庫開發實用教程—基于Visual Basic》《Visual c#2005數據庫開發案例教程》《網頁設計與制作案例教程(HTML+CSS+DIV+JavaScript)》等教材,發表論文20余篇。

相關圖書

澳洲幸运10是不是真的