New Features in DW CS4: A mini-series

Hi,
My name is Donald Booth and I work on the Dreamweaver Quality Engineering team here in San Francisco.
The DW blog hasn’t seen much action lately. But now that CS4 is out the door and the team has had time to straighten our collective desks, I thought I would start a mini-series and discuss the new features of CS4: explain how they work and the thinking behind them.
For the inaugural CS4 post, we will talk about the probably the best new feature in CS4: Live View.
We long knew that the Edit > PIB > Edit > PIB cycle was central to the DW web development workflow. (PIB is Preview in Browser. F12, of course)
But that constant app switching was tedious, as any constant app switching is. Thanks to the open source movement in general, and Web kit in particular, we can help solve it.


For CS4, we integrated the Web kit rendering engine into the product. This is the rendering engine used by Safari and is being used more and more in other products.
What this gives us is the ability to actually run and render your page right within DW’s Design View. This allows you to see the rendered code directly, without having to PIB.
Not only is the CSS rendering as it would in the browser, but you also get full javascript interactivity. Drop-down menus work, roll-over images roll over.
To enable Live View, simply click the new Live View button on the Document toolbar, just next to the Design button.
Your page will switch to Live View. Usually it is subtle, but the page is now live and working. If you are in Code View, you will notice that you can still scroll and work in code view.
You can type in Code View and clicking back in Design View will update the page with the changed code.
But it gets better. When you turn on Live View, the Live Code button becomes enabled. Live Code shows the generated source of the page, even as you click. (Switching to Live Code also switches to Split View, since it makes sense.)
This works well on javascript enabled pages. Try a Spry Accordion for a quick demo. Clicking to change panels, you can see the class names changing as things hover and change. This is helpful for figuring out what code is actually being generated and influencing your pages.
There is also an option in Live Code to Freeze Javascript. This is helpful for styling page states. Let us say you want to style the 2nd nested drop down menu. You can get to it while in Live View, and then hitting F6 will freeze javascript. You can them work on the CSS and see the submenu update automatically.
There is also the option to completely disable javascript or plug ins for Live View.
If you are building dynamic pages, DW will use the Testing Server info (from the Site Definition) to process the page for Live View.
Once you get into using Live View, you will find yourself spending a lot less time switching to Firefox.
The Web kit integration also allows us to make more dynamic interfaces. The Spry Data Set wizard being the most prominent of them in CS4. We can render live data in the dialog and provide a much richer UI. But that is a topic for another post…
Web kit integration was a big project and now that we have it, we are looking into how we can expand its functionality to handle more complex workflows and provide even more insight tools within DW.
So that’s it for this week. As always, feedback, comments and feature requests are always welcome!
Thanks,
Don

  • my Live View in Dreamweaver CS4 renders my page crappier then IE7 and FireFox (and other browsers i’ve used BrowserShots only 6 old browser failed (ex IE4)) — any option to have Live View use FireFox for rendering of the page — because CS4s rendering is horrible i guess.
    However i tested Chrome out — renders fine, am i missing something here.

  • Randy Edmunds says:

    Haso:
    Live View uses the same WebKit rendering engine as Safari, so your pages should look similar. Note that there is a beta version of Safari for Windows at apple.com if you do not have access to a Mac.
    If not, then maybe you are using site-root relative file paths in a static HTML page and are running into the problem described here.

  • I’m needing some help. You said that drop down menus work but i can’t get them to work properly at all. I input the code but it just shows up at an ordered list with links. Help me please?

  • Is the WebKit rendering engine available as an add-on extension for DW CS3 ? Thanks
    @Dave: Unfortunately, it is not. WebKit rendering support starts with DW CS4.

  • I upgraded from CS3 Standard to CS4 standard a week ago so that I could use a new plugin for creating flash based online jigsaw puzzles. I now wish I had not spent the money as Flash CS3 / Actionscript has a problem with wheel mouse movement / control within a flash movie (jigsaw piece rotation) where it moves the web page – it loses focus on the flash object. This did not happen with CS3 and Actionscript 2.
    This along with a problem I have with Dreamweaver CS4 where the properties panel does not display properly – the bottom half of the panel is hidden when I click on a hyperlink – it shows a button to the Page properties has meant considerable frustration. It is visible if I change the resolution on the 22inch monitor to the smallest available font size – however I then find it too small for working with!
    Where do I go to report bugs in the software?
    Please report bugs for here:
    https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
    Here is the general user forum where you can hopefully find a way around your problem:
    http://forums.adobe.com/community/dreamweaver/dreamweaver_general

Share your thoughts

Your email address will not be published. Required fields are marked *

*


eight − = 2