Author Archive: Randy Edmunds

Code Coloring specific Tags

Many Dreamweaver versions ago, there was an Preference setting where you could specify a unique code color for certain tags in the Code View. You can still do that, but there is no longer a UI, which means you need to edit some XML.
Take a look at the Configuration/CodeColoring/CodeColoring.xml file. At the very end of the file, you’ll see some <tagGroup> tags that specify a list of one or more tag names in the tags attribute. The name field is what gets displayed in the Code Coloring Preferences Styles list so you can use the "Editing Coloring Scheme" dialog for setting the color of the group of tags.

Tip for using Design-time Style Sheets

Dreamweaver Design-time Style Sheets (DTSS) allow you to show or hide design applied by a CSS style sheet as you work in a document in Design View. They only apply while you are working on the document in DW. When the page is displayed in a browser window, only the styles that are actually attached to or embedded in the document appear in a browser. This is handy for working around shortcomings in DW’s rendering engine.
DTSS are implemented as “User” style sheets. More info here:
http://www.w3.org/TR/CSS21/cascade.html#cascade
“By default, rules in an author’s style sheet override those in a user’s style sheet. However, for balance, an ‘!important’ declaration takes precedence over a normal declaration. Both author and user style sheets may contain ‘!important’ declarations, and user ‘!important’ rules override author ‘!important’ rules.”
http://www.w3.org/TR/CSS21/cascade.html#important-rules
So, give your DTSS properties the !important modifier to always override what’s on your page.

Split Code View

DW CS4 has a new split code view. Use: View > Split Code from the main menu.
You might not have found it because a button was not added to the toolbar with the Code, Split, and Design buttons for the sake of avoiding confusion. The good news is that the markup to add the button was left in the Configuration/Toolbars/toolbars.xml file, but simply “commented out”. So, you can “uncomment” the markup if you’d like that button on your toolbar.

IECC handling in Dreamweaver

By default, Dreamweaver recognizes Internet Explorer Conditional Comments (IECC) in “downlevel” mode just as any non-IE browser would. One problem caused by this is that files referenced in IECCs are not seen by the DW DOM, so the file paths are not fixed when they are moved, and they are not recognized as dependent files. See http://msdn.microsoft.com/en-us/library/ms537512.aspx for more information regarding IECCs.
In DW8 and above, the IECC support “level” can be changed. I wrote an extension for doing this:
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1564018
Note that the IECC Support Level affects which markup is seen by the DW DOM, so it affects all related features. So, while it fixes the file path fixing and dependent file problem, it also affects Design View rendering. Live View is not affected.

Dreamweaver Extensibility is alive and well

The Adobe Exchange has extensions for Dreamweaver and other Adobe products:
http://www.adobe.com/cfusion/exchange/
A few years ago, the number of uploads and downloads of DW extensions on the Exchange slowed to a crawl because the web site was, uh, a bit challenged. OK, it sucked. But the web site has been redesigned, so please give it another look. I currently see 1,408 extensions for DW.
Also, there are many Dreamweaver extensions written by third party developers that do not get uploaded to the Exchange, so be sure to search the web for more. There are too many good developers to list them all here, and I don’t want to play favorites :)

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”.
livecode_menu.png
2. Define a Testing Server for your Site
You might have to stop and restart Live Mode for it to take effect.

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