Tina's FrontPage News
~~Tina
Clarke, AccessFP - Frontpage Resource Centre
Graphically
Speaking
Adding graphics to your web pages can enhance the effect they present,
however they need to be controlled and managed.
This is because graphics can spiral your web size, so quality, type, and
the number of graphics are important to maintain order. Not to mention
checking for orphan files periodically.
There are a number of methods you can use to do this.
To
Edit a picture in FrontPage click it once to select it and the Picture
toolbar will appear. If you do not select an image the Picture toolbar
will remain greyed out.
The Picture Toolbar has lots of useful features but it's still not as good
as a real photo-editing program, like the one that comes with FrontPage
(Photo Editor).
To edit a picture in a separate program, double click it. If FrontPage
tells you that it has no Picture Editor assigned, click ok, then select
Tools | Options, click the Configure Editors tab, click the Add button,
and then in the 'Add Editor Association' dialog box, enter the file
extension, the name of the editor, and the location of the program. Which
should be: C:\Program Files\Common Files\Microsoft Shared\PhotoEd
To put graphics on your web page the best way to do this without running
into trouble is:
Let's say you want to insert an affiliate logo. You right click the image
in the browser and click ‘Save Image As’ in the pop up box navigate to
the images folder of your web and save it there.
Next go to FrontPage and Press the insert icon or go to Insert | Picture |
From File. If the file name does not appear in the listing, click the icon
on the far right ‘Select a file on your computer’ and navigate to your
web’s image folder and select the image you just saved, press ok and your
image will appear on the page.
Resize
Resizing a picture by dragging one of the side handles will change
the aspect ration of the image, making it appear stretched. Unless this is
intentional, resize the picture by dragging one of the corner handles.
To resize a picture to some precise height or width, right-click on it and
choose properties from the pop up menu, then select the Appearance tab and
check 'Specify Size, enter the height of width of the image in pixels or
as a percentage of the original size. You can also increase the horizontal
or vertical spacing around a picture if you find your text or other
content is lying too close to the picture.
Resample
Make sure that after you have resized a picture you resample it, this is
because in doing so you change the file size of the image file itself,
plus it can sharpen up the picture. If a picture is too small or has not
been resized then this feature will be greyed out.
In Page view, click the picture that you have resized. On the Pictures
toolbar, click the Resample icon.
Use a low-resolution graphic
Making your site ‘seem’ faster might be the next best thing to
actually making it download faster.
You can display a low-resolution version of a graphic while the site
visitor's Web browser is downloading the final version. This feature is
useful when you have a large or high-resolution picture. If the picture is
an image map, site visitors with slow Internet connections can proceed to
click hotspots based on the low-resolution picture, without having
to wait for the entire high-resolution picture to finish downloading.
One trick is to use a black and white version.
First you must create a low-resolution version of your picture. Open your
picture in a graphics program, such as Microsoft Image Composer, and
reduce the colour depth (number of colours) in the picture. The fewer
colours you specify for the low- resolution version of the picture, the
faster it will be displayed in a Web browser. Because the low- resolution
picture is intended as a placeholder for the high-resolution picture, you
should not change the height or width of the picture.
Note: Some Web browsers do not support this feature.
In Page view, right-click the picture, click Picture Properties on the pop
up menu, and then click the General tab. In the Low-Res box, type the file
name for the alternate low-resolution picture, or click Browse to locate
it.
This method isn't actually making your pages any faster. In fact, it
increases overall download time by adding an extra image. However if done
in the right way the page will seem more responsive because users will get
something to look at sooner.
Use interlaced gifs
If you want to change the format of a picture or overrule FrontPage's rule
of converting 256-colour (and less) images to Gifs and greater to Jpegs,
right click the picture to select it and choose Picture Properties from
the popup menu. Go to the General tab.
To convert to Gif format, click the gif radio button and check Transparent
if you want the gif to have a transparent colour, and interlaced if you
want the gif to load more quickly. There can be only one transparent
colour in any picture.
To convert to jpeg format, click the jpeg radio button, and choose the
percentage of the original file size to which you would like to compress
the image.
Note: The lower the number the lower the quality, the default optimal
setting is 75.
Increase the number of 'Progressive Passes' box if you want the jpeg to
seem to appear more quickly--which will be at the cost of more downloading
overall. The default is four passes.
Interlacing paints the image on the screen as a series of interleaved
horizontal lines that are gradually filled in, like Venetian blinds
opening. This gives users a sneak preview of the image so they can
decide whether they want to keep waiting for the full image to appear.
Define the size and weight of a graphic
An image's height, width and weight properties should be defined because of
the way browsers load pages. When the browser reads a page of html, it
generates a list of images for the entire page, and then it builds the
page but it has to wait for each image to download before it can display
each piece of text. However, if you specify an image's height and width, the
browser can then allocate screen space for that image so that the text can
be displayed but leave a correctly sized space for each web graphic, which
of course cuts down the amount of time it takes for visitors to start
reading your page.
Alt tags
Some people, especially on slow connections may use a text-only browser, or
they may browse with their images turned off and others may be vision
impaired. To make sure your site is 'viewable' by everyone, set alternate text for each of your
images to help these users. Doing so lets them
know what they're missing.
FrontPage by default will set the alternate text (alt tag) by displaying
the name of the image file and the download size, but by inserting an alt
tag of your own you're not only helping others you're helping yourself,
because search engines take note of alt tags within your html, and they
can help increase your position within SEs, especially if you use
keywords that appear on the page the image is on.
To help you figure out the bytes and the height and width of a graphic and
to make sure you have remembered to insert alt tags on all your graphics I
recommend the FREE FrontPage Add-on TP_ErrOmi, which you can obtain from:
http://solution-shelf.com/
Read the help files before running it as you need to set your own options
to suit yourself.
FrontPage Image Tips:
To keep a check on whether graphics you have saved in your web are
actually in use, implement the following method.
Go to ‘Hyperlink View’ make sure ‘Folder List’ is active as well.
View | Folder List.
Click the Images folder where you store all your graphics and click on the
first graphic.
In the right hand pane you can see the icon representing the graphic. If
the graphic is in use there will be lines radiating off it to the page(s)
concerned, if not there will be none present.
You might think using the unlinked files report will do the job just as
well but that is not so. When I check through my graphics some are linked
some are unlinked, by clicking on a graphic in the unlinked files and then
switching to the ‘Hyperlinks View’ the graphic remains selected and is
highlighted in the ‘Folders List’ you can then check on its linked
or unlinked status in the right hand pane.
Note: If your web contains files located in hidden folders, those files
will not be included in the report feature. To include files in hidden
folders in your reports, click Tools | Web Settings | Click 'Advanced'
tab, and then select the 'Show documents in hidden directories' check box.
If the graphic is no longer in use you can either delete it or save to a
spare web for future use. To delete right click the graphic in
‘Folder List’ while still in ‘Hyperlinks View’ and choose delete.
To save it, it’s best to have another copy of FrontPage open in the spare
web where your going to store it and drag the image across to the other
web. To bring up the other instance of FrontPage simply hover over the
icon in the start bar without letting go of the graphic your dragging and
it will pop up you can then release the graphic into the images folder of
the spare web.
Always store your images in a separate directory. FrontPage automatically
creates an images folder for this purpose.
It’s also important how you name your images, naming them so they
make sense. They will appear in alphabetical order so you want to make
related images show up next to one another. For instance your navigational
images could be named hnhome.gif, hnsearch.gif, hntoc.gif, hnabout.gif (hn
stands for Home Navigation). This way the hn’s will show up
alphabetically together in the directory if they were to have rollovers
they could be names hnohome.gif (hno standing for Home Navigation On). You
could continue this throughout the entire site by using names such as sn
for subnavigation or pi for product images.
Create your own standards, but then keep the names short and to the point
but still make sure you can figure out what they are. While you are naming
graphic files it’s a good idea to always use lower case and if possible
no spaces if you need a space use a under score _ for a space. This helps
if you move servers, Notably Unix servers have trouble with upper case
text and spaces, not to mention Netscape
If you get the dreaded red "X" Instead of Images, here are a
number of possibilities why this may be so.
1 The url address or path for your image is incorrect within your
html.
2 You might be using a picture format that will not display, for
example a bitmap.
3 Does the name of your image or the directory it's in contain
capital letters, spaces or invalid characters? Unix servers won't tolerate
this.
4 Your gif and jpeg files are not associated with your browser
through Windows.
One other thing you should be aware of, if all the above have no effect, is
to check the properties of the folder containing the images. You do this
by right-clicking the image in the folder list. The 'Files can be
Browsed' and 'Scripts can be Run' check boxes should be checked.
Happy editing.
Tina Clarke - Microsoft MVP - FrontPage, is
the Webmaster of AccessFP - FrontPage Resource Centre
http://accessfp.net/
and http://addonfp.com
She is also an editor of AnyFrontPageBytes Ezine. Subscribe to the ezine
http://groups.yahoo.com/group/AnyFrontPageBytes and
get FREE FrontPage E-Books upon joining. And don't forget to subscribe to get
Weekly FrontPage Tips. Tina is also an artist and the owner of
http://clarke-abstract-art.com
|
,
