How to Use and Modify Dreamweaver Sample Pages and CSS Layouts

Contributor

By Virginia DeBolt
eHow Contributing Writer

Article Rating:

(6 Ratings)

Using a Dreamweaver Sample Page you can have a start like this on a site in mere seconds

Know a bit about Dreamweaver and making web sites? You don't have to be a pro to use Dreamweaver to make a simple and nice looking site when you use a built-in page or layout.

Difficulty: Moderate

Instructions

Things You'll Need:

Nothing new is needed in this section.

Select a CSS Sample or CSS Layout

Step 1

Prepare a new site and designate a site root folder. When you are ready to begin your first page, there are several options in the File > New menu. The next few steps will explain the various choices. In Section 2, you'll learn about modifying the CSS for the sample page or CSS layout you select.
Step 2

The Sample Pages have color schemes and layouts in place

Select File > New. In the image, you see that Page From Sample – Starter Page (Theme) – Health & Nutrition (Home Page) is selected, along with the choice of Doctype. The right column gives you a thumbnail view of the start page's appearance. It is a two column layout with a green-based color scheme.

Each Sample Page Theme comes with a home page layout and four other pages in a matching design. You can use and modify any of these to create your site.
Step 3

Click Create. Dreamweaver ask you where to save the HTML files (your site root folder), and what to name the file. Since this a home page sample, name it index.html.
Step 4

Dreamweaver knows which files you need for the Sample Page you selected

Dreamweaver shows you another dialog box, asking you to copy the other files needed for the Sample Page you selected. Click Copy.
Step 5

Blank Pages from CSS Layouts don't come with a suggested color scheme.

You can also start your site from a blank page with a CSS Layout. Choose File > New. Then select Blank Page > HTML > and one of the layouts. In the image, you see 3 column liquid, header and footer selected.

On the right, you see a thumbnail of the layout with symbols indicated whether the layout is locked (fixed width) or stretchy. Note that the layouts are just basic black, white and gray. They color choices are all up for grabs.

Before you click Create, there are several important decisions. Choose a Doctype. Choose whether to put the CSS in the document head or in a new CSS file, and choose whether or not to attach another CSS file in addition to the layout CSS. Dreamweaver has style sheets just for text color in the File > New menu under the Page From Sample – CSS Style Sheet category that could be attached, too. Or you can attach any other style sheet you have at this time.

To find one of the built-in style sheets to attach along with the CSS layout rules, navigate to your Dreamweaver folder in your Program Files (Applications) and find Configuration > BuiltIn > css to select one of the built-in color schemes.
Step 6

Dreamweaver will save the CSS that creates your new layout to the folder you select.

Click Create. Dreamweaver asks where to save the CSS layout. Don't change the name Dreamweaver has given the CSS file unless you want to change every instance of it in the HTML and CSS that will be created.

The name thrColLiqHdr.css indicated the layout in the example I'm using: 3 column liquid, header and footer
Step 7

A CSS Layout selection in the browser

Dreamweaver will open the HTML page in Design View with the CSS Layout you chose. Save it to your site root folder with a name you select. You can then begin the modifications.

The examples are all filled with dummy text, which you simple select to change to your own content.

Modify or Add to the CSS

Step 1

Lots of comments in the CSS explain the rules for you

You get lots of help from Dreamweaver when you are ready to modify your new page for your own use. The CSS is lavishly commented to explain what each rule does to your page.
Step 2

Find the CSS rule that matches the element you are working with.

When you select a part of the document that you want to modify, it's easy to see which rules apply to it using the CSS Styles Panel and the hints in the Design View. See the red ovals in the image highlighting the h1 in the header, the page structure in the Tag selector that leads up the the h1, and the CSS rule selected in the Styles panel that matches that page element. See close-up views in Step 3.
Step 3

Clues in the Tag selector can lead you to the rule to modify

A closer view of the Tag selector and the matching CSS rule show you how to find the rule you want to modify to make a page design your own.
Step 4

Edit any rule in the CSS using Dreamweaver's CSS tools

When you have the right rule highlighted, click the pencil icon in the CSS Styles panel to edit the rule to make any changes, such as changing the font color, as in the image.
Step 5

Create your new selectors based on the existing selectors

Add new rules using a similar process to figure out a new selector. For example, to add a rule for images in the #mainContent area, look at the specificity of
.thrColLiqHdr #mainContent
Your new selector needs to be at least as specific as that, but should add the img selector to the mix.

Click the plus icon to add a new rule, and use a selector like
.thrColLiqHdr #mainContent img
to create your new rule.

Comments

Veesites said

Flag This Comment

on 9/14/2009 link22, I think you are safe, so long as you are not using the images. The sample pages are made of commonly used layouts, color schemes, and typography that can't be categorized as a particular company's intellectual property.

link22 said

on 9/13/2009 hello.. can i use the sample pages, the code mostly (but i will change the font, bckground etc) and i will take out the iamges too. So what if i upload the website to world wide web....is dreamweaver people going to sue for using their sample page. And the website is for commercial use.

on 1/15/2008 Webmiser, I agree that there's a lot to learn to use Dreamweaver (or any web design tool) well. I did list the difficulty on this article as "moderate." My hope is that you would be able to start off a page with a CSS layout or sample page after reading this article.

webmiser said

on 1/14/2008 Dreamweaver has a very steep learning curve and is not for the faint of heart or the "hobbyist", unless someone gives you a liscensed copy.

Sometimes when "WE" use something for a long time we tend to forget our own struggles when starting out