Ok, so you shelled out $US400 for DreamWeaver. Your latest PhotoShop upgrade was another US$170, and Illustrator cost about the same. Your pockets are a lot lighter than they ought to be, but all you have is the bare essentials.
好的，所以您为DreamWeaver支付了400美元。 您最新的PhotoShop升级价格为170美元，而Illustrator的价格大致相同。 您的口袋比应该的要轻很多，但是您所拥有的仅仅是必需品。
Never fear! We’ve got 5 powerful tools that will smooth your development without costing you a single penny (unless you choose otherwise).
从不畏惧！ 我们拥有5个功能强大的工具，这些工具可以使您的开发顺利进行，而无需花费一分钱(除非您另有选择)。
IconP的ColorPic (ColorPic by Iconico)
There certainly is no shortage of specialized eyedropper utilities, but few have pulled all the right functionality together as usefully and elegantly as Nico Westerdale’s ColorPic.
当然，不缺少专业的吸管工具，但几乎没有像Nico Westerdale的ColorPic一样有用且优雅地将所有正确的功能整合在一起的工具。
If you’re starting off a project without much more than a logo or a photo, ColorPic is an absolute gem. Get up close and personal using the handy zoom window, grab the main colors with a snappy CTRL-G, then just pick out the ‘bridging’ colors from the anti-aliased edges.
如果您刚开始的项目只是一个徽标或一张照片，那么ColorPic是绝对的瑰宝。 使用方便的缩放窗口近距离接触并保持个性，使用快捷的CTRL-G抓住主要颜色，然后从反走样边缘中挑选出“桥接”颜色。
Each set of chips is savable as a "palette" so you can easily recall archived project color sets in seconds. All colors are available in RGB and Hex.
每套芯片都可以作为“调色板”保存，因此您可以在几秒钟内轻松调用已归档的项目颜色集。 所有颜色都有RGB和Hex两种。
The app is offered free of charge from Nico’s site at Iconico.com, but he offers other, equally great, inexpensive software for you to test-drive. You’ll no doubt notice the brilliant product, Screen Calipers, which is also worthy of mention. The full version is only US$15 and includes transparency options, skinning and multiple units of measure. Grab them both and at least write him a nice thank you letter!
Nico的Iconicon.com网站免费提供了该应用程序，但他还提供了其他同样出色的廉价软件供您试用。 您无疑会注意到出色的产品Screen Calipers，它也值得一提。 完整版仅售15美元，其中包括透明度选项，外观和多个计量单位。 抓住他们两个，至少给他写一封不错的感谢信！
Download Colorpic here.
在此处下载Colorpic。
MWSnap by Mirekw.com (MWSnap by Mirekw.com)
Screen capture? What’s wrong with the old Print Screen button? Nothing at all… but MWSnap is one of those nicely crafted little apps that makes it faster and easier for you to continue working the way you already do. It’s all about ease and convenience.
屏幕截图？ 旧的“打印屏幕”按钮有什么问题？ 没什么……但是MWSnap是精心制作的小应用程序之一，它使您可以更快，更轻松地继续按照自己的方式工作。 一切都与轻松和便利有关。
Most importantly, MWSnap allows you more easily to target specific areas of the screen, be it a small section of your graphics, a separate menu, a complete window, an entire application view, or your whole desktop. Images can be captured directly to your clipboard and flipped into you favorite image-editing program in seconds. Alternately, you can effortlessly capture dozens of images to a directory simultaneously — and have filenames auto-generated for each (great for site demos).
最重要的是，MWSnap使您可以更轻松地定位屏幕的特定区域，无论是图形的一小部分，单独的菜单，完整的窗口，整个应用程序视图还是整个桌面。 可以将图像直接捕获到剪贴板中，并在几秒钟内翻转到您喜欢的图像编辑程序中。 或者，您可以毫不费力地同时捕获几十个图像到一个目录中-并自动为每个图像生成文件名(对于站点演示来说非常好)。
That may well be all you ever need from MWSnap, but it also offers a range of useful little widgets, including rulers, programmable hotkeys, dummy cursors (very nice!), color-pickers, crop and rotate tools and info panels.
MWSnap可能正是您所需要的，但是它还提供了一系列有用的小部件，包括标尺，可编程热键，虚拟光标(非常好！)，颜色选择器，裁剪和旋转工具以及信息面板。
MWSnap is mighty useful little app provided for your designing pleasure through the good grace of the very talented Mirek Wojtowicz.
MWSnap是一款功能强大的有用小应用程序，通过非常有才华的Mirek Wojtowicz的良好恩典为您提供设计乐趣。
Download MWSnap here.
在此处下载MWSnap。
BradSoft的TopStyle Lite (TopStyle Lite from BradSoft)
Back in the mire of the primordial Internet (well, the mid 90s, actually), Nick Bradbury got sick of the HTML editor he was using and decided to sit down and darn well write his own. HomeSite went on to become one of the early success stories of HTML editing until it was eventually subsumed by the Macromedia Megaship. Nick snuck out of HomeSite, but continued doing what he does best — writing nifty little editors for burgeoning technologies. In this case, it’s a beautiful little CSS editor called TopStyle.
回到原始互联网的泥潭(实际上是在90年代中期)，尼克·布拉德伯里(Nick Bradbury)厌倦了他所使用HTML编辑器，并决定坐下来并努力编写自己HTML编辑器。 HomeSite继续成为HTML编辑的早期成功故事之一，直到最终被Macromedia Megaship所采用。 尼克(Nick)离开HomeSite，但继续做自己最擅长的工作-为新兴技术编写漂亮的小编辑器。 在这种情况下，它是一个名为TopStyle的漂亮CSS编辑器。
Now, Nick provides two flavors of TopStyle: a ‘Pro’ and a ‘Lite’ version.
现在，尼克提供了TopStyle的两种样式：“ Pro”和“ Lite”版本。
TopStyle Pro is the complete package, capable of high-level editing on much more than just CSS. At around $US80, it represents real value for anyone who spends a significant part of their day working with CSS. The browser profiles alone are worth the entry price.
TopStyle Pro是一个完整的软件包，不仅可以对CSS进行高级编辑。 它的价格约为$ 80美元，对于那些花费大量时间与CSS工作的人来说，它代表了真正的价值。 仅浏览器配置文件值得入门价格。
But we’re here for free stuff, right? Let’s talk TopStyle Lite.
但是我们在这里免费提供东西，对吗？ 让我们谈谈TopStyle Lite。
What do you need a separate CSS editor for? Inline auto-complete features in products like Dreamweaver give you all the options you need. Maybe so, but do they let you do any of the following?
您需要单独CSS编辑器做什么？ Dreamweaver等产品中的内联自动完成功能可为您提供所需的所有选项。 也许是这样，但是他们可以让您执行以下任一操作吗？
- Instantly check property support across a range browsers and specs 即时检查各种浏览器和规格的属性支持
- Manage complex sheets easily by expanding and collapsing rules as you work with them 在处理复杂工作表时，可以通过扩展和折叠规则来轻松管理它们
- Construct rules line by line with a powerful style inspector 使用功能强大的样式检查器逐行构建规则
- Preview changes instantly. 立即预览更改。
I have to admit, when I started seriously to work with a CSS layout, this little app moved me through the learning curve quicker then anything else I could find. Books, online resources and cheat sheets are all great, but the month I spent absent-mindedly flipping through the Style Inspector panel in TopStyle Lite had me quickly experimenting with CSS I’d never even heard of. It doesn’t take long to develop a comfortable familiarity with CSS this way.
我不得不承认，当我开始认真地使用CSS布局时，这个小应用程序比其他任何东西都能使我更快地通过学习曲线。 书籍，在线资源和备忘单都很棒，但是我花了整整一个月的时间在TopStyle Lite中浏览Style Inspector面板，使我Swift尝试了从未听说过CSS。 通过这种方式很快就可以熟悉CSS。
All in all, even if you never decide to spend the extra to get the goodies in the Pro version (including most notably ‘Split-screen, multi-browser preview’, a ‘Style Sweeper’, validators and ‘HTML Tidy’ integration), TopStyle Lite will likely serve you very well for years to come.
总而言之，即使您从未决定花更多的钱来购买Pro版本的产品(包括最著名的“分屏，多浏览器预览”，“样式扫描器”，验证器和“ HTML Tidy”集成) ，TopStyle Lite可能会在未来几年为您提供很好的服务。
Download Topstyle Lite here.
在此处下载Topstyle Lite。
FireFox和Web开发人员工具栏：Chris Pederick (FireFox and the Web Developer Toolbar: Chris Pederick)
Ok, I know I’m probably preaching to the converted here. If you’re at SitePoint you’re likely well-versed in the functional, security and virtue-enhancing advantages of using the Mozilla FireFox browser. But if, by chance, you happen to be waiting for that last little push to get you over the FireFox line, the Web Developer Toolbar is an almighty shove.
好的，我知道我可能在这里宣教。 如果您在SitePoint上，则可能精通使用Mozilla FireFox浏览器的功能，安全性和增强美德的优势。 但是，如果偶然地，您恰好在等待最后的推动，以使您走过FireFox产品线，那么Web Developer Toolbar是万能的。
As ‘Spooky’, the only user to comment on the WDT download page, put it, "OMG- What did I do before this???"
作为“ Spooky”，唯一在WDT下载页面上发表评论的用户，请输入“ OMG，在此之前我做了什么？？？”
Chris’s initial version of the WDT was released in June 2003 and had a killer set of tools for the Web professional, including:
Chris的WDT初始版本于2003年6月发布，它为Web专业人士提供了一套杀手of的工具，其中包括：
- Convert POSTs to GETs 将POST转换为GET
- Cookie Information Cookie信息
- Current Window Size 当前窗口大小
- Disable Styles 禁用样式
- Display Form Details 显示表格详细信息
- Enable Autocompletion 启用自动补全
- Hide Images 隐藏图片
- Outline Block Level Elements 大纲块级元素
- Outline Images Without Alt Tags 没有Alt标签的轮廓图像
- Outline Table Cells 大纲表单元格
- Resize to 640×480 调整为640×480
- Resize to 800×600 调整为800×600
- Resize to 1024×768 调整为1024×768
- Validate CSS 验证CSS
- Validate HTML 验证HTML
- Validate Section 508 Accessibility 验证第508条可访问性
- Validate WAI Accessibility 验证WAI可访问性
- View Source 查看资料
It was impressive. But, just a little over 12 months later, the WDT now has over four times the functionality and it’s all killer — no filler!
令人印象深刻。 但是，仅在短短12个月后，WDT的功能就超过了四倍，而且全都成为杀手—-没有填充器！
There are just far too many features for me to do justice to the current version of WDT in the limited space here. So, here are just a few of my personal faves:
在这里有限的空间内，我有太多功能无法与当前版本的WDT相称。 因此，以下是我的一些个人收藏：
- Edit CSS — Alter CSS on any site live in the browser as you watch 编辑CSS-观看时，可以在浏览器中的任何站点上更改CSS
- Disable JavaScript/CSS/Java without having to wade through the Tools/Options menus 无需浏览“工具/选项”菜单即可禁用JavaScript / CSS / Java
- Generate customized site speed reports with one click 一键生成定制的网站速度报告
- Display inline dimensions of all images 显示所有图像的内联尺寸
- Display ID and Class detail (very handy for CSS debugging) 显示ID和类详细信息(对于CSS调试非常方便)
- Outline images without ALT attributes — pick up your accessibility errors at a glance 不带ALT属性的轮廓图像-概览您的辅助功能错误
- 7 different code validators, plus a facility for you to add your own custom validator (perhaps running on a local network) 7个不同的代码验证器，以及为您添加自己的自定义验证器的工具(可能在本地网络上运行)
Chris has even designed an amazing 1-click ‘topographic view’, which graphically displays the ‘nested-ness’ of every element on a page — the deeper the nesting, the lighter it’s tone. Amazing.
克里斯甚至设计了一个令人惊叹的一键式“地形视图”，它以图形方式显示页面上每个元素的“嵌套状态”-嵌套越深，色调越浅。 惊人。
Suffice to say that, about once every couple months, one of the SitePoint team members downloads the latest of Chris’s babies and we have a collective ‘Bill and Ted’ moment as we test the new features — ‘Awwwwesome!’ (all nodding knowingly).
可以说，大约每两个月一次，SitePoint团队的一名成员就下载了Chris的最新婴儿，我们在测试新功能时遇到了“比尔和泰德”的共同时刻-“ Awwwwesome！” (所有人都在故意点头)。
Download the Web Developer Toolbar here.
在此处下载Web Developer Toolbar。
Accessify.com的辅助功能工具箱 (Accessibility Toolbox from Accessify.com)
Feeling a bit guilty about all this accessibility stuff? Me too. My forms and popup code had been perfectly fashionable for years, but all of a sudden people started to roll their eyes at my code, and snigger at me in hallways. Ok, maybe that’s the coffee talking, but you know where I’m coming from. You probably want to mend your ways, but you’re not sure exactly what the current state of play is.
对所有这些可访问性内容感到内？吗？ 我也是。 多年来，我的表单和弹出代码非常流行，但是突然之间，人们开始对我的代码视而不见，并在走廊上嘲笑我。 好吧，也许那是在谈论咖啡，但是你知道我来自哪里。 您可能想修改自己的方式，但是不确定当前的状态是什么。
Enter: Ian Lloyd and his Accessibility Toolbox. Ian has pulled together some of the accumulated wisdom found at his renowned Accessify.com site, and distilled it into this useful little code wizard. At this point, it comprises of an ‘accessible form element builder’ paired with an ‘accessible pop-up builder’. There are buttons reserved for ‘accessible tables’ and ‘accessible forms’ but there’s no word as to whether these are due any time soon (Ian is happily gallivanting across the globe as we speak, so no breath-holding).
输入：伊恩·劳埃德(Ian Lloyd)及其可访问性工具箱。 伊恩(Ian)汇集了在他著名的Accessify.com网站上发现的一些积累的智慧，并将其提炼成这个有用的小代码向导。 在这一点上，它包括一个“可访问表单元素构建器”和一个“可访问弹出构建器”。 有一些为“可访问表格”和“可访问表格”保留的按钮，但是没有关于它们是否很快到期的消息(正如我们所说的那样，伊恩高兴地在世界各地欢呼，所以没有屏息)。
No matter. The two tools provided give you the working code you need in a handful of clicks.
不管。 只需单击几下，提供的两个工具即可为您提供所需的工作代码。
The popup code is designed to take advantage of JavaScript when it’s available, without failing miserably when it’s not. The code is also clever enough to bring a ‘defocused’, lost pop-up back to the front position any time the user attempts to re-launch it — a particularly frustrating failure when it’s not adequately accounted for (nod to Creatas.com).
弹出代码旨在在可用时充分利用JavaScript，而在不可用时不会失败。 该代码还足够聪明，可以在用户每次尝试重新启动它时将“散焦的”丢失的弹出窗口带回到最前面，这在没有充分考虑时会特别令人沮丧(向Creatas.com点头)。 。
The form element builder is a great way to start moving away from traditional table-layout forms. Using the ‘label and input pairs’ produced by this little wizard, drizzled liberally with a some tasty CSS (SitePoint Tech Times, Issue 58), and you’ll have low-fat, nutritious and appetizing forms in minutes.
表单元素构建器是一种摆脱传统的表格布局表单的好方法。 使用这个小向导生成的“标签和输入对”，用一些美味CSS 细雨下雨 ( SitePoint Tech Times，第58期 )，几分钟之内您将获得低脂，营养和令人垂涎的表格。
Keep in mind that Ian has worked tirelessly on all the tools and wizards on Accessify.com since early 2003 without asking for a penny. As he has quit his most recent employment to spend a year traveling, I hardly need to make the point that he’d appreciate any Paypal donations you could spare, should you find his tools helpful to your work.
请记住，自2003年初以来，Ian一直不懈地致力于Accessify.com上的所有工具和向导 ，而无需花一分钱。 由于他已经辞去了最近的一份工作而花了一年的时间旅行，所以我几乎不需要指出，如果您发现他的工具对您的工作有所帮助，他将不胜感激您可以节省的Paypal捐款。
Download the Accessibility Toolbox here.
在此处下载辅助功能工具箱。
五个很棒的免费赠品 (Five Fantastic Freebies)
There you have it: 5 little gems, gratis! Download the tools, give them a spin and let us know what you think. But do note that Nico, Mirek, Nick. Chris, and Ian each have ways you can repay them a little for their labors. Keep it in mind as you use their excellent tools.
在那里，您可以免费获得5个小宝石！ 下载工具，试用一下，让我们知道您的想法。 但请注意，尼克，米雷克，尼克。 克里斯(Chris)和伊恩(Ian)都有自己的方式可以为他们的劳动报酬一点。 使用它们出色的工具时，请记住这一点。
Over the coming weeks, I’ll be looking more closely at a few other design tools, along with tips, tricks, and tutorials in our new design-centric newsletter. Sign up here to receive your monthly copy of the SitePoint Design View.
在接下来的几周中，我将在新的以设计为中心的时事通讯中更仔细地研究其他一些设计工具，以及技巧，窍门和教程。 在此处注册以获取您的SitePoint设计视图的每月副本 。
扫一扫
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
