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.

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.

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.

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.

I frequently get questions like this:

My site works fine on my computer but when I upload it the [fill in the blank] are broken.

My first response is one I use to address of lot of issues: Make sure your site is properly defined. It’s critical enough that I wrote a tutorial, Define Your Site, for the Dreamweaver Club forum and also included the information in my Let’s Get Started with Dreamweaver mini-course.

Once that’s out of the way the next thing to do is take a look at the source code of your page and see if any of the links are hard-coded to point to a file on your local computer. If they are, they will point to URLs that look something like this: file:///C/site/test.html. There are a few ways this might happen:

• Your site is defined incorrectly (but we’ve already addressed that)
• You try to link to a file outside your root folder (and don’t let Dreamweaver move it for you when it asks)
• You copy code from a file that hasn’t yet been saved (Dreamweaver uses file:/// links until you save a page for the first time) into another page
• Dreamweaver screws up (it happens but not as often as some folks like to think)

The fix is relatively simple. Once you’re sure you have everything set up correctly, recreate the links. You can find the ones that need fixing by searching the source code for “file:///”

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.

Recently on Twitter @fesworks asked about Dreamweaver’s find and replace functionality (menu Edit>Find and Replace… or Control+F/Command+F). It’s really quite extensive and, if you’re serious about building websites, I recommend you explore it.

Here’s a quick rundown of  the functionality:

1. F&R can work on unopened documents, so you don’t even have to have a document open to access it. Just remember, there is no undo for unopened documents. So, before you get too fancy with your site-wide f&r you might want to consider making a backup copy of your site.
2. It can search the following:
   1. The selected text in an open document.
   2. The entire document currently being edited.
   3. All open documents.
   4. All documents in a folder that you select.
   5. Files selected in the site window.
   6. The entire current site
3. You can also choose what parts of a document to search:
   1. The source code.
   2. Only the text of the document (basically what you see in design view).
   3. Text inside (or outside) of a specific html tag or tags.
   4. A specific html tag with specific attributes.

In addition you have the usual options to match case or whole words as well as to ignore white space.

One option newcomers may be unfamiliar with is using regular expressions in searches. Regular expressions let you construct formulas to search not just for a specific text string but for patterns of characters and text strings as well. It’s a powerful tool that deserves a tutorial all it’s own. So for now I’ll simply point you to Wikipedia to get you started.

And, as always, feel free to email me with questions, comment here and follow me on Twitter (DWcourse).

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.

I always warn my Dreamweaver students not to save their FTP password with their site information if they are working a public computer. If they do, anyone with access to the computer will have access to their website. In addition, the password encryption that Dreamweaver uses isn’t very secure. So a stranger could not only access your site but also “borrow” your password and access your site later from a different computer.

While that seems like an oversight on the part of Adobe, it can also be a convenience if – like me – you ever need to recover a password and the only place you’ve saved it is in Dreamweaver. To make the recovery process easy, Apptools provides an easy to use recovery tool on their site. Here’s how to use it:

1. Export your site settings
   1. Select the Site>Manage Sites… menu option
   2. In the Manage Sites dialog, click the Export… button
   3. Make sure the “Backup my settings” option is selected and click OK
   4. Save your definitions as a .ste fie
2. In a text editor
   1. Open the site definitions (xxxx.ste) file
   2. Locate the text string: pw=”encrypted password here”
   3. Copy the letters and numbers between the quotes
3. Go to http://apptools.com/password.php
   1. Paste the code into the Encrypted Password field at the bottom of the page
   2. Click the Get Password button

That’s it, you should be looking at your recovered password.