And we’re back counting down my Top 10 Dreamweaver Tips from 5 all the way up to #1!

So there you have it, the last of my Top 10 Dreamweaver Tips! I hope you enjoyed the tips and found them as useful as they’ve been to me over the years.

Counting down my top 10 Dreamweaver tips. Part 1 (below) takes us from tip #10 all the way up through tip #6.

Be on the lookout for Part 2 (Tips 5-1) tomorrow.

Registration is open,  sign up now…

My online course Dominate Dreamweaver is now open for registration. The course consists of 12 weekly modules containing:

• A digital text book broken into manageable weekly segments
• “Over the shoulder” style videos illustrating the crucial tactics and concepts
• Weekly “classroom” session webinars where I’ll go over each week’s material and answer any questions you might have
• Complimentary web hosting space on our student server
• 24/7 access to ALL course materials

Basically, I’m going to recreate the classroom experience without the limitations. You’ll be able to work through the course at your own pace and I’ll be there when you need me.

Plus, the weekly webinars will be recorded and available for download to watch later. So if life gets busy and you have to miss a class, you don’t have to resort to begging a classmate for notes just to catch up.

That’s one of the beautiful things about online learning; you can fit the course into your hectic schedule, not the other way around.

Now, we all know students who love to meticulously plan out their entire semester. For those folks I’ve included the following course syllabus:

The course will officially begin with Module 1 on September 21 but you’ll be receiving some “jump start” materials soon after you register. The course consists of:

• Module O: Jump Start
• Module 1: HTML (rewritten and expanded)
• Module 2: Intro to CSS (rewritten and expanded)
• Module 3: CSS-based Page Layout
• Module 4: Using Images
• Module 5: Templates & Site Planning
• Module 6: CSS menus & Spry Menubars
• Module 7: JavaScript Behaviors and Spry Widgets
• Module 8: Mid-Course Review
• Module 9: Forms and Scripting
• Thanksgiving Break
• Module 10: Search Engine Optimization (Dreamweaver & beyond)
• Module 11: Site/Page Validation, Browser Checking, & Extensions
• And we’ll wrap things up on December 18 with Module 12: Beyond Dreamweaver

To learn all the details  and sign up visit the enrollment page…

Enrollment is now open. Sign up now…

On Sept 14th I opened registration on a full-fledged, interactive online Dreamweaver course. It will begin by building on the material I’ve already covered in Let’s Get Started with Dreamweaver and walk you step by step through the learning process until you’re able to create the visually stunning and technically advanced websites you’ve always wanted to build.

The course, Dominate Dreamweaver, will consist of 12 weekly modules containing:

• A digital text book broken into manageable weekly segments
• “Over the shoulder” style videos illustrating the crucial techniques and concepts
• Weekly “classroom” session webinars where I’ll go over each week’s material and answer any questions you might have
• Complimentary web hosting space on our student server
• and 24/7 access to ALL course materials

Basically, it’s going to recreate the classroom experience without the limitations. You’ll be able to work through the course when it fits your schedule, at your own pace, and I’ll be there whenever you need me.

Plus, the weekly webinars will be recorded and available to download and watch later. So if life gets busy and you have to miss a class, you don’t have to beg a classmate for the notes to catch up.

Enrollment Period: Sept 14th-18th

Maximum Class Size: 100 students

Even without all these details, I received several emails from interested students all wanting to know the same thing you’re probably asking yourself right now:

What’s it cost?

There’s probably some fancy way that I’m supposed to tell you the price so that it seems like pocket change but I’m a web designer, not a car salesman.

I’m offering the entire 12 week course for 3 payments of $149.95 or a one time fee of $399.97 which saves you $50.00.

Now, I realize you’re probably not going to dig that out from between the cushions of your sofa. But let me ask you a couple of questions before you decide whether or not this is an investment you should make.

Can you imagine how many hours you’ll spend learning Dreamweaver on your own?

Imagine time spent:

• On hold waiting for tech support to figure out how to set up Dreamweaver to access your web server.
• Googling topics like CSS positioning and Spry Datasets (if you can even figure out what to search for).
• Reading blogs (with no guarantee the author knows what he’s talking about).
• Participating in forums where no one knows or agrees on the answer to your questions.
• Reading books for beginners, dummies and idiots. And good luck emailing the author with a question.

I can guarantee that having all this information in one place with the opportunity to ask questions and receive feedback from a professional with 12 years of web design experience will save you hundreds of hours while learning and using Dreamweaver.

But let’s be wildly conservative and say you only save 50 hours.

If your time is worth $20 an hour (& if you can design websites, it’s worth a lot more than that) we’re talking about $1,000 or 250% of your original investment!

Or, look at it another way, this course is equivalent to the three-semester hour course I taught at the college level.

Three semester hours at our local public university will cost you more than double the $400 you’ll spend on this course.

And, if you’ve checked lately, you know you aren’t likely to find a course with an instructor who is a practicing professional web designer and current with the latest version of Dreamweaver.

Or maybe after struggling with the program for a few days or a few weeks you’ll admit defeat and decide to hire a designer to build your site.

I’ll let you in on a secret, after a dozen years in the business my price for a small website of 10 to 20 pages STARTS at $4000.

And you can expect to pay a lot more to a big design firm.

So ask yourself, would rather you enroll in this course, pay 1/10th of my standard fee for ONE site, and be able to create and modify MULTIPLE web sites yourself…

OR

Are you going to depend on expensive designers for every update, redesign or new site your company needs?

Now maybe you have endless hours of spare time, incredible patience, and plenty of money to throw at web designers but most of the people and companies I know don’t.

That’s why I’m so confident you’ll get a huge return on your investment in this course.

Enroll now…

The issue: While defining a site using the Windows version of Dreamweaver, when the users tries to set the local root folder by browsing into and selecting it, the local root folder is set one directory higher than the one he’s chosen.

The (very unsatisfactory) solution: Type in the directory name manually OR select a directory inside the one you actually want to set as the root folder.

More info: I’ve experienced this issue but wasn’t able to get any concrete information until now. Now thanks to a response from David Powers to my post on the Adobe forums we at least know it’s a “known issue.” Here’s David’s response:

…when I reported it as a bug to Adobe, an engineer […] said the problem had already been identified internally by Adobe on Windows 7. I was originally alerted to the problem by Al Sparber, who told me it happened after the Service Pack 2 “upgrade” to Vista. I didn’t have SP2 installed, so I tested my version of CS4 (on 32 bit Vista). There was no problem selecting the local root folder. I then installed SP2, and immediately tested it again: the root folder was not selected.

It affects all versions of Dreamweaver, not just CS4. Adobe’s comment was that SP2 has obviously brought Vista in line with Windows 7. I have no idea if or when a fix will be made available. It’s certainly annoying, but it doesn’t prevent the program from working; and I don’t create new sites every day, so it’s something I can live with.

Added Info: A report that this bug also affect linking to external CSS (and I assume JavaScript) files: http://forums.adobe.com/message/2197998#2197998

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.

The response to my What version of Dreamweaver do you use? poll wasn’t overwhelming but I got enough responses (20 and counting) to make the results interesting. I’m going to keep the poll open in hopes of getting additional feedback(as I get more responses, I’ll add them here) but here’s a summary of the results so far:

Respondents were split just about down the middle between version CS3 and CS4 with 9 people indicating they used the newest version and 10 still using CS3 (although one of the CS3 users indicated he had dropped Dreamweaver in favor of another program). There was one holdout still using DW8 who indicated that he was happy with the program and didn’t plan to update (although lower cost could change his mind).

Not surprisingly, seven of the CS3 users indicated the cost of the upgrade was keeping them from moving up to CS4 and all of those folks plus the DW8 user indicated that lower cost was the main thing that would convince them to upgrade (although six of them would also like to see more features).

The new features folks would like to see include:

• Built-in integration with BrowserLab.
• ASP.NET support
• An Better FTP Interface.
• Less costly way for clients to update their sites than Contribute (they might want to check out CS4’s InContext Editing)
• html 5 support
• ability to work without css
• Support for all Spry widgets
• Making it easier to recover Site Definitions

Thanks to everyone who responded and, for everyone else, I hope you’ll take a few minutes to answer the survey questions now.

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.