A lot of folks are whining and moaning because Dreamweaver CS4 now enforces the use of CSS styles rather than HTML attributes for formatting. One of the things this means is no more font tag (and its related attributes).

That’s a good thing in my book. No more code like this:

<p><font color=”#003399″ size=”5″ face=”Tahoma, Geneva, sans-serif”>paragraph 1…</font></p>

<p><font color=”#003399″ size=”5″ face=”Tahoma, Geneva, sans-serif”>paragraph 2…</font></p>

<p><font color=”#003399″ size=”5″ face=”Tahoma, Geneva, sans-serif”>paragraph 3…</font></p>

Well you get the idea!

But CS4 has a dirty little secret and , against my better judgement, I’m going to reveal it:

IT’S STILL POSSIBLE TO USE THE DREADED FONT TAG!

The secret is CS4′s Wrap Tag… and Edit Tag… commands, both of which are accessed from a pop-up menu that appears when you right+click on a selection in the Design window. Here’s how it works:

1. In the Design window select some text.
2. Right+click on your selection and select Wrap Tag… from the pop-up menu.
3. In the Tag Editor dialog type in <font> (or choose it from the tag list) and press the Enter key twice (once to “set” th tag and once to dismiss the dialog). The text will remain  selected.
4. Right+click once again on your selection and select Edit Tag <font>… from the pop-up menu
5. In the Tag Editor – font dialog, make your selections for Face, Size and Color and click OK.

If you look at your code you’ll see something like this (shudder):

<font color=”#FF0000″ size=”+2″ face=”Tahoma, Geneva, sans-serif”>content</font>

That’s all there is to it.

To edit an existing font (or some other HTML) tag:

1. Select the entire tag by clicking within the tag in the Design window AND then selecting the tag from the tag listing in the status bar at the bottom of the Document window..
2. Right+click on your selection and select Edit Tag <selected tag>… from the pop-up menu.
3. Edit the tag attributes in the Tag Editor dialog and click OK.

Just don’t tell anyone I told you how to do it.

As always, feel free to comment here or email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.

My iMac recently froze up and, when I – eventually – recovered from the forced shut down and restart, I discovered my Dreamweaver preferences had been reset to the default settings and, even worse,

ALL 50 OF MY SITE DEFINITIONS HAD DISAPPEARED!

I have my site definitions backed up (most of them anyway) but the option of importing them one by one didn’t really appeal to me. Besides, I have Time Machine installed so I reasoned that, if I could figured out where Dreamweaver stores its site definitions, I could restore them all from the backup.

Well, it took a bit of research but I was able to make it work. Should you wind up in the same situation, here’s how to do it.

Sorry but these instructions are Mac OS X and Dreamweaver CS3 and CS4 only, if anyone can figure out how to do the same on a PC or for other versions of Dreamweaver, I’m sure a lot of folks would like to know about it.

Dreamweaver CS4 Mac stores site definitions in the file:

Macintosh HD:Users:<username>:Library:Application Support:Adobe:Common:10:Sites:Site Prefs

For CS3 the file is: Macintosh HD:Users:<username>:Library:Application Support:Adobe:Common:9:Sites:Site Prefs

Substitute your user name for <username> and, if you have renamed your computer’s hard drive, sub your drive’s name for Macintosh HD. The colons separate folder names.

Using Time Machine, restoring the site definitions was a simple matter of selecting the file, activating Time Machine, scrolling back a day or two and selecting Restore to replace the current (empty) Site Prefs file with the previous version.

Note: Make sure that you have Dreamweaver closed when you restore the Site Prefs file or the restored file will end up empty as well.

As I said, I also lost my customizations to Dreamweaver’s preferences. I was able to restore them in the same way. Dreamweaver’s preference settings are stored in the file:

Macintosh HD:Users:<username>:Library:Preferences:Adobe Dreamweaver CS4 Prefs

Of course, it’s Dreamweaver CS3 Prefs for users of Dreamweaver CS3.

If you don’t have Time Machine installed, you can also replace the Site Prefs and Dreamweaver CS4 Prefs files using a recent back up (you do have a recent back up don’t you?).

And, if you haven’t found yourself in this situation, be thankful and consider making a backup of your Site Prefs and Dreamweaver CS4 Prefs files and storing them somewhere handy.

As always, feel free to email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.

As Dreamweaver has matured it’s become more than a tool for designers looking for a WSIWYG web tool. It’s become a serious web development tool and is even getting the attention of (gasp!) hard core coders.

In recognition of this trend, Adobe has added several new preset workspaces to Dreamweaver. The workspaces, which are accessed from the Window>Workspace Layout menu item, include:

• App Developer
• App Developer Plus
• Classic
• Coder
• Coder Plus
• Designer
• Designer Compact
• Dual Screen

As the names imply, the workspaces are  designed to accommodate the needs of different users in different computing environments. So, if you’re not happy with the default setup, try one of these options.

If you still aren’t happy, you can always open and close windows and move and resize palettes until you are. When you quit Dreamweaver it will remember your workspace. In other words, if you start with the Designer workspace, change it and then quit, your changes will be integrated into the default Designer workspace which you can access at anytime by selecting Window>Workspace>Designer.

To remove your changes and return the Designer workspace to its original settings choose Window>Workspace>Reset “Designer.”

You can also arrange the workspace as you like it and save it as a custom workspace by choosing Window>Workspace>New Workspace… That way you’ll have access to the new workspace as well as all the built-in defaults.

Finally you can delete or rename the custom workspaces you create by choosing Window>Workspace>Manage Workspaces…

As always, feel free to comment here or email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.

Now that I’ve gotten Let’s Get Started with Dreamweaver out the door, I thought it would be a good time to catch up on a few Tips of the Day (which you may have noticed haven’t been happening lately). I have still been answering questions on Twitter as DWcourse so I’ll get back in the groove by covering some topics I’ve addressed there recently.

@michaellunsford asked if there was a way to reconstruct a lost Dreamweaver template from a page created with the template. The answer is yes but it’s a bit of work.

BTW, the steps here are based upon a Dreamweaver template recovery article from the University College London Website. I’ve tested my revised instructions in Mac Dreamweaver CS4 but they should work for earlier versions as well.

1. Open an “orphan” page created from the missing template.
2. Select menu File>Save as Template… If you get a warning dialog that the original template can’t be found, click OK to dismiss it.
3. 

   The name of the template used to create a page is displayed in the upper right corner of thedesign View.

   Give the file the same name as the original template (you can find the original template name in a yellow rectangle in the upper right corner of Dreamweaver’s Design View).

4. Click Save and, when prompted, allow Dreamweaver to update links in the file. The file will be saved in the a new or existing Templates folder in the root of your site.
5. Close the file in Dreamweaver.
6. Open the file in a text editor such as BBedit, TextEdit or NotePad.
7. Near the beginning of your file, delete the entire comment:

   <!-- InstanceBegin template="/Templates/yourtemplate.dwt" codeOutsideHTMLIsLocked="false" -->.

8. Immediately before the closing html tag </html> at the end of your document delete the entire comment:

   <!-- InstanceEnd -->.

9. Dreamweaver (at least in CS4) inserts a TemplateBeginEditable name=”head” area when saving a page as a template. You’ll need to delete that. So look for code it the head of the document that looks like this:

   <!-- InstanceBeginEditable name="head" --><meta name="keywords" content="test" />
   <!-- TemplateBeginEditable name="head" -->
   <!-- TemplateEndEditable -->
   <!-- InstanceEndEditable -->

   Delete the extra code:

   <!-- TemplateBeginEditable name="head" -->
   <!-- TemplateEndEditable -->

10. Now you need to convert all of the InstanceBeginEditable comments into TemplateBeginEditable comments. So search and replace all instances of the following being very careful to match the case of the words exactly:
    

    Search for: InstanceBegin
    Replace with: TemplateBegin

11. Now convert the closing comments as well.
    

    Search for: InstanceEnd
    Replace with: TemplateEnd

12. Save and close the file.

You should now be able to open and edit the file in Dreamweaver. When you save the file, all your changes should be applied to any document that used the original template.

As always, if you have questions feel free to comment here or tweet me at DWcourse.

If you enjoy the information in this article, you may be interested in Dominate Dreamweaver. My 12-week online course which will take your from the Dreamweaver basics through building complex spry menubars and much more is now accepting registrations. The cost for the course is $397 (or three payments of $149.99).

Click here for more information or use the button below to register now.

Personally I considered Dreamweaver CS3, Adobe’s first upgrade to the program after acquiring it, to be a “must have” update.Obviously, a lot of you didn’t see it that way.

Lately I’ve fielded a lot of questions from people considering upgrading from Dreamweaver 8 (CS2) to Dreamweaver CS4. While it’s fairly easy to find information about the incremental updates: from DW8 to CS3 and from CS3 to CS4 (links at the end of this post) I haven’t found a source that offers an overview of what’s in store if you make the leap from 8 directly to CS4. So I’ve put together a quick  overview with some brief comments of the features that await you at the end of the DW8 to DWCS4 upgrade process.

New in CS3

Overview: CS3 marked the beginning of the process of integrating Dreamweaver into Creative Suite but more importantly it was the first version of Dreamweaver  to support CSS (Cascading Style Sheets) styles and layout in a manner accessible to non-programmers. That feature alone made CS3 a required update in my book. Of course with the new functionality there was also a bit of a learning curve.

• Integration with Adobe Creative Suite
  • Copy and paste from Photoshop
• Improved CSS handling
  • Convert inline CSS to a rule
  • Built-in CSS-based page layouts

  Spry (AJAX) widgets and effects

  • Pop-out menus, “accordion” panels and more
  • Browser compatibility checking
    Hints
    Community-based help
• Tag Inspector: right click to view
• Adobe Device Central
  • Preview designs for mobile devices
• Better Intel support for Macs

New in CS4

CS4 continues Dreamweaver’s integration into Creative Suite but the changes are more evolutionary than those in CS3. What you’ll notice immediately is several UI (user interface) changes that may take a bit of getting used to. Other changes offer increase functionality – especially In-Context Edit and AIR Authoring – but you might never notice them if you don’t go looking.

• Improved integration with Adobe Creative Suite
  • Photoshop Smart Objects automatically update placed images when the linked Photoshop image is changed
• New Workspaces
  • Built in workspaces: App Developer, App Developer Plus, Classic, Coder, Coder Plus, Designer, Designer Compact
  • Ability to create and save custom workspaces
• Related Files Bar
  • Easy access to linked JavaScript and CSS files
• Live View
  • View JavaScript and CSS effects within Dreamweaver
  • View effects of code changes “live”
• Improved code hinting
  • AJAX and JavaScript code hinting
• In-context  editing
  • Online editing through an Adobe hosted service
• HTML Datasets
  • Import tabular data from an HTML file into a sortable table
• Subversion Version Control
  • Improved version control for site with multiple authors
• AIR Authoring
  • Convert your web site into a stand-alone application
• Additional document viewing options
  • When viewing code and design in the Split view, the window can now be split vertically as well as horizontally (menu: View>Split Vertically)
  • Menu: View>Visual Aids> offers a variety of viewing options to make page elements more readily identifiable
• Code Navigator
  • Easily access code in linked files
• Layout Mode for “drawing” tables no longer available

The bottom line

Should you upgrade from Dreamweaver 8 to CS3?

In a word, YES. You’ll get the benefit of two excellent updates, an improved UI and access to “modern” web technologies like CSS and AJAX.

What about the learning curve?

Make no mistake you may encounter a significant learning curve moving to CS4. How steep it is will depend upon your familiarity with advanced web technologies such as CSS. If the move to CS4 marks your first venture into CSS-based (as opposed to table-based) layout, expect a few headaches as the wonders (and eccentricities) of Cacscading Style Sheets are revealed.

However, if you’re serious about web design, the transition to CSS is a requirement and CS4 offers the tools and templates to make the transition possible and rewarding if not always pleasant.

Additional resources:

• What’s new in Dreamweaver CS3: An excellent step-by-step guide the differences between DW8 and CS3
• 6 Things To Like About Dreamweaver CS4
• Dreamweaver CS4 Features Overview (Adobe)

What’s your experience?

If you’ve got information or tips that you’d like to share about the Dreamweaver upgrade experience or if you got questions before or after making the link, please leave a comment below.

Follow me on Twitter…