D
r
e
a
m
w
i
e
r
d
e
r
#4

Make The Layout Your Own

This is the fourth in a series of hasty hacks of my original demo page. Comparing its source code with the first version, you will see how I changed the CSS width settings for the main content div to almost fill the screen on large monitors, adjusted the float directions to move the divs, etc. Some of the later changes (dw-mods3 and dw-mods4) were made on-the-fly during classroom and office demos and have not been fully "commented" in the page code. Sorry.

The rest of the text of this page is just "filler," part of the text from the first version. Read the details there.

When you create a new page, you have a choice of starting from scratch or using one of the Dreamweaver supplied page layouts. There's no better way to look like a "beginner" than to keep a supplied layout's background colors and other styles. Even this page has "roots" that show, but it will do for a demo. Better idea: Design your own page, then use a Dreamweaver layout as a shortcut to turn that design into a page you can call your own.

The page you are looking at started as this layout. I changed colors, locations of page elements, and more. For some I used the "Page Properties" panel in Dreamweaver, for others the CSS Styles panels, and for others I just edited the CSS code.

Here are some things to consider changing to make a page your own.

Header contents

The Dreamweaver layouts that include headers often have room for a graphic logo, but no headline. Then they offer a primary headline (H1) in the main or center column. You may want your main H1 headline in the full-page-width "header" area, as I've done on this page. I've also experimented with the header area's background color. Do you like it in white, or was it better in the same light green as the sidebars?

Headline fonts and colors

The style sheet for most Dreamweaver-supplied page layouts includes one CSS "Rule" governing the margins, padding and fonts for all headings, subheadings and paragraphs.

However, you may want your headings and subheadings to be one color or font-family and your paragraph text another. You might like the look of serif headlines and sans-serif text, or vice versa. For example, this page has green sans-serif headings and menu links, but black serif text in the paragraphs.

That means modifying the CSS, either by making and modifying rules using Dreamweaver's CSS panel. You also could do it by editing the CSS in "split" or "code" view. Notice how seven different selectors (h1, h2, etc.) are defined in the CSS block below. You can make a new rule for just the "p" selector using the CSS Styles control panel, or you can copy, paste and edit the CSS.

Here's how I did it:

Copy the CSS block for "h1, h2... h6, p" (I've deleted the "comments" from this copy.)

Paste a duplicate of that block right after itself. Delete the paragraph selector "p" from one copy; delete the six h1-h6 heading selectors from the other.

Now you can set the font-family or color separately for paragraphs and headings, while preserving the padding (indentations). See the code of this page for details.

To learn more about the techniques used in the original Dreamweaver CSS Layouts, read this article at Adobe's Developer Center - http://www.adobe.com/go/adc_css_layouts.

---

By (Buy) the Book

After I made this page, it dawned on me that the original green backgrounds looked a bit like the page-building project in Adobe Dreamweaver Classroom in a Book, which I've used as a textbook. The book's "GreenStart" company site uses a horizontal menu and does more with images -- including that cool butterfly -- and adds interactive features to some pages, using Dreamweaver's "Spry" javascript widgets, Flash and other techniques.
Warning: The CS6 version of the book makes a transition to HTML5 coding techniques, and may be confusing about the difference between "nav" when used as an HTML5 page element name and when used as a ".nav" class name to format a div or other element.