All the images in your Pub file will now be 100% scale, because you used the
compress graphics feature. That is part of what that does. It resamples and
resizes the image that you inserted. In fact by compressing the images, it
usually results in fewer or no multiple copies of the original image. As an
experiment, open one of the images in your html files in Photoshop, and look
at the dpi. It is probably 96. My point is that you probably "degraded" your
images by using the compress graphics feature if the original image was not
inserted at 100%, and at 72 dpi. In most cases this is not that big of
difference, but it can be.
I usually don't bother mentioning the import image option, because it does
require more work. In your case, you are already used to working in
Photoshop, and know how to optimize your images. I also generally don't
suggest it unless you really need optimal images, and after I describe the
process you will probably understand why...it can be tedious, and the return
on your investment in time might not be worth it.
In your case you can experiment as you already have original button images
optimized, I would assume. I would not necessarily go back and redo them at
96 dpi, but you might do one just to see if it is worth the extra effort.
Remember that 96 dpi is going to be a larger file size that a 72 dpi, and
thus will take longer to load. You do want your pages to load quickly.
The process is fairly straight forward. You create a subfolder on your host
server, and upload the images that you want to import. I would probably
concentrate on the buttons or the banner, as you are going to repeat those
on each page, and you will gain a loading advantage. The browser is going to
remember that it downloaded the button before, and will just use the cached
version on the computer, rather than download it again. Or in other words,
the second time a button loads, it will be much faster than the first time.
Next insert a html code fragment box. Move it over to the button that you
are going to import. Use the snap to feature to move the sides of the code
fragment box to be exactly the same as the button image. Now move the button
image into the scratch area, for now...maybe delete later...and leave the
code fragment box where the image was. Then open your original optimized
button image in Photoshop, and note the exact dimensions of the image. The
code snippet that you will paste into the code fragment box will be
something along these lines:
<A HREF="
http://www.wintensive.net/index_files/Page367.htm"><IMG
SRC="
http://www.wintensive.net/images/button-home.png" ALT="Wintensive Home
Page" border="0" width="120" height="60"></A>
The
http://www.wintensive.net/index_files/Page367.htm part of the code
snippet is the link to Page367.htm on your site. I find it easiest to keep
things straight by writing absolute links. You might also decide to give
custom names to your pages so that the file name makes more sense, and the
links easier to write. For example Page367.htm is your Secure Backup Data
page, so you might call it "backup-data.htm", or BackupData.htm, or
Backup_Data.htm...just be sure to not have any spaces, and match upper and
lower case. To change the name of that page open you Pub doc, go to that
page, Tools > Web Page Options, and under Publish to the Web you will enter
the name you have chosen in the File Name field. (Note while you are in this
dialog, that this is also where you enter the keywords and description, and
title.) Now when you Publish to the Web, Publisher will name that
page...that file "BackupData.htm", which means the link to that page would
be changed to:
http://www.wintensive.net/index_files/BackupData.htm Now, if
you are importing just an image and don't need the hyperlink, you do not use
this part at all...you would just use:
<IMG SRC="
http://www.wintensive.net/images/button-home.png" ALT="Wintensive
Home Page" border="0" width="120" height="60"></A>
This part of the code snippet will tell the browser to look in the "images"
folder that you created on your server at the same directory level as the
index.htm file and the index_files folder, and where you have uploaded your
image file "button-home.png". The ALT is the ALT tag, which when you mouse
over the image will show as a tool tip, and will be read by the search
engines, and by the text readers for the visually impaired, and will be
viewed on the page while the image is loading. You can put any text you want
in that part. The width and height...the pixel width and height of the
button-home.png...remember telling you to note the dimensions? ;0)
Now when you a web page preview, provided that you did upload the button,
you will see that image appear...it will import. And that is about it. Like
I said, I think that if you are going to be repeating an image over and over
through your site, such as menu buttons, banners, etc, that importing them
makes sense. And if you want to see the image exactly as you produced it, by
bypassing the html coding engine in Publisher, then this also makes sense.
Some people don't like it because you don't have the visual clues for layout
on your Pub page, and of course it requires some skill and knowledge of how
to optimize and size the images in an image editor.
Just experiment a bit. Just create the images subfolder, and import images
to your web page through a webpage preview. Or Publish to the web, direct
the output to your computer where you can find it, and then browse to the
page that you want to test, right click, and open with FF, to see how it
will look in FF. You can even put an imported image right next to one that
you inserted, and see if the improved quality is worth the work.
Good luck...there was no brief way of describing this process...
DavidF
