Help Files and Tutorials for Computer Users



This tutorial will show you how to create a basic web page and an associated  CSS Style Sheet using Macromedia Dreamweaver.

Dreamweaver 1

Getting Started:

Dreamweaver 2

Open Macromedia Dreamweaver and choose New. The New Document window appears. Among the choices under the General tab are Basic Page and CSS Stylesheet.

If you are proficient with CSS you could choose CSS under the Basic Page selection, or choose CSS Stylesheet and click the Create button to go to the pre-formatted selections. 

Fig. 1

Dreamweaver 3

You can choose one of the pre-formatted CSS Stylesheets that closely match your color scheme.  You can later modify the stylesheet to better suit your needs.

I chose the Tan/Brown color scheme.

Click the Create button.

Fig. 2



A new window with a /* CSS Document */ comment will appear, along with some basic settings for background, heading, and link colors.


Fig. 3



Fig. 4

To modify the settings go to Text CSS Styles Edit Style Sheet.

MAC Version:

Dreamweaver MAC

The MAC window varies slightly.  It replaces "Edit Style Sheet..." with "Manage Styles..."  The next few windows look similar.

Fig. 5




Fig. 6

Fig. 7

You can add a new style or edit an existing one. Highlight the body tag to edit some of the basic body elements. Two things that I am going to change are the font style and to set a background image.  Font style is changed under Type, at the top of the list. The background image is set under Background.


Here is the CSS Stylesheet with the changes made.

I have changed the default font to Verdana, and the size to 10 pt.

Notice the background image settings:

     background-repeat: repeat-y;

The image is constrained to repeat vertically only.

Fig. 8


Make sure the CSS page is saved with an appropriate name, to your web folder.

Go to File New and create a new basic HTML page.  Go to Basic Page HTML Create.


Fig. 9



Fig. 10

To associate the Stylesheet with the new HTML page go to Text CSS Styles Attach Style Sheet.  The Link External Style Sheet window will appear.  Browse to find the Style Sheet that you just created, and click OK..


This is what the web page will look like so far.

Fig. 12

This is the background image indicated in the body tag of the style sheet. I mirrored the original wood-grain graphic. Because it is a wood-grain, and not a solid pattern, I wanted to eliminate any chance of a distinct line between the repetitions.

Fig. 11



If a repeating background image is going to be used you have to try to eliminate any distinct edge, or you could get the effect to the left.

Fig. 13


Ultimately, it might be better to use pure CSS to locate all the elements of the web page, it is simpler to insert a table.

Go to Insert Table.

Fig. 14

Fig. 15

Fig. 16

This is the web page so far. You can add cells to a table by hitting the Tab key while the cursor is in the last cell.


If not already selected, go to Window and select Properties to display the Properties window at the bottom of the screen. You can select any other windows you might need as well.

Fig. 17


Fig. 18

To bring up the Table Properties window go to Modify Table Select Table.


To insert an image place the cursor in the cell and go to Insert Image.

Fig. 19



Fig. 20

Click in any of the empty cells.

In the Properties window you will see several properties that are common to many word processing and graphics programs, so their should be some familiarity.

Insert images and text just as you would with any word processing program.

The line, "Welcome to The Wooden Toy Shop" is a heading.  If you remember, headings were one of the properties defined in the CSS Style Sheet, so all you have to do at this point is select the Heading style from the menu in the Properties window.

Any text or image object can be aligned using the Alignment buttons.


Fig. 21

You can insert a hyperlink (link to another page) in one of two ways.  Go to Insert HyperlinkText is the text that you want to display, (the button), Link is the URL of the page that you want to link to, Target is how you want to open the page:
  • _blank: opens a new page
  • _parent: used with frames will display new page in entire content area of frameset
  • _self: opens in the same page (switches with current page)
  • _top: replaces the current page  (often used with frames and iframes)

You can also enter the information in the Properties window, (Link, Target).


Fig. 22

This is the page so far.  More tutorials on this topic will follow later.

Return to Home Page (more help files)

T. Carson 2009