It's cool! Dreamweaver 8 Style Rendering toolbar glimpse

Dreamweaver Dreamweaver 8 has a very interesting and cool new feature, style rendering toolbar.

The Style rendering toolbar allows you to easily design different media types, such as screens, handheld devices, and printouts. Other support media types are projection devices, TTY (television type Devices), and TV media types. Dreamweaver 8 also provides the ability to turn on or off all style rendering by switching the CSS display button.

Setting Media types

Of course, to use these options to view the pages you need to be able to create style sheets for them and set the media type for those style sheets. When we attach the stylesheet to the document, Dreamweaver 8 makes it easy to do this, as shown in Figure 1.

　　Figure 1: new attached external style sheet dialog box

A major change here is the ability to select media types from the media selection list. You can go to all the options in the "Media:" select list are available.

I used three separate CSS files for my personal site: one for the screen, one for printing and the third for handheld devices. Each of these CSS files is linked (attached to the page) to the head of each page, as shown in Listing 1.

Style Rendering Toolbar

Now let's look at the Style rendering toolbar--we'll explore his features 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. When the check mark on the associated menu shows the tick mark, the toolbar becomes active.

　　Figure 2: Select style Rendering

Once the selected style rendering toolbar is added to the document toolbar, it is ready to be used. The Style rendering toolbar has seven buttons, and each button shown in Figure 3 has its own specific legend, as shown in the following illustration.

　　Figure 3: Style Rendering Toolbar

1, screen
2, printing
3. Handheld Equipment
4, Projection equipment
5, TTY
6, TV
7. Turn on/off CSS

To activate any given media type you simply click on the appropriate button. Dreamweaver 8 will load the corresponding CSS file for the type of media you choose, and the page will be rendered accordingly. Let's start with a familiar view--screen view. Here the screen view buttons are highlighted in red.

　　Figure 4: our page is rendered in screen CSS mode

If you look closely, you'll see another new feature in Figure 4: All my page elements have a dashed outline. This allows me to look at the status of each element in an accurate glance. It can also be turned off, but I like to keep this feature open because it's very useful.

Converting views by media type

Now that we've opened the page in Design view, we just need to click on the Media Type button to see how our pages are rendered in different devices, or in real-world print mode. Let's look at the page in print mode first. To do this we simply click on the Print Media button (highlighted in red) on the Style rendering toolbar.

Figure 5: View the printed display of our page

Nice, huh! This saves a large amount of time spent in the browser loading and previewing. We can now easily set the page to become a friendly printer and see how the page will look when we design the print style.

Other media types are also selectable. You simply define the style sheet for the media type and select the appropriate button in the Style rendering toolbar to see how the page is rendered under that media type. Of course you can see the results directly in the Dreamweaver 8 Design view. I will complete this preview in the handheld device view.

We just need to select the appropriate button again to view our page rendering in the requested media type. The Handheld Media type button on the Style Rendering toolbar (shown in the following illustration) is highlighted in red.

Figure 6: view our pages in the handheld device format

It's too simple to be easy, isn't it? You just need to create your CSS file and apply the page style to match the type of media you are designing. Dreamweaver 8 will provide excellent presentation so you can see exactly how the page appears.

Dreamweaver 8 All the outstanding new features, the Style rendering toolbar is my favorite feature. It eliminates many of the hassle of designing for different media types; in fact it saves a lot of time--hours!

Conclusion

In this preview article, we see that Dreamweaver 8 can read and render a style sheet based on the media type. While many people may not have used a specified device or a printed cascading style sheet in the past, Dreamweaver 8 will make this transition a simple matter.