It is time to start designing the layout. Before jumping into Dreamweaver it is a good idea to take a moment and sketch out the "look and feel" of the site. Sometimes looking at what other designers have done can spark your creativity. Utah School Websites is a good starting place to see what others are doing.

This tutorial uses the teacher website design on the right as an exercise.

1. Insert a "New File " into your root and name it "mock_up.html". This page will be used to design the look and feel of your site. You can then convert it into a template to make all the rest of the pages.
   
   To do this, select the root folder and then right click, select "New File" from the pop up menu.

2. Double Click on the mock_up.html fileto open it. The file open,s on the left and you can begin your work.

3. In order to control the layout of objects (text and images) tables are necessary. You need a table across the top is need to hold the title graphic, small fractal graphics and the contact info. In this case you need 5 cells.
   
   Click the Table button fron the Insert tool bar across the top. In the dialogue box enter 1 row, 5 columns, and 770 pixels for the width. Put zeros in the other boxes.

4. Put a number in each cell to act as a place holder. You will delete them when the real content is inserted.

5. Insert the header graphic. In the Site window on the right open the "Images" folder and then the "use" folder. Click and drag "header.gif" into cell one and drop it. Do not forget to delete the number 1.

6. Insert the three fractal graphics into the next three cell the same way. Their file names are: hytex6.gif, r_crest.gif, and scarab2.gif.

7. In the last cell type in the contact information.

8. Fill the table with the same background color that is in the header image. Select the table by clicking on its border. In the Properties tool bar select the color chip next to "bgcolor". When you do this the cursor turns into an eye dropper and you can select color from anywhere on the page. Select the green fromthe header gif and press enter.

9. Format the contact text. Select the text and then use the property tool bar. Choose Arial, size 2, and white. Press enter.

10. Align the text to the right using the cell's Properties. Click inside the cell then on the lower left of the Properties bar open the drop down menu next to horizontal and select right. This property aligns anything contained in the cell to the right.

11. If you desire, you can create space around the contents of the cells in a table using "Cell Padding". Select the table then in the Property bar enter the pixel amount in the "cellpadding" field and press enter. We are using 10.

12. The browsers automatically put a small margin on the left and top of the contents of a page. In this case it would be nice if the table was flush with the left side and top of the browser. Select "Modify" and then "Page Properties".

13. In the dialogue box enter "0" in all four boxes that say Margin.

14. Be sure and test the page in the Browsers. File >> Preview in Browser. It should look something like this.

Next: Adding a Navigation Bar.