Web pages use two types of images: GIFs and JPEGs. JPEGs (Joint
Photographic Exchange Group) have a larger file size, which offer more detailed
images but take longer to download, and are good format for
photographs. GIFs (Graphic Interchange Format) have a smaller file size, with
correspondingly less detail and faster downloads, and are good for graphics (the images in this tutorial are GIFs). You can create
your own images by scanning pictures or using a program such as Photoshop or
Paint Shop. Or, you can right click on an image on someone else's Web page and
copy that image. If you use someone else's images, make sure you are not infringing
on any copyrights. Also keep in mind that more images means longer download
times for people accessing your page.
|
 To
insert an image, click on the "Insert Picture" icon or look under
"Insert" in the main menu to insert a "Picture" from
"Clip Art" or "From File."
The Clip Art option has a small library of images that comes
with FrontPage and which you can add more images to. "From File" lets
you select an image from any accessible folder.
If the image file is already in your Web folder, just click on
the image in under "Name." Or, enter the URL in the URL box, or search
for an image on the Web or in another file on your computer by clicking on the
appropriate search icon to the right of the URL box.
|
 You
can alter the look and positioning of an image by right clicking on the
image and selecting "Picture Properties." The most useful
options are under the "Appearance" tag. The default alignment
for the image is for it to display as an element in a line of text, as
with this image of the Wesleyan shield  .
If it is a large image, however, it can break up the flow of any
associated text. So, you can align an image to show up to the left of text
(as with the image to the left of this text) or to the right of text, or a
number of other options for aligning images with text or other elements.
Experiment to see what looks good.
You can also add a border around an image to better define it, and add
horizontal or vertical spacing around an image so that there is some blank
space between the image and any adjacent text or other images.
The size can be altered, but that can make the image look distorted,
especially if it is enlarged. |
Editing Images: You can do some simple editing and
manipulating of images with FrontPage. Large scale manipulation, however, must
be done with an image editor. To access these options, right click on an image
and click to "Show Pictures Toolbar"
This offers many
image editing options, including adding text to an image, flipping an image,
putting one overlapping image above or below the other, rotating, brightening,
etc. Play around with it to see what you can accomplish.
Creating links from images: You
can also set up an image so that it is a clickable link, or even make a map out
of an image to include several links. To make an image into a link is just like creating
a link with text: click on the image to select it, then click on the
"Create Hyperlink" button in the toolbar (or look under
"Insert" on the main menu for "Hyperlink"). Enter the URL in
the URL box, click "OK," and you're done. The shield to the right is a
link to the Wesleyan University Library home page.
To
create an image map with multiple links, use the editing images tool bar. You
can make a rectangle or circle, or draw a polygon of whatever shape, on an
image. When you draw your shape, the "Create Hyperlink" box pops up,
and you can enter the URL for that section of the image. The intro page for the
Research Skills Tutorial is an example of an image map with links, with
clickable rectangular areas around each box of text which link to the
appropriate tutorial pages.
Horizontal line:
 
A horizontal line is a common way to divide sections of a page, or (as
with this page) to separate the body of the page from the navigation links
at the bottom. Under "Insert" from the main menu, select
"Horizontal Line." Double click on the bar to bring up the
Horizontal Line Properties option box (the options in the box on the right
produce the horizontal line below).
|
Next: Tables
Contents - How a Web Page
Works - Getting Started -
Page Settings - Text Options
Creating Links - Images -
Tables - Preview - Design Tips -
Managing Your Web Site
