HTML5+CSS3響應式網站開發項目案例教程

購買商店

HTML5+CSS3響應式網站開發項目案例教程

$179.00

馬上購買

內容描述

本書主要面向高職電腦專業或軟件開發專業,或者有前端開發課程的學生,本教材也可以作為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

作者介紹

於曉霞，中山職業技術學院專職教師，主持研究廣東省教育科學規劃研究項目"基於能力本位教育和校企合作工作室模式的實踐教學改革”、廣東省高等職業技術教育研究會課題"高職院校網頁設計與製作課程中多層次、差異化教學設計的研究與實踐”等多個課題和項目，連續多年獲廣東省高等職業院校信息化教學大賽暨全國選拔賽課堂設計項目獎項，著作方向是計算機軟件開發、前端開發。