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