View PDF | Print View | Html Version
by: AndrewWhiteman
Total views: 2
Word Count: 488

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 has long had support for the use of CSS and has responded to the growing importance of this pivotal technology. Dreamweaver's implementation of CSS is all the more important since many of the people using the program are not specialist web developers and rely on Dreamweaver to guide them through the maze of technologies which drive web pages.

One of the most noticeable changes in this the latest version of Dreamweaver is that users are now positively encouraged to create web pages using CSS for page layout rather than tables. Each time a new web page or template is created, Dreamweaver offers you a choice of basing the page on one of about thirty preset CSS layouts with names like "3 Column Elastic" and "3 Column Fixed".

Instead of using tables to control positioning of web page content, CSS page layout makes extensive using of the DIV element an HTML construct which can contain just about anything, including other DIVs. The preset pages created by Dreamweaver CS3 contain a series of DIV element with the CSS code that controls their positioning. The placeholder text within the DIVs includes useful tips on customising the preset pages for your own use.

CSS works most efficiently when you can place all of your CSS code in one external file and link that file to each of your HTML pages. Dreamweaver CS3 still does not make it easy for inexperienced users to create CSS-based pages in this way. If the user creates ten web pages based on Dreamweaver's preset CSS designs, each will have its own code embedded within the page itself. There is, however, a great feature for moving embedded code across to an external CSS file. You just select a series of CSS definitions, right-click and choose "Move CSS Rules" which is available in the "CSS Styles" section of the context menu.

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

The author is a trainer and developer with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver Classes at their central London training centre.

Add Comment