1. 程式人生 > >Web前端攻城獅培養計劃之HTML5與CSS3實現動態網頁

Web前端攻城獅培養計劃之HTML5與CSS3實現動態網頁

整體 script 靜態 觸發 我們 發展方向 web前端 事件 會有

步驟1: 初識HTML5
本階段內容主要涵蓋HTML5新增、刪除標簽、標簽屬性變化以及HTML5布局知識。通過本階段學習,大家可以運用HTML5標簽輕松實現網頁音樂播放器和視頻播放器,熟練運用HTML5的語義化標簽進行靜態網頁的開發。

第1課 HTML5標簽變化
HTML5文檔類型如何定義,有哪些標簽,以及如何使用,從整體認識HTML5

第2課 HTML5網頁布局
傳統布局與HTML5網頁布局的區別和意義,通過案例講解如何使用HTML5搭建網頁

第3課 HTML5屬性變化
了解這些屬性帶來的好處,加深對標簽的認識,將提高以後的開發效率

第4課 HTML5展望
HTML5快速發展,它還有哪些強大的功能,在什麽領域可以使用,以及它的發展方向


步驟2: 搞懂CSS3


本階段內容主要涵蓋CSS3選擇器、邊框與圓角、背景與漸變、轉換、過渡、動畫等知識。通過本階段學習,大家將學會更加精確得控制頁面的布局、字體、顏色、背景等效果,實現非常炫酷的CSS3動畫特效,讓網頁豐富多彩。

第1課 CSS3選擇器
詳細講解CSS3的變化,新的概念和理念,及其CSS3新增加的選擇器

第2課 CSS3邊框與圓角
帶來神奇的圓角邊框、陰影框及其圖片邊框等,非常具有實用價值的新屬性

第3課 CSS3背景與漸變
同樣神奇的背景控制屬性,以及如何使用顏色過渡實現漂亮的漸變效果


第4課 CSS3轉換
深入講解元素如何扭曲、移位或旋轉,讓我們可以更自由得裝飾和變形HTML組件

第5課 CSS3過渡
一起探索如何通過CSS3屬性值的變化實現動畫效果,如何觸發這些動畫產生交互

第6課 CSS3動畫

使用animation屬性,實現以往要用Flash等動畫軟件才能完成的炫酷效果

第7課 CSS3圖片切換特效
介紹了幾種非常漂亮的圖片切換特效,大家對CSS3的認識會有質的提高


步驟3: JavaScript基礎
本階段內容主要涵蓋js基礎語法、流程控制語句、函數、內置對象、DOM基礎和事件、BOM基礎等知識。通過本階段學習,大家不僅可以掌握js的基礎知識,還能學會網站開發中常用的圖片輪播特效。

第1課 JavaScript語法
初步了解JavaScript語言,掌握它的語法、數據類型、基本的算數和邏輯運算操作

第2課 JavaScript流程控制語句
掌握JavaScript中條件分支語句和循環語句的使用,用簡潔的代碼實現強大功能

第3課 JavaScript函數

掌握函數的使用,學習函數的封裝,體會代碼復用的過程和它帶來的便利

第4課 JavaScript內置對象
學習內置對象的常用屬性和方法,方便我們開發中直接調用,進而實現更多功能

第5課 JavaScript DOM基礎
DOM的方法和屬性既可以獲取網頁中的元素,也可以設置元素的內容、樣式及效果


第6課 JavaScript DOM事件
為頁面中的元素綁定鍵盤或鼠標事件,從而可以觸發和實現我們想要的交互效果

第7課 JavaScript BOM基礎
學習瀏覽器對象模型“BOM”,可以對瀏覽器窗口進行訪問和操作,與瀏覽器“對話”

第8課 JavaScript實現輪播特效
綜合運用JavaScript知識,做出輪播圖、tab頁切換等實用特效

步驟4: JavaScript進階
本階段,將帶領大家進一步探索JavaScript中的奧秘,教大家如何使用調試工具。還有變量、作用域、函數是怎麽樣來運用, 以及它們之前的關系是怎樣的,我們來一步一步揭開它們的面紗。

第1課 調試工具
學習調試工具,實踐如何快速調試代碼,並實時預覽,體驗快速調試代碼的過程

第2課 JavaScript變量、作用域
我們一起探究變量、作用域的本質,了解它們的定義及使用方法

第3課 JavaScript函數深入講解
研究函數的本質,了解函數的定義、調用,以及函數的參數和返回值

第4課 JavaScript實現簡易計算器
帶領大家開發一個簡易計算器,體會一步步優化代碼的過程,體驗代碼簡約而不簡單的魅力

步驟5: 項目實戰
光學不練假把式,實踐是鞏固知識最好的方法,本環節,帶領大家開發炫酷網頁,從實踐中總結經驗並且提升解決問題的能力。

第1課 H5+CSS3+JS實現炫酷網頁
帶領大家實現真實項目:“慕課手機宣傳頁”,面對綜合需求,大展身手的時候到了!

下載地址:百度網盤下載

Web前端攻城獅培養計劃之HTML5與CSS3實現動態網頁