CSS Sculptor v.1.1 and CSS Menu Writer v.1.0

Eric Meyer's CSS Sculptor

Eric Meyer’s CSS Sculptor

Last year, some readers may remember, I blogged about Eric Meyer’s CSS Sculptor from WebAssist.

What it does

Eric Meyer’s CSS Sculptor is a commercial extension (US $99.99) for Adobe Dreamweaver 8 and CS3 that enables you to quickly and efficiently build a cross-browser compatible website layout with the minimum of fuss. And because the code has been written, checked and approved by Eric Meyer (a champion of Web standards and a guru of CSS) you can be assured that the code it produces is of the highest quality.

Using a simple control-driven interface CSS Sculptor allows you to choose a preset layout (there are 44 from which to choose) and then customize almost every aspect of it: header, footer, width, margins, padding, colours, typography, ID names … everything!

Everything that is apart from a navigation DIV. This was the one thing that I thought let version 1.0 down.

Version 1.1

WebAssist have now addressed that issue with Eric Meyer’s CSS Sculptor version 1.1. As you can see from the screenshot below the layout components panel now includes a “Top navigation” option.

Layout components now includes Top navigation option.

The reason that they included this was to welcome the latest product to their Dreamweaver extension arsenal: CSS Menu Writer.

CSS Menu Writer

CSS Menu Writer

A couple of weeks ago I had the privilege of being given an exclusive and personal online demo by WebAssist’s Training Manager Mark Fletcher (he’s the guy who does all the online demos on their website).

I’ve been meaning to blog about it since then but never quite found the time what with work being so busy, Jane feeling so sick and then heading off on holiday for a week. But here I am, better late than never, and the intervening gap hasn’t dampened my enthusiasm for this extension.

What it does

While a lot of CSS is quite easy to pick up creating styled horizontal, and even vertical, navigation isn’t the easiest task to complete quickly. This is where CSS Menu Writer comes in.

CSS Menu Writer takes the hassle out of creating both horizontal and vertical navigation. It uses a similar interface to the CSS Sculptor and integrates nicely with its sibbling extension.

CSS Menu Writer interface

Example

With just a few clicks I was able to create this simple menu:

Example menu

All I did here was specify the names for the menu items, the general style (Horizontal Accent) and I chose the same design that I used in CSS Sculptor for creating the page wrapper (Nautica).

It literally took only 2 minutes.

When I clicked the FINISH button the code was automatically generated and I had a ready-to-use 100% CSS horizontal menu. It couldn’t be any simpler!

Existing site structure?

One great feature if you already have the file structure created, or are adding a new menu created with CSS Menu Writer to an existing site, is the “Get from file system” option.

With a few clicks you can create the menu by pointing and clicking on the pages or folders that you want to include. CSS Menu Writer will then populate the menu with the files that it finds: great for creating submenus.

Advanced options

For those needing to get their hands dirtier CSS Menu Writer also allows customization of almost every part of the menu: width, margins, padding, typography, link formatting (link, visited, hover and active), backgrounds and borders.

It even goes as far as styling sub-navigation differently to the primary navigation. It really is very flexible indeed, and fiendishly simple to use. (Obviously a solid understanding in CSS is a benefit when you start to delve deeper into advanced customization.

For particularly funky designs WebAssist even provide a number of Solution Recipes on their website to show you what’s possible. These include:

  • Using CSS Menu Writer with DataAssit (create dynamic database-driven menus)
  • Using CSS Menu Writer with a CSS Sculptor layout
  • Customizing CSS Menu Writer menus
  • Customizing CSS Menu Writer submenu items
  • Using the CSS Sliding Doors technique with CSS Menu Writer

Editing existing CSS Menu Writer navigation

Once you’ve clicked FINISH and created your CSS Menu Writer menu you’re not stuck with it: you can always return to CSS Menu Writer and tweak your settings, add new menu items, change its styling, etc.

To do this you click on the Scripts “Invisible Elements” icon and in the Properties pane click the Edit button alongside the CSS Menu Writer icon.

Click Script icon then click Edit button

(If you can’t see the Script icon go to Edit > Preferences. Click on the Invisible Elements category and select to Show Scripts.)

Possible improvements

As well as horizontal (top) navigation with drop-down menu options CSS Menu Writer also allows you to create left-hand navigation. There are four styles for both horizontal and vertical, each with fly-out submenu items.

While this is impressive it would be nice to see other types of navigation, particularly for the vertical styles, such as designing left-hand collapsible/concertina style navigation. I would find that particularly useful. Perhaps that could be included in a future version.

Another thing that might be useful to have in a future update is the ability to define a class for a selected page. For example, if you’re on the News page (or a child of the News page) it might be nice to show that on the navigation by applying a class to that list item.

This is something that a lot of content management systems will manage for you, but if you’re using CSS Menu Builder to write the basic code it would be useful to also have those class selectors written for you.

Conclusion

By the end of Mark Fletcher’s demonstration I was sold. There’s obviously been a lot of thought put into making this extension as easy to use as possible for people new to Web design, but with enough tweaking capacity for the hardcore coder.

But you just can’t get past the fact that within a couple of clicks and only a couple of minutes you have cross-browser compatible, fully-CSS navigation working in your website. It’s certainly to be recommended, and at US $99.99 it’s certainly worth it for the time and hassle that it saves.

6 thoughts on “CSS Sculptor v.1.1 and CSS Menu Writer v.1.0”

  1. Great review of Menu Writer, Garreth. One thing I thought I’d throw in, is there is a small bit of javascript that is included as part of the “cross-browser” compatibility. It is strictly to enable the rollover behaviors in IE6 and 7. There is also a separate stylesheet generated strictly for IE6. These inclusions make Menu Writer truly cross-browser compatible, but not by hacking a single stylesheet to work across all browsers.

    CSS Menu Writer is a great extension and I have a free Dreamweaver template available for download that includes a menu built in Menu Writer (it’s the Trellian template). The template layout, incidentally, was developed in CSS Sculptor, so if you’re curious about that extension, you can check out the clean code that Sculptor generates.

Leave a Reply

Your email address will not be published. Required fields are marked *