Back to Learning Center
Ulead PhotoImpact Tutorials
Tutorial Index | Page 1 2 3 4

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

  • To create the main panel, use the Outline Drawing Tool and draw a rectangle. Specify 0 Hairline for Width in the Outline tab in the Tool Settings - Path panel. Apply the same color as the divider to the main panel.

  • To create the side panel, use the Path Drawing Tool and draw a rectangle, then from the Material Gallery of the EasyPalette, apply the P02 texture to the rectangle. Apply the color #2B61D2 using the Ulead Color Picker to give it a dark blue color.

We will now add the logo, side panel image, and main image to the page.
  • Open the Logo.ufo file, then select Object: Select All Objects. Copy and paste the selected objects to the page, and position them on the header bar.

  • In the Shape Library of the EasyPalette, locate Airplane then drag it to the side panel.

  • For the main image, select Object: Insert Image Object - From File, then locate Beach.jpg and click Open. Position the image as shown below.

Step Two: Insert Text

Use the HTML Text Object command to insert standard paragraph formatted text on your Web page. HTML text can be selected, copied, and pasted from Web browsers to any text editor software.

To create an HTML text object, select Web: HTML Text Object. This opens the HTML Text Entry Box window where you can enter text and specify its properties.

Entering HTML text Three HTML text objects are added:
Main panel text: Verdana, 2 (10 pt), color=#5C5C5C
Left panel text: Verdana, 2 (10 pt), white
Footer text: Verdana, 2 (10 pt), black

Tip: To modify the size of the HTML text box, use the Transform Tool in the Tool Panel and adjust the handles. To modify the HTML text content, right-click the text you want to edit then select Edit HTML Text Object.

Text such as large headings on a Web page (see image below) can be created as graphical text by using the Text Tool. This type of text will only be editable in your Web project (.UFO) file and will be converted to an image when you export to HTML.

 

Three graphic text objects are added:
"Need a vacation?": Trebuchet, 32 pt., white
"About Us" on Left panel: Cataneo, 48 pt.
"ABOUT US..." on Main panel: Arial, 18 pt., color=#666667


Tutorial Index | Page 1 2 3 4