Building Interactive Web Pages Part 1 - Creating and Linking Web Pages

PhotoImpact offers a simple, straightforward, and creative approach to designing interactive Web pages.

There are different ways to go about designing a Web page in PhotoImpact. In this tutorial, you will learn how to create a three-page Web site complete with text, images, rollover buttons, as well as links between the Web pages. You can go through this tutorial from start to finish, or to go directly to a specific step, click one of the links below.

           Step One:    Design the Web Page Layout

           Step Two:    Insert Text

           Step Three: Create Rollover Buttons

           Step Four:   Create Hyperlinks

           Step Five:   Slice the Web Page

           Step Six:     Export to HTML

The finished Web site will include the following pages:

Click here to view the finished Web site.

Before you begin with the tutorial, create a folder to store all the downloaded files to be used in this tutorial. Click here to download the files.

The following six steps detail how Web1 can be created. You can apply the same process to create the other two Web pages. (Their project files are included in the provided sample project files).


Step One: Design the Web Page Layout

Begin with a new document. Click File: New - New Web Page. Enter a Title for the page in the New Web Page dialog box. The Web page title used in this example is Summertime Fun Vacation Tours. Leave the rest of the options in their default settings then click OK.

Use the Path Tools to create the header and footer bars, the side panel, and other elements of the Web page. For this tutorial, follow the illustration and guidelines below to create and position the elements.

Tip: Select View: Ruler and View: Guidelines & Grid - Guidelines to use the Ruler and Guidelines to align or position the elements on the page easier.

• To create the header, use the Path Drawing Tool and draw a rectangle. Click on Color in the Attribute Toolbar, then select two colors to create a Gradient Fill. (Use colors #006EA5 and #FFFFFF to create a blue to white gradient).


• To create the footer, simply duplicate the header then drag it to the lower part of the page.


• To create the divider, use the Path Drawing Tool. Select Color: Ulead Color Picker on the Attribute Toolbar, then enter a Hex color of #C2CE99 to give it a light brown color.