Main

June 25, 2009

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 :

<html>
<head>
<script language="JavaScript">
  dw.cssStylePalette.setDisplayStyles(false);
</script>
</head>
<body>
</body>
</html>

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.

Posted by Randy Edmunds at 8:58 AM | | Comments (0)

June 10, 2009

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.

Posted by Randy Edmunds at 11:42 AM | | Comments (0)

April 22, 2009

Making Feature Requests

Are you interested in requesting a new feature for Dreamweaver, or any other Adobe product?

First of all, read this excellent article by Garrett Dimon (that I found on John Nack's blog) about suggestions for making feature requests. As someone who regularly reads Feature Requests, this article hit the mark on every point.

Then use the Adobe Feature Request Form to submit your request to the appropriate Adobe product team.

Thank you in advance for keeping the great feedback coming!

Posted by Randy Edmunds at 9:03 AM | | Comments (0)

March 25, 2009

Dreamweaver on Adobe TV

Adobe TV has many videos for learning about Dreamweaver. Start with the following link:

http://tv.adobe.com/#pd+Dreamweaver

Use the settings on the right to narrow down the list for your interests according to Release (CS3, CS4, Other), Skill Level (Beginner, Intermediate, Advanced), and Topics (Tutorials, Demos, Tips and Tricks, and Inspiration).

Also, use the dropdown list at the top to sort the videos By Date, Alphabetically, Highest Rated, or Most Popular to help sift through the list.

Posted by Randy Edmunds at 9:06 AM | | Comments (5)

February 25, 2009

Extending Dreamweaver: Getting Started

Dreamweaver was designed to be highly extensible. After deciding that you'd like to add or streamline some functionality in Dreamweaver, how do you get started?

The extension may have already been written by someone else, so first, check the Adobe Exchange. Also, search the internet because there are many third party extensions that are not uploaded to the Adobe Exchange.

The easiest way to create your first extension is to open the History Panel (Window > History), select 1 or more steps, right-click and select "Save as Command…". This creates a Command in the User Configuration folder Commands sub-folder which on WinXP is usually something like:

C:\Documents and Settings\[username]\Application Data\Adobe\Dreamweaver CS4\en_US\Configuration\Commands

Note that the "Application Data" folder is hidden by default, so you may need to enable displaying of hidden folders in the Folder Options of the File Explorer.

Next, look around in the Application Configuration folder for code samples. On WinXP, it's usually here:

C:\Program Files\Adobe\Adobe Dreamweaver CS4\en_US\Configuration

Some tools provide an interface for users to extend it, but don't actually use it themselves. Dreamweaver uses it's own extensibility layer extensively (warning: pun attempt), so you'll find an example of almost all thousand or so JS API calls.

DW extensibility UIs are written in HTML, CSS, and JavaScript, so you already know how to do it. They are rendered with our proprietary rendering engine, so not all HTML/CSS/DOM is supported, and the rendering maybe different from current browsers, so you have to play around with it a bit.

Some aspects of the extensibility UI rendering is controlled by the DOCTYPE. Our proprietary rendering engine (note to wikipedia: it's not Opera) has evolved over the years, so be sure to target the desired DW version number in your DOCTYPE. So, to create a Property Inspector to target Dreamweaver Version 8 and above, use:

<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 8.0//pi">

Note that starting with version 10, the DOCTYPE was changed to use "Adobe":

<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog">

There are online Extending and API docs here:
http://help.adobe.com/en_US/Dreamweaver/10.0_Extending/index.html
http://help.adobe.com/en_US/Dreamweaver/10.0_API_Ref/index.html

Finally, be sure to upload your extension to the Exchange if you'd like to share it with others.

Posted by Randy Edmunds at 9:52 AM | | Comments (6)

January 15, 2009

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.

Posted by Randy Edmunds at 9:58 AM | | Comments (5)

January 7, 2009

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 :)

Posted by Randy Edmunds at 2:45 PM | | Comments (0)

December 24, 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.

Posted by Randy Edmunds at 9:16 AM | | Comments (1)

December 17, 2008

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.

Posted by Randy Edmunds at 5:02 PM | | Comments (3)

December 13, 2008

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.

HelpWeb5.jpg

Keep in mind that no matter which option you go with, you can always click a link to jump to the other page.

Posted by Jon Varese at 4:39 PM | | Comments (0)

December 11, 2008

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

Posted by Randy Edmunds at 8:29 AM | | Comments (1)

October 1, 2007

Attention Extension Developers

I'm giving a presentation on Extensibility Options in Dreamweaver CS3 at MAX 2007 in a couple hours, and I've got extensibility on the brain. For those of you who are developing extensions but aren't at MAX, I wanted to ask: What kinds of extensions are you developing? What JSAPI functions (or enhancements to existing functions) do you wish were available? When trying to figure out what your options are, do you mostly search the Configuration folder for examples, read the paper version of the documentation, or search the online version?

Please let me know what you're up to in the comments, so I can get a broader picture of what's going on with those of you out there in the real world. Thanks!

Posted by at 9:15 AM | | Comments (7)

August 13, 2007

Source Control: Do You Use It?

Hi gang! I'm kicking off a new blog category with this post. It's called Real World Use, after the category we have in the Dreamweaver bugbase for issues that are found during normal use of the product (as opposed to those found during feature development or specific testing). This category will be a place for us to ask questions and get feedback about how you're using Dreamweaver in the real world, and perhaps even a place to share some inside info about how we thought you'd use the features we developed.

Let's get things started by talking about source/version control. Version control systems are absolutely vital to software development, and I think one could argue that they're just as important to managing large websites. My question is: Do you use a version control system such as CVS, Subversion, SourceSafe, or Perforce with your site? If so, is your system integrated with Dreamweaver, or do you deal with the repository separately? Are all your web files under source control, or only some of them? What are your main reasons for using source control?

If you're not using a source/version control system, why not? (I don't use one on my personal site, for example, because I'm the only one working on the site, and the overhead of setting up a system outweighs any benefit I'd gain from it.) Is putting your site under source control on your to-do list, and you just haven't gotten to it yet, or is it not even on your radar?

Thanks in advance for your thoughts!

Posted by at 9:12 AM | | Comments (42)