In this tutorial we are going to create a great tutorial site layout for you guys out there who want to jump on the tutorial train...

Start by creating a table (Insert > Table ) with these options:

Click on the table and choose a background colour and Align the table to the center.

In the third table we are going to insert a new table with these options:

Give the table these options:

Click inside the left column and give it a width of 160 pixels and in the right column give it a width of 120 pixels.

We are going to insert a advert into the right table (insert > Image), you should now have this:

In the left column insert a new table with these options:

Now go to the bottom of dreamweaver to the properties panel and click Page Properties...

Choose these options:

In the top row of this table type in Main Navigation and give it these options:

In the rest of the rows we are going to give it a height of 20 pixels and do a white, gray, white background, you should now have this:

Under that we are going to put a new table with these options:

We are going to give it the same first table options, the last row of the table we are going to stretch down to the bottom of the website:

After adding the white, gray, white background and links you should now have this:

In the second row we are going to add a text field, Insert > Form > Text Field

To the right of the text field add a buttom, Insert > Form > Button

In the top row add your website name and you should now have this:

In the middle column of the third row add a table with these options:

Give the first row of the new table the same options as the other new tables, in the second row put the website content.

Now in the bottom row we are going to give it the same options as the first row in new tables we added, you should have this:

Now go to Page Properties again and choose Links, choose these options:

highlight the text you want to link to a page and type in the webpage:

Go to the right side of dreamweaver and click Tag, you will now have a box appear, click Relevant CSS and choose a:hover, this is the effect options for when someone puts there cursor over a link on your website. We are going to add a option of background-colour and then colour of your choice, ive chosen a green/blue.

Now when you put your cursor over the link you should now have a cool roleover effect:

Tutorial Complete.

If you would like more help with this tutorial please register and visit the forum.

Bookmark with:

             

Add to Favorites	Google Bookmark
Delicious	Digg
reddit	Stumble Upon