Archive for December, 2008

24 ways to improve your web skills

24 ways is the advent calendar for web geeks.
Navigate back to previous years for even more tips! Enjoy.

Live View and Site-root relative paths

Have you tried using Live View on an HTML page with Site-root relative paths? You’ll need to make a few changes to get thit to work.
For the sake of performance, Dreamweaver CS4 by default loads local files for static HTML pages in Live View. When viewing pages locally, there is no server and no Site, so Site-root relative paths are not resolved. Here’s what you need to do to have these paths resolved:
1. In the Document toolbar, Live View drop down, select “Use Testing Server for Document Source”.
2. Define a Testing Server for your Site
You might have to stop and restart Live Mode for it to take effect.

New Feature: Code Navigator in CS4

Good Afternoon,
In Part II of the “What’s New in DW CS4″ series, we are going to talk about Code Navigator.
Code Navigator allows users to easily see the CSS files and rules that are affecting the current selection (or insertion point) and quickly jump directly to the exact rule, right from the Design/Code View window. It also opens and navigates to other file types.
You may have noticed Code Nav already. When in Design View, if you pause the cursor or insertion point for a few seconds, an icon of a ship’s wheel will show up. Clicking on this icon opens up the Code Nav window. (This assumes you have CSS on your page.)
This Code Nav window will show all the rules associated with the current selection, organized by CSS files and internal rules. Mousing over any of these rules will show the actual declarations within the rule. Clicking on the rule will take you directly to the rule in the CSS file (or Style tag) for editing.
The Code Nav window an also be brought up by Alt+Click. Notice that the Code Nav window also has a checkbox if you want to disable the wheel icon. We also added the wheel icon to the Coding toolbar (second from the top). Clicking this will also bring up the Code Nav window.
But Code Nav is for more than CSS. It will also work for:

  • Going to Javascript files from the <script> tag.
  • Opening server-side includes. (One level deep only)
  • Dreamweaver Templates and Library items: Open the dwt from an instance.
  • iframes

You will notice that Code Nav works when in Live View (see last week’s post). There are a couple limitations when in Live View, mostly having to do with navigating to includes while in Live View, but the CSS part works well and is quite useful for navigating through rules on the real page.
Code Nav is another good feature that helps you stay in Design/View while providing contextual information without having to go to a panel. This will hopefully streamline work flows and lead to quicker CSS navigation and editing.
That is a wrap for this week. There will likely be a delay on the next post as we head into the holidays.
Wishing you well,

Do you want F1 to take you to Web Help?

When you choose Help > Dreamweaver Help, the Dreamweaver Community Help and Support Page opens by default. Many of you have told us that you’d prefer opening Web Help instead (i.e. the product help system on-line). Now, you can select an option that lets you do just that.
Here’s how to change the default Community Help behavior:
1. Open the main Dreamweaver Web Help page.
2. Select the “Help on the Web” option.
Keep in mind that no matter which option you go with, you can always click a link to jump to the other page.

More on what you can’t find

We’re seeing people search for things in Dreamweaver Help — simple things — and coming up empty-handed. There are lots of reasons for this, one of them being the new google search engine that powers Web Help searches and the new Community Help. This blog entry is going to keep a running list of topics that google has trouble delivering for whatever reason.
We see that you’ve had a hard time finding the basic spell check documentation in Dreamweaver CS4. The reason for it is because the command is actually called “Check Spelling” and so the documentation refers to it as such. If you search for “check spelling,” the documentation should come up right away in Community Help or in product Web Help; but because of google relevance matching, things like “spell check,” “spell checker,” and “spelling check” have not been working adequately. We’re trying to adjust this so that it works better. In the meantime, you can get to the topic here:

Looking for Layout mode?

We’ve been hearing that a lot of people have been looking for the Layout mode documentation in Dreamweaver CS4. As of Dreamweaver CS4, Layout mode is no longer in the product.
Here’s why (according to our magnificent web guru, Murray Summers):
1. Perhaps most importantly, the old Layout mode in Dreamweaver CS3 and earlier sits between you and *real* HTML tables,and fools you into believing that concepts like “layout cell” and “autostretch” really mean something. They do not. As long as you use Layout Mode, you’ll never learn one of the most important things for new web developers – how to build solid and reliable tables.
2. Actually, #1 wouldn’t be *so* bad, except that the code that is written by Layout Mode is really poor code. For example, a layout table contains MANY empty rows of cells. This can contribute to a table’s instability. In addition, if your initial positioning of the table’s cells is a bit complex, Layout Mode will throw in col- and rowspans aplenty as it merges and splits cells willy-nillly to achieve the pixel-perfect layout you have specified. Again, this is an extremely poor method for building stable tables, because it allows changes in one tiny cell’s shape (i.e, dimensions) to ripple through the rest of the table, usually with unexpected and sometimes disastrous consequences. This is one of the primary reasons for the final result’s fragility – read this -

3. The UI for Layout Mode is beyond confusing – many options that you might want to use are inaccessible, e.g., inserting another table, or layer onto the page.
To make good tables, keep it simple. Put a table on the page, and begin to load your content. If you would want a different table layout, instead of merging or splitting cells, consider stacking tables or nesting simple tables instead, respectively.
Thanks Murray!
At the time of the CS4 release, Layout mode was only mentioned on the deprecated features list at the bottom of the What’s New page:
But now we’ve also put a note in the tables documentation indicating that we’ve removed the feature:
But since this is buried deep in the many pages of Dreamweaver Help, we encourage you to blog about this feature going bye-bye if you post regularly about this sort of thing.
Jon Michael Varese
Lead Writer, Dreamweaver

CSS Styles panel

Have you ever wanted to determine what CSS properties are applied to an element on your page? Here’s a general approach on how to do that using the CSS Styles panel in Dreamweaver.
The first trick is selecting the correct element. This is easy for elements like images, but it’s not so easy when working with nested DIV containers. Open your page in Design View. Click inside the element that you are trying to change. Using the “Tag Selector” (the hierarchy of tags at the bottom of the document window), select the right-most tag. Keep selecting the element’s parent (next tag to left) until you have the desired element selected.
The second trick is finding the desired CSS Rule. Open the CSS Styles panel (Window > CSS Styles). Select the “Current” mode to see the CSS applied to the current selection in your page. You’ll see 3 panes:
Top pane:
A read-only (but selectable) list of all properties applied to currently selected element.
Middle pane:
There are 2 modes which can be chosen by buttons on bar: the “Information” view and the “Cascade” view.
By default, you get the “information” view which is a spoken language summary of what you see in the Top pane. This is a bit redundant with the top pane, so change to the “cascade” view (using buttons on right side of “Rules” bar) to see all cascaded rules that apply to the element. Rules are listed in the order of specificity, with most specific rule at the bottom. This is the holy grail when working with CSS. Place mouse over rule to get exact specificity in the tooltip.
Bottom pane:
An editable property list of properties in selected rule. Properties that are crossed-out are overridden in more specific rules. Place mouse over property for tooltip with more details. If you prefer to manually edit CSS, you can right-click any property or rule and use “Go to Code” to quickly get there.
From here, use the cascade view to learn about the structure of the CSS for the element. Start at the most specific (bottom) rule, and make your way to the least specific rule.
If you want to get right to the rule for a particular property, just click on a property of in the Top pane to select the rule with that property in the Middle pane.
Even faster is to double-click on the property. In the Preferences CSS Styles page, you can define the action taken when you double click on a rule.
Happy styling!
Randy Edmunds
Dreamweaver Development

New Features in DW CS4: A mini-series

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.

Continue reading…