Because of its ability to separate design from content, Cascading Style Sheets (CSS) has become an extremely important technology in web development. A single CSS document can contain information regarding the position of elements on all the pages in a web site as well as style information such as font, sizes and colours. In terms of building websites, CSS definitely represents the future.

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.

Dreamweaver CS3 is the first version of the program which assumes that the user will want to use CSS to control the layout of their web pages. To assist inexperienced and would-be web developers, each time a new page is created, the program allows the user to choose allocate a preset CSS layout to the page. There are about 30 such layouts and they come in single, double and three column varieties.

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.

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.

This ability to move blocks of CSS is an excellent feature but one has to ask if new users will see its significance and actually use it. The fact is that, given the increasing importance of CSS and Dreamweaver’s role as the fledgling developers best friend, the program could use some improvement in the way it handles 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.

The The writer of this article is a training consultant with TrainingCompany.Com, a UK IT training company offering Adobe Dreamweaver Classes in London and throughout the UK.

Related posts:

1. Developing Client-side Content With Adobe Dreamweaver Adobe Dreamweaver is a multi-purpose web development tool aimed at...
2. Working With HTML and XHTML in Adobe Dreamweaver CS4 HTML is a markup language used to create web pages...
3. Creating Hyperlinks In Adobe Dreamweaver Most Dreamweaver training courses will show you how to create...
4. How Dreamweaver CS4 Speeds Up The Web Development Prcocess If you have ever wanted to build your own website,...
5. The Best New Additions To Dreamweaver CS4’s List Of Features Dreamweaver's New Related Files facility...

Related posts brought to you by Yet Another Related Posts Plugin.