Introduction to Web Design in Adobe Dreamweaver Lesson 2

Today, the W3C which sets standards for internet development recommend CSS for nearly every aspect of web design. That is because the best CSS designs are accessible, flexible and adaptable.

When web designers talk about accessibility, they mean creating a site that can be accessed by anyone who might ever visit your pages. That includes people with limited vision who use browsers that read web pages aloud as well as others who may use specialized browsers for a variety of reasons. If you work at a university, non-profit, government agency or a similar organization, you may be required to create these kinds of accessible designs. But even if you are not required to use CSS or to follow accessibility standards, it is still good practice.

That is why Dreamweaver CS3 includes so many CSS features and a collection of pre-designed CSS layouts like that we will be using in the templates chapter later in the series. This page was created using one of Dreamweaver’s pre-designed CSS layout which I adjusted to better fit the images and elements in this design. One of the big advantages of CSS is that it lets you separate content from design. By that, I mean that instead of formatting every headline on your site as 24 point Arial bold, you can use CSS to create a style for the H1 tag as I have done on this page. Then, if you decide later that you want all of the headlines on your site to use the font Garamond and maybe to the 30 point instead, you will only need to change the style for the H1 tag in the style sheet and it will automatically be applied everywhere you use that style.

Separating content from design also enables you to create different style sheets for different audiences and devices that is why Dreamweaver CS3 includes this new feature called Device Central so you can preview what your page designs will look like on a cell phone and many other hand held devices to see just how different they can look. This is the same page that we were just looking at. And in the future, this kind of design variation is likely to become even more important as a growing number of people want to be able to view the same web pages on a giant flat screen monitor as they do on their tiny cell phone screens. As you get more advanced with CSS, you can create multiple style sheets for the same page. For example, you could create one that is ideally suited to a small screen. Another that works best if the page is printed and yet another designed with a large font for anyone who may have a little trouble reading the small print that has become so common on the web.


Transcription by: Scribe4you Transcription Services