page title button

Using only PhotoImpact we'll design and save a web page with buttons that link to other places as well as embedded links in the text of the page. This isn't as complicated as it sounds. PI does all the work, you do the fun part...the Designing.

What you will need:

The web set you created in Project 94 of the Beginner's Workshop.
Or a basic Web Set including a background.

Let's begin...
  • Go to File/New/New Web Page
    example
  • This looks a bit different from the New Image screen and there are some important things we need to do here at the beginning before clicking OK.
  • Under Page Settings is where you enter the Title of your Page. The title can be anything you like, from "My First Web Page" to "HOME on the WEB". For the purposes of this tutorial let's use My Web Page
    example
  • Now look down to Page size and click on that button on the right of Standard to see a selection of choices. We'll be using 800x600 near the bottom of the list.
    example
  • Click to put a check in Generate Background.
    example
  • Now go down where it says File and click on the Icon of the Folder. This will allow you to browse and find your Background created in Project 94. When you find it click the open button and you should then see it appear in the box to the right that shows what your background looks like.
    example
    Now click on the Image File Tab.
  • Be sure that "Put image files in sub folder" and "Copy background image to sub folder" are both checked.
    example
  • And now finally you can click the OK button. Your new web page will open in your workspace displaying the background you created for it. Notice that it is not being displayed at full size. Because of this your background might look a little funny. But when it's viewed full sized it will look normal. PhotoImpact automatically reduces the size to make it fit in the available workspace to allow you to have more room to work.
    example

Now for the fun part, putting the web set to work on your new page, link the buttons and add some text.
  • Open the web components you created in Project 94. You should have a Banner, and three buttons--Home, Email and Guestbook.
  • Drag each one to your web page and place them like so. Use the Alignment tools on the Attributes tool bar to even them up in a horizontal line and space them evenly apart.
    example
  • Click on the Home button to make it active and then right click it and choose Properties from the menu. It's the last choice at the bottom.
    example
  • When the control box opens, click on the Image Map button so you can add a URL so that visitors to your page can click on this button to be taken to another page.
    example
  • The area I have highlighted here in blue, is where you will enter the URL of the page the button will link to. For this first button, Home, we will add the URL to PIRC. So type in http://pircnet.com. Then click the OK button. You won't notice any changes to your button, it will look just as it did before. What you have just done is make that button clickable. If you preview your page and move your mouse over the button your status bar will display the URL for PIRC. The same will be true when your page has been published to the Web. You will NOT see this change in PI.
  • Repeat this last step for each of the other two buttons with the following changes. Add the url for COREL to the Guestbook button. http://www.corel.com/servlet/Satellite/us/en/Product/1192197450406
  • On the email button you will need to type mailto: followed by your own email address. Be certain you don't include any spaces.

Now we need some text...
  • We could just add text with the text tool, but that would be difficult due to the size of the page.  So, instead we'll use the HTML Text Tool.
    Click on WEB/HTML Text Object...
    example
  • This is the text entry area. Type something for your visitors to read. You might tell them a little about you or about the workshop, for example. Finish your text by mentioning the PhotoImpact International Bulletin Board. But do not click OK just yet.
    example
  • We need to create a link to the bulletin board by turning a word into a link. What this will do is make that word or words clickable.
  • Highlight the words bulletin board with your mouse.
  • now look for this icon and click on it.
    example
  • In the area highlighted in Blue, type in the URL for the bulletin board... http://photoimpact-international.com/forum/
  • Now click OK to close the text entry. Your text will appear with a marquee around it. If you can't read it because of color right click on it and choose Edit. Then change the color to something complimentary to your page's background.
    example

Let's stop here and take a good look at the text box.

  • First notice that the Transformation tool has become active. Handles have appeared on the corners and sides of the marquee. This will allow you to resize the text box at will. You can change the size with the lock closed or open. The size of the text doesn't change, only the shape of the box containing it. The words rearrange themselves to fit the new shape.
  • Next notice that the words Bulletin Board aren't the same color as the rest of the text and are underlined. That's because you turned them into an active link to our Bulletin board.
  • Change the shape of your text box until you like the look of it. Be certain that you can always see all 4 of the edges of the box, especially the bottom. You don't want them to extend beyond the edges of your page. Use the transformation tool unlocked to bring the bottom selection line right up to the bottom of your text you don't want any empty space there. Also make sure it doesn't overlap any of your buttons.
    example
  • Now you are ready to save your Web page. But, saving this time will be a little bit different than just optimizing and saving an image. We are going to save it two times. First we will save it as a .UFO. This is so that the page can be opened again in PI and edited. So, go to FILE/Save As and choose the UFO as the file type. Name it mywebpage.
  • Next we will save it again as HTML. This time go to FILE/Save for Web/as HTML. You should see mywebpage, or the name you chose for your UFO, already in the space where the filename goes. But for posting on the web we need to name it index. Be sure you do not skip this step, and do NOT capitalize index. When saved it will have the file extension '.html' behind it. Also in the process of saving as html, a new folder entitled 'images' will be created and all the images that make up your page will automatically be saved inside it.
    example

Congratulations, you now have completed a web page in PhotoImpact.
  • Yours might look something like mine below, reduced in size by 50%. You can see all the elements, the banner, buttons text and a text link. Click on it to see the real thing.
    example