Dreamweaver layout

1.             Go to:  resources and right click on the banner and save in your website images folder.

2.             Open Dreamweaver if it isn't already open and define the site if you haven't already done it.

3.             Go to File > Save As > call it index and save it in your website folder. This will be your home page, which must be called index.

4.             Go to Layout > Layout View,  click on the green Layout Table and draw a table about 700 wide

5.             Click on the blue Layout Cell  and draw a cell at the top of the table for your banner and another under it for the links and two under that one.

6.             Click inside the top cell and drag the banner image from your site map into it (or go to insert image).

Resize the cells to fit the banner.

7.             To make a link, type the Word eg. Home where you want the links to be.  Drag the cursor over it to select it.

8.             Type in the link box in the Properties box or use the Point to file tool to click on the page you want to link it to in your site map under File. Eg. index.htm 

It is important not to have spaces in file names.

9.             Add a few spaces between Home and the next page link by going to Insert > Special Characters > Non-Breaking Space

10.         Text BoxTo select the cell in Layout view hover over the blue edge until it changes to red then click.  It will turn blue and square handles will appear. Now change to Standard view and change the alignment of the Text, cell or table in the Properties box.  Select Middle for the vertical alignment.

 

 

 

 

 

11.         Change back to Layout View, and change the colour of the cell by clicking on the blue table cell outline to select it and either selecting a colour from the properties box Bg

or by Clicking on the drop down arrow and dragging the eyedropper to touch the colour on the banner.

12.         Text Box:You can change the background colour by going to Modify > Page Properties or click on the Bg drop down arrow in the properties box and select a colour. 

 

13.         Type Home Page in the Title box and save the file.

14.         Now make some more pages so that your links work.  Go to File > Save As  and call it formatting.  Change the title to Formatting > Save

15.         Make another page: File > Save As  and call it photos

16.         Change the title to Photos > Save

17.         Click on the Preview icon to see what your page looks like in a browser.



© J. K. Phillips
Current URL: