First off. A great article! I really see now how CSS can be a very powerful tool to use. Out of curiousity, how does one go about creating the CSS files? I assume that you put your layers in design view and then convert them to the CSS pages?

As I was reading through the article, I found a few things that were hare to follow (IMO):

Page 4 - "You'll see a total of five ID's plus two comments in between which you'll be adding styles for your navigation"

The layout.css file that I downloaded had NINE ID's, including the navigation styles that I was supposed to be adding. Confusing at first.

Page 5: "Within the body element, you'll manually add the divisions..."

Should read for clarity: "Within the body element, add these divisions..."

I thought that it was something that I'd be doing later in the article, and had to go back and figure it out.

Page 7 (Adding Navigation) "Add the following CSS:" - Again, the navigation styles are already present in the layout.css file...

Page 11 (Validation):

After validating, I found a bunch of errors that I don't understand. However, I validated the author's 3column-complete.html file and got 16 errors and 6 warnings (quotations in alt tags), so I don't know how seriously to take the validation thing. I only ask because the article suggests that there should be no errors!

Again, great job. I'm just raising a few points to perhaps make it easier to understand for the newbie.

Regards,

Dave Anderson

Hi Dave,

Thanks for the great feedback. I appreciate the clarification points, and thanks for pointing out the problems you are having with validation.

Validation is important because it helps locate errors as well as ensuring that you have a conforming document, which is important for interoperability, especially in today's more standards-oriented Web browsers. I've been validating a long time, and when I read that you were having probs with validating my markup--which I know was valid--I immediately validated the files from the site. Through my familiarity with validation, I was instantly able to figure out the problem and work on providing a corrected series of files.

The cause isn't the markup, what happened is that somehow the files I sent in contain non-ASCII characters in place of some of the quotes. I'm fixing this now and will send my editor the repaired files. I'll also make sure the work files do not contain the confusing additional markup.

I personally write most of the CSS files by hand and then define my site in DWMX. Once it's defined, then I modify using DW's CSS tools, which I've found to be a bit awkward. However, the options are comprehensive and it is an excellent way for DWMX users to break into CSS. Ultimately, you'll likely be combining hand-authoring techniques along with the tool, which is why I show a combination of both.

Thanks again for catching the problems, it's not CNS (Confused Newbie Syndrome) at all, it's CAS (Confused Author Syndrome). I'll also email you the new files directly so you can validate them and see the difference.

Edited by - mollyeh11 on 25 Sep 2003 15:31:56

Thanks Molly! What a quick response!

I think I see what you mean with creating .css pages. Many ways to acheive the same results... So your preference is to actually start with a blank page (text editor, etc) and code the .css page(s) and then tweak them in DW as you go? That sounds like a good approach. I think that for me (being a visual kind of guy and basically hating complex code -- read: not a programmer geek) my approach would be to do the layout of the page first, and then figure out a way to create my style and layout .css files from that! I believe that is possible, correct?

Thanks again for the great article. I'm ready to go build me a site based on CSS!

Dave

Dave,

It's nice to see people get excited about CSS--especially visual designers. The more visually-oriented folks can use CSS, the better CSS designs will look. As you can see, I keep it really simple, as I'm not much of a designer's designer. I do it well enough to teach, and you know what they say about teachers! <img src=../images/dmxzone/forum/icon_smile_wink.gif border=0 align=middle>

Looking at the work from folks like Dave Shea (mezzoblue, CSS Zen Garden) and Doug Bowman (stopdesign, wired news) one begins to see how the merging of talented designers with the technologies we have these days gets pretty exciting.

To address your q's: Yes, I create my css files mostly from scratch using a text editor, or if I'm working in DWMX, using Code view is fine. Can you do your layouts in DWMX and then convert your CSS? The unhappy answer is "sort of." Any regular layout in DWMX is going to be table-based, period.

What you can do is use the Draw Layer feature, which will allow you to do all your layouts in CSS. The problem is that all the CSS resulting from Draw Layers is inline (meaning it's written into the actual document rather than being external) and it's also all absolute positioning, which isn't always what you want. Sometimes you want relative positioning, or the use of floats, or combinations (which is what the three column layout article uses).

So, if you go this route, you'd have to tweak massively anyway. I show this painful process in an earlier article in the series, CSS Design with Dreamweaver MX: Creating a Weblog Layout. In it, I use Draw Layers to generate the layout, then I pull that markup out into an external sheet.

The core problem is that we simply do not have a great visual tool for CSS. And, the sad reality is that we really only now see the emergence of a very good visual tool for HTML and XHTML in DWMX. However, in all cases, without a working knowledge of the actual languages, you are disadvantaged. This doesn't mean the tools won't improve, because they will, especially if we as the consumer press for the features that we need. And, with the addition of cool extensions like the brand new Listorama, things get a little easier.

DWMX 2004 comes with a bunch of CSS templates, which does provide additional relief in that the templates are comprehensive. You then can modify those templates to suit your needs. I'll be showing this in upcoming tutorials. But I have to say that the templates, while technically very good, are pretty limited as they stand from a design perspective. It's just a roundabout issue, proving the point that even with the addition of well written CSS templates, the balance of knowledge the designer has is really what will make the difference between a ho-hum CSS design and one that taps into the true power of CSS.

--M

Listorama: www.dmxzone.com/ShowDetail.asp?NewsId=5618

CSS Design with Dreamweaver MX: Creating a Weblog Layout:
www.dmxzone.com/showDetail.asp?TypeId=28&NewsId=5355