網(wǎng)頁設(shè)計與制作案例教程(HTML5+CSS3+JavaScript)(微課版)(第2版)
定 價:59.8 元
- 作者:李志云 田 潔
- 出版時間:2024/1/1
- ISBN:9787115625694
- 出 版 社:人民郵電出版社
- 中圖法分類:TP312.8
- 頁碼:264
- 紙張:
- 版次:02
- 開本:16開
本書共六大模塊、26 個案例,以案例驅(qū)動組織學(xué)習(xí)內(nèi)容,按照“應(yīng)用為主,理論夠用”的原則編寫。前24 個案例為小案例,每個案例通過制作網(wǎng)頁、網(wǎng)站或?qū)崿F(xiàn)某種功能,介紹 HTML5、CSS3 和 JavaScript 基礎(chǔ)知識。最后兩個案例是綜合案例,按照真實網(wǎng)站開發(fā)流程,學(xué)習(xí)小米商城網(wǎng)站和美麗山東網(wǎng)站的設(shè)計與制作。小米商城網(wǎng)站案例模仿真實的小米商城網(wǎng)站開發(fā),將真實的小米商城網(wǎng)站適當(dāng)簡化處理,便于初學(xué)者學(xué)習(xí)。美麗山東網(wǎng)站案例充分運用 CSS3 的過渡、變形和動畫等屬性實現(xiàn)圖片的移動、遮罩和翻轉(zhuǎn)等動畫效果,代碼簡潔、高效,頁面表現(xiàn)力強。
1.項目貫穿、案例驅(qū)動
全書以完成網(wǎng)站項目組織學(xué)習(xí),將網(wǎng)站實現(xiàn)的知識和技能分解到小案例中,在完成小案例的基礎(chǔ)上,循序漸進(jìn),最終完成綜合網(wǎng)站項目。
2.以崗定課、課崗直通
根據(jù)網(wǎng)頁設(shè)計相關(guān)崗位需求,介紹最新主流的網(wǎng)頁設(shè)計知識,摒棄過時、不需要的知識點,做到課堂所學(xué)與崗位需求無縫銜接。
3.產(chǎn)教融合、校企合作
本書是與山東樹灣信息科技有限公司、國基北盛(南京)科技發(fā)展有限公司的Web前端開發(fā)工程師合作編寫的。
李志云,工學(xué)碩士學(xué)位,副教授,研究方向為Web應(yīng)用技術(shù)、數(shù)據(jù)庫技術(shù)和高職教育研究;主持的“標(biāo)準(zhǔn)對接、項目引領(lǐng)、價值融入:《Web前端開發(fā)》教學(xué)內(nèi)容和模式改革實踐”獲省級教學(xué)成果二等獎;山東省職業(yè)教育課程思政示范課程《Web前端開發(fā)》主持人;主編教材四部,其中兩部獲批“十四五”“十三五”職業(yè)教育國家規(guī)劃教材,發(fā)表論文二十余篇。
目錄CONTENTS
模塊一 使用HTML5搭建網(wǎng)頁
案例1 第一個HTML5網(wǎng)頁 2
1.1 案例描述 2
1.2 案例實現(xiàn) 2
1.3 相關(guān)知識點 4
1.3.1 網(wǎng)頁相關(guān)概念 4
1.3.2 常用的網(wǎng)頁編輯軟件 6
1.3.3 常用的瀏覽器 7
案例小結(jié) 7
習(xí)題與實訓(xùn) 7
擴(kuò)展閱讀 8
案例2 公司介紹網(wǎng)頁 8
2.1 案例描述 9
2.2 案例實現(xiàn) 9
2.3 相關(guān)知識點 10
2.3.1 HTML5文檔的基本結(jié)構(gòu) 10
2.3.2 HTML標(biāo)記及其屬性 11
2.3.3 HTML文本標(biāo)記 12
案例小結(jié) 15
習(xí)題與實訓(xùn) 15
案例3 新聞列表網(wǎng)頁 17
3.1 案例描述 17
3.2 案例實現(xiàn) 17
3.3 相關(guān)知識點 18
3.3.1 無序列表 18
3.3.2 有序列表 19
3.3.3 列表嵌套 20
3.3.4 自定義列表 21
案例小結(jié) 23
習(xí)題與實訓(xùn) 23
案例4 簡單公司網(wǎng)站 23
4.1 案例描述 24
4.2 案例實現(xiàn) 25
4.2.1 新建項目 25
4.2.2 創(chuàng)建網(wǎng)站首頁 25
4.2.3 創(chuàng)建公司簡介頁面 26
4.2.4 創(chuàng)建所獲榮譽頁面 27
4.2.5 創(chuàng)建管理團(tuán)隊頁面 27
4.3 相關(guān)知識點 29
4.3.1 HTML超鏈接標(biāo)記 29
4.3.2 HTML圖像標(biāo)記 30
4.3.3 絕對路徑和相對路徑 33
案例小結(jié) 34
習(xí)題與實訓(xùn) 34
擴(kuò)展閱讀 35
模塊二 使用CSS3美化網(wǎng)頁
案例5 新聞詳情網(wǎng)頁 37
5.1 案例描述 37
5.2 案例實現(xiàn) 37
5.3 相關(guān)知識點 39
5.3.1 引入CSS樣式 39
5.3.2 CSS常用文本屬性 43
案例小結(jié) 47
習(xí)題與實訓(xùn) 47
案例6 百度搜索結(jié)果網(wǎng)頁 49
6.1 案例描述 49
6.2 案例實現(xiàn) 49
6.3 相關(guān)知識點 51
6.3.1 CSS常用選擇器 51
6.3.2 CSS的高級特性 55
案例小結(jié) 57
習(xí)題與實訓(xùn) 57
案例7 手機(jī)展示網(wǎng)頁 58
7.1 案例描述 58
7.2 案例實現(xiàn) 59
7.3 相關(guān)知識點 60
7.3.1 盒子模型的概念 60
7.3.2 盒子模型的相關(guān)屬性 62
案例小結(jié) 68
習(xí)題與實訓(xùn) 68
案例8 山東介紹網(wǎng)頁 69
8.1 案例描述 69
8.2 案例實現(xiàn) 70
8.3 相關(guān)知識點 72
8.3.1 設(shè)置背景顏色及背景圖像 72
8.3.2 設(shè)置不透明度 77
8.3.3 設(shè)置漸變效果 79
案例小結(jié) 80
習(xí)題與實訓(xùn) 80
擴(kuò)展閱讀 81
案例9 美麗風(fēng)光網(wǎng)頁 81
9.1 案例描述 81
9.2 案例實現(xiàn) 82
9.3 相關(guān)知識點 83
9.3.1 元素的類型 83
9.3.2 塊元素間的外邊距 84
9.3.3 元素的浮動 87
案例小結(jié) 91
習(xí)題與實訓(xùn) 91
案例10 筆記本電腦展示網(wǎng)頁 91
10.1 案例描述 91
10.2 案例實現(xiàn) 92
10.3 相關(guān)知識點 95
10.3.1 元素的定位 95
10.3.2 定位類型 95
10.3.3 z-index屬性 99
案例小結(jié) 99
習(xí)題與實訓(xùn) 99
案例11 公司新聞塊 100
11.1 案例描述 101
11.2 案例實現(xiàn) 101
11.3 相關(guān)知識點 104
11.3.1 列表樣式設(shè)置 104
11.3.2 超鏈接樣式設(shè)置 105
案例小結(jié) 106
習(xí)題與實訓(xùn) 106
案例12 導(dǎo)航條 107
12.1 案例描述 107
12.2 案例實現(xiàn) 108
12.3 相關(guān)知識點 110
元素類型的轉(zhuǎn)換 110
案例小結(jié) 112
習(xí)題與實訓(xùn) 112
模塊三 創(chuàng)建表格和表單
案例13 手機(jī)型號表 114
13.1 案例描述 114
13.2 案例實現(xiàn) 114
13.3 相關(guān)知識點 117
13.3.1 表格標(biāo)記 117
13.3.2 合并單元格 118
13.3.3 定義表格CSS樣式 119
案例小結(jié) 122
習(xí)題與實訓(xùn) 122
案例14 登錄表單 123
14.1 案例描述 123
14.2 案例實現(xiàn) 123
14.3 相關(guān)知識點 125
14.3.1 表單標(biāo)記 125
14.3.2 控件 126
案例小結(jié) 129
習(xí)題與實訓(xùn) 129
案例15 調(diào)查問卷表單 131
15.1 案例描述 131
15.2 案例實現(xiàn) 131
15.3 相關(guān)知識點 135
15.3.1