Categories World Wide Web

By William Robert Stanek

Green with envy after visiting the latest cutting-edge Web site? Wish you could create designs like that? Well stop dreaming. Just about anyone can create a state-of-the-art Web site, but to do so you need the power tools of the Web elite: JavaScript and Cascading Style Sheets (CSS). Use JavaScript to make your Web site interactive; use CSS to give it a polished design. Combine the technologies--creating stylesheets powered by JavaScript--to tailor the Web site to the needs of individual users.

JavaScript-powered stylesheets can make style assignments when a document is first loaded into the browser window for individual HTML elements, CSS classes, and HTML elements with unique IDs. You can use this type of stylesheet to create pages that will update automatically based on user preferences, user environment settings, or even the date. We'll show you how to tailor your site to individual users' displays and dynamically update it for special occasions and holidays.

When you create a dynamic Web site, a key concern is browser compatibility: Your site must work with Microsoft Internet Explorer and Netscape Navigator. If these browsers supported the same object models and technologies, implementing such a Web site would be a lot easier. Unfortunately, you either have to create two different versions of your pages (one for IE and one for Navigator) or design code that works in both browsers. The latter alternative is usually the best, and it is what we'll focus on. Additionally, the techniques you'll learn won't break older browsers. In noncompliant browsers, your pages' content will simply display as initially designed, with no customization.

With JavaScript and stylesheets, your site can show different background colors depending on the season. The left is for Halloween and the right for Christmas.

Next: Setting the Stage

Published as Internet Builder in the 5/4/99 issue of PC Magazine.

Related Links
• Server-Side JavaScript -- PC Tech
• DHTML That Works in Both IE and Navigator -- PC Tech
• JavaScript -- DevHead
• ScriptHead Archive -- DevHead
 
• JavaScript Programming Courses -- ZDU