Dreamweaver Cs3 And Cascading Style Sheets

December 28th, 2007
by Andrew Whiteman

Cascading Style Sheets (CSS) is a W3C standard mark-up language for defining the appearance of web pages. The use of CSS allows developers to fully separate the content of the page from its presentation, speeding up the development process and also making the pages load more quickly in the browser. Whereas 20th century websites typically used tables to construct web pages and position elements, CSS now provides a cleaner and more efficient way of controlling all aspects of web page layout.

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.

Pages created using CSS rely heavily on the use of the HTML DIV element, a multipurpose container of web content. Choosing one of the Dreamweaver CSS presets creates a page containing a series of DIV elements complete with placeholder text and the CSS code necessary to control the position and dimension of the DIVs. The placeholder text and HTML code both contain brief explanations of the techniques used and advice on how to customise these basic pages for your own purposes.

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.

Although this ability to move CSS around is really great, it’s not something that beginners will necessarily think of doing. It points to the fact that Dreamweaver could still do with a few enhancements to its implementation of CSS.

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:
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
AddThis Social Bookmark Button

Leave a Reply

You must be logged in to post a comment.