《HTML5+CSS3回響式網站開發項目案例教》是2020年電子工業出版社出版的圖書。
基本介紹
- 中文名:HTML5+CSS3回響式網站開發項目案例教
- 作者:於曉霞
- 出版社:電子工業出版社
- 出版時間:2020年
- 開本:16 開
- ISBN:9787121399817
內容簡介,作者簡介,目 錄,
內容簡介
本書主要面向高職計算機專業或軟體開發專業,或者有前端開發課程的學生,本教材也可以作為1 Xweb前端開發考證中HTML5內容的參考.教材內容以真實項目青年幫回響式網站為主線,以碼工線上、17素材網等真實網站為拓展,主要以案例的形式講解HTML5常用的語義標籤,新增的表單功能及其驗證屬性,CSS3網頁細節設計,CSS3過渡,2D和3D效果,動畫效果,以及回響式網站搭建.教材基於工作系統過程,以典型性工作任務為教學模組進行,本課程確定9個單元,分基礎任務,套用任務,拓展任務,共44個教學任務.
作者簡介
於曉霞,中山職業技術學院專職教師,主持研究廣東省教育科學規劃研究項目"基於能力本位教育和校企合作工作室模式的實踐教學改革”、廣東省高等職業技術教育研究會課題"高職院校網頁設計與製作課程中多層次、差異化教學設計的研究與實踐”等多個課題和項目,連續多年獲廣東省高等職業院校信息化教學大賽暨全國選拔賽課堂設計項目獎項,著作方向是計算機軟體開發、前端開發。
目 錄
單元一 HTML5構建網站結構 1
教學導航 1
【基本項目】使用HTML5構建個人部落格網站首頁 1
【套用項目】仿Ghost開源部落格平台的內容頁面 10
單元二 HTML5表單和驗證 15
教學導航 15
【基本項目】使用HTML5新增表單功能製作註冊表單 15
【套用項目】為註冊表單添加用戶體驗的驗證信息 24
單元三 CSS3網頁細節設計 27
教學導航 27
任務一 圓角 28
【基本項目1】實心圓角效果 28
【基本項目2】空心圓角效果 32
【套用項目1】網頁中的圓角屬性套用 34
【套用項目2】繪製形狀 36
【套用項目3】經典對話框 38
【套用項目4】圓角導航條套用 39
任務二 框線陰影 40
【基本項目】框線陰影效果 40
【套用項目】仿青年幫案例展示效果 47
任務三 漸變 49
【基本項目1】線性漸變—彩虹背景文字效果 49
【基本項目2】徑向漸變—背景圖案效果 50
任務四 背景圖片的大小 53
【基本項目】回響式圖片效果 53
任務五 背景圖片的定位 55
【基本項目1】background-origin 55
【基本項目2】background-clip 57
任務六 多重背景 59
【基本項目】多重背景 59
【套用項目】撲克牌效果 61
任務七 文字陰影 62
【基本項目】文字陰影效果 62
單元四 自定義字型和圖示文字 66
教學導航 66
【套用項目】網頁中的圖示文字 66
單元五 CSS3過渡效果 69
教學導航 69
【基本項目】變色並擴展小方塊效果 69
【套用項目1】仿青年幫導航條設計—圓角過渡效果 70
【套用項目2】仿青年幫導航條設計—下拉框效果 72
【套用項目3】仿17素材網作品展示效果 74
單元六 CSS3 2D效果 76
教學導航 76
【基本項目】CSS3 2D效果案例 76
【套用項目1】CSS3 2D綜合效果—製作個性照片牆 90
【套用項目2】仿碼工助手案例展示效果 92
【套用項目3】仿青年幫導航條設計—常用推薦效果 94
單元七 CSS3 3D效果 97
教學導航 97
【基本項目】立體縮放效果 97
【套用項目1】旋轉立方體效果 102
【套用項目2】立體導航條效果 104
單元八 CSS3動畫效果 107
教學導航 107
【基本項目】小球運動效果 107
【套用項目1】旋轉轉盤效果 110
【套用項目2】跳動的心效果 112
【套用項目3】鐘擺效果 114
【套用項目4】旋轉導航條效果 116
【套用項目5】仿青年幫網站—光暈效果 118
【套用項目6】仿青年幫設計導航—靈感創意推薦 121
【套用項目7】仿青年幫網站—波浪效果 123
單元九 回響式網站 126
教學導航 126
【基本項目】使用媒體查詢製作一個簡單的回響式網站 126
【套用項目1】回響式導航條設計 128
【套用項目2】回響式網站框架設計 131
【套用項目3】sugarcoat動漫回響式網站設計 134