Using the font tag in Dreamweaver CS4

by James Cook on August 3, 2009

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.

{ 15 comments… read them below or add one }

Leave a Comment

{ 1 trackback }

Previous post:

Next post:

Home | Free Dreamweaver Mini-course | Make Contact