Home » Internet » Web Development

Dreamweaver CS3 and Cascading Style Sheets

Sep 11, 2008
Cascading Style Sheets (CSS) has become as pivotal a technology in the building of websites as HTML. Originally, CSS was mainly used for defining the appearance of text (font, size, colour, etc.). However, with the improvement of browser compatibility with the CSS specification, CSS is now the recommended method of controlling all aspects of the presentation of HTML documents within the browser window.

Adobe Dreamweaver is a very widely used platform for developing web sites and web content and, although used by experienced developers, is also widely used by non-specialists for whom Dreamweaver's user-friendly visual interface takes the pain out of web site creation. The way in which Dreamweaver implements CSS is very important for the casual user, since it will influence the kind of sites they end up producing.

Previous versions of Dreamweaver assumed that most users would be using tables to control the layout of their web pages. Dreamweaver CS3 is the first version of the program which encourages users to create CSS-based web page layouts. When the users create a new web page, they are offered a series of CSS layouts, on which they can base the new page, consisting of single, double and three column designs.

CSS page layout is based in the DIV element, an HTML container which can be used to hold an arbitrary amount of web content. The CSS rules control the appearance and positioning of DIVs on the page. Dreamweaver CS3's preset CSS layouts create a series of DIVs containing placeholder text and basic formatting. The placeholder text, as well as the code underlying the page, both contain useful explanations of how the page has been constructed and a few tips on how to personalise them.

The CSS code for pages created using Dreamweaver's preset layouts is embedded in the page itself. If a user creates a series of such pages, each one will have its own CSS code making updating very time-consuming. It is far more efficient to have all of the CSS code in one external file and link each page to this one file. At present, Dreamweaver doesn't really make this clear to new users. However, it does have an excellent feature for moving embedded CSS code into an external file. You simply select all of the CSS definitions you wish to externalise then choose Text - CSS Styles - Move CSS Rules.

Moving CSS code into an external file is not something a beginner would be expected to think of doing and is not something that Dreamweaver recommends to new users. So, in spite of the improvements, some familiarity with CSS is still required to get Dreamweaver to handle CSS efficiently.

Another area where Dreamweaver still handles CSS inefficiently is the way in which it generates CSS class styles with names like "style1", "style2", etc. whenever the user applies attributes like font, size or colour to highlighted text. This must be really confusing for beginners and can easily be solved by simply removing these "raw" attributes and replacing them with CSS-friendly options.
About the Author
The author is a trainer and developer with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver Classes in London and throughout the UK.
Please Rate:
(Average: Not rated)
Views: 226
Print Email Report Share
Article Categories