4年前(我擦勒~ 好久)，偶然的机会接触了notepad++, 然后果断抛弃笨重的dreamweaver。notepad++ 的优点不用多介绍，快速，简洁，扩展性强。对于web前端开发，这编辑器基本能够满足。
当然崇尚完美编辑器的大猫会鄙视我不用IDEA。
所以。。。我喜欢快，但我不早泄(话说，我最近写的文章里带这些字眼就能引来一些对应的广告评论：如伟哥~ 好牛逼 =，=)~

1.不仅是漂亮~

之前npp吸引我的重要因素是它轻量，扩展性不错，一些特性用得很爽(如：关键词自动高亮匹配，代码自动完成)
尝试用sublime是因为它相对于npp来说真的漂亮好多。且目前的版本，功能基本上跟npp差不多，甚至细细研究发现有很多好玩的东西^__^

2.眼前一亮概要栏的创新设计

除了外观好看，还有一个原因让我喜欢上sublime是因为有个很酷的概要栏(配图中右侧显示代码缩略图的东东)，
当编辑一个大文件时，这个东西不但能帮助快速对应到相应代码区，同时。。这东西就是个炫机神技哇~~ 特别是满屏代码的时候，真是赏心悦目 ╰(￣▽￣)╮
话说最新版的npp 也有这个功能了。

3.主题配色很强大，但仍需改进

像notepad++ 一样 sublime的配色功能很强大，研究了一周，把原先在npp里的主题配色搬到了sublime上(配图就是)。目前我只配了css html 的配色。
说它仍需改进是，配色表是个xml，而且语法对应没有帮助文档，需要去默认配色里查，调试起来不方便，但看着xml文档觉得还是挺强大的。
有朋友想要的话我可以甩你个xml ^__^

4.所有快捷键可自定义

这个功能要比npp要强，因为npp的默认快捷键不太好改(可能不知道怎么改)，而且有些插件的快捷键(zen code)会干扰其他软件，让人匪夷所思。
你可以通过Commend palette 菜单(ctrl+shift+ p) 中搜索key 来打开默认default key 文件，和 user key 文件，
default文件里记录了所有的快捷键内容，user里可以写同样的快捷键来覆盖已有的。

5.好用又蛋疼的 Snippets 自动提示功能

sublime 的 Snippets 是一种可以自定义代码补全功能，简单的说就是可以自己做一个代码片段然后存到 user 文件夹(sublime 目录下有个user文件夹)下，
这个时候就可以根据需要简化自己的代码。如：通过定义代码片段，你只要输 clog+TAB 就能输出 console.log(); 文件代码如下：(Tools > new Snippet)就能新建

<snippet>
<content><![CDATA[console.log(${1});]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>clog</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
</snippet>

不过为什么说它蛋疼呢？ 使用了将近2周才发现 sublime 的代码提示好诡异，就是代码提示竟然都是由Snippets组成的。并且每个文件只能存一个代码片段。并且自带的代码，如css目录下的Snippets 很多都不好用 =，=， 这让人情何以堪哇。

6.扩展性 – 插件 – 自己动手

这个我就不用说了。谁用谁知道，我还在学。

7.缺点 – 项目管理功能缺少

这个可能是目前碰上的唯一的缺点了哇，原先npp可以将几个文件甩到一个project 块里，方便切换，sublime在这方面还很不足。
不知道是不是有插件能做到？谁知道求分享

8.好软件要付费哇~ T__T

不付费？ 就得忍受时不时(应该是判断保存次数)，弹出个窗口提示你去付费。等完美点就买~ ⊙﹏⊙

您可能还对这些日志感兴趣

• 灵巧而不失华丽 mac coda 1.7 使用心得
• Coding 的那些银荡事 – Notepad++插件WebEdit使用心得

在企鹅村玩代码玩了半年多，玩起psd来都有点生疏了。
最近对设计MM 给的psd文件产生了点暧昧。有感悟抒发一下。看看是不是都有一样的困惑和同样的问题。

如果切图仔死了，死因很可能是一份可怕的psd

• 1. psd 文件尺寸 竟然有71M，(也许看着觉得还好，但是一开ps 就杯具了，内存不够 = =)
• 2. psd 图层上百个，各种看不懂的图层。毫无规律的图层分组让人菊花一紧。
• 3. 设计稿完全是个插画，怎么看都不像个网页，无从下手切图。(恨不得把psd 吃下去 >.<)
• 4. GUI为矢量图，边界不清晰。(切图成果，糊得一比)。

作为切图仔，暂时就列了这么些 碰到的问题。相信有和多人有同感。
那么作为设计师MM的你们又应该如何去避免呢？ 对症下药 一一破解。

合理分层，结构清晰

不管你做的是设计，还是插画。结构设计也是一种设计，当你合理并且清晰的规划好你的设计稿，那么这个设计就有十之八九了。
那么如何对网页设计稿进行分组分层呢？

• 1. 按框架分。(网页分 ，头部head ， 主题 main，底部 foot，以此类推)。
• 2. 按模块分。(每个小原件，小装饰，合成一个大物件就能做为一个模块)
• 3. 按属性分。(这点比较重要，设计师如果做的是web界面，需要了解什么是“图片输出” 和 “代码输出”, 原因是当切图的时候，我们需要将 “代码输出”类型所属的图层隐藏掉，然后再进行导出)。还有一些注释(注释好重要，后面有讲)相关的东西。
• 4. 按状态分，(web设计跟插画设计 一个很大的区别就是 web设计是有交互的，需要针对各个交互状态进行分层分组)

“代码输出” 指的是设计稿中的一些效果是可以使用代码来实现的，如后期可编辑的文字(大段文字，小按钮里的宋体文字)，圆角，渐变效果(高级浏览器可实现)。
“图片输出” 则是指出了代码输出以外的东西，如图标icon，背景效果，以及一些 使用代码不可实现的文字效果(如艺术字体)。

——————————————

减少尺寸，去其痔疮是关键

如果你做的是大喷绘 psd 有个7,80M 可以理解。但是你做的是web设计稿也那么大，就有点不可理喻啦。
毕竟切图仔的电脑总是没有设计师的强大哇，并且我们还要跑个IDE编辑器，跑个虚拟机，再跑N个浏览器。这个时候要是还要打开一个70M的PSD设计稿(预计占用内存1G)，这个时候 谁蛋疼谁知道哇 囧rz

所以对切图仔好点，把psd弄小点。如何弄小点，往下看。(毕竟俺是过来人 ^__^).

• 1.去除没用的大尺寸素材图层，(当设计稿需要交接给切图仔的时候，最好复制一份设计稿，去除psd中无用处的原始素材图)。因为素材图片是唯一难压缩的东西(psd尺寸大很多时候是因为这个)，且运行时占内存大。
• 2.去除无关图层，(这个是禁忌哇，如果跟设计稿不相关的最好删掉，或者新建一个temp组丢那里面，不然很容易误导切图仔，而且还占内存，别以为隐藏掉就不占内存啦 XD)。
• 3.慎用智能图层。(智能图层在CS4的时候就开始有了。) 很好用，因为不影响原素材的质量，如放大缩小，但是TMD 占内存，吃cpu哇 >.<
• 4.合并列表型块状设计，(这点很纠结，也很重要) web设计稿中有一些设计是列表型的。如：文章列表，信息列表。通常设计的时候是先制作一份，然后复制个十几个。 但是。。。。但是，复制太多了占内存哇。0 0，果断保留关键的一份，或者表示几种状态的几份。然后把其他的都合并图层了。 相信我，这样做切图仔会很开心。^__^

边界清晰，不再模糊

web设计中，最忌讳糊糊的感觉了。因为很多东西是需要精确到像素的。

• 1.形状模糊，有些时候使用形状工具因为没有对齐到像素(见配图),导致做出来的形状边缘都糊糊的。
  解决办法很简单，使用选取工具(A)，小移一下形状让它对齐到像素即可，或者干脆栅格化形状擦去模糊的部分即可。
• 2.素材模糊，素材让人觉得糊糊得看起来不是那么专业？ 简单的锐化一下，会发现很好用(我用的比较多的就是USM锐化)。
• 3.文字模糊，有些时候发现矢量的字体怎么调大小都觉得边缘糊糊的。果断，复制一份(备份用)，然后栅格化，小小的锐化一下。^_^

良好的注释图层，凸现专业气质

代码需要注释，设计稿也同样需要注释。同样是两份设计稿，相信你一定很喜欢带注释的设计稿。
相信我，给你的psd 新建一个组叫注释(comments)，那么切图仔的眼睛里一定闪烁着晶莹的东西。^__^

您可能还对这些日志感兴趣 - 随意

• 哀悼日的苍白
• Before Memorize Lose
• 壹周一嘀咕: 2011/1/17
• 我去~ 我不是果粉！ 我就是买了只MBP，^__^
• [转]FireFox中location跳转问题

发现blog都快长毛了~ ，最近几个月文章产出少，都在折腾杂碎。
不过还是有点心得 想记录下来。 比如：编辑器模式 contenteditable=”true”
因为组件主要，接触了个把月的 编辑器模式，接触到了很多跟编辑器模式 相关的特性。

稍微整理一下甩出来 晒晒，说错了别抽我，一知半解，还有一堆问题。 ^__^

1.如何支持成块编辑 inline-block

有一种场景，如添加某 标签词tag 后，如果想删除这个tag，如果不做什么，会发现会一个字一个字删去。
解决办法：
IE下只要给tag 套上 某标签(一般是span class=tag) 然后 将 tag class 定义为inline-block 就能实现整块 删除的效果。不过会有

chrome 下需要给tag 节点添加 contenteditable=”false” 属性来阻止内部可编辑就可以。
firefox 比较蛋疼 发现firefox下inline-block 或者 contenteditable=”false” 都能实现 整块删除，
除了一个标签就是 img标签，不要给img标签添加 src 属性，只添加title属性可以实现上述功能。

另外，在IE下会有下图的可编辑态，

这个真心不知道怎么去掉，谁知道怎么去~~~~掉？

2.空格回车慎重添加，末尾须加空格

IE下，如果空格太多在编辑删除字符的时候，会有抖动现象。就是最好contenteditable=”true” 节点内的东西都挤一块，别为了美观手贱加空格回车神嘛的。
另外，如果最后一个节点是 inline-block 块状的话，最好在后面添加一个空格，使光标能够正确获取。

3.高度自适应

除IE6 残了外，其他浏览器都能通过 回车实现高度增长。
值得注意的是，如果同级有绝对定位，并且是bottom 定位的dom 如：剩余字数。这个时候IE浏览器会有兼容性问题，可以通过其他方式实现，比如：负margin来实现。

4.position:xx 慎用

在IE下会引起 reflow bug 云云~ >.<

今天就到这了，陆续更新..

您可能还对这些日志感兴趣

• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析
• css心得之善用 position:relative

最近

上班，加班，下班，睡觉。多么有规律的生活。
发现来到企鹅村后，上班的时间虽然不长，但是自己个人的时间少了好多，基本上都是摸黑了才出公司，美其名曰，将青春奉献给公司。
仔细想想，的确很多时候都在考虑公司的需求，考虑如何在工作中得到更多的东西，解决更多问题。非常充实。

生活

除了上班，觉得深圳还是有很多值得留恋的东西，比如深圳吃的要比杭州的好点，虽然称之为 “地沟油” ＝，＝ 不过在杭州吃得也不少哇。
工作将近半年，慢慢习惯了这边的生活规律，工作节奏，目前处在慢慢将生活质量提高，比如周末去跑跑步打打球什么，因为这两周听到好多微博上传闻，一些IT民工短暂而脆弱的生命，不禁珍惜自己活着的每一天，珍惜和朋友的每一天。

公司年会

企鹅村的年会着实让我感动了一把，节目真的很棒，虽然没有中大奖，小奖也没有 T__T。

图为达人秀卓君帅哥在表演，好厉害，好腼腆
最后还来了林志炫，唱功果然好厉害，可惜iphone没电了，T__T，后悔没带GF2.

GF2

10月份的时候，为我的GF2收了个二手的大光圈定焦头(1.4)，因为觉得自己的小定焦头光圈不够大(2.8),1.4的头果然效果不一样哇，只是，因为不是lumix的，需要手动对焦着实蛋疼。不过还是能拍出一些好玩好看的东西。
比如片头的配图就是大光圈拍的，效果不错需要一点后期。顺便在点点上申请了个轻博发发片子(萌。大叔の)
接下来抽空就拍点，还是挺好玩的。

英雄联盟

最近在公司上班，除了繁琐的需求，中午饭后还能跟团队同事一起撸一把。感觉还是挺棒的，深刻体会团队合作的重要性。
不过打得不好，一个不小心就啃爹。
最常玩的是妹子 “阿卡利” 我喜欢妹子^__^，我在二区祖安 coda 是我的id。欢迎组团开黑。(coda名字取自我喜欢的 mac 编辑器，个人还是挺推荐的。各种华丽)

关于打牌

大猫最近跟她媳妇经常打牌，各种啃爹，无奈不太会梭哈神马的。于是就各种百度google。
发现有个网站PartyPoker(需代理)提供很完整的新手教程，值得让我觉得神奇的是，PartyGaming早在2005年就在伦敦股票市场上市。打牌没怎么学会，这家公司让我肃然起敬哇。

iOS 开发

发现自己离设计师越来越远了，最近迷上了ios开发，iphone用了也有将近一年，觉得干网络这么多年了，多少也要在这个大蛋糕里分点吃的哈，于是收了几本书准备进军ios，当然不知道自己能走多远哈。

还是那句话，学到老，活到老。还真不知道自己能活多久，木哈哈·～～～

今天就到这里了。

PS：发现最近游客中好多人在留言中发小广告了，其实我不介意啦，不要吧名字起得太显眼我是能接受得啦。
PS2: 好吧上面有一条是軟文，你们懂的^__^
PSP：好想念的我psp哇，小P被妹子抢走了 =,=

您可能还对这些日志感兴趣

• 那些新增的标签 — html5 学习笔记
• 灵巧而不失华丽 mac coda 1.7 使用心得
• AS3-学习笔记-flashdevelop平台-搭建-配置

难度系数：3星。

仔细观察以及分解图层，发现主要难度还是在 光源以及阴暗面的处理，
中间的光圈看起来复杂，其实他就是一个径向渐变效果，要非常有耐心的去调色。
高光部分觉得自己有点没处理好，没有做好那种白白的效果。

PS： 本来想做个教程，但是冷不丁上了下站酷 发现 那些大湿做的icon都华丽丽的不行，觉得自己做得东西还是差距有点大，然后就先丢出个效果图好了啦。
安慰下自己，肿么说我也是个代码仔中做设计还算ok的啦
╮(╯3╰)╭

您可能还对这些日志感兴趣

• 乱翻乱教 – iOS5 通知栏背景制作

google日历

日历是个好东西，不具体解释了，日历的好处有很多，可以共享，可以同步到手机。
将工作的每一个关键桢都记录下来，你懂的，有好处没坏处。

每天的todo list

iphone 给我带来的几个方便，其中有一个就是就是可以记录并同步todo list ，时刻提醒自己。
每天把 接下来一天需要做的事情，特别是必须要做的事情 记录下来。
务必要 做好优先级。因为当事情多了之后就需要安排优先级。
另外下班的时候记录一下第二天要做的事情避免忘记。
比如：我经常会在会议的时候，突然接到一个电话，然后记录下一些关键的需求到手机或者日历，避免最近忘记

目录化需求

新建一个所谓的工作目录，以年月为单位来存放 每个月的需求。
如：每个月建立一个目录 2011，“1104 xxx需求” 来存放。

需求进度表

很多人会在做完需求后将作品交给下游后就认为事情结束了。当同时有几个需求在并行处理的时候一个进度表就能很好的梳理好各个需求的一些关键进度以及相关目录以及文件。
如： 我会按照时间 每周记录 产品安排下来的需求，
用excel 记录这些需求所在的目录，工时，开始时间，是否递交开发，是否提测，是否上线。
这样做一周下来就知道 这周自己做了哪些东西，还有哪些没有做完，哪些正在开发阶段。

各种可以提高效率的软件

日常我比较喜欢轻量级的软件，因为不像把电脑搞得卡卡的。

1. 1.Everything: 轻量级文件搜索器 (开机必备)
2. 2.Launchy: 快捷软件打开器 (开机必备)
3. 3.VirtualBOx: 轻量级虚拟机(调试必备)，牛逼的地方就是可以同时开3个虚拟机。单个虚拟机内存占有量还没有QQ大。
4. 4.Farseer: 轻量级反向代理，类似apache软件。
5. 5.Fiddler: url代理小军刀。不太会用，但是很犀利，可以解决一些疑难杂症。
6. 6.notepad++ : 日常代码必需品，微冲。
7. 7.idea : 坦克。我都不知道怎么形容这个软件，上面的搞不定的这个都能搞得定。唯一的缺点就是打开慢点
8. 8.FSCapture: 日常截图利器。不过慢慢觉得QQ 截图也挺好用。
9. 9.BulkRename: 轻量级批量重命名利器。处理大量图片文件的时候这个很给力。
10. 10.Svn： 版本控制，这个就不介绍了。
11. 11.BCompare: svn 挂件，增强代码对比。
12. 12.CssGaga : 大招，空间高效同步利器。一般人不告诉他。^__^

您可能还对这些日志感兴趣 - 随意

• M8 到手 内牛满面
• 灵巧而不失华丽 mac coda 1.7 使用心得
• OH YEAH — 阿里满周岁 感言
• 姐默默的陪你度过了整个学生时代~
• 原来中国动画行业都是这样被扼杀掉的

Photoshop 制作ios5通知栏背景

制作工具：Adobe Photoshop cs5
作者：飞鱼
iOS5发布后评价都说很棒，于是毫不犹豫的刷了，算是纪念Jobs的临终大作。改进的功能很多，其中一个大功能就是有了一个跟android几乎一样的通知栏，同事看了说：我擦，这功能跟android 的下拉框有啥区别？完全抄袭么… 然后就有人说了：那不是，瞧，对比一下，明显… iOS5的通知栏帅多了，瞧这背景，瞧这细节…。
好吧，仔细看了下的确很酷，细节纹理做得很棒，像一块布。发现做起来也不复杂就几步就可以了^__^。

最终效果

步骤 1

新建psd，大小800*600，填充背景色(#45454c)。如下图。飞鱼：填充神马的不用我教了吧 XD

步骤 2

新建图层, 填充黑色(#000000)，选择 滤镜-杂色-添加杂色，杂色数量20%左右。然后将图层模式改为：滤色。如下图。

步骤 3

分别选择 滤镜-模糊-动感模糊，角度90，距离30左右。然后选择 滤镜-锐化-锐化，如下图：
这个时候基本有点感觉了吧^__^ 继续。

步骤 4

接下来只要做横向的效果就差不多了，新建一个图层，按照步骤2，只是角度变为45度。结果如下图：
这里其实还有另外一个办法就是复制一层，ctrl+t 旋转一下就可以了，不过长度会不够。

步骤 5

到这里效果基本都出来了，只要加个图层，做一下内阴影，或者黑白渐变，然后叠加一下就有效果了。

总结

可以发现，做这个东西只要几种滤镜就可以轻松达到效果，具体细节需要仔细去调，比如颜色，阴影等。
个人觉得主要的难点在于如何做成可以平铺的图案，抽空研究一下。^__^

您可能还对这些日志感兴趣

• 仿制品 – apple icon – camera
• 乱翻乱教 – 制作可爱的小鸟勃起图标
• 乱翻乱教 – 小鸡快跑 – Photoshop 超级可爱小鸡
• 乱翻乱教-编号004-用photoshop制作绚丽的星球
• 设计部培训第二课

最近接触了许多 关于图片文字水平对齐的需求，然后发现如果单单将vertical-align 设置为middle 的话，不同浏览器下居中对齐的位置有偏移，让人好不蛋疼~ =，=
网上搜了下好像也没有搜到相关的分析，大部分都是垂直居中的案例
于是专门针对vertical-align 做了次分析，功夫不负有心人，分析结果还是挺好玩的，对vertical-align 又有了一次深入的了解。给力~~~

demo 传送门： vertical-align 各属性分析 有错误欢迎回复纠正哦 ^__^

一些心得体会：

vertical-align 定义

最初我认为的vertical-align 解释 跟text-align 一样，是容器内部的非block 元素居中对齐，但~~ 我理解错了
从w3c 官方对 vertical-align 各属性的解释来看，vertical-align 是定义当前节点，跟外围内容的对齐方式，跟text-align 的解释是不一样的。

vertical-align:baseline 基线对齐

分析所得，发现baseline不是在中文字的可见部分最下方，而是在英文字的可见部分最下方。
然后发现图片对齐的时候是以图片的最下方同相邻文字的 baseline 对齐。一直觉得为啥图片下方会有4像素的空白，现在明白了

不同字体会有不同效果

我这个demo 用的Tahoma 字体，发现如果使用类似 Yahei 等中文字体，在IE低版本下会有出现一些奇怪的现象，详细可以看demo。

vertical-align 最好不要混用

从定义来理解，就发现这个vertical-align 最好不要混用。因为本身不同属性会产生各种各样的兼容问题，如果混用，估计会出现更复杂的现象。虽然我也没有深入研究，但我觉得混用不太靠谱。

vertical-align: px 定位最稳定

这个属性一直都没怎么用，原先一直用middle 来实现水平对齐，在一次偶尔的项目代码里发现的。
相对定位是相对于baseline的偏差定位，负值代表图片相对baseline往下移。
在研究中发现使用相对定位兼容性最好，只有IE7会有2px的偏差，但基本可以无视，因为目前IE7的用户可以忽略不计。
不过这种方法也不是万能的，
因为是相对于baseline的相对定位，如果文字变大后，图片的对齐位置 看起来就不会跟着移动区别于middle属性，不过个人觉得这样的情况出现概率不大，并且字大了再针对调整也没问题。
另外图片大小不一样大相应的负值也不相同，详细见demo。

高潮：vertical-align 最佳兼容方案

前面说了这次研究没有白费，个人推荐的vertical-align 用法如下：
1. 尽量保持主内容的 vertical-align 是baseline 即默认的，不要把vertical-align 当text-align 来理解使用。
2. 针对 内部需要调整位置的 图片等 进行 px 定位。
优点：保证外围的vertical-align 是默认值，不产生混用现象。
缺点：针对不同尺寸的图片要针对进行定位，不过一般ico 大小差不多大，可以统一调整。

下一步研究方向：表单元素的vertical-align: px 是否同样适用 ？

您可能还对这些日志感兴趣

• dom属性 contenteditable=”true” 容器里的一些表现特性心得
• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• css心得之善用 position:relative

好了 切入主题，讲讲心得：

section 是有语义的div

很多人很费解 为什么html5 放着div 那么短小精干的东西不用，非要用section呢？
我的理解是div 依然有用，只是它可以代表无语义的东西。section像是一个沙盒子，将不同的部分，区块，模块，区分开。

header 不是一定要唯一

首先要说的就是这个header标签，之前看了好多关于html5的杂文，给人的感觉就像是 header 标签是 网站头部进化过来的，其实不然，就像以前很多人认为 h1只允许有一个一样。
因为 header 可以包含在 article 里作为 文章的头部标签。见(49页)

hgroup 在header 标签中充当目录指引作用

原先一直很不明白hgroup 的作用，因为w3cschool 上表现的例子中hgroup中都是些h* 标签集合，这种东西在实际应用中的应用场景非常狭隘。但当发现 article 里可以丢header 标签后 这个问题就解决了。
其实个人觉得这个标签的重心在目录指引，在内容为王的时代，hgroup标签会给seo带来一定贡献。

有了沙箱后，网站结构变得不是那么虎头蛇尾

很多人认为 一个web 中 只能用一个h1 不能用太多 h2，以及少量h3， 甚至都找不到 h4的踪迹。
事实告诉我们，我们甚至可以在 nav 标签中使用h1。
那么这样写不但不会混淆seo 抓重点。而且能让web 看着更加婀娜多姿，凹凸有致。

顺便普及一下html5 标志中的一些寓意以及新特性：HTML5标志

您可能还对这些日志感兴趣

• 壹周一嘀咕: 2011/12/20
• html5 新思路的开始 – web标准化交流会 (杭州站第三期)
• AS3-学习笔记-flashdevelop平台-搭建-配置

总的来说Coda的一些特性符合我在windows 下notepad++ 的习惯。

1. 站点应用

这个功能，在一些大型IDE里都有，之前都没有去使用这个功能，最近因为经常切换站点，所以这个功能还是挺好用的。
切换的时候还能保留上次打开的文件，细节做得很好。

2. 侧边栏关键帧 列表

喜欢Coda的一个很好的点是侧边栏，有对当前编辑页面中的关键点列出，比如：html 页面中的id，h1 等关键的位置索引。编辑javascript 的时候 侧边栏会列出当前文档中 所有的function，找代码找方法的时候非常方便。

3. 实时预览

Coda 的preview 模式 还是挺好的 可以省去你切换窗口刷新的操作，有的时候很大一部分调试时间是消耗在切换预览效果的过程上了。

4. 多窗口并显

这个功能原先纠结了好久。因为一开始用的时候发现多窗口并显的时候，不知道怎么实现左边 html，右边css的效果。
我目前在npp(notepad++)下写代码就是这样来写的，左边html 右边css 可以提高很大效率。
因为当你在点多窗口的时候发现只是复制了一份。后来给coda官方写来份英文邮件求助，他们很快给我回复了方法。
真是大大加深了我对coda的喜爱。^___^
方法如下：
打开html页面，点击多窗口panel，然后从左侧目录中将css文件拖动到右侧panel就可以实现了。效果还是很棒的，如果你有2显示屏，那么你只要另外拖一个html页面出来(新窗口打开)，放到副显示器上就可以显示了，这个甚至刷新都不用非常赞。

5. 快捷又帅气的Clips

写代码写多了无非想更懒一些，希望用一些快捷键就能自动补全，于是就出了类似zencoding 等插件，不过coda中的zencoding插件没有npp上那么快捷，(其实我在npp上zencoding 用得很少。我目前都是用 Notepad++插件WebEdit使用心得 (之前写的一篇心得)

然后我发现coda 中也有一个这么销魂的功能就是Clips。跟npp 上的webedit 插件一样，其实它也就是个类似宏命令，通过快捷键去自动输入然后停留在自己想要的位置。 相比之下Clips更帅气一点，它是通过tab来触发的，并且快捷键自定义非常灵活，这个我超级喜欢。

例如：当平常写得比较多的panel 代码块，我只要将这段代码在Clips中新建，然后定义一个快捷键(apa)前面的a是避免冲突快捷键加的， 那么下次只要输入apa 然后tab 就可以自动完成了，理论上应该会比zencoding 还快。

<div class="panel">
  <div class="hd">
    <h2>标题</h2>
  </div>
  <div class="bd">
    内容
  </div>
</div>

其他类似代码块还有好多。并且这个东西还可以导出来分享。^___^ 你懂的。想要的话留言哇～ 我邮件发你～

6. 配色系统

coda的配色系统跟npp差不多，最近也给coda重新配了一套颜色，感觉还是挺舒服的。当然这个配色也能导出的，不过设置稍微有些麻烦。

好了就到这里了，如果你有其他coda 的小技巧 欢迎沟通呢。

您可能还对这些日志感兴趣

• Sublime Text 2 使用配置心得 – notepad++ 略丑
• 壹周一嘀咕: 2011/12/20
• Coding 的那些银荡事 – Notepad++插件WebEdit使用心得