Web前端技術(shù)項(xiàng)目式教程(HTML5+CSS3+Flex+Bootstrap)
定 價(jià):46 元
- 作者:唐彩虹 張琳霞 曾浩
- 出版時(shí)間:2020/7/1
- ISBN:9787115534804
- 出 版 社:人民郵電出版社
- 中圖法分類(lèi):TP312.8
- 頁(yè)碼:220
- 紙張:
- 版次:01
- 開(kāi)本:16開(kāi)
本書(shū)以一個(gè)完整旅游公司網(wǎng)站的開(kāi)發(fā)項(xiàng)目為主線(xiàn),貫穿所有知識(shí)點(diǎn),較為全面地介紹了Web前端開(kāi)發(fā)中使用HTML5和CSS3標(biāo)準(zhǔn)化重構(gòu)網(wǎng)頁(yè)的技術(shù)。
全書(shū)共10個(gè)任務(wù),包括初探Web前端技術(shù)、使用HTML5搭建旅游公司網(wǎng)站首頁(yè)結(jié)構(gòu)、使用DIV+CSS實(shí)現(xiàn)旅游公司網(wǎng)站首頁(yè)布局、使用CSS3美化超鏈接、使用CSS3制作導(dǎo)航、美化網(wǎng)頁(yè)、添加用戶(hù)交互界面——表單、使用Flex實(shí)現(xiàn)網(wǎng)頁(yè)響應(yīng)式布局、使用Bootstrap實(shí)現(xiàn)網(wǎng)頁(yè)響應(yīng)式布局、綜合練習(xí)——兒童玩具商城網(wǎng)站設(shè)計(jì)與制作等。每一任務(wù)都配有課后練習(xí),幫助讀者及時(shí)鞏固所學(xué)知識(shí);最后一章的綜合練習(xí)幫助讀者進(jìn)一步提升網(wǎng)頁(yè)設(shè)計(jì)與制作的技能實(shí)踐水平。
HTML5+CSS3+Flex+Bootstrap
項(xiàng)目任務(wù)式寫(xiě)法,適合高職教學(xué)
軟件版本、技術(shù)最新
基于工作過(guò)程的教學(xué)思想
將一個(gè)典型旅游網(wǎng)站的實(shí)現(xiàn)過(guò)程分解成若干子任務(wù)
任務(wù)描述+知識(shí)引入+任務(wù)實(shí)現(xiàn)+任務(wù)拓展+任務(wù)小結(jié)+課后練習(xí)
靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作+響應(yīng)式網(wǎng)頁(yè)實(shí)現(xiàn)
唐彩虹,1980年2月22日出生,講師。2006年6月獲得暨南大學(xué)計(jì)算機(jī)軟件專(zhuān)業(yè)碩士學(xué)位,2006年7月至今任職于廣東輕工職業(yè)技術(shù)學(xué)院,擔(dān)任信息技術(shù)學(xué)院數(shù)字媒體技術(shù)專(zhuān)業(yè)專(zhuān)任教師,從教至今一直講授Web前端開(kāi)發(fā)相關(guān)課程,指導(dǎo)學(xué)生實(shí)訓(xùn)和畢業(yè)設(shè)計(jì),積累了豐富的授課經(jīng)驗(yàn),2012年起擔(dān)任《網(wǎng)頁(yè)制作》平臺(tái)課程負(fù)責(zé)人,先后主持多項(xiàng)校級(jí)科研和教改項(xiàng)目,發(fā)表科研和教改論文十余篇。
任務(wù)一 初探Web前端技術(shù) 1
任務(wù)描述 1
知識(shí)引入 1
1.網(wǎng)站、網(wǎng)頁(yè)和主頁(yè) 1
2.什么是Web和Web標(biāo)準(zhǔn) 4
3.Web前端技術(shù)的發(fā)展 4
4.搭建Web前端開(kāi)發(fā)環(huán)境 5
5.Web頁(yè)面的基本結(jié)構(gòu) 6
6.瀏覽器兼容性 7
任務(wù)實(shí)現(xiàn):動(dòng)手編寫(xiě)第 一個(gè)前端頁(yè)面 7
任務(wù)小結(jié) 10
課后練習(xí) 10
任務(wù)二 使用HTML5搭建旅游公司網(wǎng)站首頁(yè)結(jié)構(gòu) 11
任務(wù)描述 11
知識(shí)引入 11
1.HTML5的標(biāo)題、段落和文本格式化標(biāo)簽 11
2.HTML5的圖片標(biāo)簽 13
3.HTML5的列表標(biāo)簽 14
4.HTML5的超鏈接標(biāo)簽 15
5.HTML5的表格標(biāo)簽 17
6.傳統(tǒng)的布局標(biāo)簽
和 19
7.HTML5的各種語(yǔ)義化分段元素 19
任務(wù)實(shí)現(xiàn):搭建旅游公司網(wǎng)站首頁(yè)結(jié)構(gòu) 22
1.規(guī)劃網(wǎng)站目錄結(jié)構(gòu) 22
2.分析首頁(yè)文檔結(jié)構(gòu) 22
3.構(gòu)建首頁(yè)結(jié)構(gòu) 22
4.添加網(wǎng)頁(yè)內(nèi)容 24
任務(wù)拓展:制作旅游公司網(wǎng)站二級(jí)頁(yè)面 32
任務(wù)小結(jié) 35
課后練習(xí) 35
任務(wù)三 使用DIV+CSS實(shí)現(xiàn)旅游公司網(wǎng)站首頁(yè)布局 36
任務(wù)描述 36
知識(shí)引入 36
1.CSS規(guī)則的基本語(yǔ)法 36
2.CSS選擇器 37
3.CSS規(guī)則的應(yīng)用方式 40
4.CSS的層疊和繼承 41
5.CSS盒子模型 43
6.CSS盒子的定位機(jī)制 46
7.DIV+CSS布局剖析 51
任務(wù)實(shí)現(xiàn):使用DIV+CSS布局旅游公司首頁(yè) 55
1.新建CSS樣式表文件并應(yīng)用到網(wǎng)頁(yè)中 55
2.基礎(chǔ)樣式設(shè)置 55
3.頭部布局與定位 56
4.主體內(nèi)容.main_top區(qū)域布局與定位 56
5.主體內(nèi)容.main_middle區(qū)域布局與定位 58
6.主體內(nèi)容.main_bottom區(qū)域布局與定位 58
7.頁(yè)腳區(qū)域布局與定位 58
任務(wù)拓展:使用CSS實(shí)現(xiàn)旅游公司網(wǎng)站二級(jí)頁(yè)面“華陽(yáng)湖景區(qū)”的布局結(jié)構(gòu) 59
任務(wù)小結(jié) 61
課后練習(xí) 61
任務(wù)四 使用CSS3美化超鏈接 62
任務(wù)描述 62
知識(shí)引入 62
1.超鏈接的基本屬性 62
2.CSS樣式偽類(lèi) 63
3.鼠標(biāo)特效 64
任務(wù)實(shí)現(xiàn):實(shí)現(xiàn)首頁(yè)中的超鏈接效果 66
1.設(shè)置首頁(yè)頭部導(dǎo)航條超鏈接樣式 66
2.設(shè)置尾部超鏈接樣式 68
任務(wù)拓展:實(shí)現(xiàn)二級(jí)頁(yè)面“華陽(yáng)湖景區(qū)”的導(dǎo)航條鏈接 72
任務(wù)小結(jié) 73
課后練習(xí) 73
任務(wù)五 使用CSS3制作導(dǎo)航 74
任務(wù)描述 74
知識(shí)引入 74
1.列表符號(hào) 74
2.圖片符號(hào) 76
3.列表符號(hào)位置 77
任務(wù)實(shí)現(xiàn):制作旅游公司網(wǎng)站首頁(yè)導(dǎo)航 79
1.水平排列導(dǎo)航條 79
2.編排頁(yè)面中間內(nèi)容區(qū)域 81
任務(wù)拓展:制作二級(jí)菜單和職位列表 84
1.制作二級(jí)菜單 84
2.制作職位列表 89
任務(wù)小結(jié) 93
課后練習(xí) 93
任務(wù)六 美化網(wǎng)頁(yè) 94
任務(wù)描述 94
知識(shí)引入 94
1.text-shadow 94
2.box-shadow 96
3.border-radius 99
4.background 101
5.opacity 102
6.Font Awesome字體圖標(biāo) 103
7.Animation動(dòng)畫(huà)屬性 105
任務(wù)實(shí)現(xiàn):美化旅游公司網(wǎng)站頁(yè)面 108
1.為網(wǎng)頁(yè)添加圖標(biāo) 108
2.為按鈕添加陰影 108
3.設(shè)置圖片透明度 109
任務(wù)拓展:利用阿里巴巴矢量圖標(biāo)庫(kù)制作購(gòu)物車(chē) 110
任務(wù)小結(jié) 112
課后練習(xí) 113
任務(wù)七 添加用戶(hù)交互界面——表單 114
任務(wù)描述 114
知識(shí)引入 114
1.