5 … 4 … 3 … 2 … 1 … Dreamweaver CS4 is GO! Yes, Dreamweaver CS4 officially hit the shelves on Wednesday October 15th – not that many of us would actually purchase it from a shelf!
5…4…3…2…1…Dreamweaver CS4正常运行！ 是的，Dreamweaver CS4于10月15日(星期三)正式上架了–并不是我们当中的许多人实际上会从架子上购买它！
Although I’m sure there are people out there who upgrade as a matter of course, most of us need a handful of good reasons to reach into our pocket. The key question: What do I get for shelling out my hard-earned on the latest big green beast from Adobe?
尽管我敢肯定当然会有升级的人，但我们大多数人都需要一些充分的理由来掏腰包。 关键问题： 如何用辛辛苦苦赚来的钱购买Adobe最新的大型绿色野兽能获得什么？
The first thing you’ll notice on opening the new Dreamweaver is Adobe have made some substantial changes to the user interface. Although the changes mean long-time users will need to reorientate themselves, most (but not quite all) changes are for the better.
在打开新的Dreamweaver时，您会注意到的第一件事是Adobe对用户界面进行了一些实质性的更改。 尽管这些更改意味着长期的用户将需要重新定位自己的方向，但是大多数(但不是全部)更改都变得更好。
Apart from inheriting all the grayscale cosmetic changes of Adobe’s new look, the top quarter of the UI has been significantly streamlined. The title bar and main menu have been combined into a single bar, and the horizontal INSERT toolbar is now a vertical INSERT panel on the right-hand side of the screen.
除了继承Adobe新外观的所有灰度外观更改之外，UI的上四分之一也得到了显着简化。 标题栏和主菜单已合并为一个栏，并且水平INSERT工具栏现在是屏幕右侧的垂直INSERT 面板 。
Okay. So, what’s the big win here?
好的。 那么，这里最大的胜利是什么？
Greater vertical workspace, allowing you to see more of your code or design without having to constantly rejig your screen. Frankly, it also feels more natural to me to be adding links, images, and DIVs from a panel rather than a vertical bar. The right-hand side is a place for keeping and organizing assets (for example, Files, Assets, Styles, Snippets), so placing your HTML elements amongst them makes perfect sense to me.
更大的垂直工作空间，使您无需不断调整屏幕即可看到更多代码或设计。 坦白说，从面板而不是垂直栏中添加链接，图像和DIV对我来说也更自然。 右侧是用于保存和组织资产 (例如，文件，资产，样式，代码段)的地方，因此，将HTML元素放在其中对我来说非常有意义。
Adobe have also made the workspace selector more easily accessible by putting it in the top right-hand corner. This enables you to quickly switch between eight different modes optimized for designing, app development, and coding; there’s even a workspace optimized for dual screen setups. Nice.
Adobe还通过将工作区选择器放在右上角，使其更易于访问。 这使您可以在针对设计，应用程序开发和编码进行了优化的八种不同模式之间快速切换； 甚至还有一个针对双屏设置进行了优化的工作区。 真好
However, the new UI isn’t entirely without issue. Soon after installing, I highlighted some text inside a paragraph and went to emphasize it. I pushed my trusty "I" button and a dialog box appeared asking me how I’d like my CSS applied.
但是，新的UI并非完全没有问题。 安装后不久，我突出显示了一个段落中的一些文本并进行了强调。 我按下可信任的“ I ”按钮，然后出现一个对话框，询问我如何应用CSS。
Um … no, I just want a plain old <em> tag, please – I’m marking this content up, not trying to style it.
嗯……不，我只想要一个普通的<em>标签，请-我正在标记此内容，而不是尝试对其进行样式设置。
Eventually, I figured out there are actually two property panels, each with its own "I" and "B" buttons: a CSS panel and a HTML panel. You can flip between these panels using the buttons in the lower left corner – if you find them.
最终，我发现实际上有两个属性面板，每个属性面板都有自己的“ I ”和“ B ”按钮：一个CSS面板和一个HTML面板。 如果找到它们，则可以使用左下角的按钮在这些面板之间切换。
Personally, I believe it’s a blind spot and I suspect this will stump quite a few people. Maybe it’s just me. Maybe tabs would work better. See what you think.
就个人而言，我认为这是一个盲点，我怀疑这会绊倒很多人。 也许就是我。 也许标签会更好。 看看你的想法。
Even allowing for this (in my honest opinion) UI glitch, the new UI is a definite improvement on CS3.
即使允许这种UI毛刺(以我的老实观点)，新的UI还是对CS3的肯定改进。
Adobe’s new Related Files toolbar is a definite productivity winner. It’s a simple concept. Dreamweaver scans through the document you open and automatically opens any linked files – for example, CSS, server-side includes, JavaScript, iFrames – in a new toolbar at the page top.
Adobe的新“相关文件”工具栏无疑是生产力的赢家。 这是一个简单的概念。 Dreamweaver会扫描您打开的文档，并在页面顶部的新工具栏中自动打开任何链接的文件，例如CSS，服务器端包含，JavaScript，iFrame。
This is a serious productivity improver and you’ll probably become dependent upon it without hours. I have only one slight query. As you can see from the image, the initial file you open is always listed on the tab, yet simply referred to as Source Code on the Related Files bar.
这是一个重要的生产力改进器，您可能会不花时间地依赖它。 我只有一个小问。 从图像中可以看到，打开的初始文件始终列在选项卡上，而在“相关文件”栏上简称为“ 源代码” 。
From a UI perspective, it seems a little strange to me to have Source Code sitting alongside real file names. But to be fair, I can’t think of a significantly better solution off the top of my head.
从UI的角度来看，让源代码与真实文件名并排放置对我来说有点奇怪。 但是公平地说，我想不出一个更好的解决方案。
Users are funny old things. You nearly always learn more about what they want from watching – rather than asking – them. Adobe’s development team watched their CS3 users and came to an interesting conclusion.
用户是可笑的老东西。 您几乎总是从观看而不是询问中了解更多有关他们想要的东西的信息。 Adobe的开发团队观察了他们的CS3用户，并得出了一个有趣的结论。
Very few regular users utilized the WYSIWYG pane to actually add or edit content. Instead, Design View was more often used as a navigation device, providing a visual method of jumping around your code – not unlike the Navigator panel in Photoshop. And I thought I was the only one who did that!
很少有普通用户使用“所见即所得”窗格实际添加或编辑内容。 取而代之的是，Design View更经常用作导航设备，它提供了一种在代码中跳转的可视方法–与Photoshop中的Navigator面板不同。 我以为我是唯一做到这一点的人！
Adobe have catered to this usage pattern with the new Code Navigator feature.
Adobe通过新的Code Navigator功能迎合了这种使用模式。
Click on any item visible in Design View, wait a second, and a small icon of a ship’s wheel will appear. Click on this wheel icon and you’ll get an editable, fly-out window showing only the related code of your selected page element. Now, if you think waiting for that little wheel to appear sounds irritating, you’re right; happily, you can shortcut straight to the code fly-out by ALT-clicking (Command-Option-clicking on a Mac) anywhere on the screen.
单击“设计视图”中可见的任何项目，请稍等片刻，然后将出现一个小小的车轮图标。 单击该滚轮图标，您将获得一个可编辑的弹出窗口，该窗口仅显示所选页面元素的相关代码。 现在，如果您认为等待那个小轮子听起来很烦人，那您是对的。 幸运的是，您可以通过在屏幕上的任意位置单击ALT(在Mac上为Command-Option并单击)并直接单击以弹出代码。
This is a great feature. While modern, well-organized coding practices demand that we modularize our code into multiple-linked files, the day-to-day business of accessing those many files has become increasingly drawn out and difficult. Code Navigator brings all these disparate code blocks back to your fingertips; it lets you feel like you’re working with a single, stand-alone page, without losing any of the benefits of modularity.
这是一个很大的功能。 尽管现代的，组织良好的编码实践要求我们将代码模块化为多个链接的文件，但是访问这些文件的日常业务却变得越来越困难。 Code Navigator将所有这些不同的代码块带回您的指尖； 它使您感觉就像在使用单个独立页面，而不会失去任何模块化优势。
One of the major trends in web development since the last CS release has been the rise of browser-based development tools. Thanks to Firebug, Web Developer toolbar, and a host of others, browsers are no longer passive viewers; they can dissect, hack, slash, and reassemble code as it squirms – live, in front of you. Dreamweaver CS4 acknowledges this trend and then flips it on its head by integrating a browser – WebKit – into its core.
自上一版CS发布以来，Web开发的主要趋势之一就是基于浏览器的开发工具的兴起。 多亏了Firebug ， Web Developer工具栏和许多其他工具，浏览器不再是被动查看器； 他们可以在蠕动的情况下实时剖析，修改，修改和重新组装代码。 Dreamweaver CS4承认了这一趋势，然后通过将浏览器WebKit集成到其核心中而将其颠倒了。
How does this work in practice?
在实践中这是如何工作的？
Switching to Live View in Dreamweaver CS4 replaces your old-school Design View pane with a live, pixel-perfect WebKit rendering of your page; this is complete with live Javascript, DOM manipulations, database queries, server-side code, and rendered CSS, rather than the placeholder icons you see in Design View.
在Dreamweaver CS4中切换到实时视图后 ，页面的实时，完美像素的WebKit渲染将原来的“设计视图”窗格替换了； 这是通过实时Javascript，DOM操作，数据库查询，服务器端代码和呈现CSS来完成的，而不是在Design View中看到的占位符图标。
However, the really cool trick is that the Code Navigator (described above) still works. ALT-clicking (Command-Option-clicking on a Mac) anywhere in the Live View window instantly presents the code that rendered that item – not unlike you might currently do using the Firefox/Firebug tag team.
但是，真正很棒的技巧是代码导航器(如上所述)仍然有效。 在“实时显示”窗口中的任何位置按ALT键单击(在Mac上为Command-Option键单击)，都会立即显示呈现该项目的代码-与当前使用Firefox / Firebug标签小组所做的不同。
But it doesn’t end there, my friends.
我的朋友们，但这还不止于此。
Thanks to the modern delights of Ajax-style interactions, we often need to deal with page objects that aren’t in the initial page source: items that are injected into the page some time after page load. For instance, you might need to change the look and feel of a tool tip that is created and injected entirely in JavaScript. In the past, this would have required you to painstakingly pick your way through scripts to determine what was being created and where.
由于现代Ajax风格的交互的乐趣，我们经常需要处理不在初始页面源中的页面对象：页面加载后一段时间内注入到页面中的项目。 例如，您可能需要更改完全在JavaScript中创建和注入的工具提示的外观。 在过去，这将需要您费心地通过脚本来确定要创建的内容和位置。
Live View lets you render your page, where you can then hit F6 to Freeze JavaScript at any point, allowing you to target and explore the code relating to any transient item in the page.
Live View使您可以呈现页面，然后可以在其中单击F6以冻结JavaScript ，从而可以定位和浏览与页面中任何临时项目有关的代码。
Arguably the other big improvement in the last version of Dreamweaver was its more sophisticated handling of CSS. Rather than statically linking to style data, Dreamweaver CS3 could internally trace and understand the cascade, enabling it to offer real classes and IDs in its code hinting. Dreamweaver CS4 brings its JavaScript interpreter into line with its advanced CSS engine.
可以说，Dreamweaver的最新版本中的另一项重大改进是它对CSS的处理更加复杂。 Dreamweaver CS3可以内部跟踪和理解级联，而不是静态链接到样式数据，从而可以在代码提示中提供真实的类和ID。Dreamweaver CS4使JavaScript解释器与高级CSS引擎保持一致。
Firstly, Dreamweaver CS4 gives you easy access to a range of JavaScript-powered Web Widgets. These are powered by all the mainstream JavaScript libraries (jQuery, MooTools, Prototype, Ext, and more) and make it easy to deploy generic JavaScript page objects like calendars, tabs, tool tips, and form validators.
首先，Dreamweaver CS4使您可以轻松访问各种JavaScript驱动的Web窗口小部件。 这些由所有主流JavaScript库( jQuery ， MooTools ， Prototype ， Ext等)提供支持，并易于部署通用JavaScript页面对象，如日历，标签，工具提示和表单验证器。
But for me, the real killer feature is the new, intelligent code completion. Attach your favorite library in the HEAD (for our example, we’ll use Prototype), start scripting, and Dreamweaver’s code completion will automatically present Prototype’s built-in functions, along with the standard DOM functions. Very slick.
但是对我而言，真正的杀手级功能是新的智能代码完成功能。 将您喜欢的库附加到HEAD中(对于我们的示例，我们将使用Prototype)，启动脚本，Dreamweaver的代码完成将自动显示Prototype的内置函数以及标准DOM函数。 很好吃
One of the queries I had with Dreamweaver CS3 was its focus on the Spry Ajax framework. While Spry did a good job of allowing non-technical users to add Ajaxy effects, it had some issues. Spry widgets tended to place a lot of inline JavaScript in the page, leaving unsightly holes if scripting was unavailable.
我对Dreamweaver CS3的疑问之一是它对Spry Ajax框架的关注。 尽管Spry在允许非技术用户添加Ajaxy效果方面做得很好 ，但仍然存在一些问题。 Spry小部件往往会在页面中放置很多内联JavaScript，如果无法使用脚本，则会留下难看的漏洞。
In Dreamweaver CS4, not only has the Spry framework become more accessible and polite, it actually attempts to help you rehabilitate the bad code around it.
在Dreamweaver CS4中，Spry框架不仅变得更易于访问和礼貌，而且实际上还尝试帮助您修复其周围的错误代码。
How does it do this?
它是如何做到的？
The Commands menu now has an Externalize JavaScript option that will process your document, move your scripting to a separate file, link that new file from the HEAD, and even rewrite your HTML to clean out any inline event handlers (such as the onclick attribute).
现在，“命令”菜单具有“ 外部化JavaScript”选项，该选项将处理文档，将脚本移至单独的文件，从HEAD链接该新文件，甚至重写HTML以清除所有内联事件处理程序(例如onclick属性) 。
For example, some nasty, inline JavaScript like this:
例如，一些讨厌的嵌入式JavaScript如下所示：
<a href='index.html' onClick='window.confirm("Why are you so obtrusive?")'>Select this link.</a>becomes the much friendlier:
变得更加友好：
<a href='index.html' id='a1'>Select this link.</a>It also adds the new unobtrusive JavaScript code to your document HEAD, along with the Spry library it needs to make it all work.
Now let's be honest. You really shouldn't write that sort of code in the first place, and if you do, there are more efficient ways to improve it.
But to me, the single most impressive aspect is that Adobe made this an issue - by deciding that this is important Dreamweaver functionality. This places the concept of Unobtrusive JavaScript on a lot more agendas, and that's really valuable.
The Verdict
Dreamweaver is a mature, polished application, and the truth is it's always going to be a challenge for the Adobe Dev team to deliver the wow! factor of earlier releases.
The good news is Adobe has resisted going for flashy, rock-star gimmicks and focused on the genuine working issues facing front-end coders in 2008 - in particular, accessing and manipulating complex and increasingly fragmented source code.
For me, features like Live View, Code Navigator, and the upgraded JavaScript-handling abilities are thoughtful responses to the way we develop web sites in 2008.Â
After two weeks with the new version, I'm not keen to go back.
翻译自: https://www.sitepoint.com/things-dreamweaver-cs4/
相关资源：dreamweaver cs6 cs5 代码颜色配色方案