Dreamweaver public beta

As promised, Adobe is releasing a public beta of the next major version of Dreamweaver with a dark UI and integration of Brackets as the code editor. The Dreamweaver CC 2017 beta is available to anyone who has an Adobe ID. You don’t need to have a subscription to the Creative Cloud.

I’ve been experimenting with the beta. Apart from the changes in the UI, it’s heavily geared towards web developers who are comfortable working directly with code. Here are my initial impressions.

First up, it’s important to point out that this is a beta. Don’t expect everything to work 100% smoothly. There are also some aspects of the dark UI that are incomplete. For example, the Property inspector in the Windows version hasn’t been converted to the dark theme, some icons are difficult to see, and code indentation tends to be a bit haphazard. Nevertheless, I found it to be fairly solid, and there are a lot of things that I like about it.

UI changes

The first thing you will notice (apart from the dark UI) is that there has been an attempt to streamline the UI. The Document toolbar has been stripped down to just three buttons: Code, Split, and Live (you can still get to Design View by clicking the down arrow to the right of the Live button). Although it gives the program a clean look, I’m sure many people will complain that it occupies too much screen real estate by stretching the full width of the screen. You can, however, convert it into a small, floating toolbar by dragging the far left edge away from the top of the screen, and then parking it out of the way of your work, for example in the Visual Media Queries bar. Unfortunately, the only place you can dock it is back in the original position at the top of the screen.

Dreamweaver's Document toolbar can be turned into a floating panel

Once floated, Dreamweaver’s Document toolbar can be parked out of the way of your work.

You’ll also notice that what used to be the Coding toolbar now stretches the full height of the Document window on the left of the screen. It’s been renamed the Common toolbar, and is now context sensitive. When the focus is in Live View, you get buttons that apply only to Live View. When the focus is in Code View, you get a full range of icons related to working with code. A useful feature is the option to customize the Common toolbar. Just click the icon with three dots Icon with three dots , and deselect the check boxes for icons you want to remove. There’s no option, though, to add new functions to the Common toolbar, nor to reorder the icons.

One widely used icon that’s missing is Preview in Browser. I’m told this is because Dreamweaver will eventually integrate Live Preview from Brackets. To preview files in a browser, you need to go to File > Preview in Browser. Alternatively, use the keyboard shortcut F12 on Windows or Opt+F12 on a Mac. Correction: Arun Kaza of Adobe has pointed out that the Preview in Browser button is on the Common toolbar. I had access to an earlier build of Beta 1, from which it had been removed. Apologies for any confusion.

If you’re not a fan of the dark UI, you can change it to a light theme by opening the Preferences panel (Edit > Preferences on Windows, Dreamweaver > Preferences on a Mac). In Beta 1, there’s a UI Brightness slider at the bottom of the General category. By default, it’s set to 0.33 (Dark). You can change it to Darker (0.00), Light (0.66), or Lighter (1.00). There are intermediate settings, but I’m told the plan is to settle on just four eventually.

Code View is set by default to a dark theme. To change it to a light theme, go to the Code Coloring category of Preferences, select it from the Theme drop-down menu, and click Apply. In Beta 1, there are just two themes for Code View, but a later release should have a much wider range of choices. The ability to change the colours yourself has been removed. Adobe says hardly anyone ever used that part of Preferences. In future, you will need to edit a configuration file if you want to fine tune code colours, but that’s not an option at the moment.

In a later beta, the options for the UI and code colouring themes will be in a separate category of a revised Preferences panel, most likely called Interface or Appearance.

Main menus reorganized

The main menus have been given a major shake-up, and you might find some items difficult to find. The Commands menu has disappeared, so Apply Source Formatting has moved to the Edit > Code menu. To toggle toolbars on and off, you now need to go to Window > Toolbars instead of View > Toolbars.

Most of the changes to the main menus make sense, so there shouldn’t be too much disruption.

One new menu is dedicated to Find. Unfortunately, the revamped Find and Replace functionality wasn’t ready in time for Beta 1, so you can’t really test that part of the new UI yet.

Changes to Code View

The really big changes are in Code View. This is still a work in progress, but my favourite features include the automatic insertion of closing braces, parentheses, brackets, and quotation marks, and a bunch of useful keyboard shortcuts:

  • Ctrl+D (Win), Cmd+D (Mac) — Duplicate line or selection
  • Ctrl+Shift+D (Win), Cmd+Shift+D (Mac) — Delete line or selection
  • Ctrl+/ (Win), Cmd+/ (Mac) — Toggle comment (context sensitive for HTML, CSS, JavaScript, and PHP)
  • Ctrl+] (Win), Cmd+] (Mac) — Indent line
  • Ctrl+[ (Win), Cmd+[ (Mac) — Outdent line

The great point about these shortcuts is that the cursor can be anywhere on the line for them to work.

Talking of cursors, Dreamweaver now has multiple cursors. Hold down the Alt+Shift keys on Windows, or the Option+Shift keys on a Mac, and press the up or down arrow to add the cursor to the previous or following line. With a multiple cursor, typing on one line adds the same code simultaneously on each line — great for adding the same class to multiple elements quickly.

Multiple cursors allow you to edit several lines simultaneously.

Multiple cursors allow you to edit several lines simultaneously.

You can also make column selections by holding down the Alt or Option key, and dragging vertically and horizontally. To add non-contiguous selections to the current selection, hold down the Control key on Windows or the Command key on a Mac, and drag. You can then make the same edit to all selections in one go.

Other great features in Code View are Quick Edit and Quick Docs. To use Quick Edit, position the cursor anywhere in the name of an HTML tag, or in an ID or class attribute (either the name or the value), then press Ctrl+E (Win) or Cmd+E (Mac). Code View slides open to reveal an editable window exposing the style rules that apply to that element, allowing you to make a quick adjustment. Quick Docs works similarly. Position your cursor anywhere in the name of a CSS property, and press Ctrl+K (Win) or Cmd+K (Mac) to display details of the property and the values it accepts.

CSS and JavaScript code hints have also been upgraded by including a description of the property or method and a link to relevant page on the Mozilla Development Network. Similar improvements are being made to PHP code hints, but there are still quite a few rough edges in that area in Beta 1.

Sass and LESS integration

Dreamweaver CC 2017 now features full integration of Sass and LESS CSS preprocessors. Compilation is turned on by default, so if you’re using a separate build system, it’s important to turn off compilation. This needs to be done separately for each site in the CSS Preprocessors > General section of the Site Setup dialog box.

By default, Dreamweaver generates the CSS output in the same folder as the source files, so you should define the output and source folders for the current site before using Sass or LESS. Otherwise, you’re likely to end up with a disorganized mess.

Tell Dreamweaver where your output and source files are located.

Tell Dreamweaver where your output and source files are located.

In addition to Sass and LESS, Dreamweaver will also automatically install the necessary files for the Compass and Bourbon frameworks.

Crash recovery

I’ve not had chance to test this myself, but a really welcome addition to this version of Dreamweaver is crash recovery. As long as the files have been saved at least once, Dreamweaver will attempt to save your work before closing down in the case of a crash. However, apparently this doesn’t work if a dialog box is open at the time of the crash.

Feedback

Adobe wants to hear what people think about the changes. To send feedback, click the icon at the top-right of the screen, fill in the form, and submit it.

Use the Feedback icon to report bugs, feature requests, or just to tell Adobe what you think.

Use the Feedback icon to report bugs, feature requests, or just to tell Adobe what you think.

The feedback form will occasionally pop up asking what you think of a feature you have just used. You can simply dismiss it. But if you’ve got something to say, this is your chance to influence the future direction of Dreamweaver.

Conclusion

From what I’ve seen so far, I like the direction that Dreamweaver is going in. But I don’t think this will suit all Dreamweaver users. The focus in this Beta is very much on improvements for coders rather than design-oriented users. I’m sure many people will complain that Dreamweaver’s becoming too difficult to use.

In one sense, they’re right; but I don’t think Dreamweaver is to blame. Web development has become increasingly complex in recent years. Dreamweaver is simply trying to keep up. Whether it will succeed in attracting new users who feel comfortable working with raw code and (relatively) advanced features, such as CSS preprocessors, remains to be seen.

This entry was posted in Dreamweaver. Bookmark the permalink.

9 Responses to Dreamweaver public beta

  1. Nuno Castro says:

    The ones that want a design-oriented program have Muse. Adobe was lacking a code editor that was modern, Dreamweaver in it’s current non-beta state is a very bad and bloated code editor by current standards. And the success of Brackets show us that people want a real, fast, rich text editor.

    The ones that were using Dreamweaver only for the Design view, have Muse that its a very Robust web design tool

  2. dan says:

    They gutted the snippets system , it would seem.
    1) I cant figure out how to bind a hotkey that doesn’t involve pressing shift to execute a snippet
    2) they removed the wrap functionality from snippets

  3. C says:

    @dan – Snippets are there, now in the bottom right. To me it seems they expanded it.

    @Nuno – I actually prefer DW, even with it’s ‘bloat’ issues. The site manager is the main reason why. I’ve used everything from Muse to Aptana and I still prefer DW.

    2017 is such an improvement from the previous versions. Several of my developer friends are switching to it now.

  4. RDFsource says:

    hello:
    the beta version just only let me to use it for 7days, how can i change this ?

  5. David Powers says:

    @RDFsource As far as I know, there isn’t a 7-day limit on the beta. The best place to get help is in the official Dreamweaver beta forum.

  6. Peter says:

    How to run Emmet ?

  7. David Powers says:

    To run Emmet in the Dreamweaver Beta, type the shorthand code, and press Enter. As far as I know, it currently works only for HTML. I don’t think Emmet support for CSS has been enabled yet.

  8. Peter says:

    Thank you for your reply , but unfortunately does not work.

  9. David Powers says:

    I’ve just tested Emmet in both the Windows and Mac versions of the Dreamweaver Beta. Works fine for me. If you think you’ve found a bug, report it through the special forum that Adobe has set up for the beta.