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.
The range of computer users who have some involvement in building web pages and web sites is vast and a good many of these users choose Dreamweaver as the software tool that helps them create the web content they need without needing to become an expert on underlying technologies such as CSS. Dreamweaver CS3 includes better support for Cascading Style Sheets than previous versions. However, there is still room for improvement.
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”.
Pages created using CSS rely heavily on the use of the HTML DIV element, a multipurpose container of web content. Choosing one of the Dreamweaver CSS presets creates a page containing a series of DIV elements complete with placeholder text and the CSS code necessary to control the position and dimension of the DIVs. The placeholder text and HTML code both contain brief explanations of the techniques used and advice on how to customise these basic pages for your own purposes.
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.
Moving CSS code into an external file is not something a beginner would be expected to think of doing and is not something that Dreamweaver recommends to new users. So, in spite of the improvements, some familiarity with CSS is still required to get Dreamweaver to handle CSS efficiently.
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.
The writer of this article is a developer and trainer with TrainingCompany.Com, a UK IT training company offering Adobe Dreamweaver Classes in London and throughout the UK.
Feedback / Comments
One Response to “How Adobe Dreamweaver Handles Cascading Style Sheets”
Leave a Reply
[...] more here: How Adobe Dreamweaver Handles Cascading Style Sheets … Share and [...]