PI7 Web Page Edited with FrontPage

If you use FrontPage as an HTML editor, you'll be pleased to know that PI7-created web pages can be edited, albeit modestly, in FrontPage without falling apart. This capability lets you use PI7 web pages over and over again -- no more HTML Kleenex! You can see the original PI7-built page here, and the same page edited with FrontPage here.

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, Vertical Scrolling Text and Images, CSS Fixed Background Scrolling Text, Customizing a Web Page Template, Link Object Web Page, Remote Rollovers, Popup Menu and Basic Web Page tutorials.

To begin with, build your web page in PI7. I'm using the new soccer page and objects available in UFO format from Ulead's Free Goodies Page. You can see the page below (2/3 size), upon which I've placed my own text and a photo of my daughter in her soccer uniform.

Ulead goodies page

Choose Web, Web Properties and put in all of the information you want to appear in the meta tags, as well as specifying how to save images (GIF, JPG). From the Background tab, make sure you select a color for the background. I used the Eyedropper to select an orange color from the UFO's. This way when the web page is seen in a browser at greater than 600 X 400 resolution, there won't be a big bunch of white behind it.

specify a background color

When you've finished building the web page, check it out by selecting File, Preview in Browser. Your browser will open and you'll see the web page. Note that when you preview in your browser, the page doesn't scroll down very far, if at all. This UFO web page goodie is only 600 X 400 pixels, and that's exactly how big the final web page will be. You can see it here.

Close your browser and prepare to save the web page. If you think you might want to use this web page again and replace some of the images, right click while any object is active, choose Select All Objects, then drag to your EasyPalette. Save the entire web page in your Web Page Template Library for future use.

save objects to Web Template Library

Now choose File, Save for Web, As HTML. You'll get the Save As dialog box. Select a folder to which you want to save the web page. Name the file, select "Export to Microsoft FrontPage" and click Save.

select "export to microsoft frontpage"

PI7 will whir for a moment or two while it saves the HTML page to the designated folder. Note that it will be saved with the .html file extension, and that all of the images in the web page will be saved to an images subfolder.

While the web page and images are being saved, FrontPage will open for you automatically, with the PI7 web page as the current active document. The main thing to be careful of is to not move or remove any content or any of the sliced images on the page as they were created in PI7. Click your cursor anywhere below the images and you can start typing. The text you add to the web page can be as long or as short as you want, FrontPage will automatically adjust the length of the page and the background for you. For example, I've added a table below the images with the team's schedule. You can't add a nicely organized, centered table filled with HTML text like this one in PI7.

type in HTML text

I think by now you may recognize the advantages of adding your HTML text in FrontPage. As long as you keep entering HTML text and hitting Enter, the web page will become longer so that all of the text shows when you save the document. If you want to use this same page to announce next season's soccer schedule, it would be easy to open up the HTML page in FrontPage and edit the dates, times and opposing team names, saving yourself the trouble having to create the page all over again in PI7.

To preview in FrontPage, choose File, Preview in Browser. Your browser will open and this time you'll see scrollbars that let you scroll down to see all the HTML text you've added in FrontPage. You can see the longer version of the page here.

This tutorial uploaded 5/24/02

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



Back to Homepage