background-position: left top; } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; color: #336699; text-indent: 10px; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-style: italic; color: #336699; text-indent: 35px; } /* begin link styles */ a:link { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #CC9900; text-decoration: none; } a:visited { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #996600; text-decoration: none; } a:hover { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #999966; text-decoration: underline; } a:active { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #CCCC33; text-decoration: none; 110 } /* begin content positioning */ #collage { position:absolute; left:0px; top:4px; width:800px; height:58px } #header { position:absolute; left:0px; top:76px; width:800px; height:35px; } #nav { position:absolute; left:204px; top:93px; width:596px; height:32px; } #content { position: absolute; width: 600px; padding: 10px; margin-top: 100px; margin-bottom: 20px; margin-right: 200px; margin-left: 200px; } /* begin custom classes */ .footer { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; color: #CC9900; text-align: center; } Listing 8: Global styles including presentation and layout (except the .nav class) 111 Horizontal Lists for Navigation An interesting technique being used by a lot of CSS designers lately is the use of lists for navigation. Standards evangelists are big into document structure, and when you think about it, navigation is really just a list of links. <ul> <li><a href="home.html">Home</a></li> <li><a href="books.html">Books</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="events.html">Events</a></li> <li><a href="courses.html">Courses</a></li> <li><a href="consultation.html">Consultation</a></li> <li><a href="about.html">About Molly</a></li> <li><a href="fun.html">Fun Stuff</a></li> </ul> Listing 9: The markup for my navigation list. We met this technique in Chapter Two – but this time, using CSS, we’ll turn it onto a horizontal navigation scheme. Using lists in this way can create a wide range of opportunities for graphic-free navigation with colors and effects. For this design, I’ve kept the process very simple. To achieve this effect, I created a class called .nav. Here’s the style for this class: .nav { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #CC9900; display: inline; list-style-type: none; padding-right: 10px; } Listing 10: Creating a list-based navigation scheme. Of course you’re familiar with the font, color, and padding properties, but the two properties here that might be new to you are display and list-style-type. The display property allows you to change the display type of a given element. Lists are normally considered block elements, which is why there are carriage returns after each closing </li>. Using CSS, however, you can change the display to inline, so that there are no carriage returns! This is a wonderful example of how presentation and structure can truly be separated with CSS by using CSS to change a list’s display, you’ve successfully modified its presentation without ever mucking with the structure of the HTML or XHTML document. The list-style-type property allows you to modify the appearance (or lack thereof) of bullets and numbers within lists. 112 There is one annoyance when using lists in Dreamweaver MX for navigation. Design View will not display your lists inline (Figure 2), so you have to work in an external browser as you update your changes. F figure 2: Dreamweaver Design View won’t provide the best representation of your CSS-based layout and list styles. So, I added the class to both the <ul> tag and the <li> tags. I do this because I’ve found inconsistencies in the way browsers handle this technique, and putting the class in both places is a safety net. There are other ways this could be done as well you could create HTML selectors instead of a class it’s really up to your personal CSS methods. The resulting markup is incredibly clean and well-structured: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 113 <head> <title>Molly.Com, Inc. Welcome</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="molly.com.new.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="collage"><img src="top-main.jpg" width="800" height="58" alt=”photographic collage” /></div> <div id="header"> <h1>molly.com</h1> </div> <div id="nav"> <ul class="nav"> <li class="nav"><a href="home.html">Home</a></li> <li class="nav"><a href="books.html">Books</a></li> <li class="nav"><a href="articles.html">Articles</a></li> <li class="nav"><a href="events.html">Events</a></li> <li class="nav"><a href="courses.html">Courses</a></li> <li class="nav"><a href="consultation.html">Consultation</a></li> <li class="nav"><a href="about.html">About Molly</a></li> <li class="nav"><a href="fun.html">Fun Stuff</a></li> </ul> </div> <div id="content"> <p class="footer">&copy; Copyright 2003 - 2004 Molly.Com, Inc.<br /><a href="privacy.html">Privacy</a> - <a href="credits.html">Credits</a></p> </div> </body> </html> Listing 11: The final XHTML page, ready for content. 114 The next step was to add some content, and test in a variety of browsers. Figure 3 shows the results in Internet Explorer 6.0 for Windows. Figure 3: The results! The results shown here are almost identical within every contemporary browser with comprehensive CSS support. Netscape 4 even retains the layout, but the caveat there is that using display:inline won’t work in Netscape 4. If you have to support non-CSS browsers, you will have to test adequately if you’re using lists for navigation, especially if you’re displaying them inline. Creating Alternative Designs Of course, the beauty of style sheets is that you can modify them very quickly, completely changing the look of your design without having to touch the HTML or XHTML. I went ahead and created two additional style sheets. 115 The first variant is the same design, but with a black theme: Figure 4: Same layout, modified style sheet. I also created a more “feminine” version: Figure 5: Changing style sheets can bring about a dramatically different look. So, I end up with a visually attractive, easily navigable, accessible, and modifiable Web log design that is also incredibly optimized for speed. Consider that the XHTML document with an entry weighs in at a whole 3KB, and the graphics including the background (which is only used in the first version), are 26KB, and you end up with a Web page that is 29KB. 116 117 9. Switching Styles: Users-selected style sheets. Style switching using CSS and JavaScript is not only a fun way to add interactivity to your site, but also very practical. If you've ever wanted to give your site visitors a little more control and access to your site, this chapter will help show you how. You'll also examine some important issues in CSS including how browsers manage multiple linked styles. About Style Switching Switching styles is a growing practice used by such CSS notables as Eric Meyer. On his web site, Meyer offers site visitors a number of various styles from which to choose. He's selected a default, but the site visitor can choose a style once there, giving the site a different presentation. Three views of meyerweb.com: Same content, different styles This technique is as practical as it is fun. Not only does it provide an enjoyable, enhanced experience for the site visitor, but it can allow you to provide versions of the site that suit different audience needs, such as a high-contrast version for those with vision impairments, or, if your site is all CSS-based in terms of layout, you can provide an alternate design for browsers that do not support CSS, allowing site visitors to get a better visual experience— on their terms. In a similar vein, the style-switching technique can be used to create text-size switching effects. If your site uses small or normal text sizing, and you'd like to allow your visitor a one- click option to make their text size larger (always helpful for aging eyes!) This is also an important feature for accessibility, and is in use on many web sites, including Jeffrey Zeldman's Daily Report and A List Apart. 118 Zeldman's Daily Report offers sizing and contrast options for customized viewing. Even with such high profile individuals using switching, many designers have never tapped into its power and simplicity. Switching styles is a fairly easy process once you've got all the pieces in order. For this chapter’s exercise, I've provided you with all the files you need to get started, but for general purposes, style switching requires the following: • A contemporary web browser with CSS, JavaScript and cookies turned on (Microsoft IE, Netscape 6.x and above, Mozilla, and Opera all support this script) • A basic style sheet for the page's design • Additional, alternate style sheets • A style switching script (I've included an open-source version in this article) • Anchor elements with event handlers used to invoke and switch the script And of course, because this technique requires JavaScript, your site visitors will have to have JavaScript enabled on their browsers in order to tap into the switch. If they do not, it will not interfere with your site's basic performance; rather, they simply will not be able to use the feature. Setting Up To get set up for the exercises, begin by downloading the exercise files. Once they are available on your hard drive, unpack the downloaded package as follows: 119 [...]... pastel-style .css title When you're finished, your styles should appear as follows: Pretty straight-forward, but the important thing of which to be aware is that it's the "stylesheet" value of rel and the lack of a title attribute and value that allows the browser... technique You'll have to manually edit some of the attributes in the link markup as Dreamweaver MX doesn't include all of the necessary attributes for the link element 121 Note: It's important to know that the style switching technique does not support imported CSS, so if you're using the @import technique as a workaround for your CSS layouts, you'll either have to forgo the workaround and place all of your... Done 120 The newly defined site will appear in your Files panel, and you're ready to get to work The exercise defined as a site within Dreamweaver Using the Style Switcher for Alternative Designs In this section, you'll use the style switching script in conjunction with three CSS files to allow the site visitor to switch between visual styles Linking to the Style Sheets The first step in the process . background-position: left top; } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 22px; color: #3 366 99; text-indent: 10px; } h2 { font-family:. font-size: 14px; color: #CC9900; text-decoration: none; } a:visited { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #9 966 00; text-decoration:. for the flower-style .css title, and pastel for the pastel-style .css title. When you're finished, your styles should appear as follows: <link href=" ;css/ black-style .css& quot; rel="stylesheet"