Adapted from my Dominate Dreamweaver online training course.

Back in the day, the Hebrews had a habit of getting themselves into trouble in spite of their favored status with God. So he decided to try to make it easy on them by reducing the rules to Ten Commandments.

In search of similar guidance from a lesser deity (Adobe), I ventured to the top of our local equivalent of Mount Sinai where I received these Ten Commandments for Editing Dreamweaver’s Spry Menubars on a stone iPad.

1. Thou shalt not edit the style sheet without reading the comments.
2. Thou shalt not edit the styles haphazardly.
3. Verily, rules for some selectors are defined in two locations.
4. Thou shalt not edit the position or display properties within the menubar styles.
5. Thou shalt not use the height property within menubar styles.
6. Thou shalt not apply padding, borders or margins to menubar list items <li>.
7. Thou shalt not set widths for links <a> within menubars.
8. Thou shalt not edit the browser hacks.
9. Thou shalt not edit the menubar JavaScript file.
10. Verily I say unto you, a new style shall appear to define the appearance of submenus.

Click a commandment above to view the related commentary.

I. Thou shalt not edit the style sheet without reading the comments.

Some very clever person at Adobe (God bless them) hath taken the time to insert extensive comments into the code of the menubar CSS file. Open the CSS file and read those comments and you shall be enlightened (and save a lot of wasted effort).

II. Thou shalt not edit the styles haphazardly.

Adobe hath joined the various styles rules together to function in harmony. Editing them without a clear plan and understanding of their purpose is guaranteed to create more problems than solutions.

A good plan is to edit styles according to the structure of the HTML page (and for that matter the order the styles appear in the css file).

1. Overall list (ul.MenuBarVertical or ul.MenuBarHorizontal)
2. Top-level list items (ul.MenuBarVertical li or ul.MenuBarHorizontal li)
3. Overall sub-menus (ul.MenuBarVertical ul or ul.MenuBarHorizontal ul – notice the second ul)
4. Sub-menu list items (ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li)
5. Links (styles related to the <a> tag including hover, focus, etc. states)

III. Verily, rules for some selectors are defined in two locations.

Adobe hath divided the LAYOUT INFORMATION from the DESIGN INFORMATION (not a bad idea) so rules using the same style selectors may appear in both locations. You can edit them in either place but make sure the properties you set in the layout section aren’t overwritten in the design section.

IV. Thou shalt not edit the position or display properties within the menubar styles.

Those who have not yet eaten the fruit from the tree of CSS knowledge are often tempted to edit the position and display properties within the menubar styles. While some sins go unpunished, this one rarely does. It WILL break your menu. And, while we’re on the subject, don’t go adding position or display properties to the style rules that don’t have them either.

V. Thou shalt not use the height property within menubar styles.

It’s very tempting to try to “force” your menubar to conform to your design by defining a CSS height property for one or more of the menu elements and you might get away with it. But the odds are that, under some conditions, one of your menu items will wrap to a second line and the height properties you so meticulously set will be ignored or your links partially obscured.

To be delivered from this evil, the best practice is to allow the height of your menu and menu items to be determined by a combination of the text-size and padding of your menu link <a> style.

VI. Thou shalt not apply padding, borders or margins to menubar list items <li>.

Set the width of your menubar “buttons” using the list item <li> rules. Since, as it is written, padding, borders and margin add to the width of HTML elements, applying those properties to list items will likely break your design.

Apply padding and borders to your buttons using the link <a> rules.

VII. Thou shalt not set widths for links within menubars.

In the commentary for Commandment VI we learned the width of our buttons should be set using the list item style rules. Any attempt to set a width for the links will likely conflict with those settings. But be not afraid, because the display: block property in the link style rule guarantees the link will completely fill its parent li tag.

VIII. Thou shalt not edit the browser hacks.

What CSS hacks Adobe hath joined together, let no man set asunder.

IX. Thou shalt not edit the menubar JavaScript file.

Yeah though you walk through the valley of Javascript, you shall fear no evil (if you just leave it alone).

X. Verily I say unto you, a new style shall appear and it shall define the appearance of submenus.

And God said, “let the styling for the sub-menus be separated from the styling of the main menu.” And it was, with the addition of a new style rule, so.

By creating a new style rule (ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li for submenu list items and ul.MenuBarVertical ul a or ul.MenuBarHorizontal ul a for submenu links – notice the second ul in the selectors) you can define CSS properties that apply only to submenus (or more precisely to unordered lists that are themselves within an unordered list). And, by the way, you only have to define the properties that you want to be different from the main menu. The rest of the properties will be inherited.

Now, go forth and sin no more.

Registration Opening Soon

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

Please contact me if you have any questions.

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…