Web前端開發(fā)案例教程(HTML5+CSS3)(項(xiàng)目式微課版)
定 價(jià):49.8 元
- 作者:李志云 董文華
- 出版時(shí)間:2024/1/1
- ISBN:9787115625274
- 出 版 社:人民郵電出版社
- 中圖法分類:TP393.092.2
- 頁碼:203
- 紙張:
- 版次:01
- 開本:大16開
本書是“十三五”“十四五”職業(yè)教育國家規(guī)劃教材,是適切線上線下混合式教學(xué)而推出的新形態(tài)一體化教材。全書以企業(yè)開發(fā)的學(xué)校真實(shí)網(wǎng)站為載體,將學(xué)校網(wǎng)站項(xiàng)目拆分為10個(gè)任務(wù),按照“任務(wù)描述→知識(shí)準(zhǔn)備→任務(wù)實(shí)現(xiàn)→實(shí)訓(xùn)”序化教材內(nèi)容,采用項(xiàng)目貫穿、任務(wù)驅(qū)動(dòng)的方式組織學(xué)習(xí),通過任務(wù)實(shí)現(xiàn)學(xué)習(xí)HTML5語言、CSS3層疊樣式表、盒子模型、表格與表單、HTML5+CSS3布局等網(wǎng)站開發(fā)技術(shù)。在關(guān)鍵知識(shí)點(diǎn)、任務(wù)實(shí)現(xiàn)及實(shí)訓(xùn)中嵌入二維碼,供學(xué)生課前或課后觀看。
本書可以作為中職或高職院校計(jì)算機(jī)相關(guān)專業(yè)“Web前端開發(fā)”或“網(wǎng)頁設(shè)計(jì)”課程的教材,也可以作為Web前端開發(fā)愛好者的學(xué)習(xí)參考書。
1.深刻領(lǐng)會(huì)二十大精神,自然融入思政元素
2.“十四五”“十三五”職業(yè)教育國家規(guī)劃教材
3.采用項(xiàng)目任務(wù)式教學(xué),完整任務(wù)貫穿
4.校企合作開發(fā)、深化產(chǎn)教融合
5.大量優(yōu)質(zhì)微課視頻和教學(xué)資源,便于進(jìn)行線上線下混合式教學(xué)
6.學(xué)練結(jié)合,配豐富的課后習(xí)題,增加拓展學(xué)習(xí)和拓展閱讀內(nèi)容
李志云,工學(xué)碩士學(xué)位,副教授,研究方向?yàn)閃eb應(yīng)用技術(shù)、數(shù)據(jù)庫技術(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ī)劃教材,發(fā)表論文二十余篇。
任務(wù)1 創(chuàng)建第一個(gè)HTML5網(wǎng)頁 1
1.1 任務(wù)描述 2
1.2 知識(shí)準(zhǔn)備 2
1.2.1 認(rèn)識(shí)Web前端開發(fā) 2
1.2.2 Web相關(guān)概念 2
1.2.3 HTML5概述 5
1.2.4 常用的瀏覽器 5
1.2.5 網(wǎng)頁編輯軟件 6
1.3 任務(wù)實(shí)現(xiàn) 6
任務(wù)小結(jié) 8
習(xí)題1 9
實(shí)訓(xùn)1 10
擴(kuò)展閱讀 10
任務(wù)2 搭建簡單學(xué)院網(wǎng)站 12
2.1 任務(wù)描述 13
2.2 知識(shí)準(zhǔn)備 13
2.2.1 HTML5文檔的基本結(jié)構(gòu) 14
2.2.2 HTML標(biāo)記及其屬性 15
2.2.3 HTML文本標(biāo)記 16
2.2.4 HTML列表標(biāo)記 22
2.2.5 HTML超鏈接標(biāo)記 26
2.2.6 HTML圖像標(biāo)記 29
2.3 任務(wù)實(shí)現(xiàn) 32
2.3.1 創(chuàng)建網(wǎng)站目錄 32
2.3.2 創(chuàng)建網(wǎng)站首頁 32
2.3.3 創(chuàng)建學(xué)院簡介頁面 33
2.3.4 創(chuàng)建學(xué)院新聞頁面 33
2.3.5 創(chuàng)建新聞詳情頁面 34
任務(wù)小結(jié) 35
習(xí)題2 36
實(shí)訓(xùn)2 37
擴(kuò)展閱讀 38
任務(wù)3 美化簡單學(xué)院網(wǎng)站 40
3.1 任務(wù)描述 41
3.2 知識(shí)準(zhǔn)備 41
3.2.1 什么是CSS 41
3.2.2 引入CSS樣式 42
3.2.3 CSS常用選擇器 46
3.2.4 CSS常用文本屬性 52
3.2.5 CSS的高級(jí)特性 55
3.3 任務(wù)實(shí)現(xiàn) 58
3.3.1 美化網(wǎng)站首頁 58
3.3.2 美化學(xué)院簡介頁面 59
3.3.3 美化學(xué)院新聞頁面 60
3.3.4 美化新聞詳情頁面 61
任務(wù)小結(jié) 62
習(xí)題3 63
實(shí)訓(xùn)3 64
擴(kuò)展閱讀 65
任務(wù)4 制作學(xué)院介紹頁面 66
4.1 任務(wù)描述 67
4.2 知識(shí)準(zhǔn)備 67
4.2.1 盒子模型的概念 67
4.2.2 盒子模型的相關(guān)屬性 69
4.2.3 背景屬性 74
4.2.4 不透明度屬性 80
4.3 任務(wù)實(shí)現(xiàn) 81
4.3.1 搭建學(xué)院介紹頁面結(jié)構(gòu) 81
4.3.2 定義學(xué)院介紹頁面CSS樣式 82
任務(wù)小結(jié) 82
習(xí)題4 83
實(shí)訓(xùn)4 85
擴(kuò)展閱讀 85
任務(wù)5 制作學(xué)院網(wǎng)站導(dǎo)航條 87
5.1 任務(wù)描述 88
5.2 知識(shí)準(zhǔn)備 88
5.2.1 無序列表樣式設(shè)置 88
5.2.2 超鏈接樣式設(shè)置 89
5.2.3 元素的類型與轉(zhuǎn)換 91
5.3 任務(wù)實(shí)現(xiàn) 94
5.3.1 搭建學(xué)院網(wǎng)站導(dǎo)航條結(jié)構(gòu) 94
5.3.2 定義學(xué)院網(wǎng)站導(dǎo)航條CSS樣式 95
任務(wù)小結(jié) 96
習(xí)題5 96
實(shí)訓(xùn)5 97
擴(kuò)展閱讀 98
任務(wù)6 制作學(xué)院新聞塊 99
6.1 任務(wù)描述 100
6.2 知識(shí)準(zhǔn)備 100
6.2.1 元素的浮動(dòng) 100
6.2.2 塊元素間的外邊距 104
6.3 任務(wù)實(shí)現(xiàn) 109
6.3.1 搭建學(xué)院新聞塊頁面結(jié)構(gòu) 109
6.3.2 定義學(xué)院新聞塊CSS樣式 110
任務(wù)小結(jié) 111
習(xí)題6 112
實(shí)訓(xùn)6 112
擴(kuò)展閱讀 113
任務(wù)7 制作學(xué)生信息表 115
7.1 任務(wù)描述 116
7.2 知識(shí)準(zhǔn)備 116
7.2.1 表格標(biāo)記 116
7.2.2 合并單元格 118
7.2.3 使用CSS定義表格樣式 119
7.3 任務(wù)實(shí)現(xiàn) 121
7.3.1 搭建學(xué)生信息表結(jié)構(gòu) 121
7.3.2 定義學(xué)生信息表CSS樣式 123
任務(wù)小結(jié) 124
習(xí)題7 125
實(shí)訓(xùn)7 125
擴(kuò)展閱讀 126
任務(wù)8 制作學(xué)生問卷調(diào)查表單 127
8.1 任務(wù)描述 128
8.2 知識(shí)準(zhǔn)備 128
8.2.1 認(rèn)識(shí)表單 128
8.2.2 表單標(biāo)記 129
8.2.3 表單控件 129
8.2.4 使用CSS定義表單樣式 133
8.3 任務(wù)實(shí)現(xiàn) 135
8.3.1 搭建學(xué)生問卷調(diào)查表單頁面結(jié)構(gòu) 135
8.3.2 使用CSS定義學(xué)生問卷調(diào)查表單頁面樣式 137
任務(wù)小結(jié) 138
習(xí)題8 138
實(shí)訓(xùn)8 140
擴(kuò)展閱讀 140
任務(wù)9 制作學(xué)院風(fēng)景墻頁面 141
9.1 任務(wù)描述 142
9.2 知識(shí)準(zhǔn)備 142
9.2.1 過渡屬性 142
9.2.2 變形屬性 148
9.3 任務(wù)實(shí)現(xiàn) 151
9.3.1 搭建學(xué)院風(fēng)景墻頁面結(jié)構(gòu) 151
9.3.2 定義學(xué)院風(fēng)景墻頁面CSS樣式 152
任務(wù)小結(jié) 153
習(xí)題9 154
實(shí)訓(xùn)9 155
擴(kuò)展閱讀 156
任務(wù)10 布局學(xué)院網(wǎng)站主頁 157
10.1 任務(wù)描述 158
10.2 知識(shí)準(zhǔn)備 158
10.2.1 單列布局 158
10.2.2 二列布局 160
10.2.3 三列布局 162
10.2.4 通欄布局 164
10.3 任務(wù)實(shí)現(xiàn) 164
10.3.1 搭建布局塊結(jié)構(gòu) 164
10.3.2 定義布局塊CSS樣式 165
任務(wù)小結(jié) 168
習(xí)題10 169
實(shí)訓(xùn)10 169
擴(kuò)展閱讀 170
任務(wù)11 完整項(xiàng)目:制作學(xué)院網(wǎng)站 171
11.1 任務(wù)描述 172
11.2 網(wǎng)站規(guī)劃 172
11.3 效果圖設(shè)計(jì) 173
11.3.1 效果圖設(shè)計(jì)原則 173
11.3.2 效果圖設(shè)計(jì)步驟 173
11.3.3 效果圖切片導(dǎo)出素材 178
11.4 制作網(wǎng)站主頁 178
11.5 制作新聞列表頁 194
11.6 制作新聞詳情頁 199
11.7 制作視頻宣傳頁 200
任務(wù)小結(jié) 202
實(shí)訓(xùn)11 202
擴(kuò)展閱讀 203
參考文獻(xiàn) 204