Aside from links, HTML does not provide for much interactivity. Just like Web browsers have plug-ins that provide additional multimedia functionality, HTML itself has extensions that provide for a wide array of dynamic and interactive features.

There are two kinds of scripts or programs on the Web, client-side, which occur on the client side of a client-server system (e.g., JavaScript scripts are client-side because they are executed by your browser [the client]), or server-side which occur on the server side of a client-server system (e.g., CGI scripts are server-side applications because they run on the Web server). JavaScript is an extension that is included as part of an HTML document and CGI is a separate stand-alone extension.

EX LIBRIS CANDY REVIEW Rollovers To add a bit of splash to the site, we decided to add JavaScript rollovers to the icons in Candy Review site.

JavaScript scripting language was developed by Netscape to enable Web authors to design interactive sites. Although it shares many of the features and structures of the full Java language, it was developed independently. JavaScript can interact with HTML source code, enabling Web authors to spice up their sites with dynamic content. JavaScript is endorsed by a number of software companies and is an open language that anyone can use without purchasing a license. It is supported by recent browsers from Netscape and Microsoft, though Internet Explorer supports only a subset, which Microsoft calls Jscript.

You see JavaScript everywhere on the Web. On this site, the images at the top and the bottom of the page that change when you move your cursor over them — this effect is called a "rollover" — use JavaScript, as do the links in the Ex Libris Candy Review boxes that open pop-up windows. Other JavaScripts can control pull-down menus used for navigation or put the current date and time on a Web page or display randomized content everytime you reload a page. Because JavaScript is a client-side application, you can just cut and paste the code into your HTML document to work — there are a number of JavaScript libraries that offer free scripts along with directions on how to implement them.

Creating a rollover in Dreamweaver
A rollover is an image that changes when the cursor moves across the image. A rollover is actually two images: the primary image (the image displayed when the page first loads) and the rollover image (the image that appears when the cursor rolls over the primary image).

To create a rollover:

1. Place the cursor in the Document window where you want the rollover to appear.
2. Do one of the following:
   • Choose Window > Objects to open the Object palette and click the Rollover button.
   • Choose Insert > Rollover Image.
3. In the dialog box that appears, enter the following information:
   • Type the path and filename of the original image in the Original Image field, or browse to and select an image.
   • Type the path and filename of the rollover image in the Rollover Image field, or browse to and select an image.
   • To create link, replace the # sign in the Link field with a path and filename, or browse to and select a file.
   • To have Dreamweaver preload the images in the browser's cache, select the Preload Images option.
4. Click OK.

To test a rollover:

1. Choose File > Preview in Browser.
2. In the browser, roll the cursor over the primary image. The display should switch to the rollover image.

— Excerpted from Macromedia Dreamweaver Help Pages

CGI is an abbreviation of Common Gateway Interface, a specification for transferring information between a World Wide Web server and a CGI program. A CGI program is any program designed to accept and return data that conforms to the CGI specification. The program could be written in any programming language, including C, Perl, Java, or Visual Basic.

CGI programs are the most common way for Web servers to interact dynamically with users. Many HTML pages that contain forms, for example, use a CGI program to process the form's data once it's submitted. More than likely, anytime you've clicked on a "submit" button on a Web site, you've seen a CGI script in action. Email forms, postcard functions, message boards are all common implementations of CGI scripts. Because CGI is a server-side application, implementing a CGI script is not as easy as putting the code into your Web page — since the script is called off the server, you have to set permissions on files allowing users other than yourself to execute them. Most accounts for Web space will not allow you to set the necessary permissions to do this. There are a number of CGI libraries that offer remotely-hosted CGI's which you can use from your Web site without being required to set permissions.

Creating a form in Dreameaver
Forms let you collect information from users. Common uses for forms include surveys, order forms, and search interfaces.

To work, forms require two components: the HTML describing the form and either a server-side application or client-side script to process the information that the user enters into the form fields.

You can use Dreamweaver to create forms, to add objects to them, and (using behaviors) to validate information entered by the user. You must use a text editor to write a script or application to process the form data (Perl is the most common scripting language for form processing; C, Java, and even JavaScript are other options).

Your Dreamweaver forms can include standard objects such as text fields, buttons, image fields, checkboxes, radio buttons, list/menus, file fields, and hidden fields. Dreamweaver also supports input types that it doesn't recognize by displaying generic field properties in the Property inspector.

Use either the Insert > Form command or the Forms panel of the Object palette to create a form.

To create a form

1. Do one of the following:
   • Place the cursor where you want the form to appear and choose Insert > Form.
   • Place the cursor where you want the form to appear and click the Form button on the Forms panel of the Object palette.
   • Drag the Form button to the desired location on the page.

   If there is no visible result, check that View > Invisible Elements is on.

2. Select the form and set form properties in the Property inspector. Choose from the following options:
   • Form Name Assigns a name to the form. Naming a form makes it possible to control it with a scripting language, such as JavaScript or VBScript.
   • Action Identifies the server-side application that processes the form information, specified as a URL. Enter the path for the application or click the folder icon to locate the file.
   • Method Defines how the form data is handled.
3. In the Property inspector, choose one of the following methods to define how the form data is handled:
   • Get Appends form values to the URL and sends the server a GET request. Because URLs are limited to 8192 characters, don't use the GET method with long forms.
   • Post Sends the form values in the body of a message and sends the server a POST request.
   • Default Uses the browser default method (generally GET).

Once you add an object to a form, you can set its properties using the Property inspector.

To add an object to a form:

1. Do one of the following:
   • Place the cursor inside the form boundary and choose an object from the Insert > Form Object menu.
   • Place the cursor inside the form boundary and click an object button on the Forms panel of the Object palette.
   • Drag an object button to the desired location inside the form boundary.
2. Specify the properties for the object in the Property inspector (choose Window > Properties to display the Property inspector if it is not already open).
   • Text fields Accept any type of text, alphabetic or numeric. The entered text can be displayed as a single line, as multiple lines, or as bullets or asterisks (for password protection).
   • Buttons Perform standard tasks, such as submitting or resetting forms, or a custom function. You can enter a custom label for a button, or use one of the predefined labels.
   • Image fields Can be used in place of Submit buttons.
   • Checkboxes Allow multiple responses in a single group of options.
   • Radio buttons Represent exclusive choices. Selecting a button within a group deselects all others in the group.
   • List/menus List a set of values from which users can choose. The object can be a pop-up menu, in which values in the list appear only when you click the object (for a single response), or a list box that always displays the values in a scrolling list (for multiple responses).
   • File fields Let users browse to files on their hard drives and upload them as form data.
   • Hidden fields Let you store information (such as the recipient of form data or the subject of the form) that is not relevant to the user but which will be used by the application that processes the form.
3. Type a label or descriptive text, if desired, next to the object.

You can apply text formatting to form object labels.

— Excerpted from Macromedia Dreamweaver Help Pages

Dynamic HTML refers to new HTML extensions that will enable a Web page to react to user input without sending requests to the Web server. Microsoft and Netscape have submitted competing Dynamic HTML proposals to W3C, which is producing the final specification.

The main feature of dHTML is to provide for layers — content can be placed on a Web page in separate layers which can be animated or controlled by the user's input. However, only the most recent version of browsers can display pages written in dHTML and even so there are major compatibility issues. As it is now, the most common implementation of dHTML is in interactive menus such as at Powazek Productions.

Animating with dynamic HTML in Dreamweaver
Dynamic HTML, or DHTML, refers to the ability to change style or positioning properties with a scripting language. Timelines use dynamic HTML to change the properties of layers and images in a series of frames over time. Use timelines to create animations that do not require any ActiveX controls, plugins, or Java applets.

Timelines create animation by changing the position, size, visibility, and stacking order of a layer over time. Timelines are also useful for other actions that you want to occur after a page loads. For example, timelines can change the source file of an image, and they can execute behaviors at a particular time. The layer functions of timelines work only in 4.0 or later browsers.

Creating layers
Create layers using the insertion, drag and drop, or drawing technique. Once a layer is created, use the Layer palette to select it, nest it inside another layer, or change its stacking order. See Layer palette.

Default layer properties (tag, visibility, height and width, and so on) are specified in Layer preferences. To change the default settings, choose Edit > Preferences and select Layers. See Layer preferences.

By default, Dreamweaver creates layers with the DIV tag and inserts layer code at the cursor position, or when drawing layers, at the top of the page, just after the BODY tag. If you create a nested layer, Dreamweaver inserts the code inside the tag that defines the parent layer.

When creating layers, to prevent layers from overlapping each other, turn on the Prevent Overlaps option in the Layer palette or choose View > Prevent Layer Overlaps. See Preventing layer overlaps.

To create a layer, do one of the following:

• To insert a layer, place the cursor in the document window where you want to position the layer and then choose Insert > Layer.
• To drag and drop a layer, click the Layer button in the Object palette and drag the layer to the Document window. The layer is placed at the position where the mouse is released.
• To draw a layer, click the Layer button in the Object palette, release the mouse button, and then use the cursor to draw a layer in the Document window.

  In the Document window, a layer marker appears at the top left of the page in the Document window. If the layer marker isn't visible, choose View > Invisible Elements. See Invisible Elements preferences.

  In the Layer palette, the layer name appears in the Name column. As you create additional layers, layers are displayed as a stacked list÷the most recently created layer appears at the top of the list. See Changing the stacking order of layers.

Creating a timeline animation
Timelines create animation by changing the position, size, visibility, and stacking order of layers. Timelines can also change the source files of images.

Timelines can move only layers. To make images or text move, create a layer using the Layer tool on the Object palette and then insert images, text, or any other type of content in the layer. See Creating layers.

To create a timeline animation:

1. If you want to animate a layer, move the layer to where it should be when animation begins.
2. Choose Window > Timeline or click the Timeline button in the Launcher.
3. Select the layer or image you want to animate.

   Make sure you have selected the desired element. Click the layer marker or use the Layer palette to select a layer. When a layer is selected, handles appear around it.

   Clicking the layer itself places a blinking cursor inside the layer, but it does not select the layer.

4. Choose Modify > Add Object to Timeline or simply drag the selected object into the Timeline inspector.

   A bar appears in the first channel of the timeline. The name of the layer or image appears in the bar.

   If you are working with an image, the only property you can change is the image source file in the Property inspector. The remaining steps do not apply. See Changing image and layer properties with timelines.

5. Click the keyframe marker at the end of the bar.
6. Move the layer on the page to where it should be at the end of the animation.
7. If you want the layer to move in a curve, select its animation bar and Control-click (Windows) or Command-click (Macintosh) to add a keyframe at the cursor position, or click a frame in the middle of the animation bar and choose Add Keyframe from the shortcut menu.

   Repeat this step to define additional keyframes.

8. Hold down the Play button to preview the animation on the page.

   Repeat the procedure to add additional layers and images to the timeline and to create a more complex animation.

Timeline inspector
The Timeline inspector represents the properties of layers and images over time Choose Window > Timeline to open the Timeline inspector. See also Animating with dynamic HTML.

Right-click (Windows) or Control-click (Macintosh) the Timeline inspector to open a shortcut menu that includes all of the relevant commands.

• Playback head Shows which frame of the timeline is currently displayed on the page.
• Timeline pop-up menu Specifies which of the document's timelines are displayed in the Timeline inspector.
• Animation channels Display bars for animating layers and images.
• Animation bars Show the duration of each object. A single row can include multiple bars representing different objects. Different bars cannot control the same object in the same frame.
• Keyframes Are frames in a bar where you have specified properties (such as position) for the object. Dreamweaver calculates intermediate values for frames in between keyframes. Small circles mark keyframes.
• Behavior channel Is the channel for behaviors that should be executed at a particular frame in the timeline.
• Frame numbers Indicate the number of frames each bar occupies. The number between the Back and Play buttons is the current frame. You control the duration of animation by setting the total number of frames and the number of frames per second (fps). The default setting of 15 frames per second is a good average rate to use for most browsers running on common Windows and Macintosh systems. Faster rates may not improve performance. Browsers always play every frame of the animation, even if they cannot attain the specified frame rate on the user's system.
• Rewind Moves the playback head to the first frame in the timeline.
• Back Moves the playback head one frame to the left. Click Back and hold down the mouse button to play the timeline backwards.
• Play Moves the playback head one frame to the right. Click Play and hold down the mouse button to play the timeline continuously.
• Autoplay Makes a timeline begin playing automatically when the current page loads in a browser. Autoplay attaches a behavior to the page's BODY tag that executes the Play Timeline action when the page loads.
• Loop Makes the current timeline loop indefinitely while the page is open in a browser. Loop inserts the Go to Timeline Frame behavior in the Behavior channel after the last frame of the animation. Double-click the marker in this frame to edit the parameters for this behavior and change the number of loops.

— Excerpted from Macromedia Dreamweaver Help Pages

JavaScript

• How to Steal JavaScript
• WebCoder.com
• Website Abstraction
• The JavaScript Source
• JavaScript FAQ

• Try adding interactivity to your Web pages with a JavaScript rollover, a dHTML animation, or a remotely hosted CGI script.
• Continue building the Web pages in your site.

Flash overview