課程簡介
HTML5 是目前最為流行的前端網(wǎng)頁構(gòu)建技術(shù),提供了廣泛而豐富的 API,為制作內(nèi)容豐富的網(wǎng)頁提供
了良豐富的技術(shù)支撐,本課程將結(jié)合移動網(wǎng)頁開發(fā)特點,介紹如何使用 HTML5 這些豐富的 API 來實現(xiàn)
移動互聯(lián)網(wǎng)時代的網(wǎng)頁開發(fā)與設(shè)計。
目標收益
掌握 HTML5 的新技術(shù)特性
掌握 CSS3 新技術(shù)特性
掌握移動網(wǎng)頁開發(fā)的主要技術(shù)特點
培訓(xùn)對象
希望使用 HTML5 構(gòu)建網(wǎng)頁的前端開發(fā)人員
課程大綱
HTML5新的頁面組織標記 | HTML5中從應(yīng)用角度出發(fā)提供了許多新的網(wǎng)頁標記,專門用于定位各種網(wǎng)頁內(nèi)容,本節(jié)課程我們將介紹這些新標記,并說明如何使用這些新標記來組織你自己的文檔結(jié)構(gòu) |
智能表單設(shè)計 | 數(shù)據(jù)提交從來都是web應(yīng)用設(shè)計中的重要部分,而其中的數(shù)據(jù)格式驗證等功能需要腳本的輔助,HTML5為了解決這一問題提供了一些新的表單樣式工具,為開發(fā)者開發(fā)更智能的表單輸入提供了良好支持,本節(jié)課程著重于介紹如何制作這樣一個智能表單 |
引入多媒體對象(video audio webrtc) | 在網(wǎng)頁當中播放多媒體對象長期以來一直都是多媒體控件的專利,從HTML5開始,HTML標記中也可以引入多媒體音頻和視頻,如何應(yīng)用這些新標記讓自己的網(wǎng)頁內(nèi)容更豐富呢,本節(jié)課程將帶大家制作一個簡單的多媒體應(yīng)用,來分享這一特性 |
Canvas 對象你的畫布: |
網(wǎng)頁中直接繪制圖表也曾經(jīng)是控件壟斷的天下,各種圖報表的繪制曾經(jīng)困擾著廣大開發(fā)者,現(xiàn)在 HTML5 中引入了原生的圖形繪制工具,可以讓你在 HTML 代碼中直接繪制圖表,本節(jié)課程將介紹如何使用這一 功能 |
擴展圖形標記 |
本節(jié)課程介紹一些新的圖形繪制方式和對象,幫助開發(fā)者更好的繪制自己的圖形應(yīng)用 |
HTML5 中的地理應(yīng)用 |
LBS(Location Based Service)是基于位置的服務(wù)縮寫,LBS 應(yīng)用目前已經(jīng)成為了移動互聯(lián)網(wǎng)時代的新興 的最重要應(yīng)用。HTML5 中提供了對 LBS 的天然支持,可以讓用戶方便的開發(fā)出基于地理位置的網(wǎng)頁應(yīng) 用。本節(jié)課程介紹如何使用這一特性 |
獨立數(shù)據(jù)存儲 | Web應(yīng)用中經(jīng)常需要做一些異步交互,此次HTML5中專門提供了用于在后臺取回數(shù)據(jù)的連接對象,本節(jié)課程介紹如何使用這一連接對象進行工作 |
Web Workers |
Web 開發(fā)中經(jīng)常需要大量的交互式腳本,其中一些腳本耗時費力,影響響應(yīng)時間,降低用戶體驗,為了 解決這一問題 HTML5 提供了一個獨立線程,專門用于在后臺運行各種腳本,大大提高了用戶響應(yīng),這 就是本節(jié)課程介紹的 Web Worker 技術(shù)。本節(jié)課程通過兩個例子說明這一技術(shù)的優(yōu)勢。為廣大開發(fā)者開 發(fā)具有良好性能的 Web 應(yīng)用提供幫助。 |
CSS3 技術(shù) |
CSS3 概述 CSS 簡史 CSS3 新特點 CSS 基礎(chǔ)簡述 盒子模型 float 排版 position 定位 固定寬度且居中的布局 實例:一鍵換膚 CSS3 媒體支持 處理不同屏幕的排版 實例:ipad 橫豎屏 CSS3 透明度 不同瀏覽器的兼容問題 塊透明與文字透明 外引字體 字體的重要性 中文字體的困惑 實例:裁剪字體 CSS3 分欄 用戶的閱讀習(xí)慣 實例:華爾街日報 CSS3 盒子屬性 排版模型的改變 盒子屬性特點 實例:自動適應(yīng)的排版 CSS3 變幻與動畫 動畫的運用 實例:變化的菜單 CSS3 與 javascript CSS3 與 js 之間的聯(lián)系 控制你的動畫 CSS3 的其它特性 |
移動應(yīng)用框架及其特點 |
IPhone 適配框架 Android 適配框架 微信適配框架 WebApp 架構(gòu) 混合應(yīng)用與打包 |
HTML5新的頁面組織標記 HTML5中從應(yīng)用角度出發(fā)提供了許多新的網(wǎng)頁標記,專門用于定位各種網(wǎng)頁內(nèi)容,本節(jié)課程我們將介紹這些新標記,并說明如何使用這些新標記來組織你自己的文檔結(jié)構(gòu) |
智能表單設(shè)計 數(shù)據(jù)提交從來都是web應(yīng)用設(shè)計中的重要部分,而其中的數(shù)據(jù)格式驗證等功能需要腳本的輔助,HTML5為了解決這一問題提供了一些新的表單樣式工具,為開發(fā)者開發(fā)更智能的表單輸入提供了良好支持,本節(jié)課程著重于介紹如何制作這樣一個智能表單 |
引入多媒體對象(video audio webrtc) 在網(wǎng)頁當中播放多媒體對象長期以來一直都是多媒體控件的專利,從HTML5開始,HTML標記中也可以引入多媒體音頻和視頻,如何應(yīng)用這些新標記讓自己的網(wǎng)頁內(nèi)容更豐富呢,本節(jié)課程將帶大家制作一個簡單的多媒體應(yīng)用,來分享這一特性 |
Canvas 對象你的畫布: 網(wǎng)頁中直接繪制圖表也曾經(jīng)是控件壟斷的天下,各種圖報表的繪制曾經(jīng)困擾著廣大開發(fā)者,現(xiàn)在 HTML5 中引入了原生的圖形繪制工具,可以讓你在 HTML 代碼中直接繪制圖表,本節(jié)課程將介紹如何使用這一 功能 |
擴展圖形標記 本節(jié)課程介紹一些新的圖形繪制方式和對象,幫助開發(fā)者更好的繪制自己的圖形應(yīng)用 |
HTML5 中的地理應(yīng)用 LBS(Location Based Service)是基于位置的服務(wù)縮寫,LBS 應(yīng)用目前已經(jīng)成為了移動互聯(lián)網(wǎng)時代的新興 的最重要應(yīng)用。HTML5 中提供了對 LBS 的天然支持,可以讓用戶方便的開發(fā)出基于地理位置的網(wǎng)頁應(yīng) 用。本節(jié)課程介紹如何使用這一特性 |
獨立數(shù)據(jù)存儲 Web應(yīng)用中經(jīng)常需要做一些異步交互,此次HTML5中專門提供了用于在后臺取回數(shù)據(jù)的連接對象,本節(jié)課程介紹如何使用這一連接對象進行工作 |
Web Workers Web 開發(fā)中經(jīng)常需要大量的交互式腳本,其中一些腳本耗時費力,影響響應(yīng)時間,降低用戶體驗,為了 解決這一問題 HTML5 提供了一個獨立線程,專門用于在后臺運行各種腳本,大大提高了用戶響應(yīng),這 就是本節(jié)課程介紹的 Web Worker 技術(shù)。本節(jié)課程通過兩個例子說明這一技術(shù)的優(yōu)勢。為廣大開發(fā)者開 發(fā)具有良好性能的 Web 應(yīng)用提供幫助。 |
CSS3 技術(shù) CSS3 概述 CSS 簡史 CSS3 新特點 CSS 基礎(chǔ)簡述 盒子模型 float 排版 position 定位 固定寬度且居中的布局 實例:一鍵換膚 CSS3 媒體支持 處理不同屏幕的排版 實例:ipad 橫豎屏 CSS3 透明度 不同瀏覽器的兼容問題 塊透明與文字透明 外引字體 字體的重要性 中文字體的困惑 實例:裁剪字體 CSS3 分欄 用戶的閱讀習(xí)慣 實例:華爾街日報 CSS3 盒子屬性 排版模型的改變 盒子屬性特點 實例:自動適應(yīng)的排版 CSS3 變幻與動畫 動畫的運用 實例:變化的菜單 CSS3 與 javascript CSS3 與 js 之間的聯(lián)系 控制你的動畫 CSS3 的其它特性 |
移動應(yīng)用框架及其特點 IPhone 適配框架 Android 適配框架 微信適配框架 WebApp 架構(gòu) 混合應(yīng)用與打包 |