A Blog by Web Bright Consulting

“Mastering CSS with Dreamweaver CS3″ is a new great book from New Riders (Voices that Matter) by two CSS authorities: Stephanie Sullivan, co-lead of Adobe Task Force for WaSP and wrote teh CSS layouts included with Dreamweaver CS3, and Greg Rewis, Group Manager of Creative Solutions Evangelism at Adobe.

The book begins with some background information on the (X)HTML Document, CSS and the concept of laying out HTML pages with CSS. Three of the seven chapters give a step-by-step examples (with downloadable sample files) for a Fixed Layout, Liquid Layout, and Elastic Layout Web sites. In Chapter 4, the authors demonstrates how to use Dreamweaver CS3 to migrate a Table-based Layout to CSS Layout. In Chapter 6, Stephanie and Greg show how to build a Gallery Site with CSS and Spry.

The book has a very pleasant style and layout with color images and side notes. Even with its technical context, the examples were very easy to read and follow, even if you’re not doing the examples online. Stephanie and Greg also presented a few great tips and tricks for using Dreamweaver CS3 and CSS, eg, the faux column technique which gives the illusion of two equal height columns.

I’ve been a Dreamweaver user for a few years. Late last year I learned about Dreamweaver CS3 (through Adobe’s eSeminar series) and learned CSS from another great book by O’Reilly called “Learning Web Design “. It was a good, but rough, background to start designing websites with Dreamweaver CS3 and CSS. I’ve been waiting for this book for a long time. I read three chapters in the first week and was able to learn a lot of new techniques and tips I already used on my next design project.

However, a few things can be added to this book to make it even better. Definition and explanation of CSS best practices and Web standards would be helpful, specially in understanding some design decisions in the examples. Also, Dreamweaver CS3 has many many choices for HTML layout. This book only covers three of them. It would be useful to give an overview of these layout and some pros and cons of each to help in deciding on the layout when working on a project. Another useful information to include in this book would be a Resources and References section.

Overall, this is a great book for anyone serious about designing professional websites with Dreamweaver CS3 and CSS.

One of the popular methods for creating navigation menus for Web pages is using drop down menus. By mousing over any of the buttons of the navigation menu, the user is able to learn about some of the content of the corresponding pages without visiting them first. Some drop down menus are nested two or more levels allowing the user to access sub pages by one click. This makes drop down menus user friendly from Usability point of view. However, most techniques used to create drop down menus involve some sort of scripting (mainly JavaScript) that add behavior to graphical buttons, as shown in this example. Since search engines don’t index JavaScript and most of them can’t follow links embedded in graphics, this makes drop down menus search engine incompatible from an SEO point of view.

Building Drop Down Menus with CSS and Dreamweaver CS3

A more search friendly technique for creating drop down menus is using CSS and HTML. A List Apart published an article showing how to create a horizontal drop down menu using CSS. In this case, the navigation menu is created with HTML as a nested unordered list with all the items created as text links that can be easily indexed by search engines. However, this method can require some coding by the designer. Luckily, Adobe implemented drop down menu widget (called Menu Bar) into their Spry framework for Ajax (which comes with Dreamweaver CS3). As an example, the drop down menu for this Web site was created using Dreamweaver CS3 Vertical Menu Bar (view the Page Source for code details). Since the drop down menu in this case is created with basic HTML tags and styled with CSS tags, this makes them search friendly as well as user friendly.

A good definition of Spry can be found in the Adobe Labs web pages: “The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages. “

Since I upgraded my Dreamweaver from Dreamweaver 8 to Dreamweaver CS3, I’ve been waiting for a chance to use more of its Spry widgets. I recently had a chance to use the Accordion Spry widget and here is a summary of my experience.

The Problem: A local club has over than 100 reciprocal clubs nation-wide. Members need to find a list of reciprocal clubs in a particular State and contact clubs of interest. The local club likes to provide this information to its members on its web site to make it more accessible to members.

Solution Options: There are many different ways to tackle this problem. Here are a couple of these options:

1. List Solution: My first attempt at presenting this information is to use an unordered list with the States names and link them to the information for each State on the same page, click here to see how this solution looks like.

2. Spry Accordion Solution: My second option was to use a Spry Accordion widget with the States Names as labels and the corresponding club list as the content, click here to see how this solution looks like.

Here are my top 5 reasons for choosing the Spry Accordion solution :

1. Very elegant option for presenting a large list of information. As you can see from the example above, the same information can be presented much more efficiently on a web page using a Spry Accordion widget.
2. Very easy to use and customize. As with most other Dreamweaver tasks, adding a Spry widget can be done with a few clicks (I didn’t need to use any tutorials to figure out how to do it). Customizing the widget is best done using CSS and a quick link to a support manual page gives good guidelines and tips. Also, adding labels and content to the widget can be done in Design view; however, it’s easy to understand the Code view of the widget and make changes to the code.
3. Search engine friendly. As with other Spry widgets, the Accordion widget is a page element that combines HTML, CSS and JavaScript code. When adding text to an Accordion widget, it is mainly wrapped with “div” tags making it easily accessible by Search Engines.
4. Good looking and User friendly. From the user end, an Accordion widget is intuitive and easy to use. Just click on a tab title and you can see its content.
5. Make Dreamweaver CS3 worth the investment. Adobe Creative Suite 3 Web Premium has a high price ticket ($1,599 full/ $499 upgrade) yet with all its new features, CSS support and Spry widgets I think it’s well worth the investment.