【課程介紹】
一、什么是HTML5
1、一次編寫(xiě),隨處部署--HTMl5可以在多種設(shè)備上運(yùn)行,這是其他方式都無(wú)法做到的.
2、在互聯(lián)網(wǎng)中分享--HTML5應(yīng)用都有一個(gè)URL,因此它可以在互聯(lián)網(wǎng)中被隨意分享,并且在搜索時(shí)即可被找到。
3、多廠商標(biāo)準(zhǔn),建立在協(xié)議之上--HTML5是眾多公司努力的結(jié)果,沒(méi)有一家廠商可以左右它的方向。
4、適用于多種環(huán)境--HTML5應(yīng)用可以使用交互式設(shè)計(jì)來(lái)提供佳體驗(yàn),而不需要更改代碼。你可以從桌面到手機(jī)到平板電腦無(wú)縫進(jìn)行切換,而無(wú)需重復(fù)安裝不同的應(yīng)用。
二、HTML5發(fā)展前景
1、HTML5是WEB的未來(lái),不僅在電腦端,而且在移動(dòng)端也一定會(huì)得到廣泛的應(yīng)用。
2、據(jù)統(tǒng)計(jì)2013年全球?qū)⒂?span>10億手機(jī)瀏覽器支持HTML5,同時(shí)HTML Web開(kāi)發(fā)者數(shù)量將達(dá)到200萬(wàn)。
3、毫無(wú)疑問(wèn),HTML5將成為未來(lái)5-10年內(nèi),移動(dòng)互聯(lián)網(wǎng)領(lǐng)域的主宰者。據(jù)IDC的調(diào)查報(bào)告統(tǒng)計(jì),截至2012年5月,有79%的移動(dòng)開(kāi)發(fā)商已經(jīng)決定要在其應(yīng)有程序中整合HTML5技術(shù)。
4、WEB技術(shù)發(fā)展越來(lái)越迅速,HTML5的到來(lái)更是把WEB技術(shù)推向了,目前HTML5技術(shù)已經(jīng)日趨成熟,HTML5的未來(lái)十分光明,值得我們?nèi)W(xué)習(xí)。
三、HTML5可以做什么
除了實(shí)現(xiàn)之前HTML可以實(shí)現(xiàn)的功能外,HTML5做以下特別的事情:
1、本地存儲(chǔ) 基于HTML5開(kāi)發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間,更快的聯(lián)網(wǎng)速度,這些全得益于HTML5 APP Cache,以及本地存儲(chǔ)功能。
2、實(shí)現(xiàn)多媒體更加簡(jiǎn)單 利用HTML5的video和audio非常方便的在網(wǎng)頁(yè)上添加視頻和音頻,不需要很復(fù)雜的代碼,就能打造一款功能齊全的HTML5播放器。
3、三維圖形和動(dòng)畫(huà) HTML5的3D引擎卻可以更方便的實(shí)現(xiàn)3D效果,而且更加逼真。
4、CSS3的運(yùn)用 CSS3提供更多的CSS屬性,可以做更豐富的渲染效果。
四、HTML的優(yōu)勢(shì)
1、一次編寫(xiě),隨處部署--HTMl5可以在多種設(shè)備上運(yùn)行,這是其他方式都無(wú)法做到的.
2、在互聯(lián)網(wǎng)中分享--HTML5應(yīng)用都有一個(gè)URL,因此它可以在互聯(lián)網(wǎng)中被隨意分享,并且在搜索時(shí)即可被找到。
3、多廠商標(biāo)準(zhǔn),建立在協(xié)議之上--HTML5是眾多公司努力的結(jié)果,沒(méi)有一家廠商可以左右它的方向。
4、適用于多種環(huán)境--HTML5應(yīng)用可以使用交互式設(shè)計(jì)來(lái)提供佳體驗(yàn),而不需要更改代碼。你可以從桌面到手機(jī)到平板電腦無(wú)縫進(jìn)行切換,而無(wú)需重復(fù)安裝不同的應(yīng)用。
【課程內(nèi)容】
一、設(shè)計(jì)基礎(chǔ)
1、photoshop應(yīng)用
基本的使用方法和技巧,及新增功能、圖層的基本概念與應(yīng)用、圖像的各種選擇應(yīng)用及操作技巧。
2、illustrator應(yīng)用
內(nèi)容包括Illustrator概念,繪圖與著色,畫(huà)筆和符號(hào),文本和漸變、漸變網(wǎng)格和混合,透明度、外觀屬性、圖層與蒙版等工具運(yùn)用,著重講解一些常用的應(yīng)用技巧。
3、多種風(fēng)格界面設(shè)計(jì)
WEB界面設(shè)計(jì)的內(nèi)容和規(guī)范。
掌握各類網(wǎng)站的網(wǎng)頁(yè)特點(diǎn)認(rèn)知,了解流行的設(shè)計(jì)風(fēng)格,根據(jù)不同特點(diǎn)進(jìn)行頁(yè)面視覺(jué)設(shè)計(jì),達(dá)到建站目標(biāo)。
4、蘋(píng)果與安卓移動(dòng)界面設(shè)計(jì)
了解安卓與蘋(píng)果不同的規(guī)范原則,針對(duì)與不同的平臺(tái)要求進(jìn)行設(shè)計(jì)。
二、WEB前端基礎(chǔ)
1、HTML基礎(chǔ)
前端開(kāi)發(fā)環(huán)境配置(DreamWeaver、Notepad++、HBuilder、PhpStorm),HTML快速入門,熟悉文本、圖像、鏈接、表格、列表、表單等標(biāo)簽使用方法。
2、CSS詳解
CSS的基礎(chǔ)和入門。了解CSS的使用方式及優(yōu)先級(jí)。熟悉CSS字體樣式、段落樣式、背景樣式、布局樣式設(shè)置、常用樣式在不同瀏覽器的兼容解決方案和CSS優(yōu)化。
3、靜態(tài)網(wǎng)頁(yè)實(shí)現(xiàn)實(shí)戰(zhàn)
學(xué)員在講師的專業(yè)指導(dǎo)下,規(guī)范的將階段設(shè)計(jì)的WEB界面從零開(kāi)始,實(shí)現(xiàn)成靜態(tài)網(wǎng)頁(yè)作品。充分了解和熟悉網(wǎng)頁(yè)布局的常用結(jié)構(gòu)、常用樣式處理和兼容方案。
4、HTML5和CSS3核心
熟悉HTML5新特性,新標(biāo)簽如audio、video、svg、canvas的使用。
熟悉CSS3新增選擇器、特性、動(dòng)畫(huà)的應(yīng)用,以及結(jié)合SVG制作常見(jiàn)動(dòng)畫(huà)、動(dòng)效豐富頁(yè)面體驗(yàn)。
熟悉背景圖合并技術(shù)、常用布局技術(shù)、結(jié)構(gòu)優(yōu)化技巧等。
5、HTML5和CSS3應(yīng)用實(shí)戰(zhàn)
JavaScript的基本數(shù)據(jù)類型、常量、變量、運(yùn)算符、數(shù)組、流程控制語(yǔ)句。 熟悉JavaScript中的對(duì)象、函數(shù),類和面向?qū)ο蠼Y(jié)構(gòu)的編程。 了解Document對(duì)象、節(jié)點(diǎn)樹(shù)模型,節(jié)點(diǎn)操作、文檔操作、Window對(duì)象、Screen對(duì)象、定時(shí)器、Location對(duì)象、History對(duì)象等。
6、JavaScript語(yǔ)言和面向?qū)ο?/span>
充分運(yùn)用HTML5中的新特性構(gòu)建修改頁(yè)面內(nèi)容,融入豐富的CSS3動(dòng)畫(huà)、動(dòng)效,來(lái)理解和掌握用戶體驗(yàn)的重要性以及如何通過(guò)細(xì)節(jié)來(lái)提高用戶體驗(yàn)決定一個(gè)作品的成敗。
7、正則表達(dá)式
熟悉JavaScript中RegExp對(duì)象的使用,常用的方法、場(chǎng)景,以及技巧練習(xí),能書(shū)寫(xiě)常見(jiàn)表達(dá)式如“用戶名格式、郵箱格式、日期格式、網(wǎng)址格式”等。
8、DOM編程和AJAX
Bitmap 熟悉文檔結(jié)構(gòu)中的節(jié)點(diǎn)增、刪、改操作,document、window、form、table對(duì)象的深入了解和使用。熟悉HTML文檔流中的事件機(jī)制及使用方法、技巧,以及事件冒泡、阻止,瀏覽器兼容等。
9、異步加載項(xiàng)目實(shí)戰(zhàn)
通過(guò)異步刷新機(jī)制,實(shí)現(xiàn)大批量?jī)?nèi)容(以圖片瀑布流為例)的延遲加載,從而優(yōu)化頁(yè)面性能,進(jìn)一步優(yōu)化提高用戶體驗(yàn)。
10、JavaScript常見(jiàn)面試題講解
目前如騰訊、百度、阿里巴巴等大型企業(yè)面試中常用的JavaScript面試題分析和講解。
11、京東專題頁(yè)
熟悉常見(jiàn)的大型專題頁(yè)實(shí)現(xiàn)細(xì)節(jié)、處理技巧,掌握企業(yè)應(yīng)用開(kāi)發(fā)中常用的開(kāi)發(fā)技巧。
三、WEB前端框架
1、jQuery框架
了解jQuery的基本語(yǔ)法,鏈?zhǔn)讲僮?、隱式迭代的特性,jQuery選擇器、屬性樣式、HTML操作、事件、動(dòng)畫(huà)、AJAX等。熟悉jQuery的插件擴(kuò)展機(jī)制,了解第三方插件的使用和常用設(shè)計(jì)方法。熟悉自定義插件設(shè)計(jì),以及常見(jiàn)的問(wèn)題和注意事項(xiàng)。
2、jquery實(shí)戰(zhàn)
結(jié)合運(yùn)用HTML5、CSS3、JavaScript、JQuery知識(shí)模擬實(shí)現(xiàn)window桌面操作系統(tǒng),如window窗口、桌面圖標(biāo)、雙擊打開(kāi)應(yīng)用、任務(wù)欄、時(shí)間日期等操作系統(tǒng)元素。
3、LESS樣式預(yù)處
熟悉CSS預(yù)處理語(yǔ)言的設(shè)計(jì)、編譯和運(yùn)用技巧,以及配置LESS的開(kāi)發(fā)環(huán)境。熟悉LESS變量、混合、嵌套、運(yùn)算、函數(shù)、作用域、注釋、import。
4、樣式實(shí)戰(zhàn)
在學(xué)習(xí)Bootstrap之前,先行分析、實(shí)現(xiàn)按鈕組、輸入框組、選項(xiàng)卡等常見(jiàn)布局組件,為后面的課程提供知識(shí)儲(chǔ)備和指導(dǎo)
5、Bootstrap框架
基礎(chǔ)模板的使用,可視化布局工具使用,字體圖標(biāo)、表格、表單、Tab選項(xiàng)卡等。網(wǎng)格系統(tǒng)和布局、響應(yīng)式布局,常用排版技巧,以及按鈕組、輸入框組、導(dǎo)航欄、頁(yè)標(biāo)題、縮略圖、列表組、面板和JavaScript插件使用技巧。
6、vue框架
vue事件和控件的使用,指令及過(guò)濾器的實(shí)現(xiàn),vue核心組件的使用,自定義組件及常用插件開(kāi)發(fā),通過(guò)過(guò)渡動(dòng)畫(huà)提升用戶體驗(yàn),大型應(yīng)用的開(kāi)發(fā)規(guī)范和技術(shù)。
四、后端開(kāi)發(fā)
1、PHP語(yǔ)言后端開(kāi)發(fā)
熟悉PHP語(yǔ)言基礎(chǔ), 表單的驗(yàn)證及處理,文件上傳,Cookies和Seesions的使用,異步AJAX數(shù)據(jù)傳輸,數(shù)據(jù)交互及API接口開(kāi)發(fā)等。
2、NodeJS后端
理解這門神奇的服務(wù)端“JavaScript”語(yǔ)言,及其非阻塞式特性,模塊化和npm包管理器使用,事件、路由、數(shù)據(jù)交互方法等。
五、項(xiàng)目實(shí)戰(zhàn)
1、移動(dòng)項(xiàng)目實(shí)戰(zhàn)
移動(dòng)端微閱讀網(wǎng)站整站項(xiàng)目實(shí)戰(zhàn),綜合運(yùn)用前端框架、AJAX數(shù)據(jù)交互、移動(dòng)UI組件技巧,按照企業(yè)標(biāo)準(zhǔn)流程進(jìn)行需求分析、項(xiàng)目構(gòu)建、頁(yè)面設(shè)計(jì),框架運(yùn)用等,終實(shí)現(xiàn)整體項(xiàng)目的開(kāi)發(fā)。
2、游戲?qū)n}實(shí)戰(zhàn)
移動(dòng)端廚藝類網(wǎng)站整站項(xiàng)目實(shí)戰(zhàn),熟練常用組件的開(kāi)發(fā)原理和技巧,如評(píng)論版塊、下拉菜單、邊欄菜單、分享版塊、導(dǎo)航欄、滑塊按鈕、下拉刷新等。
3、攝影網(wǎng)站實(shí)戰(zhàn)
婚紗攝影主題網(wǎng)站首頁(yè)制作實(shí)戰(zhàn),結(jié)合運(yùn)用新框架解決網(wǎng)站兼容性問(wèn)題。
【師資介紹】
張雄軍
HTML5產(chǎn)品副總監(jiān)
10余年互聯(lián)網(wǎng)從業(yè)經(jīng)驗(yàn),熟練Web前端及移動(dòng)前端開(kāi)發(fā)。熟練 PHP+MySQL 架構(gòu)各類型后端開(kāi)發(fā)。精通FLASH視覺(jué)設(shè)計(jì),AIR桌面應(yīng)用、以及AS3頁(yè)游開(kāi)發(fā)、Web前端插件開(kāi)發(fā)。擅長(zhǎng)Web網(wǎng)站、Web APP、數(shù)據(jù)服務(wù)、OA辦公、后臺(tái)管理、企業(yè)應(yīng)用、FLASH游戲等。
【教學(xué)環(huán)境】