By: Adrian Senior
Page 1 of 2
Dreamweaver 8 has a very interesting and very cool new feature, the Style Rendering toolbar.
The Style Rendering toolbar allows you to easily design for various media types, such as screen, handheld and print which we will look at in this preview. Other media types that are catered for are Projection, TTY - Television Type Devices, and TV media types. Dreamweaver 8 also provides the ability to toggle on and off all CSS rendering via the toggle CSS display button.
Setting the Media Type
Of course, to have the ability to view your pages using these options you need to be able to create style sheets for them and set the media type of the style sheet. Dreamweaver 8 allows us to do this easily when we attach a style sheet to our document, as seen in Figure 1.
Figure 1: The new Attach External Style Sheet dialog box
The big change here is the ability to select the media type from the media select list. You can see all the options available in the Media: select list.
For my site I use three independent CSS files: one for screen, one for print and a third for handheld devices. Each of these CSS files are linked in the head of each page, as shown in Listing 1.
<link href="CssFiles/screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="CssFiles/printsheet.css" rel="stylesheet" type="text/css" media="print" />
<link href="CssFiles/handsheet.css" rel="stylesheet" type="text/css" media="handheld" />
Listing 1: Your attached style sheets with the media types highlighted in blue
The Style Rendering Toolbar
Now let's take a look at the Style Rendering toolbar — we'll explore it's functionality a little later. The Style Rendering toolbar can be displayed by right-clicking on the document toolbar and selecting the Style Rendering toolbar option, as shown in Figure 2. The toolbar becomes active when the check mark is shown to the right on the context menu.
Figure 2: Selecting Style Rendering
Once selected the Style Rendering toolbar is added to the document toolbar and is ready for use. The Style Rendering toolbar has seven buttons, each is shown in Figure 3 with the legend shown below the image.
Figure 3: The Style Rendering Toolbar
- Toggle CSS on/off
To activate any given media type you simply click on the relevant button. Dreamweaver 8 will then load the appropriate CSS file for the media type you have selected, and your page will be rendered accordingly. Let's begin by using a view that we are familiar with, the screen view. The screen view button is high-lighted in red.
Figure 4: Our page rendered in screen CSS mode
If you look carefully you will see another new feature in action in Figure 4: all my page elements have a dotted outline. This allows me to see exactly what is going on with each element at a glance. It can of course be turned off, but I like to leave this feature turned on at all times because it is very useful.
Kim Cavanaugh has an introduction detailing many of the new CSS features in movie format here.