Tutorials

Written by WebMaster   |  12/20/2008

This tutorial will cover the basics of applying styles to an HTML page in Dreamweaver Design View. I say basic because this tutorial is not going to explain advanced CSS. If you want to know advanced CSS then I would recommend not using the Design view of Dreamweaver and studying the CSS syntax. Advanced CSS requires an understanding of the CSS code syntax. You can use advanced CSS in Design view; however, I will not touch that subject here for sake of brevity and for those who don't understand advanced CSS concepts. With that said, there is nothing worse than a web page that is hacked together with a million styles that make no sense. A web page, with improper styles applied to it, is a webmasters nightmare. These web pages are destined for a redo.This tutorial will cover proper naming conventions and methods of building styles in a style sheet through Dreamweaver's design view . Many people that are new to Dreamweaver tend to make the mistake of creating styles, quite frankly, "wrong". The following is an illustration of incorrectly made styles.

This method of style creation is totally unacceptable and should be remedied immediately before the web page is far into the creation process. If you notice the style list box (Above illustration) has a list of generically named styles like "Style 1, Style 2, Style 3" etc. This is because the styles where created in the Properties panel. This is poor CSS for several reasons. First, the names are vague and have no meaning to what they are styling. While it is true the style is shown by the size and color in the list box, the styles have been placed in the head section of the document, as apposed to being placed into an external style sheet. This is a severe problem because as the site gets developed, each page will contain styles the other pages do not have. Page 1 might have the "style 1" color orange; but, page 2 might have the "style 1" color as black. Finding the style that needs to be edited in the future becomes a tedious task for the person who will have to maintain the site. I can go on about how bad this CSS is; but, I will now move the subject and explain how Dreamweaver is set up for style sheets.

First we will begin with creating a new HTML and CSS document. You make a CSS sheet the same way you make a HTML page. Except you select CSS instead of HTML. You simply go to file/new, select CSS, and click create. (See illustration below)