四眼天兔工作室 » 网页设计

CSS的跨浏览器代码准则

4EB Studio — Fri, 11 Jun 2010 02:36:02 +0000

开发人员们总在讨论最令人满意的网页设计莫过于在任何浏览器都能显示出相同的直观且漂亮的效果。不幸的事，大家都一致认为实现这样的目标几乎是不可能的。不过，近乎于精确的跨浏览器体验还是可以实现的。作为开发人员，我们的目标不应该仅仅局限于保证网页能够在每个浏览器都能够正常运作，而应该是如何保证跨浏览器运作所需的代码最小化，及其所能带来的日后网站维护及运作的顺畅化。

本文将向大家介绍一些非常重要的CSS规则和技巧，帮助开发人员实现以尽量少的代码来实现多浏览器的一致性。

了解CSS的盒模型

这是你要实现使用最少的hack来实现跨浏览器布局一致性首先要了解的事情。幸运的是，盒模型并不是很难掌握的，他在所有浏览器上的工作基本是一致的，除了个别的IE版本。

盒模型是用来计算以下事项的：

块状元素间的距离是多少
边框（borders）和/或空白边（margins）是否重叠（overlap）或叠加（collapse）
盒子的大小
在某种程度上，盒子相对于其他页面内容的位置

盒模型遵循以下规则：

块状元素基本都是矩形
块状元素的计算包括宽（width），高（height），填充（padding），边框（border）以及空白边（margins）
如果没有定义高，块状元素的高度将和其内部内容加上填充的高度之和一致（除非使用了浮动，见下）
如果没有定义宽，非浮动框将延展到其父元素宽度减去填充的位置（后面会提到）

处理盒模型元素一定要注意的事项：

如果一个盒子的宽度设置为“100%”，那么就不要再设置任何空白边（margins），填充（padding）和边框（border），否则会溢出其父元素
垂直比邻的空白边可能会导致一些复杂的叠加问题从而产生布局问题
相对定位或绝对定位的元素会有不同的表现形式，本文暂不涉及此部分内容

Firefox的Firebug中显示的盒模型样式

了解Block和Inline的区别

下图描述了块级元素（block）和行内元素（inline）的区别：

这里有一些基本的规则可以区分块状元素（block）和行内元素（inline）：

在默认情况下，块状元素会自动水平延展填充其父元素，因此没有必要设置宽度为“100%”
在默认情况下，块状元素开始于其父元素的最左侧边缘，以及任何在其之前元素的下方（除非设置了浮动或者定位）
行内元素会忽略宽度和高度设置
行内元素会随着文字进行浮动，并且会根据排版属性进行调整，如white-space， font-size， 以及letter-spacing
行内元素可以使用vertical-align属性进行排列，但是块状元素不行
行内元素会在下方自动生成一些空间来容纳低于水平线的文字元素（如字母“g”）
如果行内元素设置了浮动就变成了块状元素

了解浮动和清理

对于多栏布局来说，使用浮动设置是最好的解决方案。

一个进行了浮动设置的元素既可以向左浮动也可以向右浮动，直到他们达到其父元素或者其浮动元素的边缘。在浮动元素下面的非浮动元素，行内元素将沿着浮动元素的边界向另一方向浮动。

在进行元素的浮动或者清理设置的时候要注意以下几点：

浮动元素是和其他块级、非浮动元素流体中区分出来的。换句话说就是，如果你将一个盒子向左侧浮动，那么尾随其后的、没有进行过浮动设置的段落（块级）将会在一个堆栈中出现在其后面，并且段落中的文字（行内级）将会围绕浮动元素进行排列。
要想使内容围绕浮动元素排列，其必须是行内元素，否则将会和浮动元素朝同一方向进行浮动
如果一个浮动元素没有设置宽度，那么和其内容宽度保持一致，因此，最好给浮动元素都设置一个宽度
如果一个浮动元素内还含有子元素，那么它将被“叠加（collapse）”，这就需要进行修复
被“清理（cleared）”过的元素将会避免围绕其前面的浮动内容进行排列
一个既被设置过清理也被设置过浮动的元素，只能清理其前面的元素，而不是后面的

了解IE最常见的问题

如果你要用IE进行开发，或者要检查IE的布局情况，那么你就应该在开始工作之前充分了解IE（通常是IE6和IE7）会遇到的各种问题：

如果使用了浮动设置，IE6将会出现内容消失或者文字重复的问题
在相同方向的浮动元素上，IE6会使空白边（margins）产生双倍大小；通常的解决方案是设置“display: inline”
在IE6和IE7中，如果元素没有进行布局设置（比如宽高设置等），将会产生一系列的问题，包括不显示背景，空白边叠加不正确等等
IE6不支持最小（min-）和最大（max-）的CSS属性，比如min-height，或max-width
IE6不支持背景图片的固定定位
IE6 和IE7不支持很多显示属性（display）的值（如：inline-table，table-cell，table-row，等）
你不能在IE6的任何元素中使用“:hover”伪类，除了

除了以上还有很多很多的bug，但是这些都是在进行跨浏览器体验中最常见也最重要的。希望广大开发人员能够对以上提到的几点进行更多深入的研究，以便能够更精确的掌握问题所在及如何处理。

一些可能永远都不会一样的东西

正如已经提到的，想在每种浏览器中都得到完全相同的视觉和功能体验是不太可能的。你可能能将元素的像素精确度做到最大化，但是有些事情不是开人人员可以掌控的。

表单外观通常都是不一样的

请看以下这张图，5个不同浏览器中元素在不同的浏览器中表现是不一样的

一些表单元素的外观是可以控制的。比如客户要求表单的提交按钮必须在每个浏览器中都一样，那么你可以使用图片来代替默认的

但是对于单选按钮（radio），多文本输入框（textare），以及之前提到的选择框

这样做允许选择列表使用视觉效果将电影清单分开。

3.

标签可以用来定义或者进一步解释一组文字。当你将鼠标悬浮在使用了标签的文字上的时候，将会在其下方出现一个带有文字的方框。看看下面的例子：

The microblogging site <acronym title="Founded in 2006"> Twitter</acronym> has recently struggled with downtimes.

效果预览:

SEO is full of trickery and magic.

4.

是一个非常不起眼的小标签，但是它并非没有可用之地。顾名思义，

允许你对HTML中的地址添加语义代码。这个代码可以将标记内的文字斜体化。当然，你也可以通过CSS改变样式。

<address>Glen Stansberry </address>

1234 Web Dev Lane

Anywhere, USA

5. 和

如果你想使用标记来显示编辑修订效果，和~~正式你所要的。正如名字所暗示的，使用下划线突出显示添加的，~~使用删除线显示被去除的。~~~~

John <del>likes</del> <ins>LOVES</ins> his new iPod.

效果预览:

John ~~likes~~ LOVES his new iPod.

6.

当写代码的时候表单元素很容易被忽略。而其中一个最容易被忽略的就是标签。标签不仅可以快速注解你的标签文字，而且可以使用”for”语句定义哪个元素被赋予到了该标签。这些标签不仅可以用来定义样式，而且可以让你为关联元素设置标题点击。

<label for="username">Username</label>

<input id="username" type="text" />

7.

是一个很少用的属性，他可以添加到你的表单上为表单元素创建一个逻辑组。一旦应用了

标签，所有表单元素将会被一个方框缩包围。你可以在

标签内使用来定义该组的标题。

<form><fieldset></fieldset></form>

Are You Smarter Than a 5th Grader?

Yes
<input name="yes" type="radio" value="yes" />

No
<input name="no" type="radio" value="no" />

效果预览:

8.

和是同类标签，不过仅仅用来定义缩写单词。和一样，当你在缩写字符元素上使用鼠标悬浮的时候，该缩写的完整定义将会出现在下方。极少被使用，但是对于多数屏幕阅读者，语法检查者和搜索引擎来说非常有用处。

<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album.

效果预览:

Sgt. Pepper’s Lonely Hearts Club is my favorite album.

9. rel

Rel可能是一款超级有用的属性，任何HTML元素都可以应用它。它对于读取那些没有被特别定义的额外的变量非常有帮助。当你在HTML中使用Javascript的时候非常有用。如果你有一个链接，并想进行行内编辑，你可以这样做：

<a rel="clickable" href="page.html">This link is editable</a>

Javascript可以寻找带有”clickable”属性的链接，然后应用Ajax技术使该链接可以被进行行内编辑。而这仅仅是rel属性众多技术中的一个。

10.

是一个非常偏僻的标签。说实话，我怀疑你们是否有人接触过它。从本质上讲，这个标签允许你在指定的地方进行切断换行。不过这个标签非常独特，它需要依赖浏览器的分辨能力。这个标签对于想要避免出现垂直滚动条的情况非常有用。

如果你想使用这个效果，你可以试试看这个标签。不过需要注意的是，它并不被所有浏览器支持，具体的技术指标情参看这篇文章。

<span>How do you say Supercalifragilisticexpialidocious?</span>

[原文链接]

13个加速WordPress并提高性能的技巧

4EB Studio — Tue, 24 Mar 2009 06:38:13 +0000

对于一个成功的网站来说，性能是一个关键因素。如今WordPress已经越来越流行，但是它只有在某些情况下才能发挥出它的最佳效用。如果你觉得你的wordpress还没有发挥出最佳性能，并且你希望能够提高你网站的点击量或者发觉一些你所不知道的wordpress的隐藏功能，那么你可以试试以下的一些建议。

一些基本且简单的步骤

1. 升级到最新版本

WordPress 2.7相对之前的版本有很多性能上的提高，所以你最好升级到到最新的版本。

2. 移除不必要的插件，并更新现有的插件

移除任何你不使用的插件。禁用并且直接从你的服务器上将他们删除。禁用插件将会影响到网站的速度因为Wordpress会自动检测这些插件是启用了还是未启用。另外，你必须将你正在使用的插件升级到最新版本。开发人员之所以发布新的版本是因为他们修改了一些代码从而使插件能够更好的运行。

3. 最小化PHP以及数据库读取

我阅读了 Wpcandy’s simple ways to speed up WordPress 这篇非常好的技巧。它提供了许多建议来降低PHP和数据库读取。每当你的网站页面加载的时候，如果你的浏览器不得不执行任何PHP读取，它将增加页面的加载时间。如果你使用静态的HTML代替PHP读取，每次网页加载的时候，浏览器只读取HTML。

4. 从myPhpAdmin优化和修复你的数据库

每周或者定期你应该登录到你的myPhpAdmin对数据进行优化。打开你的Wordpress数据库图表，将所有选项全部选取，然后在选择框中选择“优化图表(Optimise Tables)”和“修复图表(Repair Tables)” 选项。你会惊奇的发现这个建议是多么的好，它将对现有数据库优化10%。

整理你的图片

5. 使用值得信赖的图片存储服务商

试着将网站上的图片，CSS，JavaScript和其他静态文件存放在Amazon S3存储空间上，你会发现你的服务器的CPU及内存的平均消耗数量会减少很多。具体请参考这里。

你也可以试试这个WordPress插件，WP-Offload将通过卸载你的静态内容如图片，文件以及多媒体等加速你的博客性能。这将大大降低你的宽带消耗以及HTTP请求数据。

6. 使用Shrink O’Matic优化你的图片

Shrink O’Matic是一款AIR软件可以轻松的批量修改你的图片大小。它可以处理JPGs, GIFs以及PNGs格式的图片。简单的拖拽图片，然后按照你的意思修改图片大小。你还以选择输出的大小，文件名称和格式。

提高性能的好建议

7.安装WP Super Cache插件

我猜你们大多数人都知道为什么我会坚持使用该插件。该插件可以从你的动态Wordpress博客上生成静态的html文件。当一个静态的html文件生成以后，你的服务器将不用再去读取那些极占资源的PHP脚本，并且不会去加载数据库中的任何内容，这样你的文章将会被加载的更快速。

PHP Speedy WP可以迅速且轻松的加速你的WordPress网站并且改善你的博客响应时间。CSS背景图片可以自动的转化为Data URI，这就十分有效的降低了HTTP请求的数量。另外更重要的是，它和IE浏览器器兼容，即使后者不支持Data URI。不幸的是，PHP speedy 存在一些漏洞需要修复：合并后的JavaScrip被放置在了页面头部，这样它就不能在WP Super Cache中工作。为了解决这个问题，你必须查看Prelovac 提供的这篇文章，对这两个插件进行一些修改。

9.WP CSS

该插件可以备份压缩（GZIP）以及去除CSS文件中的空格。它可以让你自信的在CSS文件内使用@import而无需顾虑客户端的情况。它将查看你的style.css文件并且将任何@import文件置入其中。同时还会提供一个缓存修改时间。你还可以在指定的页面添加CSS文件或者将他们都放置在一个文件里面。

10.DB Cache

这个插件可以定期缓存你的每一个数据库。他的速度非常快而且仅使用了很少的空间。

11.通过使用AJAX Libraries API 加速访问你的常用架构

AJAX Libraries API可以加速开发人员制作网页应用的速度，它仅仅是通过将一些非常流行的javascript库全都存放在了一起，这些库包括：

你可以直接添加这些链接：

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"></script>

或者可以使用Google’s API:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript"></script>

通过使用 google.load()方式，你的应用程序速度将会提升很多。

12.显示页面加载时间和读取数量

这里有一个非常简单的代码可以插入到你的模板中来显示你的页面加载时间，或者有多少sql数据被执行了。这个技巧对于判定WordPress优化效果非常有用。

 queries in   seconds.

13.优化数据库

MySQL是一个非常棒的数据库，但是他自身不会进行清理工作。该插件运行一个优化表的命令，有效的清楚了数据碎片。这是一个非常有用的数据表插件并且更新非常块。界面非常简单：仅有一个按钮：立刻优化（Optimize Now）。

[原文链接]

IE修复: Bicubic图像调整

4EB Studio — Tue, 17 Mar 2009 09:26:29 +0000

Devthought 之前提供的一个css的小技巧现在还是值得拿出来再说说的。虽然这并非一个新点子，单他确实是一个非常重要的技巧。

下面就是我要说的这个小技巧：

img { -ms-interpolation-mode: bicubic; }

如果在你在代码中使用宽度或者长度标签来调整图片大小，IE会认为这是一个垃圾代码，除非你使用上面这个代码片段。总而言之，并不建议在浏览器中调整图片大小，但是总是会遇到一些例外的情况的。

[原文链接]

读者精选: 30款必用的mac网页设计软件

4EB Studio — Thu, 05 Feb 2009 09:21:27 +0000

上周我们发表了一篇名为 “15款网页设计师必备的mac应用程序“的文章，我请我们的读者说说他们最喜欢的mac应用软件以及原因。

本文我们将列举读者们建议的30款网页设计师和开发人员必备的mac应用程序，这些程序或能节省网页或程序开发的时间，或能帮助他们有效实施工作计划。

1. Transmit

功能丰富的FTP / SFTP / WebDAV客户端软件：获取iDisk, FTP, SFTP, 或者TLS/SSL上的文件。可以使用各种程序编辑远程文件，甚至是图形文件。具有拖拽功能和自动同步功能。

2. TextMate

无论你是一名程序开发人员还是设计师，编写代码都是一件非常辛苦的事情，TextMate可以让你工作起来游刃有余，降低脑力负荷，并让常规的手写工作交由电脑来完成。TextMate被我们的读者评选为最有用的和极具扩展功能的文本编辑器，特别是使用Subversion的用户。TextMate产品贴士，是一篇非常有用的文章，提供了12个技巧帮助你更有效的使用TextMate。

3. Anxiety

Anxiety是Mac OS X Leopard下的一款轻量级的To-do工具，可以和iCal以及Mail同步。Anxiety提供了一个简介而紧凑的界面，可以添加和查看你的任务清单，并且可以以各种方式集合在桌面背景上。

4. BBEdit

BBEdit是一款专业的Mac平台下的HTML及文本编辑工具，提供了对文本进行编辑，查找和管理的各种高性能。智能界面可以让你轻松使用BBEdit的各种特性，包括检索目标模式匹配，多文件查找替换（甚至是没有打开的文件以远程服务器上的文件），项目定义工具，功能导览以及针对不同代码语言的语法颜色标识，代码折叠，FTP和SFTP模式打开、保存文件，AppleScript，Mac OS X Unix脚本支持，文本和代码自动完成，当然还有一系列的HTML工具。

5. HyperEdit

Tumult HyperEdit 是一款轻量级的HTML编辑器，它提供了一个预览窗口来实时显示页面。HyperEdit打破了冗长乏味的代码书写模式：写html，保存，在浏览器中加载及预览。它实现了撰写，修改与预览的同步进行，加快了整个页面设计的进程。W3C验证会将错误的语法用红色的下划线标记出来。它内嵌了与Safari相同的渲染引擎，因此不仅符合标准而且速度还非常快。

6. Versions

Versions提供了在mac上用Subversion工作的一个非常好的方式。无论你是一个Subversion高手，还是新手，Versions都会帮你优化你的工作流程。

7. Skitch

skitch不仅允许你快速创建并编辑截屏，而且还提供给你一个服务器空间和平台来储存这些图片方面你在skitch页面上进行浏览。skitch特性包括：网页快照，捕捉对话瞬间，应用程序截屏，iSight捕捉，快速建立想法草图，连接到iPhoto库。

8. LaunchBar

LaunchBar是一款获奖的工具软件，提供了快速接口进入你的应用程序，文件，联系人以及书签，iTunes资源库，以及搜索引擎等，所有这些仅需输入你要查找的项目名称的缩写即可。

9. Quicksilver

当打开Quicksilver的时候，它会创建一个经常使用的文件夹和文件的目录。激活它以后，你可以快速查找和打开目录中的任意一项。Quicksilver可以基于先前的经验来查找哪个项目是你正在查找的。他也支持缩写功能，因此你可以输入整个字符或者片段即可。

10. Littlesnapper

LittleSnapper是一款截屏和网页快照应用程序。特性包括：完整页面捕捉，元素捕捉（意味着你将不再需要使用十字线），突出显示指定区域，内建文本标注，与客户共享快照等。

11. Aptana

Aptana Studio是一款完整的网页开发环境，整合了一系列强大的写作工具以及协作服务帮助你和你的团队实现轻松的工作。创建，调试，测试以及配置可扩展的PHP解决方案。支持jQuery, prototype, dojo, YUI, ExtJS, MooTools及其他 Ajax库。停放和扩展你的PHP及Jaxer 应用，使用Aptana RadRails快速开发Ruby及Rails应用。使用你的Ajax和JavaScript技巧创建服务器端应用等。

12. ForkLift

强大而快速的FTP应用程序。

13. journler

Journler是一款日记及信息记录软件。与iLife整合，语音和视频接口，文件导入和即时搜索与过滤，不仅集成Mail, iWeb以及Address Book，而且还支持博客，AppleScript以及Spotlight 。

14. Evernote

Evernote允许你在任何环境下使用任何工具或平台来捕获信息，并且在任何时候任何地点均可查看这些信息。

15. TimeLog

跟踪项目时间，界面类似iTunes™，任何一个Mac使用者都会对TimeLog感觉非常熟悉。TimeLog可以跟踪你正在使用的软件，并且显示时间线。这对于跟踪你的工作非常容易，甚至是你忘记了开始的时间。

16. Intaglio

Intaglio是Macintosh下的一款传统的绘画绘图软件。仿照原始的Macintosh绘图工具，Intaglio更倾向于初级使用者以及传统的Macintosh使用者。Intaglio创建2D图形，文字，颜色和适用于Mac OS X的脚本来提供作为一款廉价的绘图软件创建出的前所未有的力量和灵活性。Intaglio并不适用于Mac OS X，它起初的目的就是为了探索该平台为绘图工作实现理想化的能力。

17. Code Collector Pro

Code Collector Pro提供了组织，实用以及共享代码片段的最好解决方案。

18. Rapidweaver

RapidWeaver是Mac OS X下的一款强大的网页设计应用程序。它基于标准的代码，并且能发不到任何ftp服务器上或是.Mac及MobileMe。

19. Paparazzi

Paparazzi是一款小型的Mac OS X工具用来制作网页快照。

20. Growl

Growl是Mac上的一款通知系统。它提供你正在使用的软件的一些提示信息，而无需进行程序切换。

21. Filezilla

另一款免费的FTP应用程序。

22. Mamp

MAMP可以在你的Mac OS X电脑上安装一个服务器环境。只需点几下鼠标，你就可以为Mac OS X安装Apache, PHP以及MySQL。

23. Billings

Billings可以在任何地方生成专业模式的发票，并且它还内建了30款模板供选择。

24. ColorSchemer

ColorSchemer是一款针对爱好者或者高级人士的专业配色程序。通过使用一个动态视觉色轮，可以即可观察各匹配颜色之间的关系，甚至可以让ColorSchemer智能提供给你一些配色建议。

25. ExpanDrive

ExpanDrive提供给你完全透明的打开，编辑，保存你的喜爱程序的方式，甚至是这些文件存在于世界各地的服务器上。透明的意思是说你甚至都不会感觉到你是在操作一个远程服务器上的文件，它就像是在你的电脑上直接使用USB驱动一样。

26. info.xhead

你的生活中总是会存在一些你不想忘掉的信息。不论它是密码，帐号，愿望列表或是让你挣脱乏味工作的百万美元想法，info.xhead 可以储存所有的这一切，并且将他们归类放置。

27. Vector Designer

VectorDesigner是一款使用简单，直观并且功能强大的适量绘图软件。它可以让你创造出各种极具想象力的适量图，如海报，手册，招贴画，logo，网页图形，t-shirt等等。它有丰富的工具和智能图形：轻松创建矩形，椭圆，多边形，五角星，贝尔曲线，甚至还可以将位图转化成矢量图形。

28. Cuppa

Cuppa是Mac OS X上一款小巧的饮茶时间工具，它会告诉你什么时候你的茶可以喝了。

29. PlainView

Plainview是一款全屏幕的浏览器。

30. Silverback

Silverback是一款为设计师和开发人员设计的并不抢眼的实用测试工具。它可以捕捉屏幕动作，录制参与者的动作、声音，轻而易举的添加段落标记，用遥控器控制录制，导出到Quicktime。

[原文链接]

15款网页设计师必用的mac应用程序

4EB Studio — Thu, 29 Jan 2009 09:19:43 +0000

1. Espresso

Espresso是由CSSEdit 的开发人员开发的一款非常强大的网页工具。提供了强大的编辑，项目管理，实时预览，实时发布及同步功能。Espresso具有一个无比强大的基于规则的语法引擎CoreSyntax，它可以将你的文本文件转化成语义结构。Espresso还具有一个可扩展的，可以和CSSEdit样式表单列表相媲美的导引。

2. CSSEdit

CSSEdit是专注于样式表单的一款工具，它提供了相当广泛的特性。选择器构建，高级视觉编辑器，实时预览，智能源码环境以及一个强大的X-Ray网页侦测器进行CSS调试。

3. Pixelmator

Pixelmator，Mac OS X上的一款设计漂亮，易于上手，快速且功能强大的图像编辑器，可以让你创建，编辑，增强你的图片效果。Pixelmator 是一款基于图层结构的图像编辑器，你可以从你的照片，其他图像，所选图形甚至是iSigh快速创建图形。 Pixelmator 可以直接从你的Mac上的小照相机添加层到你的作品上。通过Pixelmator强大，像素精确化收集的选择工具，你可以快速而轻松的选择你图像上的任一部位进行编辑及应用特殊效果来增强你的图片效果。

4. Coda

Panic Coda是一款伟大的一体化网页开发环境工具，在不同的标签上显示你经常使用的工具。这些工具包括：文本编辑器，CSS编辑器，文件传输，svn，终端和智能拼写检查。支持常见的语言，包括：CSS, HTML, Javascript, Java, Perl, PHP, Python, Ruby, SQL, XML, 以及纯文本。

5. Lineform

Lineform是一款理想的矢量艺术，图表以及插图工具。Lineform具有所有的最流行的工具，包括从手画多边形到合成特效等任何功能，可以让你不必实用多余的功能就能创建你想要的设计。

6. Fontcase

Fontcase是一款字体管理软件，提供了一个简洁而且功能强大的工具流程来帮助你管理安装在系统中的字体。类似iTunes的界面风格，Fontcase 具有一个强大的标记系统，用来让你像控制你的音乐一样来控制你的字体。

7. Deep- Image Search

Deep通过分析像素和计算最流行的颜色来计算你的图像中所使用的色彩范围。这就是Deep中的调色板的强大之处，你可以查找具有相同色彩的图像，特别是当你正在寻找最适合你网页的图像的时候尤其有用。事实上，你只要把任何图像拽到Deep中，它就会查找并排列你电脑中所有类似的图像。

8. Cyberduck

Cyberduck是为Mac设计的一款开源的FTP, SFTP, WebDAV, Mosso Cloud Files以及Amazon S3浏览器工具。它具有一个使用简单的，可以通过标签进行链接的界面。

9. Flow

Flow是另一款开始流行的文件传输软件。Flow可以将Mac上最好的传输到你的服务器文件和文件夹。简而言之，Flow可以让你像在本地工作一样进行远程工作。使用Flow，你可以直接在你的服务器上编辑文件，连接到FTP, SFTP, Amazon S3, WebDAV, 以及MobileMe iDisk服务器，无须用户接口和其他功能即可快速上传。

10. Sequel Pro

Sequel Pro是一款Mac OS X上的MySQL数据库管理软件。Sequel Pro可以让你在本地或远程直接进入你的MySQL数据库，支持各种流行格式包括SQL, CSV及 XML等的数据导入与导出。

11. Things

任务管理从来没有如此简单过。通过Responsibility中的Projects和Areas菜单管理你的 To-do项。特性包括：智能今日事件列表，可以自动收集所有你今天需要注意的事件；重复事件；任何条目均可轻松的通过日期进行存放；iPhone 同步及其他许多功能。

12. xscope

xScope是一款功能强大的套装工具，旨在测量，校准以及检测屏幕上的图形和布局。通过Mac OS X的菜单栏快速选择，xScope的灵活工具可以在桌面窗口以及UI元素上浮动，从而使测量工作轻而易举。

13. KeyCue

KeyCue让你实时预览任何应用程序的所有功能，并且可以让你通过使用菜单快捷方式更有有效的自动开始工作。

14. TextExpander

TextExpander通过对你经常使用的字符串、代码片段以及图像设置自定义的缩写来节省你无数的键盘敲击次数。

15. OnTheJob

On The Job拥有许多强大的功能但是最具声望的就是它是Mac OS X最简单的时间和花费跟踪解决方案。On The Job提供了灵活的发票创建功能。为特殊的时间范围，单一工作或生成多项工作创建发票。

四眼天兔工作室 » 网页设计

CSS的跨浏览器代码准则

了解CSS的盒模型

了解Block和Inline的区别

了解浮动和清理

了解IE最常见的问题

一些可能永远都不会一样的东西

表单外观通常都是不一样的

3.

4.

5. 和

6.

7.

8.

9. rel

10.

13个加速WordPress并提高性能的技巧

1. 升级到最新版本

2. 移除不必要的插件，并更新现有的插件

3. 最小化PHP以及数据库读取

4. 从myPhpAdmin优化和修复你的数据库

整理你的图片

5. 使用值得信赖的图片存储服务商

6. 使用Shrink O’Matic优化你的图片

提高性能的好建议

7.安装WP Super Cache插件

8.PHP Speedy WP

9.WP CSS

10.DB Cache

11.通过使用AJAX Libraries API 加速访问你的常用架构

12.显示页面加载时间和读取数量

13.优化数据库

IE修复: Bicubic图像调整

读者精选: 30款必用的mac网页设计软件

1. Transmit

2. TextMate

3. Anxiety

4. BBEdit

5. HyperEdit

6. Versions

7. Skitch

8. LaunchBar

9. Quicksilver

10. Littlesnapper

11. Aptana

12. ForkLift

13. journler

14. Evernote

15. TimeLog

16. Intaglio

17. Code Collector Pro

18. Rapidweaver

19. Paparazzi

20. Growl

21. Filezilla

22. Mamp

23. Billings

24. ColorSchemer

25. ExpanDrive

26. info.xhead

27. Vector Designer

28. Cuppa

29. PlainView

30. Silverback

15款网页设计师必用的mac应用程序

1. Espresso

3. Pixelmator

4. Coda

5. Lineform

6. Fontcase

7. Deep- Image Search

8. Cyberduck

9. Flow

10. Sequel Pro

11. Things

12. xscope

13. KeyCue

14. TextExpander

15. OnTheJob

其他你可能感兴趣的Mac应用程序