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.

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.

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.

If you enjoy the information in this article, 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.

Personally I considered Dreamweaver CS3, Adobe’s first upgrade to the program after acquiring it, to be a “must have” update.Obviously, a lot of you didn’t see it that way.

Lately I’ve fielded a lot of questions from people considering upgrading from Dreamweaver 8 (CS2) to Dreamweaver CS4. While it’s fairly easy to find information about the incremental updates: from DW8 to CS3 and from CS3 to CS4 (links at the end of this post) I haven’t found a source that offers an overview of what’s in store if you make the leap from 8 directly to CS4. So I’ve put together a quick  overview with some brief comments of the features that await you at the end of the DW8 to DWCS4 upgrade process.

New in CS3

Overview: CS3 marked the beginning of the process of integrating Dreamweaver into Creative Suite but more importantly it was the first version of Dreamweaver  to support CSS (Cascading Style Sheets) styles and layout in a manner accessible to non-programmers. That feature alone made CS3 a required update in my book. Of course with the new functionality there was also a bit of a learning curve.

• Integration with Adobe Creative Suite
  • Copy and paste from Photoshop
• Improved CSS handling
  • Convert inline CSS to a rule
  • Built-in CSS-based page layouts

  Spry (AJAX) widgets and effects

  • Pop-out menus, “accordion” panels and more
  • Browser compatibility checking
    Hints
    Community-based help
• Tag Inspector: right click to view
• Adobe Device Central
  • Preview designs for mobile devices
• Better Intel support for Macs

New in CS4

CS4 continues Dreamweaver’s integration into Creative Suite but the changes are more evolutionary than those in CS3. What you’ll notice immediately is several UI (user interface) changes that may take a bit of getting used to. Other changes offer increase functionality – especially In-Context Edit and AIR Authoring – but you might never notice them if you don’t go looking.

• Improved integration with Adobe Creative Suite
  • Photoshop Smart Objects automatically update placed images when the linked Photoshop image is changed
• New Workspaces
  • Built in workspaces: App Developer, App Developer Plus, Classic, Coder, Coder Plus, Designer, Designer Compact
  • Ability to create and save custom workspaces
• Related Files Bar
  • Easy access to linked JavaScript and CSS files
• Live View
  • View JavaScript and CSS effects within Dreamweaver
  • View effects of code changes “live”
• Improved code hinting
  • AJAX and JavaScript code hinting
• In-context  editing
  • Online editing through an Adobe hosted service
• HTML Datasets
  • Import tabular data from an HTML file into a sortable table
• Subversion Version Control
  • Improved version control for site with multiple authors
• AIR Authoring
  • Convert your web site into a stand-alone application
• Additional document viewing options
  • When viewing code and design in the Split view, the window can now be split vertically as well as horizontally (menu: View>Split Vertically)
  • Menu: View>Visual Aids> offers a variety of viewing options to make page elements more readily identifiable
• Code Navigator
  • Easily access code in linked files
• Layout Mode for “drawing” tables no longer available

The bottom line

Should you upgrade from Dreamweaver 8 to CS3?

In a word, YES. You’ll get the benefit of two excellent updates, an improved UI and access to “modern” web technologies like CSS and AJAX.

What about the learning curve?

Make no mistake you may encounter a significant learning curve moving to CS4. How steep it is will depend upon your familiarity with advanced web technologies such as CSS. If the move to CS4 marks your first venture into CSS-based (as opposed to table-based) layout, expect a few headaches as the wonders (and eccentricities) of Cacscading Style Sheets are revealed.

However, if you’re serious about web design, the transition to CSS is a requirement and CS4 offers the tools and templates to make the transition possible and rewarding if not always pleasant.

Additional resources:

• What’s new in Dreamweaver CS3: An excellent step-by-step guide the differences between DW8 and CS3
• 6 Things To Like About Dreamweaver CS4
• Dreamweaver CS4 Features Overview (Adobe)

What’s your experience?

If you’ve got information or tips that you’d like to share about the Dreamweaver upgrade experience or if you got questions before or after making the link, please leave a comment below.

Follow me on Twitter…

Question from @discuit via Twitter: A coder we use has coded the site in Absoloute DIVs, and now we can’t select any text in Design view. Any idea how to fix it?

Answer: Discuit, hover your cursor over the border of the div you want to edit (even one underneath another layer) until it highlights. Then click on border to select div. Now you can click inside the div and edit as usual.

Alternatively, you can also set the CSS visibility property to hidden for the top div in order to access the underlying div for editing. Just make sure you change it back!

Update: And, of course, I overlooked the obvious. Simply select the div you want to edit in Dreamweaver’s AP Elements tab. Once the div is selected,  you can click inside the div and edit as usual.

Follow me on Twitter: @TOONrefugee

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: