PI7 Customizing a Web Page Template

This tutorial, which works with PI7 and PI6,  was written in response to tons of email asking for help in customizing web page templates. Templates offer you a jump start on web page building. Their beauty is that all of the canned images, text and web components associated with a template can be edited easily. If you love a layout but hate the color or the navigation buttons, it's simple to edit or even replace them. This tutorial shows you how to edit a web page template for a fictitious art studio. It will give you practice at editing components in the Component Designer, editing HTML text and creating rollovers. You can see the finished web page here.

screen shot of web page template

If you are interested in other tutorials on using PI to build web pages, you may want to check out my Component Designer Web Page, Web Album, Template Library Slide Show, Image Map, Web Page Edited With FrontPage, Vertical Scrolling Text and Images, CSS Fixed Background Scrolling Text, Link Object Web Page, Remote Rollovers, Popup Menu and Basic Web Page tutorials.

To complete this tutorial you'll need this older PI6 web template. When you open it up in PI7, some of the objects will be active. Hit the space bar to deactivate all of the objects. This is a nice clean layout that is perfect for an art studio's web page, but it needs some work.

First, select the Pick or Standard Selection tool to click on the piano keys on the top left part of the template, then hit Delete to get rid of them. There's two groups of them. Over the two large photos, on the left where it says "Web," click on "Tools" (gray text) and hit Delete. On the right, where it says "Graphic," click on "Editor" (gray text) and hit Delete. You still have the large black text that says "Web" and "Tools." Right click on Graphic and choose Edit Text. Note that you don't need to select the Text tool to edit text!

When the Text Entry Box opens, select the default text, type in "Classes" (without quotes), then click OK to close the box. Select the "Graphic" text to make it active, then right click and select Edit Text. When the Text Entry Box opens, select the default text, type in "Gallery" (without quotes), and click OK to close the box. Your text looks like this now.

edited text

Next click on the text at the top of the page that says "PhotoImpact" and underneath it says "version 6.0." Right click and select Web Attributes, Split Rollover. Hit the space bar to deactivate. You'll notice that there are two versions of the text, one with "PhotoImpact" in white and "version 6.0" in black, and one with "PhotoImpact" in red and "version 6.0" in green. The red and green text comprise the rollover effect.

Right click on the white PhotoImpact text and choose Ungroup. That will disconnect "PhotoImpact" from "version 6.0." Select the black "version 6.0" text, right click and choose Edit Text. When the Text Entry Box opens, select and replace the default text with "Where Fine Art in South Florida Begins." Click OK to close the box. Drag the text into the little white box just under the white "PhotoImpact" text.

Right click on the second, colored "PhotoImpact" text and choose Ungroup, then hit the space bar. Click on the green "version 6.0" text and Delete it. You are left with only "PhotoImpact" in white and in red, and the small black text.

PhotoImpact text only left

Click on the white "PhotoImpact" text to select it, then right click and Edit Text. When the Text Entry Box opens, select and replace the default text with "Caribbean Studios" using white text, Arial font, Size=26. Now for the rollover text. The red is OK for the rollovers, but for this Gallery, let's use a more tropical color to enhance the stark black and white look. Click the red text to select it, then right click and Edit Text. When the Text Entry Box opens, change the default text to "Caribbean Studios" and edit to Arial font, Size=26. Click in the Color box and choose a bright orange, RGB=255, 255, 255. Click OK to close the box. Now you have white and orange text.

orange and white text

Select the white text, then Shift+Click the orange text, so both are selected at the same time. Choose Web, Rollover. When the Rollover box opens, click the down arrow under Default and select the white text. Click the down arrow for Mouseover and select the orange text. You can skip the Mousedown state of the rollover, but it's good to know that you could make another copy of this text in another color for Mousedown if you wanted to.

rollover dialog box

Roll your mouse over the text in the Preview window and you'll see a live example of what it will look like online. Note that at the bottom of the Rollover dialog box you can specify a URL, target frame, Alt text and Status bar message for this text, which is treated as an image. I'm not putting in anything in this tutorial. In the Optimizer section, choose GIF for the best results when this template is saved as a web page. Click OK to close the Rollover box. You'll only see the white "Caribbean Studios" text, but don't worry, the orange text is still there. Drag it up above the little white box that says "Where Fine Art in South Florida Begins."

rollover text looks like one object

Hit the space bar to deactivate the Rollover object. Next click on the little red and white box in the upper right corner that says "News." Right click on it and choose Edit Component Designer Object. This will open up the Component Designer. Select Bar and click on a bright orange color (arrow) to replace the red default.

change to orange

Click Triangle and change the triangle color to black. Click OK to close the Component Designer. Now the "News" button looks like this.

edited News button

To assign a URL to this News button, right click and choose Properties to open the Object Properties box. Let's pretend that we'll have a News page for Caribbean Studios. Click the Image Map tab. Fill in the information for the link like this and click OK.

assign URL to the object

Right click on the left text block, the one next to the photo on the left under "Classes," and choose Edit HTML Text Object. This will open the HTML Text Entry Box. This is very important to remember -- HTML text is different than the text you make with the Text tool! Text tool text is treated as an Image object, while HTML text is not. Edit the font to Georgia, but leave the size at the default of 8. Select the default text and replace it with:

All classes are taught by experienced artists with formal academic training in art and education. Beginner's, Intermediate and Advanced classes are offered in Watercolor, Acrylic and Oils.

Children under 16 will love our Kid Craft classes, which introduce them to fun and creative exercises aimed at nurturing their artistic expression.

It will look like this in the HTML Text Entry Box.

replace default text

Click OK to close the HTML Text Entry Box. Right click on the right text block, the one next to the photo on the right under "Gallery," and choose Edit HTML Text Object. This will open the HTML Text Entry Box. Edit the font to Georgia, but leave the size at the default of 8. Select the default text and replace it with:

Our exclusive Gallery showcases a local artist every month. You may be surprised at how many well-known and soon-to-be well-known artists have developed their talents right here in South Florida.

Click OK to close the HTML Text Entry Box. If necessary, resize the HTML text boxes by dragging on their control handles.

Now let's tackle the navigation buttons at the bottom of the template. Click on them to make them active, then right click, Edit Component Designer Object. When the Component Designer opens, Button Bar will be selected. From the white box with button labels, select Products, and just above it, in a smaller white box, select the default Products text, type "Schedule" and hit Enter. Enter URL, Alt text and Status bar text as shown below.

replace Products with Schedule

Select Downloads, then in the little box above it highlight (select) the default text and replace it with "Supplies." Add a URL, Alt text and Status bar text. Repeat for the rest of the buttons, replacing default button text so that they read "Instructors," "Gallery" and "Contact." When you get to "Contact," make an email link by typing "mailto:contact@caribbeanstudios.com" in the URL box.

replace default text for all buttons

Let's change the lines on the button bar to match the black and white and orange color scheme. Select Lines under Button Bar. Click on a bright orange color to replace the black lines with orange. Click OK to apply these edits to the Component Designer buttons.

edited buttons

Now the only thing you have left to do is to replace the two photos with faux paintings. Select one of the big rectangular image objects and choose Edit, Fill. From the File tab, click Browse and select an image. Make sure you select the "Fit the image" option. Remember, this is a tall, narrow rectangle, so choose a photo with the same height to width ratio, or your photo will be distorted.

fill with a photo

Click OK to fill with the photo. Choose Effect, Creative, Painting, and apply one of the templates to mimic the look of a painting. I selected Template 23 and edited the Fineness value down to 120 to suit this smaller image. Repeat these steps to select and fill the other large rectangular image object with a photo. I applied the Effect, Natural Painting, Watercolor effect to the second photo.

Let's assign web attributes to this web page before saving it. Choose Web, Web Properties. When the Web Properties dialog box opens, click each tab in turn and fill in the desired information or make the most appropriate choices. For example, here is the information for the General tab.

Web Properties dialog box

Click the Background tab next. I chose "Generate background" and "Color" so that PI will generate a background tile and make the default background color white. Note that you can change the background color or use an image file for the background if you wish to do so.

Background tab

Click the Image File tab to select Image Optimizer save options. I've selected GIF for these images because they are all simple colors, and GIF definitely results in more clear text images.

image save options

Click the Slice and HTML options to see what they offer. I usually go with the defaults on these tabs, but you should know that you can edit them if you want to do so.

The last step is to select the Slice tool. In the Attributes toolbar, select Auto Slice. You'll get a little alert box that says "The cell will discard any script effects if new boundaries do not match old boundaries." This is just a caution that if you'd already sliced before and had script effects added to the page, the new slices might invalidate these effects. Don't worry about it for this tutorial, just click OK.

You can see how the page is going to look when it's online by choosing File, Preview in Browser. If you get any error messages that an object is overlapping another object, make note of the object number and cancel the preview. Select the object that is causing the problem and resize or reposition it as needed. Select the Slice tool and do Auto Slice again.  Then choose File, Preview in Browser again. Don't forget to admire the cool rollover on the "Caribbean Studios" text! Close the browser when you're done looking at your web page.

Finally, let's save the template as a web page. One of the most frequent mistakes people make in saving web pages is that they save them incorrectly. To save a web page, you must choose File, Save for Web, As HTML. If you just choose File, Save As, the whole thing will be saved as a giant image. Not good! So choose File, Save for Web, as HTML and your entire page will be saved with the .html extension. Note that during the save, an images subfolder will be created and all of the images on the web page will be saved to that folder. Be sure that when you upload your files to your server, you upload the images to an images folder. If the file structure on your server does not mirror that of your hard drive exactly, your images won't show up online.

Now that you have some experience editing a web page template, you should be able to use all of the templates that ship with PI7. If you have templates from PI6, you can use them too. If you get bored with the canned templates, try making your own or check out Set City's web page template CD, which has 50 killer UFO web page templates that work with PI6 and PI7.

View web page built from a template in this tutorial.

This tutorial uploaded 2/01/02

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



Back to Homepage