Once you start to add images to your page, you may run into some problems involving:
Project 2: HTML Basics
Problem: Path for images outside the web
When you insert an image, FrontPage must write a path in the SRC attribute of the IMG tag. It does not squawk if the image is not in the web.
FrontPage will use a relative path for images on the same disk as the web (like ../../images/books.gif) and an absolute path for images on other disks (like e:\multimedia\webdividers\bluerule.gif).
When you save the page, the Save Embedded Files dialog will prompt you to save any images that are not already in the web.
The default is to place the image in the folder with the page. If you want a different folder structure for your images, you will have to change the folder for each image.
If the image was in a subweb of your site and you chose Rename or Change Folder..., the image may be moved and the path in other pages that use the image will be changed to match. This may cause unexpected problems later.
Solution: Copy an image to the correct folder in the web before you insert it on a page.
Problem: Broken links after copy or publish
It is still possible to wind up with a path to an image that is not in your web. Once the page is uploaded to a web server or a different computer, that path will no longer work. Broken image!
Problem: When you save your page or the web to a new location, the path to the image breaks.
How could this happen?
Basically, you did not let FrontPage manage the files so it could change the names and paths. Here are some ways this can happen:
How the Source Path Works
What FrontPage writes as the path for the source SRC for an image depends on where the image is compared to the HTML page location.
../ means to go up one level in the folder tree.
%20 is a code for a space in the folder or file name. Many web servers cannot handle spaces in filenames, so spaces are not allowed in URLs. Browsers automatically insert this code when you type a space in a URL.
Problem: Using Image from Another Web Site
Some web page authors link directly to an image at another site instead of having a copy of the image on their own site. There are several things wrong with this:
Images on web pages are not free for you to use... unless the web site says they are. For copyrighted images you must get permission even to make a copy.
That said, the folks who actually get in trouble for this are usually claiming the images as their own or else making money from them in some way. People who create useful or beautiful images spend a lot of time and effort on them. Respect their work!
Problem: Converting & Resizing Images in Non-Web Formats
FrontPage can accept images in many formats which browsers cannot display. When you save the page, FrontPage converts the image to GIF or JPEG format. FrontPage 2002 is much better at converting images than previous versions. The image may still not look like the original, however. Resizing most images with the handles can make them jagged or fuzzy.
Problem: Image resized or converted by FrontPage does not look like original - smoothness, dimensions, colors, transparency.
Solution: Use a graphics program or a graphics converter to resize and change the original image's file format. There are more options in such a program.
Example: The image of a bird below was originally in wmf format with a transparent background. After FrontPage inserts it, the image is 76 x 76 pixels and has a white background. You resize the image to enlarge it to 200 x 200 on your page. The image is now jagged. When you save the page and FrontPage converts the image to transparent gif format, but you still have a jagged image.
The original wmf format allows the image to be enlarged and still have smooth edges. Resizing with software that is designed for this format would be the best choice. Second best is using a graphics program, like PaintShopPro, that gives you a choice of what resolution to use when opening the image. You can choose 200 x 200 and then save it as a transparent gif. The result has very lovely edges.
Problem: Making Image Backgrounds Transparent
Problem: Image has background color which you want to be transparent.
A transparent background, like the bird above, allows the page background to show through around the image. Only GIF images can have a transparent background, not JPEG.
Problem: Is Clipart Transparent?
Images from clip art collections may have transparent background or solid background, usually white. But it can be hard to tell which.
Is the lion image transparent or does it have a white background??
You have to try it out to find out.
Click on the lion in the illustration to the right.
~~ 1 Cor. 10:31 ...whatever you do, do it all for the glory of God. ~~