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

Step Four: Create Hyperlinks

Hyperlinks can be used to open a file or to link to other Web pages. Here, we will link each rollover button that we created to different Web pages.

Right-click the about us button, and select Properties to open the Object Properties dialog box. Click the Hyperlink tab, then enter about.html (which will be the HTML file name when we export the current page to HTML later) as the URL address and set Target to _self. Click OK when you have finished.

Repeat the same procedure to create hyperlinks for the portfolio, slideshow, and ulead.com buttons, entering portfolio.html, slideshow.html, and www.ulead.com as their URL addresses respectively.


Step Five: Slice the Web Page

Slicing a Web page divides it into cells. Each cell can be assigned its own hyperlink. A sliced Web page helps site visitors download and browse it faster since they do not need to wait for the entire page to load before they can begin reading the content. Select the Slice Tool on the Tool Panel, then click Auto Slice to let the program automatically slice the Web page into cells.

After slicing, notice that each rollover button is in a separate cell. Make sure to check that all Web objects included on the page such as rollovers and objects with hyperlinks are in separate cells and do not overlap with one another.

NOTE: Hyperlinks and script effects may not work properly if they overlap one another on the final generated HTML page.

Select File: Preview in Browser - Internet Explorer to test the Web page. Save this Web page project as Web1.ufo.


Step Six: Export to HTML

Finally, we are now ready to convert the project files to HTML. To export the current page (Web1.ufo) to HTML, select File: Save for Web - As HTML then enter about.html as the HTML file name.

Also convert the two provided Web project files, Web2.ufo and Web3.ufo, to HTML. Save them as portfolio.html and slideshow.html respectively. Make sure that you save them in the same directory as about.html.

At this point, you have a basic Web site with all three pages linked to one another. In part two of this tutorial, we will show how to add Javascript effects such as pop-up menus, slideshows, and more to the Web pages.

Click here to go to Building Interactive Web Pages Part 2 - Adding Script Effects.