高级网页设计就业班
网页设计(web design，又称为Web UI design，WUI design，WUI)，是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化)，进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。
特色教学思维，培养学员能力
创想能力
站在设计巨人肩膀想创意，汇集众人智慧集思广益，避免闭门造车
文字能力
理解文案，能与工作团队更好地沟通协作，提高工作效率
表达能力
设计前的沟通，设计中的合作，设计后的阐述，增强项目提案能力
执行能力
流利掌握电脑操作设计，严格把控设计生产流程的能力
网页设计的学习内容
Dreamweaver
网页布局、制作；Html&Css简介；网站管理与维护、上传与**；案例分析
FlashC
经典网页动画、广告、片头、贺卡设计与分析；MTV制作、交互式网站简介
Fireworks
CI/LOGO/Banner的制作；美工设计、网页配色；常见网页动画制作、网页布局
Photoshop
Photoshop操作基础、图象优化处理、经典实例分析与制作
课程大纲
| 课程模块 | 课程科目 | 培训内容 | 课时 |
| **阶段（美学设计与软件技能） | |||
|
创意美术 (赠送) |
美术素描设计 | 透视原理、设计素描、速写的原理及实践、投影、视图、灯光表现、写生等 | 80 |
| 美术色彩设计 | 配色原理、设计水粉、光和影的写实手法、色彩搭配、审美观念，在设计中的具体运用 | ≤40 | |
| 手绘图标 | 二维剪影图标、三维写实图标手绘，掌握将创意思维转化为图形样式的能力 | ||
| 设计构成 | 设计构成 点线面构成形式和表现技巧，色彩与视觉原理，色彩三要素等 | ||
| 阶段考核 | 完成描素、色彩图各一张，培养手绘技法，色彩配色能力，审美能力及美学在设计中的运用 | ||
| 设计软件 | Photoshop | 学习图像处理软件的基础操作，掌握修图抠图、照片调色图像特效、尺寸裁剪等入门技巧 | 32 |
| PS高级 | 图像处理软件提高，掌握影楼级调色、海报创意、网页设计、仿真图标等高级技巧 | 32 | |
| Illustrator | 学习矢量图形软件的基础操作，掌握形状绘制、路径编辑、布尔运算、字符段落等入门技巧 | 32 | |
| AI高级 | 矢量图形软件提高，掌握字形设计、单页和折页版式、包装、扁平化图标等高级技巧 | 32 | |
| 阶段考核 | 本阶段考核嵌入到软件结课当日，采用模拟题目训练和案例实操考核 | 0 | |
| 第二阶段(WUI网页项目实训） | |||
| WUI网页项目实训 | 网页BANNER创意与设计 |
1.案例解析：多套Banner解析，掌握各种不同类型和风格的Banner设计 2.网页规范：了解网页组成部分，熟知网页文本规范，尺寸规范，让理论为实训做铺垫 3.精讲Banner：分别讲解Banner的组成元素及注意事项 4.构图方法：了解版面布局及排版技巧，能够对设计风格有一定的理论和欣赏基础 5.Banner实战：原创不同尺寸、不同风格的Banner设计 |
160 |
| 企业整站项目实战 |
1.网站流程：了解网站设计流程，定位网页设计的负责事项及项目的前后配合 2.规范梳理：从需求分析到栏目规划到用户体验，明确尺寸、文本、色调、间距等元素规范 3.绘制原型图：根据企业站需求分析，绘制网页原型图 4.设计样稿：根据原型图，设计企业站相关页面样稿 5.响应式设计：做一套可以适应当下不同设备浏览的响应式网站 6.添加动效：根据设计样稿，结合ADOBE XD制作交互动效，增强页面关联性，提升用户体验 |
||
| 电商风格项目实战 |
1.案例分析：熟知当下电商网页的设计潮流，了解模块划分的注意事项 2.如何选图：定位电商产品选图的风格，掌握电商选图的技巧 3.文案详解：讲解文案错位的技巧和凸显文案的方法，在文案排版和创意上体现主次 4.电商首页：定位两个方向，设计两款电商首页，涵盖不同风格，比如国风、拟物风等 5.电商详情：定位一款产品，设计一款电商详情页，了解详情页的展示模式和注意事项 |
||
| 专题页项目实战 |
1.专题概念：了解什么是专题页，激发专题设计灵感，解析细节排版奥妙 2.设计手法：掌握设计表现手法的技巧，并能在专题中灵活运用 3.空间层次：掌握构造空间层次的方法，提升网页品质，强化网页细节 4.堆砌素材：讲解堆砌素材的注意事项，提升合成类网页的协调性 5.专题设计：定位一个主题，设计一款当下流行风格的专题页 |
||
|
作品包装 阶段考核 |
1.作品包装：讲解作品包装的展示形式和注意事项，分析就业的方向，为未来就业准确定位 2.作品集：把所有包装作品整合作品集，达到完善、精致、全面，提升个人作品的档次 对学员综合能力的检验，按要求设计出指定内容，并针对设计成果进行评定和讲解。 |
||
| 课程模块 | 课程科目 | 培训内容 | 课时 |
| 第三阶段（WEB前端布局与交互开发） | |||
|
WEB前端 （H5网页布局） |
HTML标签梳理 |
1.5分钟上手Hbuilder软件，对HTML5和CSS3有初步的了解和认识 2.掌握HTML5九大基本标签，包括标题、图像、音频、视频等 3.掌握HTML5智能表单基本标签和智能表单扩展标签 |
80 |
|
七组CSS 基本样式 |
1.讲解CSS三大引用方式，包括行内样式、内部样式表和外部样式表 2.CSS七类样式详解，包括背景、文本、字体、链接、列表、表格、边框样式 |
||
| CSS3炫酷特效 |
1.掌握CSS3四大“变形金刚”，旋转、扭曲、缩放和位移 2.CSS3过渡属性详解，**过渡属性完成网页漂亮的交互效果 3.CSS3动画特效讲解，**动画属性可以做多个状态交互的网页炫酷特效 |
||
| 选择器细解11大类 |
1.掌握CSS五类常用选择器，包括通用选择器、ID选择器、类选择器等 2.三代关系选择器详解，包括子元素选择器、兄弟选择器、后代选择器 3.CSS3伪类选择器和伪元素选择器详解，可以多样化的自由选择网页元素对象 |
||
|
CSS布局 四大技巧 |
1.掌握多列属性布局技巧,三种定位方式，绝对定位、相对定位和固定定位 2.五句话吃透盒模型，清楚盒模型的计算和浏览器兼容性中的注意事项 3.左浮动和右浮动的设置以及如何清除浮动以达到父级自动扩高问题 |
||
| 响应式双法则 |
1.了解媒体查询的引用方式，包括内部样式表、外部样式表等 2.掌握媒体查询使用方法，了解关键词的使用技巧 3.了解根元素的字号适配，**字号设置完成响应式页面 |
||
|
兼容性 调试技巧 |
1.CSS优化减肥技巧，包括图片优化和代码优化，提升网页的加载速度 2.了解CSS优先级的计算，解决样式覆盖问题 3.掌握兼容性调试技巧，如何能够让代码兼容各大主流浏览器 |
||
|
项目实战 提经验 |
1.熟悉PS切图技巧，如切片切图、选区切图等，以及网页项目的正规创建 2.页面布局规范讲解，从整体到局部的规划，先标签后样式的代码顺序等 3.完成三大项目实战，企业站，商城站和响应式页面，能够独立完成H5静态页面 |
||
| WEB前端JavaScript 交互 | 核心语法 |
1.掌握JS的组成和语法,为进去代码的世界做铺垫,数据结构,不再看见代码而发愁 2.对象的创建方式和this详解,提前带你熟悉企业中变量的命名规则和规范 3.熟悉JS中的数据类型,流程控制,循环语句,轻松让你在网页上写出九九乘法表,计算器等 |
136 |
| 面向对象编程 |
1.掌握面向对象和面向过程,熟悉JS的精髓;深拷贝和浅拷贝,让你知道更加底层的代码 2.原型和原型链,JavaScript**重要的核心,让你写的代码复用性更强 3.企业开发中沙箱模式,了解企业中是怎么团队合作开发 |
||
| 对象类型 |
1.基本数据类型(number、string、boolean、undefined、null) 2.引用数据类型( 数组 array .. 函数 function ... 对象 object) 3.掌握不同对象类型之间的转换 |
||
| BOM与DOM操作 |
1.DOM操作和BOM操作大全,轻松操作网页上的每一个按钮等,同时给他们加上不同的功能 2.利用JavaScript代码实现酷炫特效,京东首页轮播图升级版 3.页面布局,结合H5代码,让你的网页功能更加全面,可以1:1写出小米**首页及功能 4.熟悉事件处理,让你的代码更加严谨,相同的页面效果,写的代码更少 5.浏览器兼容性处理,让市面上的不同浏览器品牌,打开你的网页效果不会有差别 |
||
| 事件编程 |
1.Javascript的事件机制,了解底层,才能写出更严谨的代码,企业开发常见事件的使用详解 2.offset家族和scroll家族,了解浏览器和代码之间的关系 3.键盘事件及键盘码的属性,让你的键盘能和钢琴一样,按下之后有不同的声音 |
||
| 正则表达式 |
1.创建正则表达式,从零开始写表单验证,轻松还原百度注册功能 2.正则的3大核心：字符串类元字符、边界类元字符、量词类元字符,让你写的验证功能更强大 3.正则的使用和替换,随心所以换校验规则 4.完整版表单校验,提前进入企业实战开发 |
||
| JQuery交互特效开发 |
1.jQuery的优势介绍,jQuery选择器,让你**快半个月搭建一个简单网站 2.jQuery中的动画详解,让你的网页不再单调,贪吃蛇,水果忍者,都能**代码写出来 3.链式编程和隐式迭代,了解jQuery的底层核心 4.JQuery插件使用和制作,自己也能制作酷炫动画插件,使用插件1分钟做出京东轮播图效果 |
||
| Ajax数据交互 |
1.Ajax技术介绍,json格式与XML格式详解,现在的技术和历史技术的区别,教你如何链接服务器 2.Ajax中post与get两种请求方式详解,2种方式从后台服务器拿数据 3.JSON数据分析,了解后端数据是怎么写的,不再盲目的被后端程序员怼 4.解决跨域访问的方法,让你的网页在任何协议都能访问,无论是http协议还是https 5.企业接口化开发详解,提前进入实战化开发 |
||
|
HTML5 高级功能 |
1.画布标签canvas.了解如何绘制并填充线条（形状）,文字及图片。完成你画我猜小游戏 2.多媒体（音频，视频）标签的实际使用。开发并完成自己的网易音乐播放器 3.强化练习智能化表单以及和完成后台的数据交互。完成带有图片验证码功能的登录操作 4.本地存储（cookies,sessionStorage,localStorage）。一周免登陆是如何实现的 |
||
| WEBAPP开发 |
1.视口viewport（手机浏览器中的虚拟窗口）为何手机中的网页有的能缩放尔有些不能 2.移动端的事件交互：触摸事件（touchstart/mov/end/cancel）。完成京东商城分类页 3.另一种布局方式：弹性布局（flexbox） 随堂项目：商城移动端首页、在线答题系统 |
||
| Bootstrap |
1.Bootstrap开发优缺点介绍,如何**模板搭建网站 2.响应式开发原理,无论电脑、手机、平板等,都能适应屏幕 3.Bootstrap框架的使用,4个口诀让你做出标准官方首页样式 4.Bootstrap的栅格系统详解,不同屏幕尺寸,显示不同的效果 5.Bootstrap的Javascript插件使用,掌握不同网页按钮和输入框更换样式和颜色 |
||
| ECMAScript6 |
1.ES5中的严格模式,让代码自己检查自己 2.ES6中的新语法详解,面试必问的语法 3.实际开发中**常用的箭头函数,解构赋值和字符串模板,让你代码更加简洁 4.定义变量的新方式LET和const,让你与企业开发同步 |
||
| 课程模块 | 课程科目 | 培训内容 | 课时 |
| 第四阶段（WEB移动端开发和后台交互开发） | |||
|
WEB 移动端开发 |
git版本控制 | 1.什么是版本控制,为什么用git.了解今后工作中是如何获取项目源代码的。 | 152 |
| 2.git常用指令(建立仓库，获取**版本代码，提交代码)。 | |||
| 3.使用可视化工具TortoiseGit进行git的常规操作。 | |||
|
微信公众号 开发（JSSDK） |
1.微信公众号介绍与申请开发账号 | ||
| 2.调用微信官方API接口函数 | |||
| 3.常见微信分享、投票、扫一扫、定位打卡等的设计与实现 随堂项目：企业公众号项目实践 | |||
|
微信小程序 开发 |
1.小程序相关介绍及账号申请\小程序开发环境搭建 3.小程序组件开发、API使用 2.WEUI,有赞Vant使用、云存储、云数据库 （文件，图片上传功能实战） |
||
|
网校实训项目： 1.建立云开发环境 2.网校首页 3.课程详情页 4.日历组件（课程表） 5.个人中心（头像上传） 6.获取用户权限登录 7.打卡签到 8.日程提醒等 |
|||
| 独立项目实训 |
基于MUI实训中学员的项目，独立开发 使学员能够在自己的微信中进行演示，符合就业要求 |
||
| 阶段考核 | 教师指导你完成阶段作品，以备应聘时使用；从立案到素材、材料收集整理，再到风格定位、栏目规划，独立完成项目作品，其中需容入不同的分类信息、作品等； | ||
| Node.js★ |
基础介绍★ 模块系统★ 事件和接口★ |
1.什么是node.js,node.js的介绍,npm使用介绍 2.安装配置**个node.js应用.创建模块.模块加载 3.事件驱动程序,GET请求与POST请求.获取请求参数 |
48 |
| web模块★ |
1.什么是 Web 服务器。使学员了解我们制作的网页是怎么被别人访问到的。 2.使用 Node 创建 Web 服务器 3.使用 Node 创建 Web 客户端 |
||
| mysql基础语法 |
1.数据库基本语法与基本操作（增删改查） 2.利用node.js的mysql模块进行数据库操作实现接口功能 3.用户登录,网易163的10天免登录功能的真正实现方式 |
||
| Express框架★ |
1.Express 简介与安装，开始你的**个express项目，创建及启动项目 2.请求和响应，路由，中间件，文件上传及cookie管理等。 |
||
| 第五阶段（WEB高级框架） | |||
| WEB高级框架与后台交互 | Vue.js ★ |
1.Vue.js简介与安装,初始化Vue实例 2.Vue三大基础语法：数据绑定，列表渲染，条件渲染 3.监听属性与侦听器。快速实现购物车中的总价，总数的计算 随堂练习：实现购物车的三部曲 |
128 |
|
1.生命周期的钩子函数（vue页面的4个关键阶段） 2.自定义组件开发，数据的传递与自定义事件 3.过渡与动画,数据请求工具axios的使用 随堂练习：用户是怎么把商品加入购物车，Sku商品规格 |
|||
|
1.脚手架vue-cli,搭建项目的基础骨架.了解大型网站项目是如何诞生的 2.路由router,网站页面间是如何跳转的.了解为什么现在的网页都没有.html了 3.状态管理vuex,全局管理及维护网站的简单数据.让学员明白网站为什么可以1个月都不用自己登录 4.自动打包工具webpack.掌握完成的项目是如何发布到正式环境的 |
|||
|
1.路由简介,两大常规路由操作：动态路由，嵌套路由.掌握企业(电商)后台网站的布局及跳转方法 2.编程式导航,实现页面跳转的两种操作方法：声明式和编程式 3.命名路由与命名视图,路由的传参. 掌握从商品列表跳转到商品详情页如何显示对应的数据及评论 4.导航守卫.掌握淘宝在搜索商品前必须先登录的功能实现 |
|||
|
1.什么是Vuex,Vue.js的状态管理模式 2.Vuex的五个核心属性：state, getters, mutations, actions, modules 3.**学习vuex 掌握初步的网站1个月免登录功能实现。 |
|||
| 商城项目实训：1.搭建vue开发环境 2.商城首页 3.商品详情页 4.购物车 5.个人中心 6.商品分类 7.用户登录 8.商城打包上线。 | |||
|
1.elment-ui简介，安装element-ui 2.主题设置，常用组件 3.element-admin 后台管理项目系统实践 |
|||
|
独立项目实训 基于MUI实训中学员的项目，独立开发 使学员能够在独立的服务器中进行演示，符合就业要求 |
|||
| 1.Vue3.0新特新介绍、组合api、setup,reactive,ref等 | |||
| React.js ★ |
1.react.js简介,开发环境脚手架的搭建. 2.基础概念介绍,遍历数组,实现一个vue的v-model功能 3.样式绑定,组件的开发,属性与自定义事件。 随堂练习：饿了么点餐项目实战 |
40 | |
| 阶段考核 | 教师指导你完成阶段作品，以备应聘时使用；从立案到素材、材料收集整理，再到风格定位、栏目规划，独立完成项目作品，其中需容入不同的分类信息、作品等； | ||
| 第六阶段（岗前强化与就业指导） | |||
|
选修课程 （线上） |
Dreamweaver |
学习专业网页设计软件的基础操作，掌握样式、编排、输出等入门技巧 （报名Adobe设计师认证时，免费赠送线上课程及辅导课程） |
32 |
|
PPT 专项训练 |
使学员掌握幻灯片制作从基础到提高、并结合项目提案，完成方案设计和汇报 | 16 | |
| 职业规划 | 职业素养 | 心态与服务、职场商务礼仪、沟通与口才强化、职业素养提升、团队合作 | 24 |
| 就业指导 | 毕业作品整理、行业规范与合同、职场与行业分析、企业观模与规划、职场岗位实战模拟、创业指导、实习与预工作 | ||
| 培训目标和发展方向 |
培训目标：**学习，能运用H5+JS进行开发前端交互设计能力，开发各种网页框架；学生能熟练掌握门户网站，电子商务网站，企事业单位网站，垂直类网站等成套商业网站的设计流程，设计理念，设计风格等；学员基本上具备半年以上的工作经验。 发展方向：网页美工、界面设计、web设计、web前端、移动端开发、全栈开发、前端架构等工作 |
||
