Creating Cascading Style Sheets With Adobe Dreamweaver
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.
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.
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.
It is also disappointing that Dreamweaver still automatically generates CSS styles called "style1", etc. each time the user applies a font or colour to selected text. Surely it would be easier to simply remove these basic attributes and just let the user either apply a style to the selection or, if no styles exist, create a new one. Perhaps this will be introduced in the next release of this excellent program.
To learn more about Dreamweaver training courses, visit Macresource Computer Training, a UK IT training company offering Dreamweaver Classes in London and throughout the UK.