培養(yǎng)目標
隨著Web2.0的大潮席卷而來，2012年互聯(lián)網(wǎng)發(fā)展速度空前，互聯(lián)網(wǎng)向標準化、專業(yè)化、精細化方向發(fā)展，導致Web開發(fā)職位進一步細分，Web前 端開發(fā)工程師、Web頁面重構(gòu)師等這些高薪職業(yè)相繼誕生。Web前端開發(fā)工程師，主要職責是利用(X)HTML/CSS/JavaScript等各種 Web技術(shù)進行客戶端產(chǎn)品的開發(fā)。完成客戶端程序(也就是瀏覽器端)的開發(fā)，同時結(jié)合后臺開發(fā)技術(shù)模擬整體效果，進行豐富互聯(lián)網(wǎng)的Web開發(fā)，致力于通過 技術(shù)改善用戶體驗。要求精通HTML/XHTML、CSS，熟悉頁面架構(gòu)和布局，對Web標準和標簽語義化有深入理解。熟悉Ajax、 JavaScript、DOM等前端技術(shù)。
1,web前端表現(xiàn)層及與前后端交互的架構(gòu)設計和開發(fā)
2,JavaScript程序模塊開發(fā)，常用功能的實現(xiàn)
3,配合后臺開發(fā)人員實現(xiàn)產(chǎn)品界面和功能
4,編程風格規(guī)范，遵循代碼撰寫標準;
目前，國內(nèi)嚴重缺乏優(yōu)秀的網(wǎng)站設計與開發(fā)人員，各大企業(yè)對網(wǎng)頁制作及網(wǎng)站開發(fā)人員的需求量正急速增加，目前國內(nèi)web前端工程師的待遇在6000元以上，很多年輕人通過培訓進入此行業(yè)發(fā)展。
培訓特色
1、全面的web前端知識體系。從這里你可以從零到網(wǎng)頁前端高手不是問題;
2、合理課程,系統(tǒng)的知識讓你由淺入深漸進學習;
3、學費低廉，僅收880元，非常超值;
4 網(wǎng)絡視頻學習，在線學習、工作兩不誤;
5、永久的VIP會員，當期不會可加入下學期直到學會為止;
6、A5信譽，品質(zhì)保證， 對講課不滿意可以申請全額退款;
7、專業(yè)的在線視頻講課軟件，可以直接全程觀看講師的桌面操作過程;
8、講課完畢預留10-20分鐘的答疑時間，可以解決學員的各類實際操作問題。
選擇注意： 觀察培訓師資實戰(zhàn)經(jīng)驗，知識體系，學習服務條件。
適合人群： 熱愛程序開發(fā)、網(wǎng)站設計、網(wǎng)站開發(fā)、網(wǎng)站建設的人群
結(jié)業(yè)水平： 能熟練的使用常用前端開發(fā)技術(shù)完成網(wǎng)站前端開發(fā)工作。#p#副標題#e#
講 師介紹
網(wǎng)名:阿Q,現(xiàn)任海南某不知名網(wǎng)絡公司技術(shù)總管,長期從事網(wǎng)站前端和后端開發(fā)，六年網(wǎng)絡教學經(jīng)驗.對網(wǎng)頁前端各種技術(shù)都有系統(tǒng)的學習和研究。
課時：共20節(jié)課 開課時間：1月22號 20:00 -21：30
講課方式：好視通視頻軟件
(本期收20位學員 按照報名順序，人滿為止。再次承諾： 對講課不滿意可以申請全額退款)
在線報名咨詢： qq 8561289 qq 886128
咨詢電話 400-008-3536
web前端工程師培訓大綱：
第一部分：HTML+CSS 基礎知識
第一章：初識代碼
前端開發(fā)語言介紹—— html(Hypertext Markup Language)—— 結(jié)構(gòu)
前端開發(fā)語言介紹—— css (Cascading Style Sheets)—— 樣式
前端開發(fā)語言介紹—— JS(javascript)—— 行為
前端開發(fā)工具介紹—— Photoshop editplus,webstorm,dreamweaver各個瀏覽器及開發(fā)人員工具
一個HTML的基本結(jié)構(gòu)——文檔頭部聲明，html,meta title,body
CSS樣式表出現(xiàn)的位置——行間樣式表 內(nèi)部樣式表 外部樣式表
常見樣式介紹：width，height，border,background,font等等……
復合樣式—— padding,margin,border,background等等……
margin的兩種疊加現(xiàn)象
結(jié)課標準：
理解HTML文檔，CSS樣式之前的關(guān)系
理解樣式出現(xiàn)的位置及有缺點
熟悉常見的樣式
第二章：常見標簽及書寫規(guī)范
課程內(nèi)容介紹：
超鏈接a標簽——href A鏈接樣式 偽類的詳細介紹
常見標簽——div、ul、ol、li、dl、dt、dd 、h1-h6、p、span等……
選擇符講解——類型選擇符 id選擇符 class選擇符 包含選擇符 群組選擇符
選擇符的優(yōu)先級——基礎選擇符的優(yōu)先級 包含選擇的優(yōu)先級
標簽嵌套規(guī)則詳細講解
HTML的書寫規(guī)范講解
標簽樣式初始化，原則：但凡是瀏覽默認的樣式，都不要使用
常見的塊元素：div,h1-h6,p,ul,ol,li,dl,dd,dt
常見的行內(nèi)元素：span,a,strong,em
塊和內(nèi)嵌的轉(zhuǎn)換及問題
display:inline-block;的特性及問題
特殊的內(nèi)嵌標簽img
結(jié)構(gòu)實例
結(jié)課標準：#p#副標題#e#
掌握a的四個偽類，及先后順序
掌握CSS選擇符，及優(yōu)先級
掌握標簽嵌套規(guī)則及X(HTML)的書寫規(guī)范
掌握塊和內(nèi)嵌的及轉(zhuǎn)換問題
可以寫出至少五種不種類型的HTML結(jié)構(gòu)
第三章：浮動詳解
課程內(nèi)容介紹：
浮動的原理詳細講解，脫離文檔流
浮動的特點——讓塊元素在同一行內(nèi)顯示讓行內(nèi)元素支持寬高等……
浮動的使用實例
clear——意思是元素的某個方向上不能有浮動元素
浮動產(chǎn)生的問題——雙邊距bug等……
清除浮動的方法——給浮動元素的父級也加浮動
清除浮動的方法給浮動元素的父級加display:inline-block;
清除浮動的方法——在浮動元素下加一個空標簽，給它設置：clear:both
清除浮動的方法——用br標簽清浮動
清除浮動的方法——用after偽元素標簽清浮動
IE的專有屬性zoom的詳細講解
overflow的詳細講解
在頁垂直水平居中的div
IE下最小高度問題
浮動實例
結(jié)課標準：
掌握浮動的原理，及引起的問題
掌握常用的清浮動的方法
可以獨立完不同類型的浮動結(jié)構(gòu)的練習
第四章：定位詳解
課程內(nèi)容介紹：
相對定位——原始位置會被保留 是根據(jù)自己原始位置來計算坐標的等詳細講解
絕對定位——脫離方檔流 會跟有定位的父級來計算自己的坐標等詳細講解
相對定位和絕對定位引起的問題
固定定位——把元素固定在可視區(qū)的某一塊等詳細講解(IE6不支持)
定位之后的層級比較——元素定位之后，后一個的層級高于前一個層級
z-index 值越大，層級越高。層級只能在同級元素(兄弟標簽)之間比較。
定位的應用——幻燈片
鋪滿全屏的div
優(yōu)酷彈窗效果
結(jié)課標準：#p#副標題#e#
掌握三種定位的原理及應用
可以實現(xiàn)定位布局
第五章：滑動門和圓角技術(shù)詳解
課程內(nèi)容介紹：
兩層嵌套制作圓角
三層嵌套制作圓角
滑動門導航的制作
傾斜的導航
寬高自適應的圓角布局
css sprite 背景圖片合并 的使用及優(yōu)點。
結(jié)課標準：
可以獨立完成滑動門導航的制作
可以獨立完成寬高自適應的圓角布局
全使用背景圖片合并
第六章：表格表單
課程內(nèi)容介紹：
表格詳解——Thead、tbody、tr、th、td
表格詳解——border-collapse:collapse、colspan、rowspan
表格實例
表單元素詳細介紹
表單元素樣式——表單元素的樣式重置及問題
表單元素的兼容性問題及解決方法
不常見的表單元素
結(jié)課標準：
可以獨立完成表格制作
可以獨立完成126注冊頁面
可以解決表單元素的兼容性問題
第七章：探究JS結(jié)構(gòu)
課程內(nèi)容介紹：
網(wǎng)站常見JS效果(1)：鼠標提示符
網(wǎng)站常見JS效果(2)：選項卡
網(wǎng)站常見JS效果(3)：下拉菜單
網(wǎng)站常見JS效果(4)：輪播圖自動切換
結(jié)課標準：
制作常見的JS效果，有清晰的思路和明確的結(jié)構(gòu)
能夠舉一反三，知曉其他常見特效的結(jié)構(gòu)與思路
讓JS開發(fā)者感覺萬事俱備
第八章：網(wǎng)站常見兼容性問題及解決方案
課程內(nèi)容介紹：
兼容性——調(diào)試、判斷頁面出錯、錯位的方法
瀏覽器BUG總結(jié)——圖片問題 高度問題 浮動問題 定位問題 表單問題 注釋問題
CSS hack——常見CSS hack !important 條件注釋語句
特殊布局—— 圣杯布局(兩列\(zhòng)三列寬度自適應)等高布局 瀑布流布局
常犯錯誤——計算的不精確 嵌套不合理
元素浮動一定要記得一排的元素都要加浮動
結(jié)課標準：#p#副標題#e#
可以獨立完成小型頁面
第二部分：JavaScript 前端開發(fā)基礎
第九章：JS程序入門基礎
課程內(nèi)容介紹：
JavaScript是什么：網(wǎng)頁特效原理、淘寶、新浪、百度等網(wǎng)頁特效
JavaScript修改樣式、編寫JS的流程、布局：HTML+CSS，形成思路的方法
第一個JS特效——提示框：獲取元素、添加事件、getElementById
事件、函數(shù)是什么、函數(shù)調(diào)用、匿名函數(shù)、變量、window是什么、onload事件
屬性操作：什么是屬性、屬性名、屬性值、屬性讀寫操作
JS里的語法注意事項、屬性操作的另一種形式:[]
if判斷的三種形式、彈出菜單實例、擴展、為a鏈接添加JS、innerHTML
索引值應用：獲取多個元素、for循環(huán)、this.index、選項卡實例-思路1、思路2
結(jié)課標準：
理解并吸收JS基礎課程知識點
能獨立運用這些基礎知識點完成網(wǎng)頁常見的交互特效：
鳳凰娛樂導航焦點圖
影片信息提示效果
展開收縮菜單
第十章：JS基礎語法及流程控制
課程內(nèi)容介紹：
JavaScript的組成：ECMAScript,DOM,BOM
JS數(shù)據(jù)類型:類比HTML中的：block、inline,及typeof運算符
常見數(shù)據(jù)類型:number、string、boolean、undefined、object、function
函數(shù)傳參：傳遞、接收、運行。函數(shù)可以多次調(diào)用，可以傳遞多個參數(shù) 傳參實例
什么是域?什么是作用?作用域:外面變量里面找得到，里面變量外面找不到
變量的定義，及定義在哪.閉包，什么是閉包：函數(shù)套函數(shù)，閉包的使用。
命名規(guī)范：命名規(guī)范及必要性，可讀性，規(guī)范性
運算符:算術(shù)：+ 加、- 減、* 乘、/ 除、% 取模 實例：隔行變色、秒轉(zhuǎn)時間
運算符:賦值：=、+=、-=、*=、/=、%=
運算符:關(guān)系：<、>、<=、>=、==、!=、===、!==
運算符:邏輯：&& 與、|| 或、! 否 實例：全選、不選與反選
程序流程控制:判斷語句：：if、switch、?: 循環(huán)語句：while、for
程序流程控制:跳出：break、continue 什么是真、什么是假：
真：true、非零數(shù)字、非空字符串、非空對象
假：false、數(shù)字零、空字符串、空對象、undefined、NaN
結(jié)課標準：
隔行變色:鼠標移入移出變顏色 點擊以后的顏色變化
價格計算
帶略縮圖的圖片輪換
評分:點擊選中或取消
第十一章：函數(shù)詳解
課程內(nèi)容介紹：
顧函數(shù)傳參 函數(shù)返回值：return
函數(shù)可以是任何數(shù)據(jù)類型 示例：通過ID名、配合函數(shù)傳參特性獲取元素
可變參(不定參)：arguments 實例：求和函數(shù)
封裝CSS函數(shù)
獲取非行間樣式的兼容寫法
obj.currentStyle[attr] getComputedStyle(obj,false)[attr]
判斷arguments.length 判斷是否有最后一個參數(shù)
定時器基礎 什么是定時器
定時器函數(shù)：setInterval、clearInterval和setTimeout、clearTimeout
兩種定時器的區(qū)別，小實例：按鈕控制DIV變化 查看QQ資料實例
定時器應用(1)：自動播放的選項卡
定時器應用(2)：簡易數(shù)碼時鐘
結(jié)課標準：#p#副標題#e#
寫一個計算函數(shù)
簡易網(wǎng)頁時鐘，帶上冒號
帶縮略圖的圖片輪換
按鈕控制商品圖片上下滾動
第十二章：字符串數(shù)組
課程內(nèi)容介紹：
字符串方法——獲取類：charAt charCodeAt fromCharCode
字符串方法——查找類：indexOf，lastIndexOf，及兩個參數(shù)的含義
字符串方法——比較類:>, <, ==
字符串方法——截取類:substring
字符串方法—其他:split,toUpperCase, toLowerCase
Json:什么是Json Json和數(shù)組 Json的循環(huán)
數(shù)組基礎:數(shù)組的使用 數(shù)組的屬性 數(shù)組使用原則
數(shù)組添加元素: push(元素)，從尾部添加,unshift(元素)，從頭部添加
數(shù)組刪除元素:pop()，從尾部彈出,shift()，從頭部彈出
數(shù)組的插入、刪除：splice(開始, 0, 元素…) 兩個參數(shù)的情況
結(jié)課標準：
查找某字符串在文本中出現(xiàn)的次數(shù)，分別在第幾位
帶正負的評分效果
自定義字體形狀
展開收縮的文字內(nèi)容
模擬打字機
按鈕控制圖片左右走動
第三部分：DOM,BOM,EVENT對象 - 徹底掌握HTML的秘密，隨心所欲的實現(xiàn)功能
第十三章：DOM與JAVASCRIPT
課程內(nèi)容介紹：
DOM基礎：什么是DOM DOM節(jié)點
childNodes和children ，firstChild和firstElementChild
lastChild和lastElementChild，nextSibling和nextElementSibling
previousSibling和previousElementSibling
parentNode和offsetParent
操作元素屬性的第三種方式 setAttribute(名稱, 值) 問題及好處
創(chuàng)建和插入DOM元素 createElement(標簽名) appendChild(節(jié)點)
insertBefore(節(jié)點, 原有節(jié)點) 在已有元素前插入 例子：倒序留言板
刪除DOM元素removeChild(節(jié)點)
替換DOM元素replaceChild(節(jié)點, 已有節(jié)點)
結(jié)課標準：
58同城篩選效果
上移下移
內(nèi)容關(guān)鍵字信息
第十四章：BOM與表格
課程內(nèi)容介紹：
表格應用——獲取表格元素 tBodies、tHead、tFoot、rows、cells
表格應用——隔行變色 鼠標移入高亮
表格應用——添加、刪除一行 搜索、高亮顯示、篩選、排序
用className選擇元素——選出所有元素 通過className條件篩選 封裝成函數(shù)
表單應用——什么是表單，向服務器提交數(shù)據(jù)，用戶注冊 action提交到哪里
表單事件：onsubmit 提交時發(fā)生onreset 重置時發(fā)生
BOM與JAVASCRIPT 打開窗口， open實例：藍色理想運行代碼功能
BOM與JAVASCRIPT 關(guān)閉窗口，close關(guān)閉時提示問題, 兼容性問題
常用屬性:window.navigator.userAgent window.location
可視區(qū)尺寸document.documentElement.clientWidth
滾動距離document.body.scrollTop document.documentElement.scrollTop
內(nèi)容高度scrollHeight 文檔高度document.body.offsetHeight
可視區(qū)尺寸 滾動距離 內(nèi)容高度 文檔高度document.documentElement.clientWidth
常用方法和事件 window對象常用事件 onscroll onresize 優(yōu)酷彈窗的例子
結(jié)課標準：#p#副標題#e#
表格隔行變色、鼠標移入、選擇高亮顯示、添加、刪除、搜索、上移、下移
表單校驗：用戶注冊、驗證(名字不能為空，密碼不能為空，兩次密碼必須一樣)
回到頂部按鈕
頁面左右兩側(cè)居中廣告
優(yōu)酷彈窗
第十五章：事件詳解
課程內(nèi)容介紹：
事件詳解——光標事件 光標移入事件onfocus 光標移出事件 onblur
This關(guān)鍵字 This指向 ：誰調(diào)用的this就指向誰
Event對象 用來獲取事件的詳細信息：鼠標位置、鍵盤按鍵 Event對象的兼容
事件流 事件冒泡 取消冒泡 事件捕獲
綁定事件 綁定事件的兼容性 普通事件與綁定事件的區(qū)別與取消
鍵盤事件 keyCode 獲取用戶按下鍵盤的哪個按鍵 例子：鍵盤控制Div移動
鍵盤事件 其他屬性 ctrlKey、shiftKey、altKey
默認事件 阻止默認事件 普通寫法：return false;
默認事件的實例：屏蔽右鍵菜單 :oncontextmenu 和只能輸入數(shù)字的輸入框
拖拽 簡易拖拽 拖拽原理——三大事件
定時器應用(1)：自動播放的選項卡
定時器應用(2)：簡易數(shù)碼時鐘
結(jié)課標準：
模擬select控件
自定義右鍵菜單
拖拽回放
方塊跟隨鼠標移動
鏈接提示title框
只允許輸入數(shù)字的文本框
用鍵盤控制Div的移動
左右點擊圖片切換
鼠標繪制方塊
第十六章：事件高級應用
課程內(nèi)容介紹：
高級拖拽——完美拖拽 標準下阻止默認事件，可以拖拽圖片 封裝成函數(shù)
高級拖拽—限制范圍 不能拖拽出頁面可視區(qū) 磁性吸附
高級拖拽——碰撞檢測原理——九宮格
高級拖拽——與DOM配合 帶框的拖拽 保留原有位置
高級拖拽——拖拽改變層大小
自定義滾動條——只有橫向拖拽 限制范圍 計算比例
自定義滾動條——控制其他對象：控制物體的大小或透明度 控制文字滾動
鼠標滾輪 鼠標滾輪事件 鼠標滾輪與自定義滾動條結(jié)合
cookie的作用——頁面用來保存信息 同一個網(wǎng)站中所有頁面共享一套cookie
cookie的使用——設置 讀取 刪除
cookie例子：用cookie記錄上一次拖拽的位置 Cookie登錄后刪除信息
結(jié)課標準：#p#副標題#e#
帶框的拖拽
拖拽改變層的大小(左右都可拖拽,帶箭頭的拖拽)
拖拽記錄位置
網(wǎng)頁換膚記錄樣式
登錄框記錄用戶名
記錄用戶瀏覽視頻的記錄
自定義滾動條控制頁面(配合滾輪)
輸入框中滾輪加減數(shù)字
第四部分：Ajax和Json - 瀑布流效果，及天氣預報實例
第十八章 Ajax和Jsonp
課程內(nèi)容介紹：
什么是Ajax 用戶注冊例子演示 節(jié)省用戶操作，時間，提高用戶體驗。
使用Ajax 傳輸獲取數(shù)據(jù) 使用ajax獲取某一文本文件的內(nèi)容
Ajax過程詳解——創(chuàng)建對象XMLHttpRequest() Date()對象 Open()方法
表單應用 什么是表單：提交用戶信息 action method 傳輸方式
Get和Post的區(qū)別：Get通過url地址傳輸 Post通過瀏覽器內(nèi)部傳輸
Get和Post的傳輸數(shù)據(jù)安全性和傳輸數(shù)據(jù)量
AJAX——Open方法三個參數(shù)的含義 提交方式 提交地址 異步(同步)
AJAX——Send方法 發(fā)送數(shù)據(jù)，相當于Form的submit
AJAX——請求狀態(tài)監(jiān)控 onreadystatechange事件
編寫Ajax——發(fā)送請求 send 中文編碼 緩存 設置請求頭
編寫Ajax——數(shù)據(jù)類型 服務器返回給咱們的真正數(shù)據(jù) XML、HTML、JSON
JSON的寫法 Eval解析JSON的時候需要注意的地方 例子：添加JSON數(shù)據(jù)到ul
結(jié)課標準：
獲取一組數(shù)據(jù)
Ajax() 封裝函數(shù)編寫
Ajax選項卡(擴展：實時刷新數(shù)據(jù))
瀑布流布局
更多培訓信息請登錄 查詢
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
