FrontPage 2000 Tutorials - Graphically Speaking
By Tina Clarke
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.
Resize
Resample
Use a low resolution graphic
Use interlaced gifs
Define the size and weight of a graphic
Insert Alt tags
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:
Lets 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' 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:
A 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 images 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, others may be vision impaired. To make sure your site is 'viewable' by everyone help these users, so set alternate text for each of your images. 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 your not only helping others your helping yourself, because search engines take note of alt tags within your html, and they can help increase your position within SE's. 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 youself.
FrontPage Image Tips:
To keep a check on weather 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 it's 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 on 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 home.gif hnsearch.giv 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 Sub Navigation or pi for Product Images.
Create your own standards, but the 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.
First Published in
ABC ~ All 'Bout Computers
Volume 5, October 2001
