Web全栈工程师就业班培训内容：
1.美工设计：设计美学、色彩搭配、网页创意思维、网页设计软件、网页元素设计、网页界面设计、商业项目设计实训、阶段考核
2.前端开发：HTML5+CSS3布局与样式、JavaScript交互开发、Web前端整站项目实训
3.移动端开发: H5高级功能、CSS3动画详解、webAPP开发、公众号开发、小程序开发、Vue.js实战运用、阶段考核等
4.高级框架与后台交互：Angular.js、React.js、PHP入门、DedeCMS等综合应用
5.就业指导：心态与服务、商务礼仪、毕业设计、行业分析、面试技巧、实习工作等
培训目标：能系统全面的学习界面设计、前端开发、移动端开发、后台交互开发、网页美工设计，结业后相当于有半年左右工作经验，能成功胜任设计、前端、移动端开发等职位。
认证证书：《网页设计师》《网页美工设计师》《Web前端工程师》
......
网页设计知识分享：划重点：网页设计中的布局
网页设计中的布局可以从两个角度来看：设计视角和前端视角。本篇文章主要侧重分析前端视角，由于设计视角比较好理解，所以不做太多的赘述。
先说下设计视角吧，这个zui贴近设计师，比较好理解。
设计视角主要是从网页的排版角度去进行分类，大致分为四种：上下布局、左右布局、国字形布局和T字形布局。
上下布局是zui常见的布局方式，基本上都会在zui上方有一个导航，下方是内容区，有的还会有页脚footer，站酷就是上下布局。左右布局在后台类、TO B类产品中比较常见，一般左侧为侧边栏，右侧为内容区。国字形布局和T字形布局其实算作上下布局，只不过比较典型，可以单拎出来作为一种布局类型。
接下来我们来看下前端视角的布局方法
首先为什么要了解些前端的布局方式呢，直接甩给前端一个设计稿，让他去实现不就行了？其实这涉及到的是设计和开发之间的协作关系，一个有规律有规范的设计稿，前端实现起来更加容易，也方便他管理自己的代码，实现出来的样式也会更灵活，在出设计稿之前和前端沟通一下，采用什么布局方式，需要设计怎么配合，也费不了多少工夫。当然直接甩个设计稿，前端也能实现，但一些特殊效果真的是需要双方合作才能完成的。
废话不多说
前端视角主要是指实现页面的各种CSS布局方式，我这里主要归纳了5种：静态布局、流式布局、响应式布局、弹性布局和Flex布局。除了静态布局，其他都能实现在不同分辨率下页面的自适应，来给用户zui佳的视觉呈现。
静态布局（static layout）
静态布局也叫做固定布局，网页内容区采绝对宽度，网页内每个模块的尺寸大小固定，一般整体在浏览器内居中显示，并会设置zui小宽度min-width，当分辨率小于zui小宽度就会出现滚动条，如果大于zui小宽度则内容居中外加背景 。
找了一个很古老的网站，大家看看就好。。。
应用场景：目前大部分的高校、医院、政府网站等都是静态布局，而且设计风格上也很老旧，你们懂得，当然并不是说静态布局的风格就是老旧，这个布局和设计风格没有多大关系哈，有很多门户类、企业等网站采用静态布局，同样也很出彩。
优点：这种布局方式对设计师和前端来说都是zui简单的，不用去考虑兼容性等问题。设计和开发成本低，后期维护成本低。
缺点：在小屏上有可能出现横向滚动条，在大屏上会出现大量的空白，不能根据用户的屏幕尺寸做出不同的表现，用户体验比较差。
流式布局（fluid layout ）
流式布局英文fluid layout，也可以翻译成liquid layout，是指页面按照百分比%定义宽度（也就是长度单位不是我们平常使用的px，而是百分数），来适配不同的屏幕分辨率，在不同的分辨率下网页布局保持不变，一般搭配min-、max-属性来控制尺寸流动范围，以免过大或者过小影响展示和阅读，页面内元素的高度和文字大小往往px来固定住，方便页面排版和阅读。
流式布局的特点是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
应用场景：流式布局典型的代表是栅格系统，一般页面中采用百分比定宽的部分都可以看做是流动布局的属性。目前大部分网页为了实现更好的视觉效果都会全局或局部使用流式布局。
优点：在不同分辨率屏幕上能够很好的展示页面元素，如果设计得当，流动布局能避免在小屏幕上出现水平滚动条，对于差别不是很大的屏幕分辨率十分友好。
缺点：当屏幕分辨率差异过大时，因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，有些页面元素宽度被拉的很高，页面缩小后，一些字或者图片或者图表等会产生堆叠，显示效果不太好控制。
响应式布局（responsive layout ）
响应式布局是指网页分别为不同的屏幕分辨率定义不同的布局，同时在每个布局中，各元素大小采用百分比定义宽度，即页面元素宽度随着窗口调整而自动适配。可以看做是定义了几个不同尺寸的流式布局。
布局特点：基于栅格系统设计和开发，通过监测设备的分辨率来呈现不同的布局。Bootstrap（一个前端代码库）的响应式设计中，预设了六个响应尺寸：xs、sm、 md 、lg、 xl、 xxl， 当屏幕分辨率较高时采用XL或者XXL的布局，当屏幕过小时，采用XS的布局。
网站示例：Uplabs网站就是基于栅格系统进行了响应式布局，宽屏模式下展示更多内容，包括上方的引导区和各种标签入口，当在小屏上市就折叠部分内容，同时作品缩略图也实现了基于栅格进行放大和缩小。
优点：能够适应pc、pad和移动端，在任何尺寸的屏幕上都能呈现完美的视觉效果
缺点：要匹配足够多的屏幕大小，需要设计多个版本，设计和开发工作量大
