PI6 Halloween Page Template

Halloween Page TemplatePage templates are a quick and easy way to create an attractive web page right in the PI6 work space. I'll show you how to edit a page template to suit your own color preferences and add your own images. If you want to use my little ghost animation, right click and save it to your own hard drive, or learn how to make your own

Ulead offers new web page templates and other goodies every month. This tutorial is based on one of the Halloween page templates. If you haven't already downloaded the October page templates, go get them and drag the thumbnail for Web Page 4 into the work space.

select Web Page 4 template

All of the objects on the page will be active at the same time. Remember that all of these objects can be edited to suit your needs. With the Pick or Selection tool, click in the base image to deactivate them. 

Click on the two rectangular images on the left side of the page and delete them. We're going to replace the images. Right click on the pumpkin image below. 

pumpkin image

Hit Shift+L to access the Open dialog box. When it opens, browse your hard drive for the pumpkin image, select it and click Open. It will open as an object right on your web page image. Position it where the first image used to be, just under the banner and to the left of the HTML text box.

position pumpkin on page

Click on the banner at the top of the page to make it active. Right click on the banner and choose "Edit Component" (or just hit Shift+E). When the Component Designer dialog box opens, click on Title. Highlight the default ULEAD text and replace it with HAPPY HALLOWEEN! Change the Font if you want to. Since this is going to be an image object, it doesn't matter which font you use. I used the Toxica font. Click the Color tab and change the font color to bright orange (RGB=255, 153, 0). Click on Line and change the line color to bright green. Now your banner looks like this.

edited banner

Let's edit the three buttons in the lower right corner next. Click on the Home button to make it active. Right click and Ungroup. Click in the base image to deactivate the objects. With the Text tool, click on the Home text. Change the color to the same bright orange you used on the banner. With the Pick or Selection tool, Shift+Click the other objects making up the Home button so they are all selected again. Right click and Merge as Single Object. 

While the home button is still active, right click and choose Properties. When the Object Properties box opens, click the Hyperlink tab and provide the URL, Alt text, target frame and Status bar message. You can select a different Shape if you like, but I'm leaving the default of Rectangular. Click OK.

Object Properties box, hyperlink info 

Right click on the Products button and Ungroup. Click in the base image to deactivate the objects. With the Text tool, click on the Products text, then right click and choose Edit Text. When the Text Entry box opens, select Products and replace it with your own text, e.g., Gallery. Change the text color to bright orange. Click OK to close the Text Entry box. With the Pick or Selection tool, Shift+Click the other objects making up the button, then right click and choose Merge as Single Object. Right click, choose Properties, and when the Object Properties box opens, supply the Hyperlink information for this button. Repeat these steps for the Downloads button, replacing it with your own text, e.g., Links.

Now your buttons look like this:

edited buttons

With the Pick or Selection tool, click on the HTML text box (it holds the default text) to make it active, then right click and choose Edit HTML Text (Shift+E). Doing so opens the HTML Text Entry Box. 

***Important note: The HTML Text Entry Box is completely different than the Text tool's Text Entry Box, which makes text objects that you'll eventually turn into images. Anything you put in the HTML Text Entry Box creates HTML text that goes on the web page you're building. So be sure to use a standard font that visitors are likely to have installed already on their computers.***

Delete the default text and replace it with your own brief Halloween greeting. I bumped the font size up, changed the color to bright orange and centered the text.

HTML Text Entry Box

Click OK to close the dialog box. Switch to the Transform tool. Drag on the control handles to resize the HTML Text Box so it looks like this. You need to leave lots of room at the bottom of the page for the animation.

resize HTML text box

Finally we're ready to add the animated GIF to the page. Hit Shift+L to access the Open dialog box. Browse your hard drive for the animated ghost image, select it and click Open. The animation will open as an object on the web page you're building. Position it so that it's below the HTML Text.  Make sure that it doesn't overlap any other images.

add animated GIF to web page

Now we're ready to assign Web properties to the page we've just built. Hit Shift+Enter or choose web, HTML Properties to open the HTML Properties dialog box. From the General tab, enter the appropriate information. 

HTML Properties box

If you click the Background tab, you'll see the background selected for the page is gray. You could change the page background color, but I'm sticking with the gray because it compliments the other colors well. Click the File Format tab and you'll see that "Simple text and shapes" and "Image objects" will be saved as GIF Optimized 256 images (these options can be changed, depending on what kind of images are on the page you're saving).

Click on the Options tab to see how images and their links will be treated.

Options tab

Note that PI6 will generate the HTML code for the background, that the objects will be saved as separate images, relative URL's will be generated for associated images, and that all images will be saved to an images subfolder. If you don't have an images folder, PI will create one and place the images in it for you. 

Click OK to close the HTML Properties dialog box. Now you're ready to save your web page and all of the images, in one fell swoop! But listen up because the process of saving a web page is quite different than saving an image. Choose File, Save for Web, As HTML (or Ctrl+Alt+S). This will open the Save As dialog box. Give your web page a name and save it to your web site folder on your local computer. 

If you've made any mistakes, like overlapping images, PI6 is a courteous little guy and it will tell you what you did wrong, in detail, in a special dialog box. Go back and fix what's wrong and try again. If images in your web page have already been saved before to the images folder, you'll get an alert box asking you if you want to rename the images, overwrite them, etc. Choose an appropriate option and you're done. Now you can preview your web page in your browser. 

Now all you have to do is upload your HTML pages and your images to your web server. Be sure to upload the images to an images folder, and don't forget to upload the space.gif file -- you'll get broken images if you forget it. The space.gif file "fills in the blanks" in the web page's table layout, keeping things lined up properly.

Want to know an even faster way to get your web page online? Instead of doing, File, Save for Web, As HTML, you can choose File, Export, Post to Web. Doing so will open the Post to Web dialog box. Make sure "HTML Web Page" is selected and give the file a name. 

Post to Web dialog box

Click OK and the Web Publishing Wizard will open. Simply supply the Wizard with the requested information and click Next to go on to the next step. You will be asked to provide your web site's URL, FTP username and password, etc. and the Wizard will automatically log on to the internet and upload all of your files, including your images, which will go into an images folder. Could this get any easier? 

This tutorial uploaded 10/13/00

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

 

 

Contact
Back to Homepage