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