Web designers benefit from vastly broadened possibilities for their sites with the advent of Netscape’s and Microsoft’s version 4 browsers. Thanks to technologies such as Cascading Style Sheets and JavaScript, designers can create pages with precisely positioned elements and easy animation, and they have fine control over the look and style of text.
But there’s a catch. Cascading Style Sheets are deeply geeky and hard to code by hand, and JavaScript is an honest-to-gosh programming language that requires serious effort to master. In fact, under the rubric of Cascading Style Sheets, there are actually two different critters: CSS1 and CSS-P. CSS1 allows you to specify the look and style of type and some other Web-page objects; CSS-P (P for positioning) lets you specify the position of page objects and animate objects on the page. You can manipulate both types of style sheets via JavaScript, and the result is called Dynamic HTML, or DHTML for short.
Another catch is that you can view DHTML effects correctly only using version 4.0 or later browsers. Even then, some effects are Internet Explorer-specific and some are Navigator-specific. It’s essential to preview your pages in both browsers, preferably in both the Mac OS and Windows.
Whole books explain how to code DHTML, but we’ll leave the programming to people who enjoy that sort of thing. For the rest of us, there’s GoLive CyberStudio Professional Edition 3 and later ($299), which offers friendly, visual DHTML tools. (At press time, Adobe acquired CyberStudio.) While you simply drag objects around on the screen and fill out a few Inspector dialog boxes, CyberStudio hums along behind the scenes, writing the Cascading Style Sheets and JavaScript code.
To illustrate some DHTML elements, we created a few pages of a mythical sporting-goods site called Adventure Tools). The opening page of the site is an animated splash screen with three elements that fly across the page and assemble to form the Adventure Tools logo (see “Open with Animation”). A few seconds after the animation ends, the splash screen automatically jumps to the site’s home page (shown above).
With DHTML-savvy tools such as CyberStudio Professional Edition, designers get to concentrate more on designing and less on programming, and don’t have to rely on Web programmers. You can create sites faster and more easily–and in the world of Internet Time, this is an important consideration.
TOM NEGRINO is coauthor of JavaScript for the World Wide Web, Visual QuickStart Guide , second edition (Peachpit Press, 1998).
April 1999 page: 97 Open with Animation
The splash screen is your site’s snazzy “foyer,” which ushers Web surfers to the main page. This is a great place to employ animation. There are three moving elements on our splash screen: a globe, a skier, and the Adventure Tools title. Each element is a transparent GIF image embedded in a floating box. The animation consists of the GIFs flying in along different paths, finally assembling the complete logo. It’s important that the images be transparent GIFs, so you can see one image behind another when they’re stacked.
1 Begin by dragging the Floating Box icon (A) from the Basic tab of the CyberStudio Palette onto an empty page you’ve named Splash.html. You do this once for each image in your animation (in this case, three images). Into each floating box, drag an Image placeholder (B) from the Basic tab of the Palette. In the Image Inspector, specify the image file with the Browse button (C) or use the Point & Shoot button (D) to find the image in the Site window. Resize the floating boxes so they fit snugly around their images, and then position the boxes where you want the images to be at the end of the animation.
2 To animate the first floating box, click on the edge of the box to select it. Then open the Timeline Editor (E) by clicking on the Timeline Editor button in the upper right corner of the document window. In the Timeline Editor window, there are three tracks and three keyframes, one for each of the floating boxes. These keyframes represent where the images will end up, so you need to reposition them along the timeline.
3 Decide how long you want the animation to last, and drag the three keyframes to that spot on the timeline. After you move the keyframes, you’ll notice that each track leaves behind a dimmed keyframe at the beginning of the timeline (indicating that the track is not visible at that point on the timeline). Click on the dimmed keyframe on track 1 to select it. Click on the Visible check box in the Floating Box Inspector, and then drag the floating box in the document window to where you want it at the beginning of the animation. Click on the play button (F) at the bottom of the Timeline Editor to preview your animation. You can adjust the speed of the animation by changing the frames per second via the FPS pop-up menu (G) at the bottom of the Timeline Editor.
4 If you want, you can add keyframes in the middle of the animation by command-clicking on a track on the timeline. This allows you to create a complex path the image will follow. You can smooth the path by choosing Curve under Animation Type in the Floating Box Inspector.
5 Repeat the above processes to animate the other two floating boxes.
6 Now, to make the splash screen switch automatically to the home page, you’ll use an HTML tag that goes in the header of the page. It’s a short bit of code, so if you like you can switch to CyberStudio’s Source mode and type <meta http-equiv=-“refresh”-content=-“5;-URL=-index.html”> between the <HEAD> and </HEAD> tags. If you prefer Layout mode, click on the disclosure triangle (H) at the top of the splash page to open up the Head Section of the page. Under the Head tab (I) in the Palette, drag the Refresh icon to the Head Section. In the Refresh Inspector that appears, enter a delay time in seconds (5 is a good number), click on the URL button, and enter the name of the page to which you want to jump.
What Browser Is That?
Fancy DHTML animation looks great to people who have version 4.0 or later browsers, but people with earlier versions (and that includes most people who use America Online) won’t see the animation. For these folks, the Adventure Tools splash page will just look like a blank colored page. You can’t control what browsers people use, but you can make your page handle older browsers gracefully by having it perform browser detection , which sniffs out the browser version that’s loading the page. If the browser is capable of handling DHTML, the page loads normally. But if it isn’t, the browser switches to a simpler page you’ve prepared without DHTML. You can use browser detection on the entry page of your site to redirect users with older browsers to a completely different, simpler version of your site.
1 To add browser detection to the splash page, drag the Browser Switch Item from the CyberObjects tab in the Palette to the header of the splash page (click on the disclosure triangle to open up the Head Section).
2 The Inspector window changes to the Browser Switch Inspector. It’s usually fine to leave Supported Browsers set to Auto, but if you have custom JavaScript on your page that you know works with some older browsers, you can enable those browsers here. In the Alternate Link field, type the name of the page to which you want the user’s browser to jump if that browser doesn’t pass the version test. You can also use the Browse button to find the alternate page on your hard drive, or you can use the Point & Shoot button to select a page in the Site window. Styling Text
Cascading Style Sheets help solve a pet peeve of Web designers: lack of fine control over the style and appearance of text. The detailed ins and outs of Cascading Style Sheets are beyond this article’s scope, but we can show you how to create Tag Styles, which let you apply style rules to any HTML tag within a document. For example, you can apply instant styling to all of the <H2> tags throughout your document so that when you change the style definition, all text in your document tagged as H2 also changes.
1 Select some text on your page and choose Header 2 from the tool bar’s Paragraph Format pop-up menu . To create a text style sheet, click on the Style Sheet button at the top of the document window. A new style-sheet window opens and the style tool bar appears on top. Click the New Tag button on the tool bar.
2 In the CSS Selector Inspector, type H2 in the Name field. Type in the name of a valid HTML tag, but omit the usual angle brackets (< and >). Set the font, style, background, alignment, and other attributes for the new H2 style using the rest of the tabs in the CSS Selector Inspector. Note that as you change the attributes, the text you designated as H2 also changes. When you’re done, the formatting you selected appears under the Basics tab. Make Easy Rollover Buttons
One of the most useful and common DHTML effects is the button rollover. This simple animation makes a button change appearance when the user moves the mouse cursor over the button or clicks on it. What actually happens is that the browser swaps one version of the button image for another. The Adventure Tools site uses rollovers in the navigation bar on the main page. Here’s how.
1 First, make a button. Adobe’s ImageStyler and Macromedia’s Fireworks make creating rollover buttons a snap, much easier than with Adobe Photoshop. But no matter what you use, make sure the different images for the button’s various states (rollover, click on, and so forth) are exactly the same size and resolution. Otherwise, the browser will scale the second image to fit into the same space the first image took up, and the transition between the images will look awkward.
Also make sure your buttons are opaque GIFs or JPEGs, not transparent GIFs. If the image is transparent, the user will see one button on top of another, instead of one button replacing another.
2 Now open the page that will contain the button. In the CyberStudio Palette, click on the CyberObjects tab , and then drag the Button Image icon to the document window.
3 Name the button in the Button Inspector, and then click on the square marked Main. This is the image you’ll see when the cursor is not hovering over the button. Use the Browse button or Point & Shoot button to select the image.
4 Click on the box in the Button Inspector marked Over. Click on the check box next to the Image Path field, and then use Browse or Point & Shoot to select the image you’ll see when the cursor is over the button. If you like, you can repeat the process a third time with the Click box, which replaces the button image with a third image when the user clicks on the button.
5 Buttons are usually linked to other pages. Click on the Status & Link tab, click on the URL check box, and then use Browse or Point & Shoot to create the link to the new page. Because the navigation bar on this page is part of a frame set, you’ll need to set the target of the link. Choose Body from the pop-up menu next to Target.
TIP If you want a text message to show up in the status bar of the browser when the user rolls the cursor over a button, click on the Status check box and enter your message.