CSS Layout – Dreaweaver CS5

Before we actually get into designing the layout, it is helpful to understand what’s involved in designing  a CSS layout using Dreamweaver CS5. A webpage is created using HTML code. Dreamweaver allows you to create the webpage without actually writing HTML code as Dreamweaver writes the HTML code for you. HTML is made up of various ‘tags’.
It was not too long ago when web pages were designed using tables [Insert > Table], however this is no longer a good practice. Now it is best to design CSS based webpage layouts.
There are 2 parts to a CSS based website layout:

1. Div (short for division) tags divides the content into individual sections.
2. CSS (short for Cascading Style Sheet) styles the div tags.

Divs can be of 2 types:

• Class
• ID

The difference between ‘Class’ and ‘ID’ is that a class can be used multiple times in a page while an ID can only be used once.

• The style for a class will begin with a dot ‘.’
• The style for an ID will begin with a hash ‘#’

Keeping in mind the website layout that we have planned we will need to create at least 4 divs – header, menu, content and footer. The content for each of these areas will reside within the respective div tag.
We will also create a CSS and specify the properties for each of the div tags by defining styles of the same names ie. header, menu, content and footer.
The style sheet can reside within the HTML page or external to the HTML page but linked to it. It is advisable to create an external style sheet so that changes can be made to this one file which will reflect on all the linked pages.

Posted in: tutorial web