Inserting Graphics
Using graphics in templates...
Adding graphics is one of the easiest ways to make your site look
better! One of the first thing new users will do is to begin dropping in
every image that they can think of -- from flashing animated gifs to
1000x1500 pixel photographs grabbed from their digital camera. We don't
advise that you do this -- after all, that just increases download time,
and download time is precious! Let's back up a few steps and look at
why you would insert additional graphics into your site. After all,
if you have a pre-made web template, you probably already have plenty of
great graphic imagery on your site. Why would you want to add more
images and increase the time it takes your page to download?
Graphics can be used to communicate!
You can use graphics to illustrate a point. This can include charts
and graphs that are relevant to your page, or an artistic statement such
as this one:
Graphics can be used to draw focus!
Good use of graphics can help you to get your viewer's attention.
Graphics can help your site look more professional!
With judicious use of graphics for headings and accents, your site
can look like a Fortune 500 company site. The key is to stay within your
color palette -- create heading graphics in colors that complement your
site, and choose photos in the same color scheme or motif as your site.
For example, see how Microsoft used photos that matched the heading
colors:
What you need to know
The more pictures that you have on your page, the slower your page
will download. So, you'll want to make sure that every single one of
your images is there for a reason. If you have any animated gifs on your
site, make sure that they are useful, not distracting.
Also, be sensitive to file size. High-resolution or high-quality
graphics on your site that take too long to download will cause your
viewers to leave your site instead of being awed by your site. Even
worse are images that are huge (for example, pictures from digital
cameras) that you've placed into your site and sized-down by clicking
and dragging on the corners. So the image looks small on the screen, but
the user still has to download the same amount of data as for a big
image! In general, if you want an image that is 1x2 inches, take your
big image and make it 1x2 inches in an image editor like Photoshop or
PaintShop Pro before putting it into your web site. Furthermore, tools
like Photoshop will help you to optimize your image so that it's
as small as it can be at a quality that you're happy with. (FrontPage's
image editing tools aren't so great at this, so stay away from them if
you can!)
Some more basic information about file types:
JPEGS are better for
- photographic-quality pictures
- pictures that have lots of shading/gradients.
GIFS are better for
- pictures with blocks of solid color
- pictures with few colors
- animated pictures.
- pictures that you want to be partially transparent
How to
- Go to Insert/Picture/From File, or click on the "Insert Picture
from File" button on the toolbar. Browse to the location of the
image you wish to insert. Click OK, then Insert.
- When you next save your page, you will be asked to save the
embedded files. You may need to click the "Change Folder" button to
change where your image files will be saved. Then click OK.
FrontPage will save the image files into your web.
About Image alignment
If you have a line of text and insert a picture, the line of text
will be "pushed down" so that the bottom of the picture lines up with
the text, like this:
Here is a line of text that has been "pushed down" because the
picture is taller than the line. This is the "default" state of a
picture that you place into your page.
In most cases, this is not the effect that you want. Unlike word
processing programs like Word, you can't just plop your picture anywhere
on the page. HTML restricts you to how you can place your picture. We
will briefly discuss the image alignment properties and how to use them
to your advantage. You can also use tables to help lay out your page and
get your pictures where you want them, but that's for a later article.
Most likely you will want your text to "flow" around the picture.
HTML/FrontPage allows you
to
either have a picture at the very left or very right of the page/table
cell. If you specify the picture alignment to be "left" or "right," the
picture will go to that side of the page and the text will "flow" around
it. In this paragraph, you can see that the picture "sticks" to the left
side of the content area, and this paragraph is flowing around it. To
accomplish this, right-click on the picture and select "Picture
Properties." Change the alignment of the picture to "left." (Shortcut:
Click on the picture, and hit Ctrl-L or Ctrl-R to align it left or
right.)
FrontPage gives you many other options for image alignment, like
"absmiddle" (absolute middle), center, text top, top, etc. We've found
that there isn't consistent rendering of these options across browsers
like Netscape 4 or Netscape 6, so we stay away from using them. (We'll
occasionally use absmiddle.)
If you want your picture to be "centered" (in the middle,
horizontally), you should not try using the "centered" image alignment
property. "Centered" means that the picture is centered vertically to
the rest of the line -- not your desired effect! Instead, you'll be
making a paragraph that is centered. This is easy in FrontPage --
place the picture on its
 own
line, then hit the "center" button on the toolbar.
More tips for a better web site
- Define the image size. When you first place a picture on
your page, the HTML code will not specify what size (width and
height) the image is. If you view your page on a slower-loading
machine, you'll notice that the HTML text shows up first, and then
gets pushed aside as the image loads. If you define the image size,
the browser will "reserve" space for it in the layout, and you'll
avoid this slightly annoying effect. To define the image size,
right-click on the image and choose Picture Properties, then check
the "Specify Size" checkbox and save your page.
- Don't manually resize the picture in FrontPage. We hinted
at this in the first section of the article, but want to explicitly
warn you! If you have a big picture, a common tendency is to "size
it down" by dragging on the corners in FrontPage. Don't do this!
First, this usually causes the picture quality to decrease for
viewers (especially if the picture is a gif). Second, this only
affects the display dimensions, not the file size. Users still have
to download the whole file before they can view the picture. For
example, if you have a huge 1000x800 pixel picture that is 99K, then
size it down to a mere 100x80 pixel picture in FrontPage, viewers
will still have to download all 99K. What you'll want to do instead
is to invest in an image editor like Photoshop Elements or Paint
Shop Pro to help you optimize your pictures. You could cut that same
picture down to 10K, and it might still look better than the
sized-down version!
- Do NOT use spaces, tabs, or extra carriage returns to place
your images. Because web pages are often "fluid" and resize
according to the size of the browser window, what looks like exact
placing of images to you will probably look pretty bad at a
different resolution or different-sized browser window. In fact,
sometimes you can even "break" the underlying table structure if you
use spaces or tabs to put space in between your pictures or place
them on the page! Instead, work with the image alignment tips
discussed above, or learn about how to use tables for layout
purposes.
Next: Adding Text and Hotspots to Images |
