It sounds like you have found a good solution for fixing some of the word
art images, by converting to jpgs and changing the background color.
There is no best way to do all this, but you need to understand a bit about
how the Publisher html coding engine works. Publisher generates two sets of
code..one for IE and one for other browsers. What you have noticed is that
word art looks good in IE, and lousy in FF. Word art is converted to a .wmz
file which will render as a good image in IE, but can't be viewed in FF. So
Publisher makes a low resolution .gif file for FF. If you Publish to the Web
and direct your output to your hard drive, you can open the index_files
folder and study the image files and see this. The coding engine will also
make copies of images that are inserted into your pages that aren't at 100%
size...unless you compress those images before you publish. The compression
is actually resampling and resizing the images...at 96 dpi...the default
output for Pub web files.
With that background in mind, the question then becomes how to deal with the
word art. You can right click the word art on your Pub page and save as an
image, in various formats. GIF and PNG files are the only two formats that
support transparent backgrounds. Unfortunately the quality of the GIF file
is poor, and the PNG file is saved at 150 dpi...and thus will be resampled
to 96 dpi or copied as a gif, if you just reinsert that image....and you
still don't get good quality images in FF. Saving as a JPG, you loose the
transparency, though the quality is good. You might be able to adjust that
as you discovered. You can experiment and probably get different results
than I did, but the bottom line was that just inserting the image into the
page usually still ended up with poor images in FF.
Now as I said, the easiest solution for you is to just not use word art, but
if you must, then here is a method that will give you a good image in both
IE and FF. Instead of inserting the image into the page, you will import the
image into the web page and thus bypass the html coding engine in
Publisher...and get the same image in both IE and FF. I see it working best
for the
www.sweetandcurvy.com logo and maybe the work art in your
menu...although that is a place where I would suggest you consider plain
text.
First of all go to tools > options > web tab and change the option to allow
for pngs. Then Publish to the web and direct your output to your computer
where you can find the files. Open the index_files folder and in thumbnail
view, find the png version of the
www.sweetandcurvy.com logo. That png file
is at 96 dpi because of the way the coding engine works. Copy that image and
perhaps rename it "logo.png", and set it aside for the moment. Now log on to
your website either with your FTP client, or by logging in to the control
panel and using the file manager, create a folder on your host at the same
directory level as the index.htm file and the index_files folder, called
"images". Upload your logo.png file to the folder.
Now go back to your Publisher file and uncheck the png option on the web
tab. Go to the first page where you have inserted the wordart
www.sweetandcurvy.com logo. Insert a html code fragment box with the
following code:
<IMG SRC="
http://www.sweetandcurvy/images/logo.png" ALT="Sweet and Curvy, or
whatever text you want to see when you mouse over the image" border="0"
width="110" height="76"></A>
Change the width and height to the pixels dimensions of your logo.png.
border=0 specifies no border around the image.
Drag the code fragment box over to the current word art logo and drag the
sides to equal the sides of the word art logo, arrange, send to back, and
then delete the logo word art leaving the code fragment box. Do a web page
preview, and the logo.png file on your web site in the images folder will be
imported into your page in both IE and FF. The png file will be larger than
a gif file but after it loads the first time in the browser that image will
be cached, so if you replace each word art logo on each page, those will
load almost instantly.
Now if you want to do the same thing for your menu, you will need to add a
hyperlink. Go back and check the png option, publish to your computer, open
the index_files folder, copy the menu png files, rename, and upload to the
images folder on your site just as you did with the sweet and curvy logo.
This time however use this code snippet in your code fragment box: (using
your "links" menu button as an example)
<A HREF="
http://www.sweetandcurvy.com/index_files/Links.htm"><IMG
SRC="
http://www.sweetandcurvy/images/links.png" ALT="Links, or whatever text
you want to see when you mouse over the image" border="0" width="110"
height="76"></A>
Once again, change the dimensions to match the links.png file....don't use
spaces in your file names, and carefully match upper and lower case. Be
careful about using underscores such as index_files as it can look like a
space with the underlined hyperlink.
You can make individual code fragment boxes for each menu link, or perhaps
combine them into one code fragment box. Here is an example of two:
<A HREF="
http://www.sweetandcurvy.com/index_files/GiftVouchers.htm"><IMG
SRC="
http://www.sweetandcurvy/images/giftvoucers.png" ALT="Gift Vouchers, or
whatever text you want to see when you mouse over the image" border="0"
width="110" height="76"></A>
<br>
<A HREF="
http://www.sweetandcurvy.com/index_files/Links.htm"><IMG
SRC="
http://www.sweetandcurvy/images/links.png" ALT="Links, or whatever text
you want to see when you mouse over the image" border="0" width="110"
height="76"></A>
The <br> snippet will result in the images loading vertically below the
previous one. Leave it out, and your images will be in line horizontally.
You will have to play with the text box sizes and alignment, but once you
get a new menu built with either multiple code fragment boxes or perhaps
one, then you can copy and paste to each page and replace the word art menu.
Once again, it can take you a while to set this up, but then your menu will
load quickly in each page, and the image buttons will look equally good in
IE and FF.
See why I asked whether you really wanted to know how to do this <g>? Takes
a while to explain...and do.
DavidF
