HTML5與CSS3實現動態網頁

來源:互聯網
上載者:User

標籤:移位   需求   屬性   ima   script   知識   滑鼠   傳統   代碼複用   

課程目錄:

步驟1: 初識HTML5
本階段內容主要涵蓋HTML5新增、刪除標籤、標籤屬性變化以及HTML5布局知識。通過本階段學習,
大家可以運用HTML5標籤輕鬆實現網頁音樂播放器和視頻播放器,熟練運用HTML5的語義化標籤進行靜態網頁的開發。
1.HTML5標籤變化
HTML5文件類型如何定義,有哪些標籤,以及如何使用,從整體認識HTML5
2.HTML5網頁布局
傳統布局與HTML5網頁布局的區別和意義,通過案例講解如何使用HTML5搭建網頁
3.HTML5屬性變化
瞭解這些屬性帶來的好處,加深對標籤的認識,將提高以後的開發效率
4.HTML5展望
HTML5快速發展,它還有哪些強大的功能,在什麼領域可以使用,以及它的發展方向
5.HTML5測試
本課為考評,滿分100學分,共20道題,限時30分鐘

步驟2: 搞懂CSS3
本階段內容主要涵蓋CSS3選取器、邊框與圓角、背景與漸層、轉換、過渡、動畫等知識。通過本階段學習,
大家將學會更加精確得控制頁面的布局、字型、顏色、背景等效果,實現非常炫酷的CSS3動畫特效,讓網頁豐富多彩。
1.CSS3選取器
詳細講解CSS3的變化,新的概念和理念,及其CSS3新增加的選取器
2.CSS3邊框與圓角
帶來神奇的圓角邊框、陰影框及其圖片邊框等,非常具有實用價值的新屬性
3.CSS3背景與漸層
同樣神奇的背景控制屬性,以及如何使用顏色過渡實現漂亮的漸層效果
4.CSS3轉換
深入講解元素如何扭曲、移位或旋轉,讓我們可以更自由得裝飾和變形HTML組件
5.CSS3過渡
一起探索如何通過CSS3屬性值的變化實現動畫效果,如何觸發這些動畫產生互動
7.CSS3動畫
使用animation屬性,實現以往要用Flash等動畫軟體才能完成的炫酷效果
8.CSS3圖片切換特效
介紹了幾種非常漂亮的圖片切換特效,大家對CSS3的認識會有質的提高
9.CSS3測試
本課為考評,滿分100學分,共25道題,限時37分鐘

步驟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頁切換等實用特效
9.JavaScript基礎測試
本課為考評,滿分100學分,共25道題,限時37分鐘

步驟4: JavaScript進階
本階段,將帶領大家進一步探索JavaScript中的奧秘,教大家如何使用調試工具。
還有變數、範圍、函數是怎麼樣來運用, 以及它們之前的關係是怎樣的,我們來一步一步揭開它們的面紗。
1.調試工具
學習調試工具,實踐如何快速調試代碼,並即時預覽,體驗快速調試代碼的過程
2.JavaScript變數、範圍
我們一起探究變數、範圍的本質,瞭解它們的定義及使用方法
3.JavaScript函數深入講解
研究函數的本質,瞭解函數的定義、調用,以及函數的參數和傳回值
4.JavaScript實現簡易計算機
帶領大家開發一個簡易計算機,體會一步步最佳化代碼的過程,體驗代碼簡約而不簡單的魅力
5.JavaScript進階測試
本課為考評,滿分100學分,共20道題,限時30分鐘

步驟5: 項目實戰
光學不練假把式,實踐是鞏固知識最好的方法,本環節,帶領大家開發炫酷網頁,從實踐中總結經驗並且提升解決問題的能力。
1.H5+CSS3+JS實現炫酷網頁
帶領大家實現真實項目:“慕課手機宣傳頁”,面對綜合需求,大展身手的時候到了!
2.實戰測試
本課為考評,滿分100學分,共20道題,限時30分鐘

:http://www.itsource.com.cn/thread-291-1-2.html

HTML5與CSS3實現動態網頁

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.