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 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”.

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 generated by Dreamweaver when creating these preset layouts is embedded within the page itself. Updating a site where every page has embedded CSS code would be extremely inefficient. A far better arrangement is to keep all of the CSS in a single file. Luckily, Dreamweaver has a nifty feature for moving CSS definitions from an HTML page to an external CSS file. You just highlight all of the CSS you wish to export, right click the selection and choose “Move CSS Rules” from the “CSS Styles” 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.

Dreamweaver CS3 still has includes the automatic creation of CSS styles whenever the user applies font attributes to text. Simply removing the ability to select text and apply these basic attributes would prevent this from happening. From a beginner’s point of view, it would be far more useful to just have a “Style” menu with an option to create a new style if no styles already exist.

Tags: Computers

Share This