Dreamwierder bob watching

Sidebars & color

Compare this page to an originally supplied Dreamweaver layout

and other copies with further modifications.

The left-column menu can be moved to the right either by moving the code or changing the "float" code for the columns.

Notice that the original layout's columns do not hold their background color to the bottom of the page.

The background color on any content box (div) will only show for the length of that div's content. It looks like this column breaks that rule, but that's because the column itself does NOT have a background color of its own. It inherits the light green from a larger page "container" div.

The white background in the center is applied to a separate division called "content." As long as the center div has more text than the sidebars, the light green background will not show in the center column.

Make a Page Layout Your Own

When you create a new page in Dreamweaver, you have a choice of starting from scratch or using one of the 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 in the header, 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.)

h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
font-family: Verdana, Geneva, sans-serif;
color: #666; /* #060 will give us green headings after we delete the "p" from the list of tags */
}

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.

Rollover Menus

The original layout had a menu on the left. I put mine on the right. You can easily swap the location of the menu by moving the HTML code. Since this layout "floats" its DIV blocks of text left, just reversing the "sidebar1" and "sidebar2" blocks of HTML will move the menu's "nav" section to the right side of the page. If both sidebars have the same margins and padding, you also could reverse their positions simply by changing "float left" to "float right."

The next step is to make the menu itself behave a little differently...

Looking at the CSS style code in "Split" or "Code" view, you will see two different blocks of CSS rules for the navigation menu in sidebar1. The first part sets the basic colors, decoration (underlined or not) and fonts for anchor links in the menu. It starts with this rule declaration:

ul.nav a, ul.nav a:visited {
STYLE SETTINGS GO HERE
}

The second part sets the colors, decoration and fonts for the menu links when you hover or click the mouse.

ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
STYLE SETTINGS GO HERE
}

You can modify the settings by editing the code view, using the CSS Styles panel, or using the CSS "Targeted Rule" menu in the Properties inspector at the bottom of the page. Click one of the menu links first, then click "CSS" in the Properties panel, and explore the "Targeted Rule" menu.

Rounded Corners

This central "content" division of the page also appears to have rounded corners in most browsers, thanks to two lines of CSS added to the stylesheet's definition of the .content class. The rounding effect may need additional code to work on some browsers, including Internet Explorer. A Google search for "CSS rounded corners" will find numerous tutorials, such as this one from CSS3.info.

The two lines of code are:

-moz-border-radius: 15px;
border-radius: 15px;


Clearing Method

This is from the notes on the original layout: Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.


Butterfly-decorated Classroom in a Book project screen

By (Buy) the Book

After I made this page, it dawned on me that the green backgrounds look a bit like the page-building project in Adobe Dreamweaver CS5 Classroom in a Book, our textbook. The books "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.

Dreamweaver layouts with sidebars (like this one) give you a sample menu, which is simply a "UL" bullet list with some CSS styling.

You can change the styling to provide different background and foreground colors, background images, or other attributes for the "hover" and "active" versions of links.

The combinatin makes a menu appear more interactive. You also (obviously) can copy and paste the original Link headings from a Dreamweaver sidebar menu to make as many as you want.

Note that there are two sets of font and color settings in the CSS for anchor links: One for the "nav" area, the other for the rest of the page.