HTML5+CSS3響應(yīng)式網(wǎng)站開(kāi)發(fā)項(xiàng)目案例教程
定 價(jià)：29.8 元
- 作者：于曉霞
- 出版時(shí)間：2020/12/1
- ISBN：9787121399817
- 出 版 社：電子工業(yè)出版社
- 中圖法分類(lèi)：TP312；TP393.092
- 頁(yè)碼：148
- 紙張：
- 版次：01
- 開(kāi)本：16開(kāi)
本書(shū)主要面向高職計(jì)算機(jī)專(zhuān)業(yè)或軟件開(kāi)發(fā)專(zhuān)業(yè),或者有前端開(kāi)發(fā)課程的學(xué)生,本教材也可以作為1+Xweb前端開(kāi)發(fā)考證中HTML5內(nèi)容的參考.教材內(nèi)容以真實(shí)項(xiàng)目青年幫響應(yīng)式網(wǎng)站為主線，以碼工在線、17素材網(wǎng)等真實(shí)網(wǎng)站為拓展，主要以案例的形式講解HTML5常用的語(yǔ)義標(biāo)簽,新增的表單功能及其驗(yàn)證屬性,CSS3網(wǎng)頁(yè)細(xì)節(jié)設(shè)計(jì),CSS3過(guò)渡,2D和3D效果,動(dòng)畫(huà)效果,以及響應(yīng)式網(wǎng)站搭建.教材基于工作系統(tǒng)過(guò)程，以典型性工作任務(wù)為教學(xué)模塊進(jìn)行，本課程確定9個(gè)單元，分基礎(chǔ)任務(wù)，應(yīng)用任務(wù)，拓展任務(wù)，共44個(gè)教學(xué)任務(wù).
于曉霞，中山職業(yè)技術(shù)學(xué)院專(zhuān)職教師，主持研究廣東省教育科學(xué)規(guī)劃研究項(xiàng)目"基于能力本位教育和校企合作工作室模式的實(shí)踐教學(xué)改革”、廣東省高等職業(yè)技術(shù)教育研究會(huì)課題"高職院校網(wǎng)頁(yè)設(shè)計(jì)與制作課程中多層次、差異化教學(xué)設(shè)計(jì)的研究與實(shí)踐”等多個(gè)課題和項(xiàng)目，連續(xù)多年獲廣東省高等職業(yè)院校信息化教學(xué)大賽暨全國(guó)選拔賽課堂設(shè)計(jì)項(xiàng)目獎(jiǎng)項(xiàng)，著作方向是計(jì)算機(jī)軟件開(kāi)發(fā)、前端開(kāi)發(fā)。
單元一 HTML5構(gòu)建網(wǎng)站結(jié)構(gòu) 1
教學(xué)導(dǎo)航 1
【基本項(xiàng)目】使用HTML5構(gòu)建個(gè)人博客網(wǎng)站首頁(yè) 1
【應(yīng)用項(xiàng)目】仿Ghost開(kāi)源博客平臺(tái)的內(nèi)容頁(yè)面 10
單元二 HTML5表單和驗(yàn)證 15
教學(xué)導(dǎo)航 15
【基本項(xiàng)目】使用HTML5新增表單功能制作注冊(cè)表單 15
【應(yīng)用項(xiàng)目】為注冊(cè)表單添加用戶(hù)體驗(yàn)的驗(yàn)證信息 24
單元三 CSS3網(wǎng)頁(yè)細(xì)節(jié)設(shè)計(jì) 27
教學(xué)導(dǎo)航 27
任務(wù)一 圓角 28
【基本項(xiàng)目1】實(shí)心圓角效果 28
【基本項(xiàng)目2】空心圓角效果 32
【應(yīng)用項(xiàng)目1】網(wǎng)頁(yè)中的圓角屬性應(yīng)用 34
【應(yīng)用項(xiàng)目2】繪制形狀 36
【應(yīng)用項(xiàng)目3】經(jīng)典對(duì)話框 38
【應(yīng)用項(xiàng)目4】圓角導(dǎo)航條應(yīng)用 39
任務(wù)二 邊框陰影 40
【基本項(xiàng)目】邊框陰影效果 40
【應(yīng)用項(xiàng)目】仿青年幫案例展示效果 47
任務(wù)三 漸變 49
【基本項(xiàng)目1】線性漸變—彩虹背景文字效果 49
【基本項(xiàng)目2】徑向漸變—背景圖案效果 50
任務(wù)四 背景圖片的大小 53
【基本項(xiàng)目】響應(yīng)式圖片效果 53
任務(wù)五 背景圖片的定位 55
【基本項(xiàng)目1】background-origin 55
【基本項(xiàng)目2】background-clip 57
任務(wù)六 多重背景 59
【基本項(xiàng)目】多重背景 59
【應(yīng)用項(xiàng)目】撲克牌效果 61
任務(wù)七 文字陰影 62
【基本項(xiàng)目】文字陰影效果 62
單元四 自定義字體和圖標(biāo)文字 66
教學(xué)導(dǎo)航 66
【應(yīng)用項(xiàng)目】網(wǎng)頁(yè)中的圖標(biāo)文字 66
單元五 CSS3過(guò)渡效果 69
教學(xué)導(dǎo)航 69
【基本項(xiàng)目】變色并擴(kuò)展小方塊效果 69
【應(yīng)用項(xiàng)目1】仿青年幫導(dǎo)航條設(shè)計(jì)—圓角過(guò)渡效果 70
【應(yīng)用項(xiàng)目2】仿青年幫導(dǎo)航條設(shè)計(jì)—下拉框效果 72
【應(yīng)用項(xiàng)目3】仿17素材網(wǎng)作品展示效果 74
單元六 CSS3 2D效果 76
教學(xué)導(dǎo)航 76
【基本項(xiàng)目】CSS3 2D效果案例 76
【應(yīng)用項(xiàng)目1】CSS3 2D綜合效果—制作個(gè)性照片墻 90
【應(yīng)用項(xiàng)目2】仿碼工助手案例展示效果 92
【應(yīng)用項(xiàng)目3】仿青年幫導(dǎo)航條設(shè)計(jì)—常用推薦效果 94
單元七 CSS3 3D效果 97
教學(xué)導(dǎo)航 97
【基本項(xiàng)目】立體縮放效果 97
【應(yīng)用項(xiàng)目1】旋轉(zhuǎn)立方體效果 102
【應(yīng)用項(xiàng)目2】立體導(dǎo)航條效果 104
單元八 CSS3動(dòng)畫(huà)效果 107
教學(xué)導(dǎo)航 107
【基本項(xiàng)目】小球運(yùn)動(dòng)效果 107
【應(yīng)用項(xiàng)目1】旋轉(zhuǎn)轉(zhuǎn)盤(pán)效果 110
【應(yīng)用項(xiàng)目2】跳動(dòng)的心效果 112
【應(yīng)用項(xiàng)目3】鐘擺效果 114
【應(yīng)用項(xiàng)目4】旋轉(zhuǎn)導(dǎo)航條效果 116
【應(yīng)用項(xiàng)目5】仿青年幫網(wǎng)站—光暈效果 118
【應(yīng)用項(xiàng)目6】仿青年幫設(shè)計(jì)導(dǎo)航—靈感創(chuàng)意推薦 121
【應(yīng)用項(xiàng)目7】仿青年幫網(wǎng)站—波浪效果 123
單元九 響應(yīng)式網(wǎng)站 126
教學(xué)導(dǎo)航 126
【基本項(xiàng)目】使用媒體查詢(xún)制作一個(gè)簡(jiǎn)單的響應(yīng)式網(wǎng)站 126
【應(yīng)用項(xiàng)目1】響應(yīng)式導(dǎo)航條設(shè)計(jì) 128
【應(yīng)用項(xiàng)目2】響應(yīng)式網(wǎng)站框架設(shè)計(jì) 131
【應(yīng)用項(xiàng)目3】sugarcoat動(dòng)漫響應(yīng)式網(wǎng)站設(shè)計(jì) 134
書(shū)單推薦
