Last year I wrote that it is still possible (although not recommended) to use the deprecated <font> tag in Dreamweaver CS4. I recently got an email in response to that post asking how to remove the font tag from existing, older documents using CS4.

The writer noted that it was relatively easy in CS3 “all you have to do is highlight the block of text you want to edit and select “default” in the font selector box and “none” in font size and instantly the code is removed.”

The good news is it’s also very easy in CS4. All you need to do is right+click the offending <font> (or other) tag in the Status Bar at the bottom of the Document Window and select Remove Tag from the pop-up menu.

Viola, no <font> tag.

When you’ve been creating web pages as long as I have, it’s easy to start thinking you’re hot stuff. Then along comes some perfectly obvious little html shortcut that you’ve been overlooking for a decade. It tends to humble you pretty quickly!

And judging by the response at the DreamweaverClub.com forum, I wasn’t the only one surprised by this one. So I thought I’d share it with you.

As you know, when you link to a page using a normal link (such as <a href=”http://www.dwcourse.com”>DWcourse</a>) the link takes you to the top of the page. And, as many of you no-doubt also know, you can also insert an empty, non-link Anchor Tag (such as <a name=”item” id=”item”></a>) into your page and then link directly to the location of the Named Anchor within the page like this <a href=”http://www.dwcourse.com#item”>Link directly to item on DWcourse page</a>. To insert a named anchor in Dreamweaver select menu: Insert>Named Anchor.

Now here’s the obvious html fact that that I’d been overlooking. You don’t have to insert a named anchor into your page to link to a specific point within the page. You can link directly to any named object within your page. For instance, if you want to link to particular sub-sections of your page, each of which begins with an level 2 heading <h2> you can give each h2 a unique ID and link directly to it. In Dreamweaver you can assign an ID to an html object by selecting the object and typing the ID into the ID field in the Properties Inspector.

So, if your page looks like this:

<h1>Main Headline</h1>
<h2 id=”section1″>section 1 </h2>
content for section 1
<h2 id=”section2″>section 2 </h2>
content for section 2
<h2 id=”section3″>section 3 </h2>
content for section 3

You can link directly to section 2 from within the current page like this: <a href=”#section2″>Section 2</a> or from another website like this: <a href=”http://www.dwcourse.com#section2″>DWcourse Section 2</a>. No need to clutter up your code with an empty Named Anchor!

And, to point out the (now) obvious, the # (number sign) within a link refers to a named html object within the page, just as a # within a CSS selector refers to a named object.

I feel a bit stupid. In my recent Stop “Untitled Document” in Dreamweaver post I reported what I thought was a very clever way to find pages titled “Untitled Document” using Dreamweaver’s search function. It turns out there’s a built-in function that will will do the job:

1. Select menu: Site>Reports…
2. In the reports dialog:
   1. Leave Current Local Site selected in the Report On menu.
   2. In the Select Reports area of the dialog, check the Untitled Documents under HTML Reports.
   3. Click the Run button.

The Results palette will open and all documents with the title “Untitled Document” will be listed in the Site Reports tab.

In my defense, my earlier method gives you the ability to scan the titles of all your documents, which can be pretty handy.

One Dreamweaver feature that been around for a while is the Open Browser Window (OBW for short) behavior. Described simply, the behavior is a JavaScript that opens a page in a new window while at the same time specifying the size, attributes (scrollbars, resize handles. etc.) and name of the window. Once a window is created and named in this manner it can be targeted by additional instances of the OBW behavior or even regular links.

The problem is that – in Explorer and Firefox – when you target a preexisting window with the OBW behavior, the new page opens but the targeted window does not come to the front (technically, the targeted window does not gain focus). That means that your new page opens but the user doesn’t see it because it’s hidden. Probably not the solution you were looking for.

Here’s an example created using DW’s built-in OBW behavior. If you’re using Explorer of Firefox (Safari users don’t have this problem), click on the first link below and a new window – which I’m naming “popup” – will open. Make sure that “popup is positioned over this window, leave it open, return to this page and click on the second link.

Open Page 1 then come back and Open Page 2

The second link opens a new page in the existing “popup’ window but you won’t see it because it’s hidden behind this window. To verify that the new page opened, minimize (But don’t close!) this window. I’d hate to lose you just when things are getting interesting! Once you’re curiosity is satisfied, leave the pop-up window open and maximize this window.

What you’d really like to happen is what happens when you click on the link below.

Open Page 3

Notice that the new page opens in the existing “popup” window AND the window comes to the front. Fortunately, all it takes to work this magic is the substitution of a few lines of code in the JavaScript function MM_openBrWindow that Dreamweaver creates to handle the OBW behavior. Here’s all you need to do:

1. In Dreamweaver, using the Behaviors palette, attach the OPB behavior to an object in your page.
2. Switch to either the Code or Split view.
3. Near the top of the code of your page, somewhere between the opening head and closing head tags (<head> and </head> respectively) locate the following three lines of code which define the MM_openBrWindow function:
   function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
4. Copy the code below and use it to replace the code you located in step 3 above.
   function MM_openBrWindow(theURL,winName,features) {
newwindow=window.open(theURL,winName,features);
if (window.focus) {newwindow.focus()}
}
5. That’s it! Now whenever you use the Open Browser Window Behavior in your page you can rest assured the window will pop to the front and be visible. Just remember, since DW inserts the JavaScript in the page (and that’s where we customized it), you’ll need to make this change on every page where you use the OBW behavior.

Note: When using the links relative to site root option, this customized script will fail using DW’s Preview in Browser feature. However it will function properly when uploaded to your web server. Using links relative to document avoids the problem all together.

I recently receved this question from John via email:

You stated that Webdings were part of the Microsoft Core set of fonts that are pretty safe to use for web design….Pat had been saying for awhile that her hearts were not working on her website … and I would go and check and they were fine. When you mentioned the other day about viewing sites in different browsers,  I opened in FireFox and there was the problem. It turns her webding hearts into Y’s…

I am going to have to remove them … would you agree?

John, thanks for pointing this issue out. Since I don’t normally use Webdings, I hadn’t been aware of it.

Beginning with version 3, FireFox has made changes to the way it displays font characters that essentially break the Webdings font. There are valid reasons for doing this (there’s a discussion here…) but so far, those reasons haven’t convinced any of the other major browser makers (where Webdings continues to work).

The bottom line is this. Webdings is a dozen years old and encoded in a way that doesn’t play well with emerging web standards. Given that fact it’s unlikely that FireFox will change its ways and return to supporting WebDings. It’s also likely that other browsers will also eventually “break” Webdings. So, if you’ve been using the font in your web pages, it’s probably time to come up with another solution.

Since Webdings is essentially a graphic font the simplest solution is – as John suggests – to instances where you’ve used the font with images (and don’t forget to include a descriptive alt tag).

It’s just another case of evolving web technologies and standards rendering our “old” ways of doing things obsolete (think replacing HTML attributes with CSS styles and tables with divs) and it won’t be the last!

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.

Update: The directions here have been updated to accomodate absolutely positioned divs. Thanks to Dianne Lewandowski for pointing out the issue.

I thought I’d expand a bit on my answer to a question from Brandon85 on Twitter. He asked:

Why is this so hard!! How do you Center a website in the browser using Dreamweaver?

Actually, it’s relatively easy (if you know how).

1. Begin by selecting your entire page in Design View.
2. Select menu: Insert>Layout Objects>Div Tag (or click on Insert Div Tag in the Common tab of the Insert Palette).
3. In the Insert Div Tag dialog:
   1. Select Wrap Around Selection (your entire design) from the Insert menu.
   2. Leave the Class field empty
   3. Type “wrapper” (without the quotes) into the ID field (this is assuming you don’t already have an item with the ID “wrapper.”
   4. Click the New CSS Rule button.
4. In the New CSS rule dialog
   1. ID should already be selected in the Selector Type menu.
   2. #wrapper should have been automatically inserted into the Selector Name field.
   3. Decide whether the new style should be in the current document or a new or existing style sheet and make your selection in the Rule Definition menu .
   4. Click the OK button.
5. In the CSS Rule Definition dialog:
   1. Select the Box category.
      1. Type in a Width. By default the horizontal width of a div is 100% so you need to set a width for the wrapper div to properly center it. Logically this should be the width (most likely in pixels) of your page design.
      2. Uncheck the Same for All option under Margin.
      3. Set the Right margin to auto by selecting auto in the pop-up menu to the right of the Right field.
      4. Set the Left margin to auto using the same method.
   2. Select the Block category
      1. Select left from the Text-Align menu (I’ll tell you why in a moment).
   3. Select the Positioning category
      1. Select relative from the Position menu. This forces any absolutely positioned divs in your page to align relative to the “wrapper” div rather than the browser window. See CSS positioning for more information on positioning.
   4. Click OK

Your design should now be centered but we still have one step to go.

Correction: The following work-around was originally mislabeled. It is intended for IE5 compatibility (and can probably be ignored by most folks)

Work-Around for Internet Explorer 5: If desired, we’ll need an additional fix to make this IE5 friendly.

1. Set the text-align property of the body style to center (This will center your page layout in IE5)
   1. If you already have a body style, double click on it in the Styles Palette to open the CSS Style Definition dialog.
   2. If you don’t have a body style, create a new one:
      1. Choose menu: Format>CSS Styles>New… (or select New… from the pop-up menu in the upper-right corner of the Styles Palette) OR
      2. In the New CSS Rule dialog:
         1. Choose Tag from the Selector Type menu.
         2. Type “body” into the Selector Name field.
         3. Decide whether the new style should be in the current document or a new or existing style sheet and make your selection in the Rule Definition menu .
         4. Click the OK button to open the CSS Style Definition dialog.
   3. In the CSS Style Definition dialog:
      1. Select the Box category.
      2. Select center from the Text-Align menu.
      3. Click OK

That explanation I promised: Setting the text-align property in the body style to center centers your page design but, since styles are inherited in CSS, it also centers all the text on your page. By setting text-align for #wrapper to left, we effectively overrule the centering for all page elements inside of #wrapper (which should be all of the page elements).

Funny how much a 140 character answer on Twitter can grow once it’s a blog post!

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.

Another problem often experienced by Dreamweaver noobies is:

I’ve updated my site in Dreamweaver and it looks fine when I preview it but after I upload it the changes don’t show up on the site.

1. Let’s eliminate the easiest solution first. Did you refresh your browser window? When you view a page on the web, your browser stores a copy of that page (and it’s dependent files) in it’s cache. Then, if you return to the page, your browser shows you the cached version rather than the “live” version. This speeds up  browsing but also might prevent you from viewing the latest version of your page. Refreshing the browser window by clicking the Refresh button in your browser should guarantee  you’re looking at the current version of the page.
2. Another possibility – if you are viewing the home page of your site through a URL such as www.yourdomain.com – is that you have multiple index files. As you should be aware, servers are set up to display a default page for a directory if no file name is specified in the URL. The default file is usually index.htm, index.html, index.php or something similar. The server can even be configured (and often is) so that any of those file names can be used for the default file. A problem arises when more than one of the possible default files is present.Say, for instance, a file index.htm pre-exists on your server and, when you create your new site, you use index.html (note the “l”) as your default file name. When you upload your site the existing index.htm file will not be overwritten. So when you visit www.yourdomain.com you may continue to see the old index.htm and not your new home page, index.html.The solution is relatively simple, delete the index.htm file on the server OR change your default file to index.htm (remove the “l”) so that when it uploads it will replace the exiting home page.
3. Another possibility is that you have defined your Host Directory incorrectly in your Remote Site definition. If this is the case, when you upload your files they are placed in the wrong directory on the server. So you won’t see the new pages when you visit the site with your browser. More information on defining your site is available in my tutorial, Define Your Site at the Dreamweaver Club forum or in my Let’s Get Started with Dreamweaver mini-course.

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.

Chris Tordesillas recently asked via the contact form how to:

…make a simple horizontal spry menu where the sections are divided by a neat 1 pixel border all around.  My problem is when I place the border on the “ul.MenuBarHorizontal a” selector it places a 1 pixel border around each cell.  The end result is the border between 2 cells ends up becoming 2 pixels.

I just want a simple 1 pixel border in between my “buttons”

There are probably many ways to accomplish this but the one that occurs to me is to wrap three sides of the ul.MenuBarHorizontal a selector with a border:

border-top: 1px solid #F00;
border-right: 1px solid #F00;
border-bottom: 1px solid #F00;

And then create a special class style to provide the missing left border for the first “cell”:

.leftBorder {
border-left: 1px solid #F00;
}

You’ll then need to apply the class to the proper link <a> tag:

<li><a class=”leftBorder” href=”#”>Item 1</a>

As I said, there are probably other solutions. If you have one, please feel free to leave it in the comments below.

And, 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.