If you think of your domain name as your web site’s address, then the server provided by your hosting company is the “home” the address points to. It’s where your completed site will reside so that it is accessible to anyone with an Internet connection and a browser.

Reliable hosting is critical to your website’s success. Without it the world will never see the results of all your hard work. Fortunately, hosting is very affordable. Depending upon your needs you can expect to pay from $5 to $25 per month.

Over the years I’ve used more hosting companies than I care to remember and I’ve learned two lessons the hard way:

• Cheapest isn’t always (or even very often) the best.
• Live customer support (via online chat or phone) is critical. If there is a problem with your server, you don’t want to wait around for an email from customer support, you want help Right Now!

Based upon my experience and recommendations from other web developers, I currently recommend Hostgator for reasonably priced, reliable hosting.

1 Select your hosting plan

Go to Hostgator.com.

You’ll notice HostGator offers several types of hosting. All of them offer 99.9% uptime guarantees and 24/7 live support. We’re interested in basic Hosting which starts at $4.95 a month. So click on the Learn More… link in the Hosting box.

Now we’ll compare Linux Web Hosting plans. Unless your website is technically demanding (unlikely, since this is an introductory tutorial) the Hatchling plan should be more than adequate. If you’ll be adding additional websites with their own domains later, move up to the Baby plan.

Once you’ve determined which plan is right for you, click the orange Order Now button in the corresponding column.

While it’s easy to think of choosing a domain name and acquiring a web host as the last steps of building your site, they should really be among your first. That way, you’ll be able to completely define your site (Chapter 2) at the beginning of the development process and you’ll be able to upload and test your pages as you develop them (rather than discovering problems at the end of the process).

In this chapter, I’ll discuss the process of registering a domain name, which is basically the address where your website will live online (such as DWcourse.com). In my next post, Purchasing and Configuring Web Hosting (HostGator), I’ll cover the process of choosing a company to host your website and configuring your domain servers.

Domain Names

In the beginning of the Internet era, domain names were available through only one company (Network Solutions) and were relatively expensive to register ($70 for two years). These days, you can register domains with a variety of companies and, depending on the company, expect to pay about $10 to $15 per year.

Based upon my personal experience and the advice of several web professionals, I recommend registering your domains through GoDaddy. They’re a reliable registrar, and are currently offering .com domains for less than $10 per year.

So, let’s get started…

Registration Opening Soon

Registration for the Dominate Dreamweaver will reopen the week of July 12.

Please contact me if you have any questions.

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.

As I mentioned earlier this week, I’ve been busily working to expand the amount of information we provide here at DWcourse.

Well, after some long hours and late nights, I’m proud to announce the release of Let’s Get Started with Dreamweaver, my introductory mini-course to Dreamweaver.

It’s a FREE 50+ page PDF that walks you step-by-step through the most basic steps you need to master when starting to work with Dreamweaver.

If you’ve been working with Dreamweaver for years, this information is probably old hat to you by now. However, if you’re relatively new to Dreamweaver this mini-course covers everything I wish someone had told me when I first started using DW.

It covers the kinds of things that a lot of people screw up early on, get frustrated with, and then quit before even giving the program a real chance.

Ok, enough with the sales pitch. If you’re interested just go enter your name & email address and I’ll send it over to you.

If you’re already registered for our newsletter you don’t need to sign up again, there’s a copy on its way to your inbox shortly.

Anyway, I really hope this helps and as always, if you have any questions feel free to email me or message me on Twitter.

If you enjoy this tutorial, 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.

Note: This is our second tutorial on customizing Spry menu bars in Dreamweaver CS3. The first covered customizing horizontal menu bars. Many of the steps for creating and customizing vertical menu bars are the same as those for horizontal menu bars. That information is repeated here so you won’t have to refer back to the previous article.

As I’ve said already Adobe has documented the CSS files that control the appearance of the menu bars with ample notes to guide the adventurous. They’ve also included a help file that’s actually helpful. You can use the information you’ll find there to expand on the lessons of this tutorial.

Getting started:

Before you begin, make sure you have properly defined your website within Dreamweaver.

Creating a vertical menu bar:

1. Open an existing document or create and save a new one. Dreamweaver CS3 won’t allow you to add a menu bar to an unsaved document. If you try, you’ll be prompted to save the document before proceeding.
2. Select the location in your document where you want the menu bar to appear.
3. Select the Spry tab in the Insert palette. (If the Insert pallet is not visible, select Insert from the Windows menu to display it.)
   
4. Click on the Spry Menu Bar icon in the Insert palette.
5. You will be asked to select horizontal or vertical for your menu bar layout. Since we’re making a verical menu bar, select verical and click OK. Your menu bar will be placed on the page.
6. Immediately save the document. You will be informed that your menu bar requires a number of supporting files and prompted to save them. Click OK and DW will save the files in a SpryAssets folder it will create within the root folder of your website.
7. With the menu selected, you can use the Properties palette to define the links, menus and submenus of your menu bar (to select the menu bar, click on the blue box labeled “Spry Menu Bar for xxxxx” that appears immediately above your menu bar).
   
   Note that the Properties palette also contains a link, “Customize this widget.” That leads to the Help file that you are hoping to ignore by reading this. Take my word for it, clicking that link will be worth your while. Go ahead, I’ll wait for you.

Customizing the look of the menu bar:

Good, you’re back. In case you didn’t figure it out from the help file, I should let you know that the look of your menu bar is controlled by the styles in the CSS file (SpryMenuBarVertical.css) that Dreamweaver graciously created in the SpryAssets folder. Since we’ll be editing these styles, you’ll need at least a minimal understanding of CSS styles in DW.

Type style and size:

DW does not specify styles for the text in its menu bars so the style attributes are picked up from the page element(s) that enclose the menu bar. If you would like to use a specific font, size, weight, style, variant or case attribute for ALL the text in your menu bar, specify it in the ul.MenuBarVertical style. The color of the text will be defined elsewhere.

Menu bar width:

Note: This is the area that differs significantly from the procedure for customizing horizontal menu bars.

By default, the width of the top-level menu and each menu item is set to 8 ems.

To specify a specific pixel width for the top-level menu: In BOTH ul.MenuBarVertical and ul.MenuBarVertical li styles replace width: 8ems with width: XXXpx.

Note that changes made to ul.MenuBarVertical and ul.MenuBarVertical li affect only the items in your top level menu. The width of pull-down menus is not affected.

Menu bar height:

Caution! You can control the height of items in your menu bar by specifying a height attribute in the ul.MenuBarVertical a style. But be careful. This can cause type to be cropped or even disappear if text is resized or a menu item unexpectedly wraps to a second line. It’s more flexible to let the height of your menu items be determined automatically by the font-size (specified in ul.MenuBarVertical) and the padding (specified in ul.MenuBarVertical a).

Color of menu items:

The color of menu items in the link state (when they are not being hovered over or clicked) is determined by the ul.MenuBarVertical a style. To change the look of your menu items, simply change the default background-color and color styles DW has provided. This is also the place to add borders if you want to visually separate the menu items.

Rollover color of menu items:

To keep it simple, set the background-color and color styles to your preferred rollover colors in the following two style definitions:

1. ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
2. ul.MenuBarVertical a.MenuBarItemHover, etc.

In THEORY, the first definition determines the hover state of menu items and the second definition controls the appearance of menu items with open submenus. In REALITY that’s the way it works in Explorer. However in Firefox and Safari BOTH the hover state and the appearance of menu items with open submenus are governed by the second definition. I usually just make sure both definitions have the same settings for background-color and color and forget about it.

Menu bar arrows:

In DW’s vertical menu bars, menu items which open to submenus have a right-pointing arrow at their far right edge. These arrows are actually background images. If you change the background color of menu items or their rollover state, the arrows may become difficult to see.

To change the arrows, edit the background image attribute in the appropriate style definition as described below:

• Edit ul.MenuBarVertical a.MenuBarItemSubmenu for menu items with a submenu.
• Edit ul.MenuBarVertical a.MenuBarItemSubmenuHover for the hover (rollover) state of menu items with a submenu.

For reference, DW makes available the following images in the SpryAssets folder:

• SpryMenuBarRight.gif – black arrow pointing right
• SpryMenuBarRightHover.gif – white arrow pointing right

Looking for More Dreamweaver Tips, Tricks & Tutorials?

If you’d like to receive more tips and tutorials like this subscribe to my Dreamweaver Tips, Tricks & Tutorials newsletter by completing the form below:

If you enjoy this tutorial, 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.

I should start by saying that Adobe has done an excellent job implementing spry menu bars. More to the point, they have documented the CSS files that control the appearance of the menu bars with ample notes to guide the adventurous. They’ve even included a help file that’s actually helpful. Still, in my experience, a program’s documentation is the last place people look for help so I’ve put together this little tutorial.

Note: For the most part the process of customizing horizontal and vertical menu bars is the same but there are differences so I’ll follow up this post with one devoted to vertical menus. However, if you can’t wait, the instructions offered here should provide a good basis for your own experimentation with vertical menu bars.

Getting started:

Before you begin, make sure you have properly defined your website within Dreamweaver.

Create a horizontal menu:

1. Open an existing document or create and save a new one. Dreamweaver CS3 won’t allow you to add a menu bar to an unsaved document. If you try, you’ll be prompted to save the document before proceeding.
2. Select the location in your document where you want the menu bar to appear.
3. Select the Spry tab in the Insert palette. (if the Insert pallet is not visible, select Insert from the Windows menu to display it.)
4. Click on the Spry Menu Bar icon in the Insert palette.
5. You will be asked to select horizontal or vertical for your menu bar layout. Since we’re making a horizontal menu bar, select horizontal and click OK. Your menu bar will be placed on the page.
6. Immediately save the document. You will be informed that your menu bar requires a number of supporting files and prompted to save them. Click OK and DW will save the files in a SpryAssets folder it will create within the root folder of your website.
7. With the menu selected, you can use the Properties palette to define the links, menus and submenus of your menu bar (to select the menu bar, click on the blue box labeled “Spry Menu Bar for xxxxx” that appears immediately above your menu bar).
   

   

   Note that the Properties palette also contains a link, “Customize this widget.” That leads to the Help file that you are hoping to ignore by reading this. Take my word for it, clicking that link will be worth your while. Go ahead, I’ll wait for you.

Customizing the look of the menu bar:

Good, you’re back. In case you didn’t figure it out from the help file, I should let you know that the look of your menu bar is controlled by the styles in the CSS file (SpryMenuBarHorizontal.css) that Dreamweaver graciously created in the SpryAssets folder. Since we’ll be editing these styles, you’ll need at least a minimal understanding of CSS styles in DW. For instance, you should know – or be able to figure out – that when I say “set width: 20%” you should change the style definition so that the width attribute is set to 20%.

Type style and size:

DW does not specify styles for the text in its menu bars so the style attributes are picked up from the page element(s) that enclose the menu bar. If you would like to use a specific font, size, weight, style, variant or case attribute for ALL the text in your menu bar, specify it in the ul.MenuBarHorizontal style. The color of the text will be defined elsewhere.

Menu bar width:

By default, the width of each menu item is set to 8 ems and the overall menu width is set to auto (determined automatically by the width and number of menu items).

To specify a specific pixel width for a menu bar: In the ul.MenuBarHorizontal style replace width: auto with width: XXXpx AND set the width attribute in ul.MenuBarHorizontal li to an appropriate value in either percent or pixels.

In other words, if ul.MenuBarHorizontal is set to width: 600px and there are four items in the top-level menu, an appropriate setting for ul.MenuBarHorizontal li would be either width: 150px OR width: 25%. For a 600 pixel wide top-level menu with 5 items the appropriate setting for ul.MenuBarHorizontal li would be width: 20% or width: 120px. Just make sure everything adds up or you may get unexpected results.

Note that changes made to ul.MenuBarHorizontal li affect only the items in your top level menu. The width of pull-down menus is not affected. Also, you should avoid adding borders to the ul.MenuBarHorizontal li style. They’ll throw off the width calculations we made above.

Menu bar height:

Caution! You can control the height of your menu bar by specifying a height attribute in the ul.MenuBarHorizontal a style. But be careful. This can cause type to be cropped or even disappear if text is resized or a menu item unexpectedly wraps to a second line.

Color of menu items:

The color of menu items in the link state (when they are not being hovered over or clicked) is determined by the ul.MenuBarHorizontal a style. To change the look of your menu items, simply change the default background-color and color styles DW has provided. This is also the place to add borders if you want to visually separate the menu items.

Rollover color of menu items:

To keep it simple, set the background-color and color styles to your preferred rollover colors in the following two style definitions:

• ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
• ul.MenuBarHorizontal a.MenuBarItemHover, etc.

In THEORY, the first definition determines the hover state of menu items and the second definition controls the appearance of menu items with open submenus. In REALITY that’s the way it works in Explorer. However in Firefox and Safari BOTH the hover state and the appearance of menu items with open submenus are governed by the second definition. I usually just make sure both definitions have the same settings for background-color and color and forget about it.

Menu bar arrows:

The way DW menu bars are constructed, menu items which open to submenus have an arrow (downward -pointing for top-level menus, right pointing for sub-menus) at their far right edge. These arrows are actually background images. If you change the background color of menu items or their rollover state, the arrows may become difficult to see.

To change the arrows, edit the background image attribute in the appropriate style definition as described below:

• Edit ul.MenuBarHorizontal a.MenuBarItemSubmenu for top level menu items with a submenu.
• Edit ul.MenuBarHorizontal a.MenuBarItemSubmenuHover for the hover (rollover) state of top level menu items with a submenu.
• Edit ul.MenuBarHorizontal ul a.MenuBarItemSubmenu for submenus with a second-level submenu beneath them.
• Edit ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover for the hover (rollover) state of submenus with a second-level submenu beneath them.

For reference, DW makes available the following images in the SpryAssets folder:

• SpryMenuBarDown.gif – black arrow pointing down
• SpryMenuBarDownHover.gif – white arrow pointing down
• SpryMenuBarRight.gif – black arrow pointing right
• SpryMenuBarRightHover.gif – white arrow pointing right

Looking for More Dreamweaver Tips, Tricks & Tutorials?

If you’d like to receive more tips and tutorials like this subscribe to my Dreamweaver Tips, Tricks & Tutorials newsletter by completing the form below: