If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated Troubleshooter. Design mode in Dreamweaver

This tutorial is going to help you edit your JavaScript Animated (JavaScript Based, Responsive Web, Bootstrap, one-page html) template in Dreamweaver when in Design Mode the layout is not the same as in a browser view.

JS Animated Troubleshooter. Design mode in Dreamweaver

The issue caused by the JavaScript used in such templates. To be able to edit templates in Design mode you can enable Live Code and Live View modes in Dreamweaver. Live View allows you to edit your pages without continually previewing them in a browser.  Live Code allows you to display the code (highlighted in yellow) that the browser uses to execute the page. Both views are non-editable, so every time in order to make changes, you need to switch them off.

To preview pages in Live view

  1. Open your  .html file in Dreamweaver and switch to Code and Design view (from the top menu View > Code and Design or just click Split).
  2. Click the Live view button (or just Live depending on your Dreamweaver version).
  3. Make changes to the .html (.css or  other related files) in Code view.
  4. Refresh Live view by clicking the Refresh button in the Document tool bar, or by hitting  F5 to preview the changes.
  5. If your template has drop-down menus and you want to keep them open while making changes, hit F6 (or select Freeze JavaScript from the View > Live View Options menu). Hit F6 to cancel it.
  6. Click the Live view button again to return to Split view.

To preview Live Code

  1. Make sure that you are in Live view.
  2. Click the Live Code button.
  3. Try interact with elements on the page. Live Code will highlight them in the code (works only when Highlight Changes in Live Code  is selected under View > Live View Options).
  4. Click the Live Code button again to edit the code.

Feel free to check the detailed video tutorial below:

JS Animated Troubleshooter. Design mode in Dreamweaver

JS Animated Troubleshooter. Design mode in Dreamweaver, 5.0 out of 5 based on 1 rating
  • Alex Ross

    You’re right, Live view was introduced in CS4. It’s not essential but it is convenient.

    There’s really no work-around but you can always do a Preview in Browser (menu: File>Preview in Browser>select a browser). it’s really only necessary when you want to see the affect of a rollover, visited link state, pop-out menu, etc.

  • Alex Ross

    Unfortunately, some HTML-based templates just can’t be edited using Split/Design mode of DW due to their advanced and complex HTML5/CSS3/JS coding.