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.
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.