Home arrow Web Standards arrow Page 10 - Web Standards in Dreamweaver Part 3

Web Standards in Dreamweaver Part 3

This last part of the chapter on Web Standards in Dreamweaver shows you how to create a layout with a banner at the top of the page and a navigation menu on the left side. (From the book ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou, 2004, Apress, ISBN: 1590593480.)

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 9
September 22, 2004
  1. · Web Standards in Dreamweaver Part 3
  2. · Adding Page Content
  3. · Validating the Document
  4. · Revalidate Your Page in Dreamweaver
  5. · Set Properties of Table Cells
  6. · CSS for Layout
  7. · Create the Navigation
  8. · The Content Area
  9. · Browser and Device Issues
  10. · Media Descriptors
  11. · Working with Dynamic Data
  12. · Resources and Summary

print this article

Web Standards in Dreamweaver Part 3 - Media Descriptors
(Page 10 of 12 )

Media descriptors allow you to specify how a document is presented on different media: monitor screens, paper, screen readers, Braille readers, or other devices. For example, you can specify that one stylesheet is used if a page is being printed and another is used when it is displayed in the browser window. Amedia descriptor allows a stylesheet designed with speech synthesis rules to be served to screen readers and stylesheets designed with Web TV or PDAs in mind to be served appropriately.

Whether a browser or device understands the media descriptor varies between devices at present, but there is good support for print (the media descriptor you will currently find most useful). Learning to use this method of serving appropriate presentational rules should become more useful in the future as device support grows.

The media descriptors as listed in the CSS2 specification are shown in Table 2-2:

allAll devices
auralSpeech synthesizers
brailleBraille tactile feedback devices
embossedPaged Braille printers
handheldHandheld devices (small screen, monochrome, limited bandwidth).
printDocuments to be printed
projectionProjection devices
screenColor computer screens—standard web browsers
ttyMedia using a fixed-pitch character grid or portable devices with  limited display capabilities. These are typically older mobile devices; most current devices would fall into the handheld category

You can use media descriptors either by specifying a separate stylesheet for each type that you want to use or by using @ Import.

Specifying a Separate Stylesheet for Each Media Descriptor

If you already have a stylesheet linked to your page for presenting your document in a browser and you want to add a stylesheet that will only come into play when the document is printed, you can add a second linked stylesheet for print. You will also need to add the media descriptor screen to your existing stylesheet so that the browser knows to use the screen stylesheet in the browser and the print stylesheet when the page is printed.

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Using a print stylesheet allows you to, for instance, hide navigation when a document is printed, change the font from a sans-serif typeface (which is more readable on screen) to a serif typeface (which is more readable in print), and remove a background color or images that would cause the printing to take longer.

Media Descriptors with Imported Stylesheets

The method just outlined means that you need to create a separate stylesheet for each browser. However, by using @ Import, you can specify certain elements within one stylesheet to apply to different types of media. To use the @ Import method, attach your stylesheet to the page.

<style type="text/css" media="all">@import "all.css";</style>

Within the all.css stylesheet, add attributes for each media descriptor by using @ media.

@media print {

body { font-size: 10pt; }

@media screen {

body { font-size: 12px; }

@media screen, print {

body { color: #000000; }

The declarations just shown give a font size of 10 points when the page is printed and 12 pixels when the page is viewed in a regular browser. Both screen and print will use #000000 (black) as the color of the body text. 

This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.

Buy this book now.

blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials