高級網頁設計培訓

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

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

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

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