Add a Background in Dreamweaver

Now that you have gotten familiar with div tags and css styling lets do something simple.  Adding a background color or image behind the container div is a good idea.  It will add depth to your site and also frame your container.  I will add a long narrow gradient strip that is repeated.  This will take up less space in your site folder and will load much faster than a large photo of the same gradient.  

(25 px by 1500 px)

 At the bottom of the page you will find the page properties panel.

Choose CSS Appearance.  Select the background image in your images folder of your website, and repeat X.

Beginning Steps of Dreamweaver

As we begin to design in Dreamweaver there are crucial steps that need to be taken to make the website work properly. I will review each step every day but you must also take notes and refer to tutorials that are provided to help you understand the process.

We have already:

• "Defined" our site by directing Dreamweaver to our site (root) folder.  It is crucial to do this every day if your site folder isn't already in the files panel. 

• Made our home page by creating a file called index.html in the files panel.
• Learned how to create Navigation Buttons in Photoshop and insert them into our page. Insert>image object>rollover image.

Now we have to learn to insert Div tags, the boxes that organize our webpage. We will use html and css during this process.

Remember to:

• Insert a div tag by going to Insert Layout-Object
• Insert div tag at "insertion point" if it is the first tag to go onto a page like the container
• Insert div tag "after start of tag"  means "inside of".  Banner tag would be the first to go inside of the container so you would use "after start of tag" for the banner tag. 
• Insert div tag "after tag" means directly after another tag that is in the container so the next tag would be the navbar (after banner).
• Float tags left or right if they are lining up next to each other.  The next  divs would be content 1 and content 2...etc.
• After you place another tag after tags that are lined up next to each other (floated) you need to clear the tag in the properties panel.  A footer would be an example of this

Watch the following tutorials after I present if you need help and would like to review the process.  The way I am showing you to do things is just one way to create a page in Dreamweaver you will find many variations. 

Creating a Container Div

Using Floats

Using Clears