page title button

OK... You just created a great web page, now how do you get it to the Internet so people can come and see it...? Read on....

What you will need:

PhotoImpact 7 or later
The Files saved from the Create A Basic Web Page Tutorial
File Zilla or any FTP Program you may already have.

Let's begin...

If you have reached this project in the Beginners' Workshop, you have already installed and learned to use FileZilla, so I am not going into great detail about how to use it here. But we are going to do a few different things with it than you may have done in the past.

  • Since we can't have two files named the same we may need to do some clean up before you can publish your page.
  • Log-in to your web space for the Workshop.
  • On the web side look for the file named index.html. It was placed there for you when your space was allotted. Now that you have created your own page in the last project it's no longer needed.
  • Delete this file. If you have already deleted it at some point in the past you can just continue to the next step.
  • Now, look on your computer's side of FileZilla and find the folder where you saved your web page in the last project. There should be a file named index.html and a folder named images
  • Grab the images folder, drag it over to your web space and drop it. You will notice that the folder will open and each file will transfer to your web space.
  • Next grab the index.html file and drag it to the web space.
    Do NOT place it inside the images folder.

Ok now how do you get to see your page...?

  • Open your browser and type in the address (URL) of your web space. It should be something like.. It's the same information you use to post images on the Bulletin Board minus the filename of the image.
  • Click the Go Button or just hit the enter key. If you haven't made any errors your page should appear.
  • If your page didn't appear go down to the Errors section below.
  • Check to see that your linked buttons and text all work correctly by clicking on each one. If they do, you are done! Copy the URL from your browser to include in your post to the Group and go get your Grad hat!

Errors and correcting them.

Sometimes despite the best efforts mistakes are made. This section deals with possible errors and how to correct them.

  • Why didn't your page didn't appear?
  • Is there a typo in your address? The Internet isn't forgiving of errors in spelling. Also there can't be spaces or differences in case, as Capitol and lower case letters. Whatever you named your page, is what you have to type to get it to work on the Internet. That goes for the address of your web space as well. There are no capital letters or spaces in the address of your web space.
  • Did you remember the slash before you typed index.html
  • Why don't the buttons work or the linked text?
  • Click on the non-working button and see what it says in the address line of your browser.
  • Look for a spelling error in that address.
  • Did you click on the button and nothing at all happened?

These are errors that need to be corrected on the page back in PhotoImpact.

  • Open the UFO file that you saved at the end of Project 95 so that you can edit it. You can't open the HTML file.
  • Press the enter key to deselect all the objects, then right click on the button with the error and choose Properties. Now correct the address and click the OK button.
  • To correct an error in the text link, right click on the text box and choose Edit. Then highlight the words underlined and click the Link Icon as you did when creating the text box. Correct the address and click OK.
  • To be certain that you the errors are corrected go to FILE/Preview in Browser and check them again. If they work you can save again as UFO and for the web as HTML following the directions below.
  • Save again, but this time as you save for the web as HTML, you will need to delete the old files before you click OK. Right click on the Images Folder and delete it, and then click on index.html . You will be asked if you want to replace the existing file. Say YES, then proceed to step 5 below to upload your page again
  • Did you run into a rendering error when you tried to "preview your page in browser"?
  • This error is caused when you move something out of place while editing the page. Perhaps you rearranged your buttons, or maybe you added more text causing the text box to change shape.
  • Find and click on the Slice tool example in your Tool Bar. It looks like an artist's chisel and is at the bottom of your tool bar.
  • Now look at your Attributes tool bar and click on Auto slice example
  • Red lines will appear inside your web page and it will look something like this...
  • Those red lines will cut your page into individual image objects. Normally you wouldn't see this because it happens automatically when you save your page as HTML.
    Think of it like a map, or better a puzzle. Each red line outlines a piece of it. The HTML code contains a Key that puts it all back together so it can be viewed correctly on the Internet.
  • Look for areas of overlap. Each of your buttons should be surrounded by it's own red box, as should the banner and the text. Move anything that overlaps and click the auto-slice button again until nothing overlaps. Don't forget about that text box. Can you see the red line around all four sides of it. If you can't use the transform tool to resize the box until it just fits the text area. If there is space underneath the text before you see the bottom line it will be fine as long as you can see all the edges and nothing overlaps.
  • Click on that Auto-slice button one last time and then preview in your browser again. If you still get the same error, note the numbers of the objects that overlap.
  • Open the Layer manager and use it to identify the objects in conflict. Then move them so that nothing overlaps. When all the conflicts are resolved, save again as both UFO and HTML following the instructions in the last part of Step 2.
  • Now all you need do is upload it again in FileZilla.
  • Before you upload the new files, you need to delete the ones already there on the Web side.
  • Delete both the image.html file and the images folder.
  • Then drag the new ones over to the web side to complete the process.
  • Finally open your Browser and type in your URL.

Congratulations on your first web page.

Copyright © Merlene Guldager

     This document and the images contained therein may not be translated, duplicated, redistributed or otherwise appropriated.