Posts in Category ""

Tip for using Live View Inspect Mode in CS5

Dreamweaver CS5 introduces the Inspect Mode in Live View. This can be turned on (among other ways) using:
  View > Inspect
Once you are in Inspect mode, the element under the mouse in Live View is “inspected”. Box Model highlighting is displayed in Live View for the inspected element, the element is selected in Code View (both static and Live Code) and in the Tag Selector, and element details are displayed in all Panels that track selection (such as the CSS Panel Current Mode).
This allows you to move the mouse around the page to quickly discover the page structure. Click in the page to feeze the inspection (i.e. selection) on the current element. Click again to exit Inspect Mode.
This feature uses the Live View “hover” mechanism to determine the current element. This makes it impossible to inspect any container element where the container has no padding and has only 1 child, and the child element has no margins. There are no pixels over which you can hover the mouse to choose the container element for inspection.
To handle this case, simple keyboard navigation is provided using the left-arrow and right-arrow keys:

  1. In Inspect Mode, place mouse over any element.
  2. Without moving mouse, press left-arrow key to change inspection to parent element.
  3. You can keep navigating to the parent all the way up to the <body> element.
  4. Pressing right-arrow key returns inspection to previous child element. Once the mouse is moved to a different element, then the list of “previous” child elements are forgotten.

Give this a try and let me know how this works for you.

Dreamweaver CS5 HTML5 Pack is now available for download

For more information, see Adobe Labs:

Shortcut when Creating a New Document

Here’s cool trick that should help save you some time in Dreamweaver:

  1. In the Files Panel, use: right-click > New File to create a new document
  2. By default, you’ll get an HTML file named something like "untitled.html", and you’ll automatically be in Rename file mode.
  3. Change the file extension so it’s "untitled.css", and hit Enter to accept the new file name.
  4. Open the file and you’ll see that DW changed the contents so it’s the default CSS (not HTML) file!

So there’s no need to use the New Document dialog when you want to create a new document other than the default.

Note that this only works from the initial Rename mode. Also, this is not new for CS5, but I just re-remembered it today, so I thought I’d share.

Looking for Old Features that have been removed from Dreamweaver?

The Dreamweaver product sometimes removes old features that are no longer used enough to justify their maintenance cost. If the feature can be still be provided as an Extension, the the DW Team tries to provide that code on an “as is” (i.e. unsupported) basis.
Start by looking in this folder to find some old Server Models:


Also, check the Dreamweaver Exchange:
Then search for the Feature name. For example, you can find the old table-based Starter Pages here:
Are there any other old features that you’d like to be able to install as an extension?

Dreamweaver CS5 Help now available

Now that Adobe has announced CS5, you can use Dreamweaver CS5 Help without passwords. We encourage you to try out the help and report any problems with the content or with the new help client. If you’re already using Dreamweaver CS5, you can get started, by selecting Help > Dreamweaver Help.
If you’re prompted to install the AIR app update, please do. You’ll also be prompted to download the help content locally. You don’t need to download it if you’re normally connected to the Internet — the help client displays the online content by default. If you decide to download the content locally, please allow a few minutes for the files to download, unpack, and install.
It’ll take a week or two for the online content to be fully indexed by Google so search will take a while to come into its own.
CS5 introduces a new AIR-based help client called the Community Help Client, or CHC. Some of the benefits of the CHC:

  • Breaks down content silos by letting users search and browse Adobe help content and Adobe-vetted community content in one place
  • Provides users with the definitive Adobe help reference
  • Provides users with a full offline help option
  • Supports continuous updating of content, from a variety of sources
  • Supports continuous updating of the help client app, allowing for iterative development like other Adobe services

If you have feedback on the help content or the help client as you work with Dreamweaver, please post a comment here and we’ll be sure that it gets sent to the CHC team.
For a list of new features in Dreamweaver CS5, see the What’s New page. Some highlights include new CSS layouts, a new simplified site setup, and integration with Adobe BrowserLab.

Check out the new features in Dreamweaver CS5

Check out the new features in Dreamweaver CS5:

Using jQTouch in Dreamweaver

I was playing around with a Web Site developed using jQTouch (which is very cool, BTW) in Dreamweaver and I quickly realized that I could not see anything in Design View. jQTouch web sites consist of a single HTML file and each "page" is a <div> which is a direct descendent of the <body>. The site interaction is implemented with a combination of CSS and (unobtrusive) JavaScript.

I know that the Design View does not execute JS, so it will not render the styles applied via JS in jQTouch, and will not look like browsers (starting with CS4 you can use Live View for that), but it’s sometimes helpful to see the static content and to be able to select elements for navigating to them in Code View for editing.

So, I created a Design-time Style Sheet with the following CSS rules and attached it to my page:

* {
display: inherit !important;    /* override display:none */
font-family: Arial !important;  /* Windows: no Helvetica */
body > div {
visibility: hidden !important;  /* hide divs (except if selected) */

Now I get a list of the "pages" in the AP Elements Panel. They are all hidden (so all of the AP Elements don’t render on top of each other), but when I choose the one I want to edit, I see the static content in Design View (which displays selected AP Elements even if hidden) and the markup is selected in Code View. Here’s how it looks in DW CS4:


CS5 is coming

Creative Suite 5 is coming! Sign up for our launch event

Displaying Styles in Design View

In Dreamweaver CS3, a feature was introduced to allow CSS style rendering to be turned OFF in Design View:

  View > Style Rendering > Display Styles

This allows you to quickly view the semantic structure of a page. It’s also helpful when marking up or editing content inside elements that are not accessible in Design View for whatever reason.

Originally, this setting persisted until changed. But, many users turned off this setting without knowing what it was, and later would go crazy trying to figure out why their styles weren’t rendering. So starting in CS4, this setting is always reset to ON when DW is restarted (which is a natural action to take when things don’t make sense).

You can change it to default to OFF as follows:

1. Place the following code in a file called myStartup.htm :

<script language="JavaScript">

2. Place a copy of this file in the Configuration/Startup folder so that it gets executed every time you start DW.

Notice that I gave it a generic name in case you want to add any other commands to be executed at every startup.

CS4 Code Printing Improvements

Starting with Dreamweaver CS4, code now prints with Syntax Coloring.
The exception to this is that background colors are not printed. Code printing recognizes the “Syntax Coloring” Code View setting in the:
  View > Code View Options
menu for turning off coloring.
The “Line Numbers” setting is also recognized when printing.