The New Dreamweaver is Here

PSD Support with Extract

You can now browse and view your Photoshop documents stored in Creative Cloud directly within Dreamweaver, letting you rapidly take your designs to code. Yes, that’s right, you can open a fully layered PSD in Dreamweaver. When a PSD is loaded, you can extract CSS, colors, gradients, fonts, measurements and web-optimized images from your Photoshop layers when building your web projects. This will let you preserve the integrity of the design when bringing it to code, and takes the guesswork out of how that PSD will translate to web. No need to wait for a designer to send you a style guide or redline specs anymore!

Getting CSS and Images

When a PSD is loaded in Dreamweaver, you can fully inspect the CSS pulled from Photoshop layers. When you select a layer, you’ll see all the CSS associated with that selection. This is useful for grabbing colors, gradients, border-radius, font styles and more when building the front-end of your website. It’s kind of like Web Inspector for a PSD.

You can also code hint directly into a PSD, giving you full control as you write styles. When writing CSS, contextual code hints are pulled right from your Photoshop layers, expediting the time it takes to go from comp to code.

Live view

This release is a significant milestone for the preview surface in Dreamweaver. You might be familiar with the Netscape 4 view-of-the-world you get with Design View, and in this release we’ve put Live View front and center so you can preview your website as you build it, with everything rendering in HTML5. Live View is now the default viewing surface, but you can go back to Design View if you need it.

There’s now more editing features for previewing those quick edits as you build your site. This will save you all those trips to the browser just to check small changes.

Live Guides

Use Live Guides to directly select elements to rearrange on your site. When you make a selection in Live View, the tag and everything nested with it gets selected; you can drag this around on your page to rearrange, hold while dragging to bring up the Element Quick View for precise DOM insertion, or use as a visual reference in code for bulk selections.

Live Refresh

All of your code gets updated for preview in real time as you build your website – no refreshing, and you can save the browser preview for when you need to make a serious review.

Quick Access to CSS

This is a simple addition which will make your life easier when writing CSS. When you select an element in Live View, you can see all the selectors applied to that element. Right click and select “Go to Code”; this will take you to the exact selector in your CSS file, saving you from having to fight with debugging tools to find what style is applied where.

The (not so) Little Things

The little things make a big difference in the way you work. There’s more incremental improvements you’ll find in this release:

Code theming

You can now change the color of your code editor. Choose from a list of themes, customize to make your own and take them with you between machines when synced to Creative Cloud.

Keyboard Shortcuts

Use Cmd/Ctrl + [ / ] keys to easily traverse between parent and child elements. See the selections in Live View or use a way to quickly navigate code.

Starter Templates

If you don’t want to start with a blank page, you can choose between five responsive templates ready for you to customize and style.