Learn...

FrontPage Intro

FrontPage Editing Basics

Make a FrontPage Template

FrontPage FAQ

Dynamic Web Templates (FP)

Swish Basics

Articles

Product-Specific

7. 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...

1. 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.

   

2. 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