 FrontPage
2003 - Images and Graphics
At this point, you should have:
- A trial or registered version of FrontPage 2003
- A sample template downloaded from our web site
- A new web created from the sample template
- Experience with editing text and .dwt pages
- Experience with "previewing in browser"
- Experience with adding hyperlinks
- Experience with using Navigation View
- Experience with adding, deleting, or renaming pages
11. Add a picture
- To add a picture, you will need a web-ready graphic on your computer
to insert into your web site. This may be a .gif or a .jpg.
- Now, open one of the pages in your web.
- Click to place your cursor where you want to insert the picture. 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.
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
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: Publishing
|
