Help Files and Tutorials for Computer Users

Dreamweaver

Introduction

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

  

Dreamweaver

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

 

Fig. 3

  

Dreamweaver

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

  

Dreamweaver

Dreamweaver

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.

Dreamweaver

 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

Dreamweaver

 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

  

Dreamweaver

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

Dreamweaver

 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

  

Dreamweaver

 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

Dreamweaver

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

Dreamweaver

 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

  
Dreamweaver
Fig. 18

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

Dreamweaver

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

Fig. 19

  

Dreamweaver

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.

Dreamweaver

Fig. 21
You can insert a hyperlink (link to another page) in one of two ways.  Go to Insert Hyperlink.  Text 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).

Dreamweaver
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