|
所向披靡的响应式开发 移动互联网时代前端攻城狮必会技能产品 产品 原型设计 交互设计 设计技巧和原则响应式
网站设计实践原则 渐进增强 or 优雅降级 先针对小屏幕 or 大屏幕进行设计 确定支持的浏览器 断点选取原则
响应式布局基础 媒体查询 CSS3选择器 视口(Viewport) Resets与Normalize Rem布局网页 清除浮动和BFC
响应式技术 如何确定响应式断点 响应式滚动广告 响应式图片
代码优化及调试 处理兼容性的技术 多个设备上同步调试
打包发布 Nodejs和NPM gulp使用
课程目录： 第1章 前期准备 介绍了课程内容、背景和案例展示、什么是响应式网站、怎样分析设计图、响应式网站设计实践原则 第2章 如何组织项目目录结构 介绍了约定优于配置的思想，常见的项目目录和文件的组织方式，一些基本文件的作用等知识，为编码开始做准备。 第3章 开始编写HTML代码 根据设计图一步一步实现基本的HTML结构，介绍了文档类型、meta声明、IE条件表达式、html5新标签、语义化选择、大纲等知识。 第4章 如何实现PC端的样式 一步一步实现PC端的样式，介绍了CSS Resets和Normalize，相对单位和其中的一些坑，清除浮动的几种方式，块级格式化上下文(BFC)，inline-block的空白问题，CSS Sprites，盒模型计算，自动前缀(autoprefixer)等知识。 第5章 如何实现移动端的样式 一步一步实现移动端的样式，介绍了Chrome的响应式调试工具，媒体查询中使用相对单位，CSS3选择器，CSS打印相关属性等知识。 第6章 如何实现响应式广告及响应式图片 一步一步实现响应式滚动广告，介绍了如何选择第三方组件，OwlCarousel2的使用等知识。介绍了响应式图片实现的几种方式，picture/srcset/size标签如何使用，svg原理和制作方式，polyfill原理，picturefill的使用，图片压缩等知识。 第7章 Node.js简介 介绍了Node.js的基本知识，同步异步编程方式的区别，包管理器NPM的使用，package.json如何配置，简单httpserver的使用等知识。 第8章 如何处理兼容性及在多个设备上进行调试 介绍了处理兼容性的主要技术，包含调试的方法，虚拟机的使用，CSS hacks，polyfill和shim，Modernizr，兼容性查询等知识。 第9章 如何打包发布 介绍了前端自动化的概念，grunt/gulp/webpack，如何使用Gulp进行自动化打包发布等知识。 第10章 课程扩展1 -- 选择一个趁手的IDE 选择一个趁手的IDE，WebStorm。介绍了使用框架的注意事项，Bootstrap、SemanticUI、Foundation、PureCSS等响应式框架的特点和优缺点等。 第11章 课程扩展2 -- 聊聊原型设计和切图 介绍了原型设计的概念和工具，Axure等工具的使用，如何切图，Photoshop的使用，Sketch的使用等知识。 第12章 课程大作业 根据讲师所讲知识，独立做出与课程相似的响应式页面。
课程下载：
| 
