To_Getting_Started_Page Lesson Two: Page Design Basics

Lesson 2: Page Design Basics

Designing and Creating Your Web Site

Dreamweaver 4.0 allows you to create page designs in two different modes: Standard view and Layout view.

In Standard view, you can divide your Web site's page into "frames." These frames exist as separate pages.

For example, one frame may be a sidebar with navigation buttons that let you navigate the site. This sidebar frame may always be on the left, but another frame, to the right, will changes its content when you click on any of the navigation buttons. This lets you go to any sidebar button from any page to change the right frame's content at will.

In Layout view, Dreamweaver 4.0 lets you develop complex page layouts. You may want to add graphics with rollover images; images that change when a mouse pointer is over the graphic. You can add cell elements, table elements, and other interactive elements to add a dynamic feel to the page design.

This tutorial will keep it simple. You will learn a few things about page design in the Standard view.

Creating a Background Image in Standard View

In Lesson One: Creating a Site Map, you learned how to create your first Web page. You will now build on that page by adding a background image. Open the "Dreamweaver Tutorial Documentation Page" by double-clicking on the file icon in the Site Map page if it is not already open.

(You may want to maximize the page to full screen and move the Objects panel and Property Inspector panel to the far right side of the page.)

1. Select the Modify menu.


Figure 17 The Modify menu with
showing the Page Properties menu.
The Objects panel is visible to the
left of the menu.

2. Click on Page Properties…(Ctr+J).

The Page Properties dialog box appears

Figure 18 The Page Properties dialog box.

You will notice how many properties this dialog box will let you edit:

  • Title (note your page title)
  • Background Image
  • Background (solid colors)
  • Text (change the text color)
  • Links (visited and active)
  • Margins (left, right, width, height)
  • Document encoding
  • Image tracing
  • Image transparency

For now, we will only work with the Background Image.

3. Click the Browse… button next to the Background Image: text box.

The Select Image Source dialog box appears.

Figure 19 The Select Image Source dialog box.

Navigate through the available folders in Look in: and from the local root folder (C:\001\Chico Society for Technical Communication), find the STC Image Folder.

4. Double click the STC Image Folder to open it.

5. Click once on the Web Sunflowers.gif file to select it.

The Image Preview area of the dialog box now shows you a preview of the image you have selected.


Figure 20 The Select Image Source dialog box with
the Image Preview area showing a selected image.

5. Click the Select button.

The Page Properties dialog box appears showing your selected file in the Background Image: text box.

6. Click the OK button.

Your Web page now has the Web Sunflowers.gif image tiled along the left side of your page.


Designing Text Layout for Your Web Page

Text layout helps your readers quickly identify information. Good layout design lets the reader choose what the reader needs to read. Use headings to identify the page, what information is on the page, and where to find that information.

First, move your text cursor away from the background image so your text is readable without the background image behind it.

1. Select the Text menu.

2. Click on the Indent command (Ctr+Alt+J).


Figure 21 The Text menu with the Indent command selected.

Repeat this process two more times to create a three-indent margin. With this margin, your screen text will not show on the background image.

Changing the Size of Web Page Text

You will now identify your page so your readers will know where in the site they are. You will use a large text to do this.

1. Click in the page.

This selects the page and helps locate the text cursor.

2. Type in the following text: "Dreamweaver Tutorial Documentation Page."

3. Type the Enter/Return key once.

4. Click the left mouse button and highlight the entire string of text.

5. Click on the Size command (to change the font size).


Figure 22 The Text menu with
the Indent command selected.

6. Click on 5.

The text changes size.

Changing the Text Font of a Web Page

Now you will change the entire font set. Begin by highlighting page text you want to modify by dragging your mouse over it.

1. Click on the Text menu.

2. Click on the Font command.

3. Click on the font: Arial, Helvitica, sans-serif.

Your Web page text changes to Arial.

Inserting a Horizontal Rule

Adding a horizontal rule emphasizes the page layout.

1. Click on the Insert menu.

2. Click on the Horizontal Rule command.

3. Type the Enter/Return key once.

A horizontal rule appears beneath your text.


Figure 23 The Insert menu with the
Horizontal Rule command selected.

How to Insert an Image

Next we will insert an image into the page to complete the page design.

1. Place the text cursor to the left of "Dreamweaver" in the title.

2. Strike the Space Bar once.

3. Strike the (left arrow) key once.

You will not see a visual change at this time, but this allows for one space between the image and the following text. You may prefer to add more spaces to improve the visual spacing of the image to the text when you view it in the browser later.

4. Click on the Insert menu.

5. Click on the Image command.


Figure 24 The Select Image Source dialog
box with the STC Logos folder selected.

The Select Image Source dialog box appears.

6. Double click the STC Logos folder to open it.

7. Select the "001 STC_Color_box_logo.jpg."

Note the Image Preview area shows you the image selected.

8. Click the Select button.

The image may burst onto your screen. If it happens to be much larger than you intend, you can reduce its size. Find the three border handles (small boxes) in the lower right of the image box.

9. Click on the corner handle and hold the button down while you move it.

While holding the mouse button down, move the corner handle to the upper left until the size of the image is approximately 2.5" high x 2" wide.

Your now have a page design you can copy to other pages. (Expert users can learn to use the template features in Dreamweaver 4.0.)

You can now go to the Edit menu and click Select All (Ctr+A), then Edit>Copy (Ctr+C).


Figure 25 The Edit menu with the
Select All command selected.

This process lets you paste a copy of the entire page to any other page in your site. Doing so will let you maintain the page design throughout your entire site effortlessly.

Note: In some browsers the image link may become broken. You will have to re-establish the link. Double-click the image, or image icon, to bring up the Select Source Image dialog box to reconnect the link.

To_Glossary Glossary of Terms

Go to: Getting Started | Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | Lesson 6 | Home Page | About | Administrative | Activities | Constitution | Program | Professional | Treasurer's | How to Join | How to Contribute | .

Copyright © 2001 Chico STC Chapter. Send comments to (jjayj@mail.csuchico.edu). Last Updated: 13 June 2001.