On Monday I introduced you to the new Unified CSS panel, but that's not the only CSS improvement included in Dreamweaver 8- today we'll take a peek at how the Style Rendering Toolbar can help you proof your CSS-based designs between media types. Because you've already started supporting at least screen, print and handheld media types, right? ;-)
If this is a new topic for you, we should probably step back for a second and look at why this feature exists. There are cases where you may want to specify different values for the various CSS properties in your page layout- specific to the type of device it's being displayed on (or by). For example, you could define one stylesheet to format your page for computer screens, another to format for TTY devices, another for handheld devices, or television, overhead projectors, etc. A crucial feature of CSS is the ability to send a specific stylesheet for each of these different "media types", based on the device browsing your page- helping make your layouts truly universal (well, within reason).
Now in previous versions of Dreamweaver, you could really only view the default/screen media type in Design View without manually juggling the stylesheets themselves in your document- and then rebuilding the <head> section of your document(s) with the appropriate rules/stylesheets again before deploying to the server. In Dreamweaver 8, you can just define all your media-type-specific stylesheets as you would in the live document- and forget all the juggling. If you haven't specified a media type, then all the options will appear the same. However, if you've specified two or more stylesheets, each targeted towards specific media types in your current document, you can use the brand-spanking-new Style Rendering Toolbar to switch Dreamweaver 8's Design View between the supported media types in your document. Easy!
First, you'll need to show the Style Rendering toolbar by selecting the "View > Toolbars > Style Rendering" menu option, and you'll bring out this little addition to your document toolbar (highlighted in red):
Dreamweaver 8's Style Rendering Toolbar
(in a VERY small DW window)
From left to right, the toggle buttons are:
- Screen media type (color CRT monitors, LCD flat-panel monitors, etc.)
- Print media type (paged/printed material or onscreen 'print preview' modes)
- Handheld media type (typically small screens, limited bandwidth, etc.)
- Projection media type (projected presentations, or prints on transparencies)
- TTY media type (for media using a fixed character grid like teletypes, terminals, etc.)
- TV media type (for televisions and similar devies- low resolution, color, limited scrolling, etc.)
- Toggle Displaying of CSS Styles
By simply clicking the appropriate media type button, Dreamweaver will - if you've specified a stylesheet for that particular media type - use the appropriate stylesheet to render Design view, allowing you to quickly proof the relative experience across your supported media types. Cool, eh? But that's not all.
Now obviously the first six buttons directly map to specific CSS media types, but the last button (Toggle Displaying of CSS Styles) is my personal favorite, allowing you to toggle all stylesheets on and off, and see exactly what your document will look like with no stylesheet attached. If you, like myself, are reasonably obsessed with the semantic markup in your document and the logical flow of elements within, this is a great way to see exactly what someone with a browser that has no CSS capabilities will see. Anyone remember lynx (ah, the memories)?
Pretty straightforward, huh? That's the idea- you shouldn't have to jump through cut-n-paste hoops to preview your content on the various devices you may need to support, and the Style Rendering Toolbar gives you a quick, easy way to do it. Just another feature of Dreamweaver 8 that will make your CSS-based life a much more productive one - and help you ease into developing for multiple devices and displays rather smoothly.
You like?
I lovet his, I love this! I was dreaming of this faeture for a few nights after seeing the DW8/Studio8 webinar. :) Honestly, I can't wait for DW8.
Fantastic! I've just completed my first site that takes advantage of different CSS media types (media, print and handhled). This will be very useful for testing. :) I can't wait.
It's very useful! I always do a style to print pages and couldn't test it in Dreamweaver. Now it's posible. Great feature!
Indeed, Seba! I was getting really tired of cutting/pasting stylesheet definitions in my page headers to test multiple media types, too... ;-)
I always do a style to print pages and couldn't test it in Dreamweaver. Now it's posible. Thanks sfegette for stuff.
No problem, Sarkis! Glad to shine a light on some of the new Studio 8 features- and that's a handy one for me, too. :)