1  2  3  4

Designing a web page using Dreamweaver

To give a taste of how Dreamweaver works, we will design a sample school web page. Later we will save the page for use as a site-wide template.

 Run Dreamweaver.

You can download the most current demo of Dreamweaver at http://www.macromedia.com/dreamweaver/. Install Dreamweaver and run it.

 Insert a table

We will now insert a table to lay out the various elements on the page. From the Insert menu, select Table. The Insert Table dialog box will appear:

Make the following changes to the table:

• Set Width to 590 pixels
• Set Rows to 1
• Set Columns to 3
• Set Borderto 0

 Set Column Widths

Now we will adjust the widths of the columns and merge some of the cells. Hover your mouse over the top of the first column until you see a heavy downward-pointing arrow appear. Now click to see the following dialog box:

Change the width of this column to 100, and repeat this procedure for columns 2 and 3 using 10 and 480 respectively. Save your page into a new folder, and call it index.htm.

Add Images

Now we will add some colour, starting with a background for our page.

Use your graphics editor (for example, Paint Shop Pro) to create a graphic 1024 wide by 6 pixels high. Colour it white, except for the first 110 pixels on the left hand side, which you should set to another colour. Save your graphic into a folder on your web site as background.gif.

Return to Dreamweaver, click Page_Properties and click on the Modify_Page Properties button. You will see this dialog box:

The Browse button allows you to choose a file that will act as your background. Choose the file you saved earlier as background.gif. Now might also be a good time to enter a Title for your page.

 Design the Menu

Now we will design the menu. At the top of the left-hand menu, we will insert an image that will function as a logo, and create 5 menu items underneath.

From the Insert menu, select Image and choose the image that you require in the corner of your web page. Notice that the Properties Inspector now offers options pertaining to images as shown here:

• Area 1 shows where Dreamweaver has automatically inserted image dimensions.
• Area 2 shows where you can make a link to other files (via typing a path, the "target" icon or the yellow folder icon).
• Area 3 shows where you can write the alternative text for your image.

 Create the Menu Options

In the left-hand column, under the image you have just inserted, type 5 words that will act as a menu, each separated by one or two blank lines. In turn, you can click on each menu item and type the name of the page it will link to. Type the file name you wish to link to in the Link text box of the Properties Inspector:

Apply this procedure to all five menu items.

 Add Content

We are now almost ready to fit content into the page. When you click into the right hand column, note that the cursor blinks in the middle of that section. To have any text aligned to the top of this cell, you need to change the alignment from Default to Top as shown in the following diagram:

You can now start to add your content and build your web page.

 Create a Template

One useful feature of Dreamweaver is that you can save any page as a template for later use with other pages, rather than starting off with a blank page. This adds a huge time-saving element, as any change you make to a template will also be made to the pages which are based on that template.

To make a template from an open page, select Save As Template from the Filemenu.

A template is only usable if the user can edit some areas of the page:

1. Select the page area you want to be editable.
2. From the Modify menu, select Templates, and then Mark Selection.