Build the Template for the First Page - The Index Page.

 

You are to build four webpages for your website. An Index (Home) Page and a My Interests page, a Favourite Foods page and a Places page.

To begin with you need to build the Template for the Index Page:

1/. Open Adobe Dreamweaver

Then create a New Document and then open the floating Properties Window, see the image below. (If not open - go to Window and from the drop down menu select Properties.

 

2/. Using the menu bar, Insert - a Table, three rows, one column, width 960px.

Then in the Properties Window, change the page align to center.

3/. Type in the first table row in Bold and Centered - My Home Page.

4/. In Row 2 - Insert a Nested Table (A Table within a Table), One Row, Two columns, width 960px.

5/. Then using the floating Properties Window, select the inner nested table and change the number of rows from one to six, using the floating Properties Window. Leave row 7 as is with one column.

6/. In the last table row, Insert a Nested Table four columns, 1 row.

Then type in each column as follows:

Interests

Fav Foods

Places

Home

Use the right insert button in the Properties Window to better space out the names in each column, as above.

7/. To link the pages, first type inin the Properties Window Link box, type in:

For Interest - interests.html

then for Fav Foods - fav_foods.html

then for Places - places.html

Then for Home - index.html

See the example below

 

8/. Your saved webpage when previewed in the browser should look like this.

9/. At this point your have an Index (Home) Page that links when in the browser mode which will link to all the other pages, which have yet to be created.

The creation of the other pages is really easy!

Save the Index Page, then again Save As: interests, fav_foods, places. Then make a few changes, as shown below:

10/. To make the other pages work, there are some edits, but not too many.

10.1 The Page Title in row 1 needs to be changed to each pages name:

The interests page needs the page title in row 1, as My Interests, the fav_foods page My Favourite Foods, the Places page Places I Have Been to (or would like to visit).

10.2 In the floating Properties Dialogue Window, the Document Title also needs to be changed to the page title also.

11/. The next step is to colour in your webpages. See the adding colours link.

12/. Time to move onto building the content for your two pages, with content - images and text.

First you need to insert the six images for each page.

You need to then add some text content for each image. You will need two-three sentences. You could save this in a Word document first.

13/. When ready to put the re-sized images in your webpage, place the cursor in a left table row, then Insert/Image/ then find the image you want to put in and select. The image will load into the table row cell. Then from your Word saved text content in Word, copy/paste it into the table cell on the right. See the screen-shot example below.

 

Do the same for each of the six images.

14/. Save your pages and preview them all in the browser, to check all is the way you want it to be and the page links work. Then it is all good and you are done!

Find Images & Resize

Build the Pages

Add Colours

Webpage Layout Examples

Create a Sound Webpage

Index

 

.