Building Interactive Web Pages Part 2 - Adding Script Effects

In part one of this tutorial, we showed an example of how to create a Web page for a Web site complete with text, images, and rollover buttons. We also showed how to link Web pages to one another as well as how to save them in HTML format.

This time, you will learn how to add script effects. These are ready-made Javascript effects that you can directly add to a Web page with no coding effort at all. In this second part of the tutorial, the following script effects will be covered:

       Adding a Pop-up Menu and Vertical Scroll Effect

       Adding Rollover Text, Swap Image Effect, and a Slideshow

Here, we will again use the web2.ufo and web3.ufo files that were used in part one of the tutorial, but this time we will make use of their associated images files when we add the effects. If you have not yet downloaded these files, click here to download them.

Adding a Pop-up Menu and Vertical Scroll Effect

A Pop-up menu provides easy-access links to subtopics, while a Vertical Scroll effect shows pictures or text continuously scrolling across a specific part of the Web page. In this section, you will learn how to add a Pop-up Menu and a Vertical Scroll script effect to a Web page.

Open web2.ufo for this tutorial. The effects will be applied to it as follows:

Step One: Slice the Web Page

We need to first slice the whole Web page. In the Tool Panel, select the Slice Tool then click Auto Slice on the Attribute Toolbar to automatically slice the Web page.

You will see the Standard Photos item sliced as an individual cell. This is where we will add a Pop-up Menu later.

Next, select the Outline Drawing Tool to create a rectangular frame wherein the Vertical Scroll effect will take place. Click Color: Ulead Color Picker on the Attribute Toolbar to open the Ulead Color Picker dialog box. Enter a Hex value of #BBBC86 for a beige color. Specify an outline width of 1 in the Tool Settings - Path panel.

Manually slice a cell inside the frame. Select the Slice Tool, then in the Attribute Toolbar, click Method then select Rectangle. Drag to create a rectangular slice inside the frame. This is the cell where we will add the Vertical Scroll effect later.