CSS: It’s Not Just For Screens Any More

Dreamweaver, and in particular, the new Version 8, is nothing short of a CSS wonder.  Many of us who are “mostly application” in mindset stuck up our noses that there wasn’t more for the application side in the new release, but I, for one, am learning to appreciate some of the CSS improvements that Macromedia has made in the new version. 

In my E-Book, I talked about the new Style Rendering toolbar and the ability it gives the developer to toggle between screen views for various audiences. 

In this article, I would like to expand on the Style Rendering toolbar and show you how to create a site that is for more than just the web audience.  I have created a simple unstyled page that is a home page for a fictional candy store and have attached that unstyled page and the images used in a zip to this article.  Our task here will be to create the CSS for that example from scratch.. three times.  First, we will create the “screen” stylesheet that the average web user will view in their browser.  Then we will create a stylesheet for the user who wants to print a page that is more print friendly than the screen view.  And finally, we will create a style sheet to render the same content for the handheld device.  Mobile is one of the fastest growing areas for the content developer.  It’s about that we paid this arena of business some serious attention! 

$2.89
- OR -

Overview

The Style Rendering toolbar in Dreamweaver 8 will be our guide for viewing the various media types used here.  The link attachment in our page will tell the tool which style sheet to use to render the content appropriately.  Therefore, we will have three link attachments in the page we create, one for each stylesheet to which it is attached.   Our finished link code will look like this:

<style type="text/css" media="screen">

<!--

@import url("screen.css");

-->

</style>

<style type="text/css" media="print">

<!--

@import url("print.css");

-->

</style>

<style type="text/css" media="handheld">

<!--

@import url("handheld.css");

-->

</style>

Sounds pretty easy, yes?  Let’s do it.  Oh, if you’re wondering why I used the “import” method rather than the “link” method, it’s because IE5 for the Mac doesn’t understand import and by doing it this way, I have eliminated a defunct browser. 

Unzip the file included with this article into a folder on your computer.  You will find both an unstyled page and a finished page which I have included for purposes of comparison.  Open the unstyled page, candy.html, and let’s get started.  The page looks pretty bad, huh?  I love starting with raw content and then watching the “magic” as rule after rule of CSS is applied.   So here we go.

Nancy Gill

In early 1996, Nancy Gill picked up her first book on HTML and permanently said goodbye to the legal field. She has been busy ever since developing web sites for businesses, organizations and social groups in Central California and occasionally beyond. Nancy has served as a member of Team Macromedia since late 2001, first with UltraDev and then moving to Dreamweaver when the programs were consolidated in 2002. She also serves as Assistant Manager for the Central California Macromedia User's Group.
Nancy is the co-author of Dreamweaver MX: Instant Trouble-Shooter and technical editor for several Dreamweaver and Contribute related books, including the well-known Dreamweaver MX 2004: A Complete Reference. She also penned the first ever Contribute article for Macromedia's Own Devnet "Getting Up to Speed with Contribute in 10 Minutes".

Nancy has three children, two in college and one in high school. Offline, she enjoys various sporting activities, is a wild NFL football fan and sings in the church choir.

See All Postings From Nancy Gill >>

Reviews

Be the first to write a review

You must me logged in to write a review.