豪情-CSS解构系列之-新浪页面解构-02

  • 前言
  • 一.开发工具 - 前端四大利器
    • 1. WebStorm

      • 1). 岂今为止，业界公认的前端开发利器。优点：
      • 2). 缺点
      • 3). 相关资源
      • 4). 后续展望
    • 2. Photoshop
      • 1).基本信息：
      • 2). 提高切图效率思路之扩展：
      • 3). 切图的几个办法：
    • 3. Firefox
    • 4. Chrome
  • 二.文件目录
  • 三.Html、CSS结构
  • 四.Reset.css
  • 五.如何调试代码
    • 1. Firefox
    • 2. Chrome
    • 3. IE
    • 4. IEtester
    • 5. 虚拟机
  • 六.如何检查代码
  • 七.如何总结

前言

这是来自内部线下交流会PPT的完整文字版，初衷跟上一篇文章中所述一致，为了让更多的人看到，对在交流会上没有完善的内容做一补充，同时缺少现场互动环节，那份记忆或感动怎么也找不回来。另外由于个人能力有限，欢迎指正。

一.开发工具 - 前端四大利器

1. WebStorm

1). 岂今为止，业界公认的前端开发利器。优点：
  • 用户体验做到极致，基本常用的功能都有集成。有几点是创新的：编辑即保存(代替Ctrl+s)，本地历史版本，插件的整合开发，推出多个语言的通用版，比如以WebStorm为核心，周边有IntellIDEA，PhpStorm, Pycharm, RubyMine等等，都有操作可相似性，有统一公司的基因，可以无缝切换，学习成本很低。
  • 插件丰富且质量较优 CoffeeScript, EJS, GitHub,vim
  • 版本开发的支持 svn,git,csv,github,p4，集成以图形化方式可操作git。
  • 友好的ftp管理
  • 超强的模板支持
  • 开源中国每年有打折活动，这是2014年的，2015年的活动可能还没开始。
  • 版本升级够快，新技术支持给力 html5, TypeScript, CoffeeScript,Dart,Sass,Less,Stylus,Nodejs
2). 缺点
  • 英文版本，对有些深度中文用户来说，这个确实是个障碍。
  • 由于提供的功能比较强大，所以内存开销很大，对硬件的配置有一定要求。
  • 版本更新太快，诱使用户不断的去升级。而对一般用户，开发的真正核心是语言，开发真正的价值是解决核心的需求。所以，在这方面不用过于纠结。
  • 入门需要配置，对中文用户来说，对英文的不熟悉造成了配置的障碍。其实也不是很复杂的过程，基础的配置看看入门教程，基本都能搞得定。
3). 相关资源
4). 后续展望

如果时间允许后面分享会介绍其它几款轻量级的开发工具，以弥补WebStrom偏重的缺点：比如SublimeText,
VIM等。

2.
Photoshop

PS是Web设计的首选软件，他着重侧重于对图形的二次处理，主要在颜色方面，通过分图层处理来达到各种其异的梦幻效果。而PS的神奇在于，每个参数的不一致，导致的结果不一致，这样也让很多非专业人士自认为有设计艺术的细胞或假象，以为自己是一个设计奇才，从而选错行业，所以设计这行有风险，入门要谨慎。像AI, CorelDraw着重于对造型的创造或编辑，像CAD则是点线面关系，3DMax则是空间物理关系，Flash是空间与时间的关系等等。而且这些设计软件中也只有PS能够完整真实的模拟Web页面上的真实场景，虽然字体有时候也会在表现上出现稍为的偏差。FireWorks也由于市场份额或PS重合功能太多，已经停止新版本开发或更新了。这是一个公司战略或市场竞争下必然导致的结果，个体用户不能左右。

1).基本信息：
  • 以图层为主要的编辑对象，通过不同层细节的编辑，使整体效果更为绚丽或多变。
  • 以工具为主要的编辑手段，通过多个工具的结合，满足大部分编辑要求。
  • 通过滤镜的组合，呈现很多不错的效果，达到平民人士也能参与互联网炒作的大军中不能自拨，在当下PS已经由有一个名词转为一个动词了。
  • 对前端来说切图时注意：优化切图流程，提升切图效率，增加岗位竞争优势

    具体经验分享：修改PS的快捷键，使其符合前端操作的习惯，侧面提升工作效率。从而扩展，可以修改其它软件的快捷键，整体提升工作效率，增加就业资本或信心。

  • 图片格式那些事儿
    一般新手不太注意页面的性能问题，而性能容易出现在图片上面，如何在一个大页面中处理好图片是一个前端必备的技能之一。

    一般应用比较多的格式有：gif,png-8,png-24,jpg。而新手经常混淆png-8,png-24的区别。

    按我经验4k以下gif,png-8差别不大，4k-100k: png-8,gif占优势，大于100k果断是jpg。

    png-8不支持alpha透明，在IE6下需要一个JS或透明滤镜来处理。

    图片格式与设计那点事儿
    Web性能优化：图片优化

2). 提高切图效率思路之扩展：

从客观上来讲，提高效率的基础在于丰富的实战经验或长年的填坑经历，本质上软件的操作差别不是特别大。一个五年经验或一年经验的开发人员，使用同样的工具，主要差别还是一个熟练度。这里只分享我个人积累的一些经验：

在上一点提到的修改快捷键，分享一下我修改的几个快捷键：

  • 新建图层: F1
    使用频率比较强，所以放在一个容易的地方。
  • 新建文件：F2

    仅次于新建文件，也是使用使用频率比较高的一个键。由于切图是会从原始图层上多次的分离图层，所以这个快捷捷由原来的按两键，变为一键。并且有效的分离左右手操作的特点，尽量让使用频率高的键从左侧起步。以下的几个快捷键，都是按照这个思路来进行优化或设置的。

  • 按屏幕大小：F3
  • 按画布大小：F4

    这两个键操作思路主要借鉴于CorelDraw，CorelDraw是一款优秀的平面广告设计软件，多用于名片，包装设计。这是由加拿大Corel产品，他们公司另外一个比较著名的绘画类软件是Painter。

  • 存储为web格式：F5
    由原来的5键优化为一键，还有一个流程是通过Ctrl+Shift+S来存储图片，很明显这个流程步骤过于繁多，很浪费时间。有兴趣的可以做一个对比。
  • 裁剪命令：F6
    由原来的3键优化为一键，另外一个是裁剪工具(C)，裁剪工具对整个画面的破坏力比较大，且不易控制，尤其在PS的版本升级中对这个工具进行了优化。而这个命令相对更为轻量或方便。
  • F7,F8,F9保持不变
  • 转换为RGB模式：ctrl+=

    因为Gif是索引模式，颜色信息较少，如果要进行编辑，首先得转换成RGB模式。

  • 从图层建立组：ctrl+,
    由于刚入行的设计师没有经验，一个设计稿是没有分图层组。其实合理的图层组可以有效的引导前端，所以这个快捷键主要是解决这个问题。
  • 自由变换：F10
    变换内容
    前端主要还是对现有的PSD文件进行编辑，所以这两个键是可以单独拿出来的。
  • 变换选区：F11
    变换边框
  • 画笔：F12
    因为前端不像设计师，对PSD只是一个切割，而设计师注重于创造的过程。所以对画笔工具的依赖不是很大，由原来的F5移动到F12。
  • 复制图层 Ctrl+ / 原有位置在菜单栏：图层->复制图层
    这个快捷键，可以快速的把原始PSD中的一个或多个图层复制到一个新文件当中。

演示：

3). 切图的几个办法：
  • 切片(k):
    优点：能够一次切除多个图片。
    缺点：需要后退一步，降低效率，容易产生多余无用图片
  • 选区(先用选区工具来画一个范围，然后裁剪):
    优点：区域精确目标单一
    缺点：需要后退一步，容易误操作
  • 拷贝(Ctrl+C):
    优点：拷贝单层的内容到新文件，能够快速的切除图片。
    缺点：不容易找到相应的图层。
  • 合并拷贝(Ctrl+Shift+C):
    优点：拷贝所有可见层的内容到新文件，能够快速的切除图片。
    缺点：不容易找到相应的图层。

3. Firefox

同类即时编辑即时显示的插件有：

Firefox其它优秀插件：

  • Vimperator

    Vimperator 的操作思维来源于Vim，简单的几个键即可以完成绝大部分工作，

    Chrome也有类似的插件Vimium，但是不支持本地静态文件的刷新。

  • YSlow

    该插件可以分析网站的页面，并会提供一些优化建议。这部分功能已经慢慢的出现在Chrome的调试工具当中

  • FireQuery

    主要针对jQuery对Firebug进行一些用户体验方面的增强。

  • IE Tab 2

    可以让Firefox嵌入IE浏览器的标签。

  • Html Validator

    HTML校验器，主要可以校验页面标签是否对齐，或一些常规的语法问题

  • Validaty

    提供给你一个类似于validator.w3.org的校验器按钮

  • CSS validator

    一键检查当前网页是否符合W3C CSS 标准的验证器插件

  • JSONView

    显示浏览器中的JSON文档。

  • User Agent Switcher

    模拟移动端User Agent

  • 鼠标手势 firegestures

    提供一些常有的鼠标手势，但手势体验略差于360极速.

  • Pixel Perfect

    变态的产品用这个插件来验证设计稿与页面的误差。

4. Chrome

Chrome在慢慢吞噬着Firefox的市场，但是近年功能是强大了，但内存占量也逐渐上去了。
不论怎样，他是Firefox之外的有效补充。经常用到的插件：

  • Vimium

    受vim的方式启发，以vim的部分快捷键来操作chrome，不支持静态文件的刷新

  • JSONView

    格式化JSON的一个插件，已经包含在Fehelper插件中，与Fehelper这部分功能重合。

  • Fehelper
    前端打包的一个集合插件
  • Visual Event

    主要用途是查看某个元素具体绑定了哪些事件

扩展阅读
IE、Google Chrome 还有 360 极速浏览器，哪个最好？

二.文件目录

  • 静态资源结构
    统一放到static目录中
  • 动态资源结构
    比如临时文件目录，备份或上传目录
  • 目录越细越好
    细分的目录容易局部升级时文件夹更新，也利于项目的进一步扩展。

三.Html、CSS结构

以下当中，Emmet成本最轻，实现最简单，是目前比较常用的一种扩展方式。其它的几种都需要依赖一种环境，另外还需要一定的入门成本，对团队或项目的维护是一个不小的考验。

四.Reset.css

五.如何调试代码

1. Firefox

Firebug是个人使用比较顺手的CSS调试工具，可能是先入为主，或者是个人习惯的原因

2. Chrome

Chrome的JavaScript调试工具当真是目前功能最为强大的工具，没有之一

  • 格式化代码
  • 查看元素绑定了哪些事件
  • 快速的根据勾子找到核心代码区域
  • 高效的利用工作区，进行远程调试
  • 利用Profiles进行性能优化
  • 利用Audits可以进行页面无用CSS的监测或其它方面的建议等。

扩展阅读
web前端开发分享-css,js工具篇

3. IE

IE11的debuger个人感觉还是有进步的，是想从细节处来吸引用户。但是由于本身技术基因的欠缺，易用性方面与Chrome还是有很大的差别，即使这样，目前还是IE版本下调试者的唯一选择。

4. IEtester

IeTester虽然有很多缺点，但就从目前的市场来看，他是唯一一款可以方便测试Ie6的软件。

5. 虚拟机

因为IETester并不能真实的模拟IE6，所以有些特殊的Bug只能到虚拟机真实的环境中调试，在直接的IE6上可以安装IETester的Debugger插件，可以方便的解决一些Bug。

六.如何检查代码

  • 编辑器提示
    WebStorm能够提示一般常识性的拼写或符号错误。
  • 调试工具控制台
    Firebug,Chrome等调试工具的控制台能够很好的显示一些错误。
  • 源文件
    通过源文件折叠代码的思路
  • 插件
    通过Firefox插件，上文已经列出，不再重复。
  • w3c验证网站

七.如何总结

总结的目的是为了抽取一些共用布局类型的结构或样式，以备以后多次复用，另外也可以应对面试，分享给其它小伙伴等等的作用。这是我的一点总结 - Jsfiddle。另外是积累各种业务类型的页面展示形式，为以后创业或职业提升打下基础。

  • 总结网站业务类型，特点
    比如新闻门户类，页面比较整齐或规整，讲究页面的对齐或其它小细节的和谐统一。
    比如电商类，页面跟新闻门户类相似，但更讲究交互，注重用户体验细节的雕琢。

    比如游戏类，页面风格依赖游戏素材，讲究背景图片气氛的渲染，注重对游戏文化的传递。

  • 布局特点
    一般新闻，电商类，布局较为中规中局，只有游戏类，考虑兼容性，可能布局稍为麻烦。
  • 细节处理
    有些页面设计师为了强调内容的不一致，可能做了差异化设计，这时需要用不同的CSS来覆盖差异化页面设计。
  • 防错处理
    当页面布局完成之后，为了防止与原有设计稿有出入，一定要有再复查一遍，以免出错。
  • 防改处理
    由于页面上每个元素都有可能会有增加删的处理，所以在布局时要有这方面的考虑。
  • 防版本升级处理

    展开也不少，看看叶小钗的这篇文章：关于前端框架升级与全站样式替换的简单建议

最后：这是在重构之前工具的介绍，下一篇着重介绍如何重构。。。敬请期待。

未完待续...，下期更精彩。


前端开发qq群：389875212 ，禁止闲聊，非喜勿进~！

时间： 2024-11-26 00:54:12

豪情-CSS解构系列之-新浪页面解构-02的相关文章

Python如何调用新浪api接口的问题

前言:这些天在研究如何调用新浪开放平台的api分析新浪微博用户的数据 成果:成功调用了新浪api获取了用户的一些个人信息和无数条公共微博 不足:新浪开放平台访问有限制,返回的数据着实有限,不足以分析问题,真的要分析问题还是得个人写爬虫 下面是调用新浪开放api的过程: 第一步:按这个做就行 http://www.cnblogs.com/dhsunny/p/3578399.html?utm_source=tuicool&utm_medium=referral 其中有一不那个新浪api测试工具是打不

ECMAscript6新特性之解构赋值

在以前,我们要对变量赋值,只能直接指定值.比如:var a = 1;var b = 2;但是发现这种写法写起来有点麻烦,一点都不简洁,而在ECMAScript6中引入了一种新的概念,那就是"解构",这种赋值语句极为简洁,比传统的属性访问方法更为清晰.那什么是解构呢?按照一定的模式,允许从数组或者对象中获取到值,并且对其变量进行赋值.称为"解构". 看到上图了吧,解构是不是很简洁.其实解构不单用于数组.对象,只要内部具有iterator接口,就都可以使用解构来给变量赋

发往新浪的邮箱退信错误代码详解

新浪邮箱退信错误代码详解,经常有客户发往新浪邮箱退信,但是很多人看不懂错误代码,今天思威电邮为大家解答一下新浪邮箱退信的问题.供大家参考. Q: 退信错误代码如何解释? A: 421 Too many messages 退信原因:邮件数量超限 改善建议: 如果您是发信域的邮件管理员,请暂停该IP的发信,降低发信频率后稍后重试. 如果您是个人邮箱用户,请向您的电子邮件服务提供商反馈退信情况. ————– 421 Too many connections from your host 退信原因:并发

Android中实现java与PHP服务器（基于新浪云免费云平台）http通信详解

Android中实现java与PHP服务器(基于新浪云免费云平台)http通信详解 (本文转自: http://blog.csdn.net/yinhaide/article/details/44756989) 前言:现在很多APP都需要云的功能,也就是通过网络与服务器交换数据.有的采用tcp/ip协议,但是你必须拥有一个固定ip的服务器,可以购买阿里云服务器之类的,就是贵了点.如果只是个人的小应用的的话可以采用新浪云平台这种免费的服务器,采用的协议是http协议,具体实现方式如下: 方式一.在线

新浪sae url rewrite(伪静态、重定向)详解

新浪sae url rewrite(伪静态.重定向)详解 http://www.veryhuo.com phpclubs 2011-11-14 投递稿件 sae全程Sina App Engine,真是一个好东西,他有很多优秀的特性,简单来说SAE就是一个简单高效的分布式Web服务开发.运行平台. 支持现在常用的 php+mysql环境,在开发中难免会碰到项目需要做url rewrite(伪静态),然而sae不支持 apache 下的.htaccess .不过不要难过,sae提供了自己的rewri

解构赋值 —— ES6新语法学习心得

## 3.解构赋值 ## 作用:将数组.对象.函数的参数 解构,对变量进行赋值,可以直接调用该变量,大大提高效率 ## 例 1: ##  标准模式的解构赋值 var [a,b,c]=[1,2,3] console.log(a) //1 console.log(b) //2 console.log(c) //3 ## 例2 : ##  嵌套解构赋值,只要"模式匹配",就能解构赋值,如果没有对应的值,就是undefined let [foo, [[bar], baz]] = [1, [[2

大公司都有哪些开源项目~~~阿里，百度，腾讯，360，新浪，网易，小米等

红色字体是现阶段比较火的 ---------------------------------------------------------------------------------------------------------------- 奇虎360 https://github.com/Qihoo360 1.MySQL中间层 Atlas Atlas是由 Qihoo 360,  Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQ

阿里，百度，腾讯，360，新浪，网易，小米等开源项目

奇虎360 https://github.com/Qihoo360 1.MySQL中间层 Atlas Atlas是由 Qihoo 360,  Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本的基础上,修改了大量bug,添加了很多功能特性.目前该项目在360公司内部得到了广泛应用,很多MySQL业务已经接入了Atlas平台,每天承载的读写请求数达几十亿条. 主要功能:* 读写分离* 从库负载均衡* IP过滤*

CSS float浮动的深入研究、详解及拓展

CSS float浮动的深入研究.详解及拓展(一) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=583 一.浮动的原始意义是什么? 浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已.而我们目前用浮动实现页面布局本不是浮动该干的事情. 二.浮动的本质是什么? 我将浮动的本质定义为“包裹与破坏”! 1. 浮动的“包裹性”撇开浮动的“破坏性”,浮动就是个带有方位的d