Web前端工程師培訓(xùn)課程大綱

1、Web前端工程師培訓(xùn)課程大綱上?；ヂ?lián)網(wǎng)行業(yè)人才緊缺指數(shù)（TSI）報(bào)告顯示，WEB前端開發(fā)工程師已成為上海互 聯(lián)網(wǎng)行業(yè)中最緊俏的職位。根據(jù)此次報(bào)告，今年三季度，互聯(lián)網(wǎng)在上海全行業(yè)中成為人才需 求最為緊迫的行業(yè)；而在當(dāng)?shù)鼗ヂ?lián)網(wǎng)各種緊缺職位中，各類研發(fā)技術(shù)類崗位穩(wěn)居前列。想從 事WE驪端開發(fā)的小伙伴們看到這熱門高薪的崗位一定有所心動(dòng)，下面小編就整理了一份全 面的WE驪端工程師培訓(xùn)課程大綱 供學(xué)習(xí)使用：非凡學(xué)院WE而端工程師培訓(xùn)課程課程模塊課程科目培訓(xùn)內(nèi)容設(shè)計(jì) 軟件 （贈(zèng)送）Dreamweaver講解DW勺人性化功能以及在頁面架構(gòu)和前端開發(fā)應(yīng)用領(lǐng)域的使用技巧，HTML基礎(chǔ)應(yīng)用，快速入門，CSS樣式表的

2、應(yīng)用，模板布局的使用技巧，如何管理網(wǎng)站并上傳。Fireworks講解FW在網(wǎng)頁切片、圖層、幀、gif動(dòng)畫、畫布設(shè)置中的應(yīng)用以及配合其他軟件進(jìn)行使用Photoshop熟練掌握PS在圖像編輯、圖像合成、校色調(diào)色及特效制作四大部分的技巧以及配合其他軟件的應(yīng)用Illustrator廣泛應(yīng)用于出版、多媒體和 UI圖標(biāo)界面設(shè)計(jì)的工業(yè)標(biāo)準(zhǔn)矢量插畫的軟件，印刷和WE颯絡(luò)創(chuàng)作的專業(yè)平臺(tái)，針對(duì)WE舜口移動(dòng)的改進(jìn)、介紹多個(gè)畫板、觸摸式創(chuàng)意工具等新鮮特性wEBtr 端HTML5/CSS3布局 與樣式HTMl#簽HTMl5簡(jiǎn)介與入門、文本、圖像、鏈接、表格、列表、智能表單、結(jié)構(gòu)化標(biāo)簽等內(nèi)容隨堂項(xiàng)目：1 .文章頁面的結(jié)構(gòu)

3、化布局。包括文章標(biāo)題、正文、圖片、頁面背景、作者、發(fā)表時(shí)間等信息2 .利用table標(biāo)簽課程表的實(shí)現(xiàn)3 .利用form、input表單標(biāo)簽實(shí)現(xiàn)簡(jiǎn)單登錄注冊(cè)頁面CSS基礎(chǔ)語法 常見樣式CSS前介、css3引入方式、常見樣式、文字與文本、顏色、背景色、精靈圖片等 隨堂項(xiàng)目：首頁導(dǎo)航欄的制作CSS選擇器css選擇器：標(biāo)簽選擇器、類選擇器、ID選擇器、后代選擇器、群組選擇器、偽類選擇器、結(jié)構(gòu)化偽類選擇器、 屬性選擇器、兄弟選擇器、子元素選擇器CSS盒子模型盒模型簡(jiǎn)介、盒模型組成部分、盒模型常用場(chǎng)景、彈性盒模型隨堂項(xiàng)目：導(dǎo)航欄的制作，利用盒子模型拉開間距、hover效果添加后的內(nèi)邊距設(shè)定浮動(dòng)與定位浮動(dòng)：

4、float、clear、恢復(fù)塌陷的父容器高度。定位：一動(dòng)不動(dòng)的（static）,跟著別人跑的（absolute）,以自己為中心的（relative）,固定的（fixed）隨堂項(xiàng)目：導(dǎo)航欄左右布局的定位、二級(jí)菜單的實(shí)現(xiàn)、回到頂部的按鈕響應(yīng)式布局與頁面優(yōu)化處理移動(dòng)頁面與PC端頁面布局時(shí)候需要注意點(diǎn)、媒體查詢?cè)陧憫?yīng)式布局中的應(yīng)用、響應(yīng)式布局中彈性盒模型的設(shè)計(jì)技巧、各種瀏覽器對(duì)于 CSS樣式的支持情況、頁面優(yōu)化需要注意的地方、解決跨瀏覽器兼容性問題隨堂項(xiàng)目：移動(dòng)端的用戶注冊(cè)頁面、PC端的用戶注冊(cè)頁面。靜態(tài)頁面切 圖項(xiàng)目實(shí)戰(zhàn) 企業(yè)站實(shí)訓(xùn)：1.首頁導(dǎo)航、二級(jí)菜單2.banner輪播圖3.產(chǎn)品展示4.成功案

5、例5.新聞中心6.聯(lián)系方式7.友情 鏈接8.版權(quán)申明9.總結(jié)商城實(shí)訓(xùn)：1.首頁（頭部導(dǎo)航、分類搜索、秒殺產(chǎn)品、猜你喜歡、推薦商品）2.用戶中心（訂單、個(gè)人信息、收貨地址、賬單）3.商品詳情頁（展示圖、描述信息、促銷價(jià)格、細(xì)節(jié)展示、產(chǎn)品詳情）4.登錄&注冊(cè)頁面wEBtr端JavaScript交互核心語法JavaScript 的前世今生、javascript 語法、介紹html5認(rèn)識(shí)JavaScript、javascript中的對(duì)象、數(shù)組、變量、.流程控制(if else switch case while for ) 隨堂項(xiàng)目：九九乘法表、閏年計(jì)算、誰是高富帥( ifelse. Switch c

6、ase)BO% DO嘛作DO瀛作：讓一成不變的網(wǎng)頁動(dòng)起來；BO懶作：瀏覽器也有話要說隨堂項(xiàng)目：網(wǎng)頁時(shí)鐘的制作、回到頂部事件編程javascript 的事件機(jī)制：讓網(wǎng)頁回應(yīng)你的問候；常見的JS事件：?jiǎn)螕簟㈦p擊、移動(dòng)、懸停、焦點(diǎn)的獲取與失去、瀏覽器的關(guān)閉與加載隨堂項(xiàng)目：1.選不中的按鈕的實(shí)現(xiàn) 2.做一個(gè)計(jì)算器怎樣？ 3.商品圖片放大鏡效果正則表達(dá)式正則表達(dá)式的語法、利用正則表達(dá)式做字符匹配、面向?qū)ο缶幊蹋好撾x過程走向?qū)ο?隨堂項(xiàng)目：郵箱格式的驗(yàn)證、編寫一個(gè)獲取常見輸入數(shù)據(jù)的格式驗(yàn)證類。面向?qū)ο缶?程面向?qū)ο缶幊毯?jiǎn)介、對(duì)象的創(chuàng)建、繼承的實(shí)現(xiàn)、原型與原型鏈。隨堂項(xiàng)目：仿windows屏保氣泡JQuer

7、yJQuery基礎(chǔ)語法、JQuery選擇器、JQuery的BOM DO瀛作、事件編程、常見動(dòng)畫與自定義動(dòng)畫編程、常見Jquery插件使用。隨堂項(xiàng)目：打地鼠游戲、抽獎(jiǎng)輪盤制作JQ項(xiàng)目實(shí)戰(zhàn)圖片輪播、利用jQuery制作拼圖、貪吃蛇等項(xiàng)目實(shí)訓(xùn)Ajax技術(shù)Ajax技術(shù)介紹、json格式與XML格式詳解、Ajax的post與get兩種提交方式詳解、服務(wù)器端的數(shù)據(jù)反饋機(jī)制 說明、如何利用jQuery實(shí)現(xiàn)Ajax提交、跨域訪問的實(shí)現(xiàn)隨堂項(xiàng)目：用戶注冊(cè)、登錄的 Ajax無刷新實(shí)現(xiàn)、淘寶收貨地址中省市級(jí)聯(lián)的實(shí)現(xiàn)Bootstrapbootstrap 介紹、bootstrap 的柵格系統(tǒng)、CSS羊式、組件、boot

8、strap 的 javascript 插件 隨堂項(xiàng)目：利用bootstrap構(gòu)建移動(dòng)商城首頁、用戶注冊(cè)、登錄等頁面ECMAScript6 1.webpack介紹 2.webpackg 管用配置 3.模塊處理 module 6.3 種加載器loaders 的使用4.編譯器babel 5.插件plugins 6.熱更新次操作7.打項(xiàng)目最終包隨堂練習(xí)：新前端開發(fā)環(huán)境搭建課程模塊課程科目培訓(xùn)內(nèi)容WEBll端 移動(dòng) 端開發(fā)HTML5高級(jí)功能canvas標(biāo)簽的使用、多媒體在網(wǎng)頁中的使用、 HTML滸的智能表單、HTML井API的詳解(定位、數(shù)據(jù)庫存儲(chǔ)) 隨堂項(xiàng)目：利用智能表單實(shí)現(xiàn)注冊(cè)頁面、利用 canva

9、s繪制小星星、利用 HTML5新功能實(shí)現(xiàn)一個(gè)最近超市搜索 頁面。CSS3動(dòng)畫詳解CSS涮增選擇器、彈性盒模型、服務(wù)器字體、多重背景、邊框圖片、過渡動(dòng)畫與關(guān)鍵幀動(dòng)畫隨堂項(xiàng)目：Running Man 2.天天跑酷3.css 旋轉(zhuǎn)魔方WEBAP開發(fā)1 .移動(dòng)端頁面的設(shè)計(jì)要求2 .HTML5動(dòng)畫的常見使用場(chǎng)景3 .多媒體在頁面中的使用4 .商城項(xiàng)目首頁、用戶注冊(cè)、登錄、商品列表等頁面的實(shí)現(xiàn)5 .weui框架的介紹與使用隨堂項(xiàng)目：京東商城移動(dòng)端首頁在線答題系統(tǒng)微信公眾號(hào)開發(fā)(JSSDK1 .微信公眾號(hào)介紹與申請(qǐng)開發(fā)賬號(hào)2 .微信公眾號(hào)項(xiàng)目的官方文檔與 demo樣例全解析3 .調(diào)用微彳t官方API接口函數(shù)

10、4 .利用H5的新特性構(gòu)建更富有表現(xiàn)力的活動(dòng)頁面5 .常見微信分享、投票、活動(dòng)、抽獎(jiǎng)頁面的設(shè)計(jì)與實(shí)現(xiàn) 隨堂練習(xí)：非凡學(xué)院公眾號(hào)項(xiàng)目實(shí)踐微信小程序開發(fā)1.小程序賬號(hào)申請(qǐng)2.小程序開發(fā)環(huán)境搭建 3.小程序布局原理 4.小程序組件、API使用5.weUI使用 隨堂練習(xí)：商城小程序項(xiàng)目實(shí)戰(zhàn)Vue.js 1.Vue.js 簡(jiǎn)介2.模板語法3.指令系統(tǒng)4.組件開發(fā)5.生命周期6.腳手架工具7.路由8.數(shù)據(jù)請(qǐng)求隨堂練習(xí)：1.To Do List 項(xiàng)目實(shí)踐 2. Vue.js博客實(shí)戰(zhàn)WEE級(jí)框 架與后臺(tái) 交互Angular.js1.angular.js 簡(jiǎn)介2.MVC概念3.指令系統(tǒng)4. 表達(dá)式 5.數(shù)據(jù)綁定

11、6. 作用域隨堂練習(xí)：京東商城項(xiàng)目React.js 1.react.js 簡(jiǎn)介2.開發(fā)環(huán)境搭建3.jsx 語法 4.組件編程5.組件生命周期 6. 路由使用隨堂練習(xí)：餓了么點(diǎn)餐項(xiàng)目實(shí)戰(zhàn)PHP入門1.PHP語法簡(jiǎn)介2.函數(shù)3.會(huì)話控制4.面向?qū)ο缶幊?.常用MySQ晤句6.PHP鏈接數(shù)據(jù)庫7.通信接口 api 開發(fā)DedeCMS*詳細(xì)講解織夢(mèng)系統(tǒng)軟件的安裝、模板、插件等使用；修改頁面布局及細(xì)節(jié)；dede標(biāo)簽的使用方法；及如何替換、制作、修改、美化模板；熟練使用各類功能插件如社會(huì)化登錄、在線客服等技術(shù)；結(jié)業(yè)后可快速制作常見商業(yè)網(wǎng)站溝通 技能 和就 業(yè)指 導(dǎo)管理與溝通心態(tài)與服務(wù)、職場(chǎng)商務(wù)禮儀、溝通與口才強(qiáng)化、職業(yè)素養(yǎng)提升、團(tuán)隊(duì)合作就業(yè)指導(dǎo)畢業(yè)作品整理、行業(yè)規(guī)范與合同、職場(chǎng)與行業(yè)分析、企業(yè)觀模與規(guī)劃、職場(chǎng)崗位實(shí)戰(zhàn)模擬、創(chuàng)業(yè)指導(dǎo)、實(shí)習(xí)與 預(yù)工作1 .報(bào)名課程，贈(zèng)送視頻包、軟件包、素材包、材料包2 .報(bào)名課程，在學(xué)習(xí)過程中，學(xué)員有機(jī)會(huì)參加學(xué)院派接的訂單實(shí)戰(zhàn)特另U說明3 .零基礎(chǔ)，可以達(dá)到高級(jí)網(wǎng)頁前端開發(fā)和移動(dòng)端開發(fā)的程度，相當(dāng)于具有半年左右的工作經(jīng)驗(yàn)。4 .保證學(xué)會(huì)：出勤率達(dá) 90%以上，可享受1年內(nèi)免費(fèi)重新學(xué)習(xí)5 .考試認(rèn)證：網(wǎng)絡(luò)設(shè)計(jì)師、網(wǎng)頁前端工程師（費(fèi)用另付）6 .學(xué)習(xí)周期：平日班4個(gè)月；業(yè)余制10個(gè)月7 .招生要求：大學(xué)以上學(xué)歷（能力優(yōu)秀者可適當(dāng)放寬條件）上海非凡進(jìn)修