課程

學習內(nèi)容

學習目標

實戰(zhàn)項目

第一部分：初級課程

前端工程師的發(fā)展趨勢

什么是前端工程師
前端工程師的行業(yè)現(xiàn)狀
前端工程師的未來發(fā)展趨勢
前端工程師的職業(yè)發(fā)展規(guī)劃

讓學生知道自己所學的技術(shù)概況,，有助于學生更好的找到學習方向,。

WEB構(gòu)件組成

WEB構(gòu)建的定義
服務器是什么
語言腳本是什么
瀏覽器是什么
瀏覽的基本結(jié)構(gòu)原理
常見的網(wǎng)絡(luò)協(xié)議比如WWW協(xié)議,。
IE6/7/8/9/10/11,FireFox,Chrome,Safari,Opera等瀏覽器的安裝與操作技巧,。
360瀏覽器,、QQ瀏覽器,、獵豹瀏覽器,、搜狗瀏覽器等等安裝技巧以及與Chrome和IE的區(qū)別,。

學生大概了解所有的知識點組成和所學技術(shù)的用途,，及其程序開發(fā)的基本工作原理

1、各種瀏覽器的安裝和使用
2,、常見的開發(fā)工具的安裝和使用

HTML5基本介紹

什么是網(wǎng)站和網(wǎng)頁
HTML發(fā)展歷史
HTML5是什么,、標準
HTML5應用生態(tài)
App中的HTML5未來比重

學生掌握HTML5的應用場景和標準

HTML基本應用

HTML是什么、頁面主體結(jié)構(gòu),、文檔聲明語法結(jié)構(gòu)
標簽的入門：編碼聲明與為什么,，頭元素，body元素,，單標簽,，對標簽，字體標簽,，超鏈接,，錨文本，HTML實體,，路徑意義,，圖像標簽，列表標簽,，表格標簽,，文本標簽，按鈕標簽,，塊標簽,，Iframe標簽等

熟練掌握HTML中常見的標簽，標簽用途和各種使用方法,。

1,、使用表格制作個人簡歷
2、使用框架技術(shù)制作后臺界面或者編寫課程大綱電子書籍,。

課程

學習內(nèi)容

學習目標

實戰(zhàn)項目

CSS基本應用

CSS是什么,、優(yōu)點和實戰(zhàn)標準是什么
CSS的實戰(zhàn)應用場景
CSS的三引入方式區(qū)別和用途
CSS中選擇器的使用，優(yōu)先級和應用場景
CSS中塊元素和行元素的轉(zhuǎn)換,，及其主要用途
CSS中字體,、文本,、背景設(shè)計技巧、列表,、表格常見操作
瀏覽器的基本結(jié)構(gòu)原理
導致瀏覽器中不同元素出現(xiàn)不同盒子模型的原因
盒子模型詳細講解
標簽定位中絕對定位,、相對定位、固定定位的使用
DIV塊的層級設(shè)計
標簽浮動及其浮動原理
常見偽類的使用
如何使用HTML5.0和CSS3.0實現(xiàn)PC端頁面,。

掌握CSS常見基本屬性和選擇器用法,，能熟練記憶CSS的屬性和使用技巧，理解盒子模型和布局是塊標簽和標簽的實際用途,，及其熟練掌握CSS其他常見屬性和使用特點,，了解各個瀏覽器之間的兼容性出現(xiàn)的原理。

1,、編寫PC站的一個整體網(wǎng)站
2,、編寫京東/蘇寧的登錄注冊頁面、首頁,、產(chǎn)品列表頁,、產(chǎn)品內(nèi)容頁。
3,、編寫許愿墻類型站點,。

DIV+CSS標準化布局

CSS命名規(guī)范和標準寫法
DIV+CSS布局和Table布局的區(qū)別、好處
DIV+CSS布局中水平和垂直切分原理
CSS Hack瀏覽器兼容性調(diào)試原理
CSS屬性繼承和疊加原理
CSS污染規(guī)避
常見的CSS的bug和使用技巧（如DIV垂直居中）
DIV+CSS建站中自己代碼庫的創(chuàng)建和優(yōu)化,。

熟練掌握CSS實戰(zhàn)過程中各種的使用技巧和標準寫法,。

1、使用DIV+CSS布局淘寶頁面
2,、收集整理常見CSSbug和使用技巧
3,、創(chuàng)建自己的基礎(chǔ)CSS代碼庫

UI常見工具介紹

UI常見工具PhotoShop的介紹和基本使用,，
PhotoShop中元素尺寸,，顏色，字體樣式數(shù)據(jù)的獲取
圖片圖層和圖層合并使用
網(wǎng)頁布局中圖片的切割和使用
大型網(wǎng)站中小圖片合成等技術(shù),。

熟練掌握使用PhotoShop截圖,，切圖，合并圖,，數(shù)據(jù)獲取操作,。

使用PhotoShop實現(xiàn)一個企業(yè)站網(wǎng)頁的設(shè)計和圖片竊取和合并，數(shù)據(jù)獲取,。

實戰(zhàn)項目

PC端的網(wǎng)站前端（內(nèi)部提供PSD項目效果圖）

課程

學習內(nèi)容

學習目標

實戰(zhàn)項目

第二部分：中級課程

JavaScript基本應用

JavaScript是什么,、用途是什么
JavaScript的構(gòu)成部分：ECMAScript，DOM,，BOM,。
JavaScript的歷史發(fā)展版本和標準
JavaScript在瀏覽器中的運行機制如何
JavaScript的基本語法：常量,，變量，注釋等
JavaScript的運算符
JavaScript的控制結(jié)構(gòu)
JavaScript的函數(shù),，作用域,，閉包實現(xiàn)，預解析,，引用及其常見的函數(shù)種類
JavaScript常見內(nèi)置函數(shù),，如類型強制轉(zhuǎn)換函數(shù)，類型判斷函數(shù)等
JavaScript數(shù)組的定義,，種類,，遍歷和使用技巧
JavaScript面向?qū)ο箝_發(fā)思想
JavaScript中對象的常見操作
javascirpt中自定義對象的封裝
JavaScript中繼承，構(gòu)造函數(shù),，作用域鏈等用法
JavaScript中4大數(shù)據(jù)類型對象：數(shù)學對象,，字符串對象，數(shù)組對象,，日期對象等實戰(zhàn)用法,。
JavaScript中正則表達式
JavaScript中異常處理

掌握JavaScript的基本語法，及其常見的各種效果制作技巧,，以及理解JavaScript在用戶接口中體驗的重要性,。

1、實現(xiàn)計算器的各種計算功能,。
2,、實現(xiàn)閏年的計算功能
3、實現(xiàn)九九乘法表
4,、實現(xiàn)數(shù)字轉(zhuǎn)中文習慣寫法的功能
5,、表單驗證

JavaScript DOM操作

DOM基本介紹和主要通途是什么
DOM的分類：HTML DOM/CSS DOM/XML DOM的各自特點
HTMLDOM中基本操作：節(jié)點對象的訪問，節(jié)點對象修改,，節(jié)點對象添加,，節(jié)點對象刪除
DOM節(jié)點屬性操作
DOM中內(nèi)容操作
DOM事件對象Event對象，事件流,，事件流算法,，事件委派，事件代理,，綁定和事件銷毀等
DOM中Cookie的添加,，刪除，修改和記住用戶名密碼,。
DOM中常見的其他控件操作：如表格對象,，SELECT對象，Object對象,，Script對象,，Checkbox對象,，Style對象等常見對象操作。

熟練掌握DOM對象節(jié)點操作,，可以更加標準,，統(tǒng)一的操作HTML標簽文檔，制作更加方便和用戶體驗性更高的用戶接口和插件,。

1,、表格隔行顯示。
2,、淘寶的三級菜單
3,、跨域操作
4、購物車中的全選,，反選和不選,。
5、表單中記住用戶名和用戶產(chǎn)品瀏覽歷史記錄

課程

學習內(nèi)容

學習目標

實戰(zhàn)項目

JavaScript BOM操作

BOM是什么
BOM主要的實戰(zhàn)應用場景有那些
BOM中Windows對象的常見用法
BOM中Navigator對象的常見用法
BOM中Screen的常見用法
BOM中History的使用技巧
BOM中Location的主要用途
BOM中動畫,，計時器等常見使用
BOM中常見窗口操作,，和窗口關(guān)系操作。
JavaScript運動框架,，如常見圖片特效,，滾動，彈性運動等,。

熟練操作瀏覽器對象的各種操作,，并且能借助瀏覽器對象，實現(xiàn)各種瀏覽器API接口調(diào)用,。

1,、京東圖片播放器動畫。
2,、大轉(zhuǎn)盤抽獎
3,、DIV切換效果
4、打字游戲
5,、圍住神經(jīng)貓網(wǎng)頁游戲

JavaScript庫實現(xiàn)（自定義js庫）

框架與庫的意義
JavaScirpt框架的設(shè)計模式
JavaScript的代碼規(guī)范,、框架分類
JavaScript的框架主要用途和功能
JavaScript的選擇器引擎設(shè)計、模塊加載系統(tǒng)設(shè)計
JavaScript瀏覽器嗅探設(shè)計,、異步處理設(shè)計
JavaScript樣式的支持偵測設(shè)計
JavaScriptDOM節(jié)點操作設(shè)計
JavaScript 事件、動畫設(shè)計,、兼容性設(shè)計

熟練掌握JavaScript的常見設(shè)計模式和代碼標準,。

編寫自己的JavaScript框架。

jQuery

什么是JavaScript框架
JavaScript框架種類和使用情況
jQuery框架好處
$工廠函數(shù)
jQuery使用,、對象捕獲
jQuery屬性,、事件操作
jQuery中CSS,，val，class,text,html操作
jQuery中特殊事件,、內(nèi)置函數(shù)
jQuery插件,、核心函數(shù)
jQuery中AJAX操作
jQuery中跨域操作，彈出層,，div拖動設(shè)置
jQuery網(wǎng)絡(luò)中插件的使用
jQuery節(jié)點,、跨域操作
jQuery數(shù)據(jù)緩存系統(tǒng)

熟練掌握jQuery框架的常用操作和jQueryUI等各種插件使用方法，理解jQuery設(shè)計原理,。

1,、jQueryUI插件使用
2、jQuery彈出層設(shè)計

1. 3,、jQuery跨域操作

實戰(zhàn)項目

編寫自己的JavaScript框架