Eric Meyer’s CSS Sculptor
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.
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.
The reason that they included this was to welcome the latest product to their Dreamweaver extension arsenal: 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.
With just a few clicks I was able to create this simple 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.
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.
(If you can’t see the Script icon go to Edit > Preferences. Click on the Invisible Elements category and select to Show Scripts.)
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.
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.