高級網(wǎng)頁設(shè)計培訓(xùn)

第一階段（美學(xué)設(shè)計與軟件技能）
創(chuàng)意美術(shù)
美術(shù)素描設(shè)計 透視原理、設(shè)計素描、速寫的原理及實(shí)踐、投影、視圖、燈光表現(xiàn)、寫生等
美術(shù)色彩設(shè)計 配色原理、設(shè)計水粉、光和影的寫實(shí)手法、色彩搭配、審美觀念，在設(shè)計中的具體運(yùn)用
手繪圖標(biāo) 二維剪影圖標(biāo)、三維寫實(shí)圖標(biāo)手繪，掌握將創(chuàng)意思維轉(zhuǎn)化為圖形樣式的能力
設(shè)計構(gòu)成 設(shè)計構(gòu)成 點(diǎn)線面構(gòu)成形式和表現(xiàn)技巧，色彩與視覺原理，色彩三要素等
階段考核 完成描素、色彩圖各一張，培養(yǎng)手繪技法，色彩配色能力，審美能力及美學(xué)在設(shè)計中的運(yùn)用
設(shè)計軟件 Photoshop 學(xué)習(xí)圖像處理軟件的基礎(chǔ)操作，掌握修圖摳圖、照片調(diào)色圖像特效、尺寸裁剪等入門技巧
PS高級 圖像處理軟件提高，掌握影樓級調(diào)色、海報創(chuàng)意、網(wǎng)頁設(shè)計、仿真圖標(biāo)等高級技巧
Illustrator 學(xué)習(xí)矢量圖形軟件的基礎(chǔ)操作，掌握形狀繪制、路徑編輯、布爾運(yùn)算、字符段落等入門技巧
AI高級 矢量圖形軟件提高，掌握字形設(shè)計、單頁和折頁版式、包裝、扁平化圖標(biāo)等高級技巧
階段考核 本階段考核嵌入到軟件結(jié)課當(dāng)日，采用模擬題目訓(xùn)練和案例實(shí)操考核
第二階段(WUI網(wǎng)頁項(xiàng)目實(shí)訓(xùn)）
WUI網(wǎng)頁項(xiàng)目實(shí)訓(xùn) 網(wǎng)頁BANNER創(chuàng)意與設(shè)計
1.案例解析：多套Banner解析，掌握各種不同類型和風(fēng)格的Banner設(shè)計
2.網(wǎng)頁規(guī)范：了解網(wǎng)頁組成部分，熟知網(wǎng)頁文本規(guī)范，尺寸規(guī)范，讓理論為實(shí)訓(xùn)做鋪墊
3.精講Banner：分別講解Banner的組成元素及注意事項(xiàng)
4.構(gòu)圖方法：了解版面布局及排版技巧，能夠?qū)υO(shè)計風(fēng)格有一定的理論和欣賞基礎(chǔ)
5.Banner實(shí)戰(zhàn)：原創(chuàng)不同尺寸、不同風(fēng)格的Banner設(shè)計
企業(yè)整站項(xiàng)目實(shí)戰(zhàn)
1.網(wǎng)站流程：了解網(wǎng)站設(shè)計流程，定位網(wǎng)頁設(shè)計的負(fù)責(zé)事項(xiàng)及項(xiàng)目的前后配合
2.規(guī)范梳理：從需求分析到欄目規(guī)劃到用戶體驗(yàn)，明確尺寸、文本、色調(diào)、間距等元素規(guī)范
3.繪制原型圖：根據(jù)企業(yè)站需求分析，繪制網(wǎng)頁原型圖
4.設(shè)計樣稿：根據(jù)原型圖，設(shè)計企業(yè)站相關(guān)頁面樣稿
5.響應(yīng)式設(shè)計：做一套可以適應(yīng)當(dāng)下不同設(shè)備瀏覽的響應(yīng)式網(wǎng)站
6.添加動效：根據(jù)設(shè)計樣稿，結(jié)合ADOBE XD制作交互動效，增強(qiáng)頁面關(guān)聯(lián)性，提升用戶體驗(yàn)
電商風(fēng)格項(xiàng)目實(shí)戰(zhàn) 1.案例分析：熟知當(dāng)下電商網(wǎng)頁的設(shè)計潮流，了解模塊劃分的注意事項(xiàng)
2.如何選圖：定位電商產(chǎn)品選圖的風(fēng)格，掌握電商選圖的技巧
3.文案詳解：講解文案錯位的技巧和凸顯文案的方法，在文案排版和創(chuàng)意上體現(xiàn)主次
4.電商首頁：定位兩個方向，設(shè)計兩款電商首頁，涵蓋不同風(fēng)格，比如國風(fēng)、擬物風(fēng)等
5.電商詳情：定位一款產(chǎn)品，設(shè)計一款電商詳情頁，了解詳情頁的展示模式和注意事項(xiàng)
專題頁項(xiàng)目實(shí)戰(zhàn)
1.專題概念：了解什么是專題頁，激發(fā)專題設(shè)計靈感，解析細(xì)節(jié)排版奧妙
2.設(shè)計手法：掌握設(shè)計表現(xiàn)手法的技巧，并能在專題中靈活運(yùn)用
3.空間層次：掌握構(gòu)造空間層次的方法，提升網(wǎng)頁品質(zhì)，強(qiáng)化網(wǎng)頁細(xì)節(jié)
4.堆砌素材：講解堆砌素材的注意事項(xiàng)，提升合成類網(wǎng)頁的協(xié)調(diào)性
5.專題設(shè)計：定位一個主題，設(shè)計一款當(dāng)下流行風(fēng)格的專題頁
作品包裝
階段考核
1.作品包裝：講解作品包裝的展示形式和注意事項(xiàng)，分析就業(yè)的方向，為未來就業(yè)準(zhǔn)確定位
2.作品集：把所有包裝作品整合作品集，達(dá)到完善、精致、全面，提升個人作品的檔次
對學(xué)員綜合能力的檢驗(yàn)，按要求設(shè)計出指定內(nèi)容，并針對設(shè)計成果進(jìn)行評定和講解。

第三階段（WEB前端布局與交互開發(fā)）
WEB前端
（H5網(wǎng)頁布局） HTML標(biāo)簽梳理 1.5分鐘上手Hbuilder軟件，對HTML5和CSS3有初步的了解和認(rèn)識
2.掌握HTML5九大基本標(biāo)簽，包括標(biāo)題、圖像、音頻、視頻等
3.掌握HTML5智能表單基本標(biāo)簽和智能表單擴(kuò)展標(biāo)簽
七組CSS
基本樣式 1.講解CSS三大引用方式，包括行內(nèi)樣式、內(nèi)部樣式表和外部樣式表
2.CSS七類樣式詳解，包括背景、文本、字體、鏈接、列表、表格、邊框樣式
CSS3炫酷特效
1.掌握CSS3四大“變形金剛”，旋轉(zhuǎn)、扭曲、縮放和位移
2.CSS3過渡屬性詳解，通過過渡屬性完成網(wǎng)頁漂亮的交互效果
3.CSS3動畫特效講解，通過動畫屬性可以做多個狀態(tài)交互的網(wǎng)頁炫酷特效
選擇器細(xì)解11大類
1.掌握CSS五類常用選擇器，包括通用選擇器、ID選擇器、類選擇器等
2.三代關(guān)系選擇器詳解，包括子元素選擇器、兄弟選擇器、后代選擇器
3.CSS3偽類選擇器和偽元素選擇器詳解，可以多樣化的自由選擇網(wǎng)頁元素對象
CSS布局
四大技巧
1.掌握多列屬性布局技巧,三種定位方式，絕對定位、相對定位和固定定位
2.五句話吃透盒模型，清楚盒模型的計算和瀏覽器兼容性中的注意事項(xiàng)
3.左浮動和右浮動的設(shè)置以及如何清除浮動以達(dá)到父級自動擴(kuò)高問題
響應(yīng)式雙法則
1.了解媒體查詢的引用方式，包括內(nèi)部樣式表、外部樣式表等
2.掌握媒體查詢使用方法，了解關(guān)鍵詞的使用技巧
3.了解根元素的字號適配，通過字號設(shè)置完成響應(yīng)式頁面
兼容性
調(diào)試技巧 1.CSS優(yōu)化減肥技巧，包括圖片優(yōu)化和代碼優(yōu)化，提升網(wǎng)頁的加載速度
2.了解CSS優(yōu)先級的計算，解決樣式覆蓋問題
3.掌握兼容性調(diào)試技巧，如何能夠讓代碼兼容各大主流瀏覽器
項(xiàng)目實(shí)戰(zhàn)
提經(jīng)驗(yàn)
1.熟悉PS切圖技巧，如切片切圖、選區(qū)切圖等，以及網(wǎng)頁項(xiàng)目的正規(guī)創(chuàng)建
2.頁面布局規(guī)范講解，從整體到局部的規(guī)劃，先標(biāo)簽后樣式的代碼順序等
3.完成三大項(xiàng)目實(shí)戰(zhàn)，企業(yè)站，商城站和響應(yīng)式頁面，能夠獨(dú)立完成H5靜態(tài)頁面
WEB前端JavaScript 交互
核心語法
1.掌握J(rèn)S的組成和語法,為進(jìn)去代碼的世界做鋪墊,數(shù)據(jù)結(jié)構(gòu),不再看見代碼而發(fā)愁
2.對象的創(chuàng)建方式和this詳解,提前帶你熟悉企業(yè)中變量的命名規(guī)則和規(guī)范
3.熟悉JS中的數(shù)據(jù)類型,流程控制,循環(huán)語句,輕松讓你在網(wǎng)頁上寫出九九乘法表,計算器等
面向?qū)ο缶幊?
1.掌握面向?qū)ο蠛兔嫦蜻^程,熟悉JS的精髓;深拷貝和淺拷貝,讓你知道更加底層的代碼
2.原型和原型鏈,JavaScript重要的核心,讓你寫的代碼復(fù)用性更強(qiáng)
3.企業(yè)開發(fā)中沙箱模式,了解企業(yè)中是怎么團(tuán)隊合作開發(fā)
對象類型 1.基本數(shù)據(jù)類型(number、string、boolean、undefined、null)
2.引用數(shù)據(jù)類型( 數(shù)組 array .. 函數(shù) function ... 對象 object)
3.掌握不同對象類型之間的轉(zhuǎn)換
BOM與DOM操作
1.DOM操作和BOM操作大全,輕松操作網(wǎng)頁上的每一個按鈕等,同時給他們加上不同的功能
2.利用JavaScript代碼實(shí)現(xiàn)酷炫特效,京東首頁輪播圖升級版
3.頁面布局,結(jié)合H5代碼,讓你的網(wǎng)頁功能更加全面,可以1:1寫出小米官網(wǎng)首頁及功能
4.熟悉事件處理,讓你的代碼更加嚴(yán)謹(jǐn),相同的頁面效果,寫的代碼更少
5.瀏覽器兼容性處理,讓市面上的不同瀏覽器品牌,打開你的網(wǎng)頁效果不會有差別
事件編程
1.Javascript的事件機(jī)制,了解底層,才能寫出更嚴(yán)謹(jǐn)?shù)拇a,企業(yè)開發(fā)常見事件的使用詳解
2.offset家族和scroll家族,了解瀏覽器和代碼之間的關(guān)系
3.鍵盤事件及鍵盤碼的屬性,讓你的鍵盤能和鋼琴一樣,按下之后有不同的聲音
正則表達(dá)式
1.創(chuàng)建正則表達(dá)式,從零開始寫表單驗(yàn)證,輕松還原百度注冊功能
2.正則的3大核心：字符串類元字符、邊界類元字符、量詞類元字符,讓你寫的驗(yàn)證功能更強(qiáng)大
3.正則的使用和替換,隨心所以換校驗(yàn)規(guī)則
4.完整版表單校驗(yàn),提前進(jìn)入企業(yè)實(shí)戰(zhàn)開發(fā)
JQuery交互特效開發(fā) 1.jQuery的優(yōu)勢介紹,jQuery選擇器,讓你快半個月搭建一個簡單網(wǎng)站
2.jQuery中的動畫詳解,讓你的網(wǎng)頁不再單調(diào),貪吃蛇,水果忍者,都能通過代碼寫出來
3.鏈?zhǔn)骄幊毯碗[式迭代,了解jQuery的底層核心
4.JQuery插件使用和制作,自己也能制作酷炫動畫插件,使用插件1分鐘做出京東輪播圖效果
Ajax數(shù)據(jù)交互
1.Ajax技術(shù)介紹,json格式與XML格式詳解,現(xiàn)在的技術(shù)和歷史技術(shù)的區(qū)別,教你如何鏈接服務(wù)器
2.Ajax中post與get兩種請求方式詳解,2種方式從后臺服務(wù)器拿數(shù)據(jù)
3.JSON數(shù)據(jù)分析,了解后端數(shù)據(jù)是怎么寫的,不再盲目的被后端程序員懟
4.解決跨域訪問的方法,讓你的網(wǎng)頁在任何協(xié)議都能訪問,無論是http協(xié)議還是https
5.企業(yè)接口化開發(fā)詳解,提前進(jìn)入實(shí)戰(zhàn)化開發(fā)
HTML5
高級功能 1.畫布標(biāo)簽canvas.了解如何繪制并填充線條（形狀）,文字及圖片。完成你畫我猜小游戲
2.多媒體（音頻，視頻）標(biāo)簽的實(shí)際使用。開發(fā)并完成自己的網(wǎng)易音樂播放器
3.強(qiáng)化練習(xí)智能化表單以及和完成后臺的數(shù)據(jù)交互。完成帶有圖片驗(yàn)證碼功能的登錄操作
4.本地存儲（cookies,sessionStorage,localStorage）。一周免登陸是如何實(shí)現(xiàn)的
WEBAPP開發(fā)
1.視口viewport（手機(jī)瀏覽器中的虛擬窗口）為何手機(jī)中的網(wǎng)頁有的能縮放爾有些不能
2.移動端的事件交互：觸摸事件（touchstart/mov/end/cancel）。完成京東商城分類頁
3.另一種布局方式：彈性布局（flexbox）
隨堂項(xiàng)目：商城移動端首頁、在線答題系統(tǒng)
Bootstrap 1.Bootstrap開發(fā)優(yōu)缺點(diǎn)介紹,如何通過模板搭建網(wǎng)站
2.響應(yīng)式開發(fā)原理,無論電腦、手機(jī)、平板等,都能適應(yīng)屏幕
3.Bootstrap框架的使用,4個口訣讓你做出標(biāo)準(zhǔn)官方首頁樣式
4.Bootstrap的柵格系統(tǒng)詳解,不同屏幕尺寸,顯示不同的效果
5.Bootstrap的Javascript插件使用,掌握不同網(wǎng)頁按鈕和輸入框更換樣式和顏色
ECMAScript6
1.ES5中的嚴(yán)格模式,讓代碼自己檢查自己
2.ES6中的新語法詳解,面試必問的語法
3.實(shí)際開發(fā)中常用的箭頭函數(shù),解構(gòu)賦值和字符串模板,讓你代碼更加簡潔
4.定義變量的新方式LET和const,讓你與企業(yè)開發(fā)同步

第四階段（WEB移動端開發(fā)和后臺交互開發(fā)）
WEB
移動端開發(fā) git版本控制
1.什么是版本控制,為什么用git.了解今后工作中是如何獲取項(xiàng)目源代碼的。
2.git常用指令(建立倉庫，獲取新版本代碼，提交代碼)。
3.使用可視化工具TortoiseGit進(jìn)行g(shù)it的常規(guī)操作。
微信公眾號
開發(fā)（JSSDK）
1.微信公眾號介紹與申請開發(fā)賬號
2.調(diào)用微信官方API接口函數(shù)
3.常見微信分享、投票、掃一掃、定位打卡等的設(shè)計與實(shí)現(xiàn) 隨堂項(xiàng)目：企業(yè)公眾號項(xiàng)目實(shí)踐
微信小程序
開發(fā)
1.小程序相關(guān)介紹及賬號申請\小程序開發(fā)環(huán)境搭建
3.小程序組件開發(fā)、API使用
2.WEUI,有贊Vant使用、云存儲、云數(shù)據(jù)庫 （文件，圖片上傳功能實(shí)戰(zhàn)）
網(wǎng)校實(shí)訓(xùn)項(xiàng)目：
1.建立云開發(fā)環(huán)境
2.網(wǎng)校首頁
3.課程詳情頁
4.日歷組件
5.個人中心（頭像上傳）
6.獲取用戶權(quán)限登錄
7.打卡簽到
8.日程提醒等
獨(dú)立項(xiàng)目實(shí)訓(xùn) 基于MUI實(shí)訓(xùn)中學(xué)員的項(xiàng)目，獨(dú)立開發(fā)

Node.js★ 基礎(chǔ)介紹★
模塊系統(tǒng)★
事件和接口★ 1.什么是node.js,node.js的介紹,npm使用介紹
2.安裝配置第一個node.js應(yīng)用.創(chuàng)建模塊.模塊加載
3.事件驅(qū)動程序,GET請求與POST請求.獲取請求參數(shù)
web模塊★
1.什么是 Web 服務(wù)器。使學(xué)員了解我們制作的網(wǎng)頁是怎么被別人訪問到的。
2.使用 Node 創(chuàng)建 Web 服務(wù)器
3.使用 Node 創(chuàng)建 Web 客戶端
mysql基礎(chǔ)語法
1.數(shù)據(jù)庫基本語法與基本操作（增刪改查）
2.利用node.js的mysql模塊進(jìn)行數(shù)據(jù)庫操作實(shí)現(xiàn)接口功能
3.用戶登錄,網(wǎng)易163的10天免登錄功能的真正實(shí)現(xiàn)方式
Express框架★
1.Express 簡介與安裝，開始你的第一個express項(xiàng)目，創(chuàng)建及啟動項(xiàng)目
2.請求和響應(yīng)，路由，中間件，文件上傳及cookie管理等。
第五階段（WEB高級框架）
WEB高級框架與后臺交互 Vue.js ★ 1.Vue.js簡介與安裝,初始化Vue實(shí)例
2.Vue三大基礎(chǔ)語法：數(shù)據(jù)綁定，列表渲染，條件渲染
3.監(jiān)聽屬性與偵聽器。快速實(shí)現(xiàn)購物車中的總價，總數(shù)的計算
隨堂練習(xí)：實(shí)現(xiàn)購物車的三部曲
1.生命周期的鉤子函數(shù)（vue頁面的4個關(guān)鍵階段）
2.自定義組件開發(fā)，數(shù)據(jù)的傳遞與自定義事件
3.過渡與動畫,數(shù)據(jù)請求工具axios的使用
隨堂練習(xí)：用戶是怎么把商品加入購物車，Sku商品規(guī)格
1.腳手架vue-cli,搭建項(xiàng)目的基礎(chǔ)骨架.了解大型網(wǎng)站項(xiàng)目是如何誕生的
2.路由router,網(wǎng)站頁面間是如何跳轉(zhuǎn)的.了解為什么現(xiàn)在的網(wǎng)頁都沒有.html了
3.狀態(tài)管理vuex,全局管理及維護(hù)網(wǎng)站的簡單數(shù)據(jù).讓學(xué)員明白網(wǎng)站為什么可以1個月都不用自己登錄
4.自動打包工具webpack.掌握完成的項(xiàng)目是如何發(fā)布到正式環(huán)境的
1.路由簡介,兩大常規(guī)路由操作：動態(tài)路由，嵌套路由.掌握企業(yè)(電商)后臺網(wǎng)站的布局及跳轉(zhuǎn)方法
2.編程式導(dǎo)航,實(shí)現(xiàn)頁面跳轉(zhuǎn)的兩種操作方法：聲明式和編程式
3.命名路由與命名視圖,路由的傳參. 掌握從商品列表跳轉(zhuǎn)到商品詳情頁如何顯示對應(yīng)的數(shù)據(jù)及評論
4.導(dǎo)航守衛(wèi).掌握淘寶在搜索商品前必須先登錄的功能實(shí)現(xiàn)
1.什么是Vuex,Vue.js的狀態(tài)管理模式
2.Vuex的五個核心屬性：state, getters, mutations, actions, modules
3.通過學(xué)習(xí)vuex 掌握初步的網(wǎng)站1個月免登錄功能實(shí)現(xiàn)。
商城項(xiàng)目實(shí)訓(xùn)：1.搭建vue開發(fā)環(huán)境 2.商城首頁 3.商品詳情頁 4.購物車 5.個人中心 6.商品分類 7.用戶登錄 8.商城打包上線。
1.elment-ui簡介，安裝element-ui
2.主題設(shè)置，常用組件
3.element-admin 后臺管理項(xiàng)目系統(tǒng)實(shí)踐
獨(dú)立項(xiàng)目實(shí)訓(xùn)
基于MUI實(shí)訓(xùn)中學(xué)員的項(xiàng)目，獨(dú)立開發(fā)
使學(xué)員能夠在獨(dú)立的服務(wù)器中進(jìn)行演示，符合就業(yè)要求
1.Vue3.0新特新介紹、組合api、setup,reactive,ref等
React.js ★ 1.react.js簡介,開發(fā)環(huán)境腳手架的搭建.
2.基礎(chǔ)概念介紹,遍歷數(shù)組,實(shí)現(xiàn)一個vue的v-model功能
3.樣式綁定,組件的開發(fā),屬性與自定義事件。