吾爱编程

标题: 所向披靡的响应式开发-某课网 [打印本页]

作者: admin 时间: 2017-10-2 21:11
标题: 所向披靡的响应式开发-某课网

所向披靡的响应式开发

移动互联网时代前端攻城狮必会技能产品

产品

原型设计
交互设计
设计技巧和原则响应式

网站设计实践原则

渐进增强 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章课程大作业

根据讲师所讲知识，独立做出与课程相似的响应式页面。

课程下载：

作者: yuwenfang 时间: 2017-10-20 08:14
11111111111111111111111111111

作者: as1102511 时间: 2018-1-19 09:57
111111111111111

作者: nicky_hb 时间: 2018-5-30 20:26
1111111111111111111

作者: benberg 时间: 2018-9-8 11:53
看了LZ的帖子，我只想说一句很好很强大！支持吾爱编程网！

作者: 保持简单丶 时间: 2018-9-8 23:36
看了LZ的帖子，我只想说一句很好很强大！支持吾爱编程网！

作者: 旧人梦 时间: 2018-10-7 19:01
看了LZ的帖子，我只想说一句很好很强大！支持吾爱编程网！

作者: 369987023 时间: 2021-10-30 00:00
不管你信不信，反正我是信了。支持吾爱编程网！

欢迎光临吾爱编程 (http://www.52pg.net/)