dreamweaverbanner
The Basics
Emerging
 
 
 

 

Welcome to the Dreamweaver tutorial!!!!

Create your own Navigation scheme:

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

template1

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

template2

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

template3

Give the table these options:

template4

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 (if you want to create a vertical banner on the right, like this one below, you can or you can just leave it blank. If you do, then create it at Cooltext or in Fireworks and then (insert > Image).

:template5

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

template5b

Now go to the bottom of dreamweaver to the properties panel and click Page Properties...
Choose these options:

template6

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

template7

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:

template8

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

template9We 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:

template10

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

template11

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

template12

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

template13

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

template14

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

template15

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:template16

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:

template17

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.

template18

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

template19

Tutorial Complete.