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 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…

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: