Dreamweaver Article

Applying CSS from Screen to Print to Handheld – Part 1: Preparation and Groundwork

Change and Flux

The Internet is constantly evolving. Often we have to shed old habits and revise our approaches to the way we do things to keep abreast with these changes. The way we write our CSS files is no exception. Microsoft Internet Explorer 7 is currently in beta and it would seem that many of the bugs and oddities in the current release will be fixed. This means that some of the hacks and filters used in the past will no longer be required for the new version of this browser. We will, of course, still need to use them for Internet Explorer 6 (IE6) and earlier versions. This is where conditional comments come in—to filter out versions of Internet Explorer prior to version 7.

What Are Conditional Comments?

Conditional comments (CCs) are nothing more than statements inside HTML comment tags. The following snippet shows an example of a CC:

<!—-[if lte IE 6]>
<p>you're using IE6 or IE5</p>
<![endif]-->

The key to the conditional comment is in the first line. This simple if statement rougly translates into, "If you're Internet Explorer 6 or an earlier version of Internet Explorer, read this" (the lte stands for "less than or equal to"). The earlier version of Internet Explorer would have to be one of the various Internet Explorer 5 versions because versions prior to IE5 cannot read CCs. After the opening line, we have the information we want to pass to the browser version named in our CC. This information could be a simple message, as shown in the previous example, or a link to a style sheet that contains rules specific to Internet Explorer 5 or 6.

Now you could set a different CC for each version of Internet Explorer that supports CCs and feed specific rules directly to each version. You could also use a single CC like the one shown in the previous example to provide a style sheet to all versions of Internet Explorer that support CCs up to version 6, and then use filters within that style sheet to pass the relevant values to whichever version is appropriate.

Personally I'd use the CC shown in the previous example and continue to filter my rules from within a single Internet Explorer "oddities" style sheet. This keeps everything in the same place which, for me, is easier to manage. If you aren't sure how to filter specific values to specific versions from within a single style sheet, then I would recommend using CCs to feed specific values to specific browser versions.

The following snippet shows an alternate CC:

<!--[if IE 5]>
<p>Hi, I'm IE 5</p>
<![endif]-->

In this example, the if statement checks for IE5 only; IE6 will not read the information contained in this CC. I'm sure you can see from these two examples how CCs work. For more information on CCs, read Syntax of Conditional Comments on the MSDN Library's HTML and DHTML Overviews/Tutorials site.

You may have already set up stand-alone versions of Internet Explorer 5 and Internet Explorer 5.5 on your local machine. If you have, then you should be aware that unless you have made specific changes (as explained in Multiple IEs in Windows by Joe Maddalone on labs.insert-title.com), then your stand-alone versions won't see the CCs. Stand-alone versions will declare themselves as the latest version of Internet Explorer installed on your computer, even though they render HTML as any given version should do.

Caution: If you make the changes as suggested in "Multiple IEs in Windows," do so only at your own risk. Neither Adobe nor I take any responsibility for changes made to your computer.

Your Design Is Already Complete

For the purpose of this tutorial, you will use the Health and Nutrition design, which is included in the retail version of Dreamweaver 8. To access this design, follow these steps:

1. Select New from the File menu.
2. From the General tab, select Starter Pages.
3. From the Starter Pages panel, select Health & Nutrition – Home Page.
4. Save the files to a local site definition.
5. Copy the required files to the same folder when prompted to do so.

The Health and Nutrition design is a table-based layout but you are going to convert it to a CSS-based layout. This will be your main objective in this part of the tutorial.

When you install the files to your site definition, they are put into the root of the site. For this tutorial, you'll modify this setup. This is best done from the Files panel. By making the changes here, you will make good use of the Dreamweaver site management capabilities, as demonstrated in the following movie.

• View the movie: Organizing Your Files

Follow these steps:

1. Open the Files panel.
2. Right-click the main site folder and select the New Folder option.
3. Name the folder CssFiles.
4. Drag your CSS file into the folder. Dreamweaver will prompt you to update the links to the CSS file.
5. Click the Update button to allow Dreamweaver to make the necessary changes.
6. Repeat Step 2 to create a folder for your images.
7. Name the new folder images.
8. Drag your images into the folder.
9. Click Update when prompted.

You now have a little organization within our site. You may very well make changes to the CSS file, and you may not reuse all the images. However, all of these elements are now easily accessible should you need them.

The Health and Nutrition design consists of a three-column layout that includes a banner with images (see Figure 1). You will reproduce this design as you work through this tutorial. When you are finished, you will have a design that is nicely laid out and constructed using only CSS.

Figure 1. Health and Nutrition home page

In future tutorials, you will create media-specific style sheets to manipulate the page and make it compatible with handheld devices and print media. To complete that work, you will learn how to make good use of the Style Rendering toolbar in Dreamweaver 8—a very useful tool.

Page 2 of 3

Previous Page

Next Page