Creating Cascading Style Sheets With Adobe Dreamweaver

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.

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

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.

If you would like to learn more about Dreamweaver training courses, visit Macresource Computer Training, a UK IT training company offering Dreamweaver Classes at their central London training centre.

Leave a Reply

Your email address will not be published. Required fields are marked *