PI8 Deconstructing a Web Page Template

web page template

This tutorial provides you with an original web page template (screen shot above) featuring a little faery on the left, and rollover buttons on the right. I'll show you how to deconstruct the parts of the template so you can edit the rollovers to suit your own needs, and how to re-slice the page to accommodate your edits. This technique can be applied to editing any web page template, including those in your EasyPalette Template Library.

Get the template here, and view the finished web page with rollovers here. Note that I've used the lovely Harry Potter inspirted font, Lumos, in this template. If you want to use it too, you can get it here. If you don't use Lumos, PI will replace it with a default font or you can use another font that you like.

After you unzip the UFO file for the template, open it up in the work space. Display the Layer Manager, and you'll see that there are 25 objects on the web page. Note that the small flowers (resized stamps) are separate objects. If you don't like them, you can delete or replace them later.

It's always easier to select objects by naming them in the Layer Manager. Accordingly, I've named the objects (e.g., faery, flower1, home, etc.) to make it easier to select and edit them. Clicking on any Layer Manager thumbnail selects the corresponding object in the web page, and vice versa.

layer manager

Minimize the Layer Manager for now. Select the Slice tool from the Tool Panel. You'll see that this web page template has already been sliced.

sliced web page

Up in the Attributes toolbar, select the Pick tool. This is not the regular Pick tool. This Pick (circled below) is only available when the Slice tool is selected. If the Slice Panel is not open, click Panel in the Attributes toolbar to open it. Click the "Your Site Name" object. In the Slice Panel, click the Optimizer tab. You'll see that the object is set to be saved as a GIF, instead of PI's default of a Progressive JPG. To my eye, text objects look crisper and sharper when saved as GIF's.

optimizer tab

In fact, I've set this template to save the rollover buttons as GIF's also. The only object that I've set to save as a 90% JPG is the faery object. Because of its wide range of colors, the faery needs to be saved as a JPG. However, it's important to know that you can edit the Optimizer defaults if you wish to do so.

Choose Web, Web Properties to edit the web page's title, author, keywords, description and other important information. If you're not sure about Web Properties, check out this PI8 Basic.

Now it's time to edit the objects in the template. Obviously you don't want the header at the top of the page to say "Your Site Name." Choose the regular Pick tool from the Tool Panel and click on the header text. Alternatively, click on the header thumbnail in the Layer Manager. Right click and Edit Text, then right click Select All. Notice that the Text tool is selected automatically. Type in your site's name to replace the highlighted default text. Click anywhere when you're done typing. Hit Enter to deselect the new header text.

new header text

Select the copyright text at the bottom of the page and edit the text the same way. Since the Lumos font doesn't have the © symbol, I've formatted it in Arial. Right click and choose Edit Text. Highlight and replace "Your Name" with your own name. Don't forget to click to finish, then hit Enter to deactivate the object. I have a long name, so I had to make the font size smaller and reposition the flower on the right side of the text.

edited copyright object

Use the Pick tool to select the Home button. I know you probably wouldn't need a Home button on your index page, but I've made one just in case. If you don't want to keep it, hit the Delete key to get rid of it or any other buttons you don't need.

There are two ways to edit the rollover buttons to customize the URL, Alt text and Status bar text. The easiest way is to use Object Properties. With the Pick tool, right click on the Photos button and choose Properties. This will open the Object Properties dialog box. Click the Hyperlink tab to edit the URL, Alt text and Status bar text assigned to this rollover button. For example, if your Photos are on a page called pictures.htm, select the default text (photos.htm) and replace it with pictures.htm.

edit with object properties

Repeat these steps to edit the rest of the rollover buttons except the Email button. We'll use a different technique to edit this one via the Edit Rollover Object command.

Click on the Email button to make it active. Even though you only see one object, two text objects make up the rollover. One is light pink and the other (rollover) is a raspberry color. To edit the Email button so that clicking it will send an email to you, right click on it and choose Edit Rollover Object. Doing so will open the Rollover dialog box. There is no "Mousedown" state for this button, only a Default (pink color) and Mouseover (raspberry color). Roll your mouse over the button in the Preview window and you'll see it change color. If you wanted to, you could change the default to raspberry and the rollover to pink by clicking the down arrows and selecting the desired color.

You'll also see that a URL, Alt text and Status bar text have been assigned to this rollover button. In the URL box, highlight the default text and replace it with mailto: and your own email address.

replace URL for email

Click OK to close the Rollover dialog box. All of the buttons should be edited now. Depending on how many buttons you're using, use the Pick tool to put them in one or two columns. Select all the buttons in a column, then right click, Align, Left to line them up. To distribute them evenly, while the column of buttons is active, right click, Align, Space Evenly. When the dialog box opens, space them Vertically.

space evenly

Suppose you want a button that I haven't already provided? For example, you might want a button which says "Store." With the Pick tool, right click on any button and Duplicate. While the duplicate button is active, right click and choose Web Attributes, Split Rollover. This will split the rollover back into two separate text objects. Once you do this, the URL, Alt text and Status bar text assigned to the button are gone.

With the Pick tool, click on one of the text objects, then right click, Edit Text. Right click, Select All. While the text is highlighted, type in the new button name, e.g., Store. Click to finish. Select and edit the other text object so that it also says Store. Use the Pick tool to select one Store text object, then Shift+Click the second Store text object, so that both are selected at the same time.

select both objects

Choose Web, Rollover (Shift+R) to open the Rollover dialog box. Assign a URL, Alt text and Status bar text to the new Store button. Make sure that the default is the pink text and the Mouseover is the raspberry text, or your rollover button will not match the others.

store button info

Click OK to close the Rollover box. Now you've got an original Store button based on the other rollover buttons.

new button added

If you need a flower next to this button so that it matches the others, right click on a flower and Duplicate. Drag the duplicate next to the Store button. Line up all of your buttons and flowers using the Align and Space Evenly commands.

The last step before saving is to reslice the page. Select the Slice tool. In the Attributes toolbar, choose Erase All. If you don't Erase All you will have one big mess on your hands after editing the web page template. It is essential that you do so. This will get rid of all of the previous slice lines.

erase all slice lines

In the Attributes toolbar, choose Auto Slice. That will create new slice lines around the edited objects. Not erasing old slice lines before creating new ones is the single biggest problem that new PI web page builders experience, so don't let it happen to you.

To see how the page will look in a browser, choose File, Preview in Browser. Roll your mouse over the buttons to make sure they all work. If by any chance you get an error message that objects are overlapping when you try to Preview, close the dialog box. Reposition your objects so that they do not overlap. Erase all slice lines and do Auto Slice again.

If everything looks good, it's time to save your web page. But first, do yourself a favor and save the entire template as a UFO. That way you'll be able to open and edit it for future use, if necessary. To save as a web page document, choose File, Save for Web, As HTML. Save the page to a folder on your hard drive. If you don't already have one, PI8 will automatically create an images subfolder, to which it will save all of the images on the page.

Remember that when you upload the page to your server online, the file structure on your server must mirror the structure on your computer exactly. Pay attention to the images subfolder. Keep in mind that PI created web pages are placed into tables that are "glued" together with a clear space.GIF image. It is very important that you upload space.GIF into your images folder. If you don't, you web page will not display properly.

This tutorial uploaded 8/22/03

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage