FrontPage Graphics
Images Toolbar
- go to View/Toolbars/Pictures
- when a picture is active (has the dots around it) the toolbar is active
Inserting Graphics
- click on the page where you want the graphic to go
- press the Insert Image Icon
- insert a graphic one of the following ways
- choose a graphic from your current web
- put in a url to a graphic
- choose the globe icon to find a graphic on the web
- choose the folder icon to find a graphic on your hard drive
- choose Clip Art to find a graphic from FrontPage
- select a category and add it to your page
Picture Properties
- right click on a graphic and choose Picture Properties
- General tab
- 2 fields should be filled in
- Picture source - the name of the graphic - an browse to find the image
- Alternative representations Text : words to describe the image - very
important on University pages
- if you want the image to be a link fill in Default hyperlink (use
Browse)
- Low-Resolution Images
- low res images are a copy of the same image at a lower resolution
- a lower resolution makes the picture smaller and therefore quicker to
load
- the low-res image will load quickly when the page is loaded
- look at you picture's properties (right click on the picture) note the
height & width
- create a duplicate of your image in a graphics package (like photoshop)
with the same physical size (height and width)
- save it at 18 dpi instead of 72 dpi
- in FrontPage go to the picture's properties
- enter new picture in Alternative representations low-resolution
(you can use Browse)
- click OK
- Appearance tab
- Alignment -
- Left: aligns the graphic on the left and text can wrap around
it
- Right: aligns the graphic on the right and text can wrap around
it
Top:
Image's top aligns with top of biggest item
Texttop:
Image's top aligns with top of text- Middle:
Image's middle aligns with middle of text
- Absmiddle:
Image's middle aligns with middle of biggest item
- Baseline:
Image's bottom aligns with bottom of text
- Bottom:
Same as baseline
- Absbottom:
Image's bottom aligns with bottom of lowest item (g in align)
- Center:
Image's center aligns with center of biggest
text
- Border Thickness - the width in pixels of the border around an
image
- Horizontal spacing & Vertical spacing - 'blank space'
around image
- Size
- Height & Width are actual size of picture in pixels
- check Specify size to change the height &/or width
- check Keep aspect ratio to change height & width in
proportion
Resampling
- resampling takes an image that you have resized and makes a best guess at
adding or deleting image pixels to try to make the picture clear at the new
size
- add a graphic to your page
- resize it with the dots - the corner dots will resize it proportionally
- hit the Resampling button
and
see how an attempt is made to make the picture clear
- note: to resize a picture the best way - use a graphics package
Adding Text to
Images
- select the image that will have text added
- click the Text button on the image toolbar
- enter in the textbox
- change the size of the textbox by dragging the dots
- change the text characteristics by right clicking on the text and choosing
font
- click and drag the text box where you want it on the graphic
- to better see the words you may want to Wash out the image
- to delete the text highlight the text and press delete
Thumbnails
- thumbnails are small copies of larger images
- you can click on a thumbnail and see the original larger picture
- select the image
- click the Auto Thumbnail button
- this will place a smaller version of the picture on your page with an
automatic link to the larger version
Rotate/Flip Image
- you can rotate or flip any image
Rotate image Left 
Rotate
image Right
Flip image
Horizontal
Flip
image Vertical- if you use the same image in multiple places on the page rotating/flipping
it in one place will rotate or flip it in all places
Contrast
& Brightness
- increase or decrease the contrast with
- increase or decrease the brightness with
Crop Images
- you may want only part of an image
- select the image
- select the Crop button
- a dashed line will appear around your image
- drag the dashed line around the part of the image that will be kept
- click the Crop button again to
trim the selected area
- if you use this picture elsewhere on your page it will also be cropped
Transparency
- you can make a color transparent in a graphic
- the graphic must be a gif -- if not FrontPage will convert it for you
- select the image
- select the Transparency button
- move your cursor over the color you want to make transparent and click
- notice the dark outline color on the lion has disappeared
- click again and the color will reappear
- only 1 color can be transparent at a time
Black & White
- remove all color from an image
- select the image
- click the Black and White button
- all copies of that image on a page will become black and white
Beveled Edge
- use the Beveled Edge button to put a 3d border around an image
- select the picture
- click the Bevel button
- all copies of that image on a page will have the bevel
Positioning
Images
- FrontPage supports Cascading Style Sheets (CSS) for version 4 or
later browsers
- images can be positioned absolutely - not only in sequence - this means in
front of and in back of each other
- select an image
- click the Position Absolutely button
- move the image around with the 4arrow icon into position
- click outside the image to deselect image
- position the images on the z axis with the Forward
and Backward buttons
- go to Views/Toolbar/Positioning to set at exact x,y coordinates
- these are the pixel offsets from the Left and Top
- set the exact picture size in Width and Height
- Z-Index sets the overlap level (forward & backward)
Image Maps
- any image can contain multiple hotspots to multiple files
- select the image
- select the square, circle or polygon from the Image
map tools
- use the cursor to select the area you want as a hotspot (you can resize
later)
- the Create Hyperlink box will appear - fill it in like any other
hyperlink (from your current web, type in a known url, use a browser to find
the url, create a new page....) click OK
- click inside the hotspot on the graphic to move and resize the spot
- repeat this for more hotspots
- hotspots can not overlap or extend outside the image
- to view your defined hotspots use the Show Hotspots button
- to edit an existing hotspot right click on it and choose Picture
Hotspot
Restore Image
- major edits to a graphic may be best done in a graphics package
- all changes are applied to actual image so keep a copy of the image before
you make changes
- if all else fails -- use the Restore button on the image toolbar
