UNIT 3 Adding Graphics Getting Ready Picture Perfect Shifting Images Magic Graphics Tuning Your Image Keep it Lean Cool for School
FrontPage in the Classroom is produced by ACT360 Media Ltd. in partnership with Microsoft Corporation. Copyright 1998. All rights reserved. See our entire collection of online tutorials by visiting www.ACTDEN.com

There are two types of graphic files. GIFs and JPEGs. They both have pros and cons. GIFs allow transparent backgrounds and are good when an image only has a few colors.

Perfect for a cartoony character or a banner title.

JPEGs often take longer to download, but can handle more colors.

Which is better for photographs - like that picture of Blip getting a tattoo and an eyebrow piercing.

In your dreams, Pixel.

Defining web graphics All graphic images appearing in web sites must be saved in special image files that can be recognized by Internet browsers. These files come in two file formats: GIFs and JPEGs. FrontPage can convert many different types of graphic images into either of these file types. There are three main differences between GIFs and JPEGs: 1. A GIF file can interlace, which means when your web site visitors are waiting for the image to load into their computers, they will see a blurry image slowly fading into view. A JPEG does not interlace, which means visitors will see a blank page as the image slowly loads line-by-line from top to bottom. 2. With a GIF file, the background of an image can be made transparent so the image looks like it is floating on your web page. A JPEG file does not have this transparency option. 3. While a GIF can display up to 256 colors, a JPEG can display millions. Which one should you use? JPEGs are often used for photo images when you want to have a wide range of realistic-looking colors. However, the trade-off for this higher quality color is that it takes longer for your web site visitors to see the image. GIFs are used more commonly - but the choice is up to you.

Before you start adding images, you need to activate the Image Toolbar. Here's how...

How about just a small tattoo?

Forget it, Pixel.

Activating the Image Toolbar To begin your work with images, you will need to activate the Image toolbar. 1. Click View on the Menu Bar. 2. Select Image Toolbar. 3. The Image Toolbar will be activated.

Okay, now it's time to add a background graphic to our web page. It can be a giant graphic or a smaller one that repeats in a checkerboard pattern. It's great for spicing things up.

On that note, the Spice Girls are a popular group in this time period. Let's put them in our background! Which Spice is your favorite?

What's a Spice Girl? Is that the waiter who puts fresh ground pepper on your pasta?

Oh brother.

Adding a background graphic Any graphic image can be used as a background pattern for your web page. You can use a single large image to fill in the entire background. You can also use a small image that will be "tiled" - which means it will be duplicated in a checkerboard pattern across the web page. To add a background graphic from the Clip Art Gallery: 1. Click File on the Menu bar, then select Page Properties. The Page Properties dialog box will appear. 2. Click the Background tab. 3. Click the Background Image check box, then click the Browse button. 4. A Select Background Image dialog box will appear. Click the Clip Art button to open the Clip Art Gallery. 5. Click Web Backgrounds. Select a background pattern, then click the Insert button. 6. Click OK on the Page Properties dialog box.

FrontPage comes with a gallery of clip art images we can use. It's a simple way to add pizazz to our web page.

Adding a Clip Art graphic To add a Clip Art Gallery image to your web page: 1. Place the cursor on your web page. Position it where you would like the image to appear. 2. Click Insert on the Menu bar and select Image. An Image dialog box will appear. 3. Click the Clip Art button to open the Clip Art Gallery. Click on the image you want to use, then click the Insert button.

What if I want to add my own images, Blip? Last night, I did some drawings of people who hang out in coffee shops. Not to mention all the digi-pics I'm going to get of that swing band I heard about...

Swing is from the 30's and 40's, Pixel.

Sure, but it was back in style in the 90's. Check your history computer if you don't believe me.

Hey, you're right.

Adding your own image You can choose any digital graphic image you want for your web page. This includes images you have scanned or collected from the Internet and stored on your local drive. FrontPage will automatically convert your image into a GIF or JPEG after you insert it onto your web page. To add your own image to your web page: 1. Place the cursor on your web page. Position it where you would like the image to appear. 2. Click Insert on the Menu bar and select Image. The Image dialog box will appear. 3. To select a file stored on your local drive, click on the "Select a file on your computer" button. 4. Choose an image file from your local drive, then click OK.

Our images are on the web page, but we'd better remember to save the files to our site.

I know that. I've been reading ahead, you know?

Saving an attached image When you insert images into your web page, they aren't a permanent part of the site until each one is saved individually. When you save your images, FrontPage lets you rename the files, move them to different folders or choose not to save particular files with the rest of the web page you are saving. To save your web page and new image files: 1. Click the Save button on the Standard toolbar. 2. If you have not yet saved the newly inserted images to your web site, a Save Embedded Files dialog box will appear. The box will list the files you have inserted. You can preview each image by clicking it and viewing it in the Image Preview window. 3. To keep things organized, it's a good idea to save all your images in one folder. By default, FrontPage will save images to the images folder in your web site. 4. If you want to save the images to another folder, click the Change Folder button and select another folder in your web site. 5. If you want to rename an image file, click the Rename button and type a new file name. 6. When you are done, click OK. The Save Embedded Files dialog box will close.

I've worked out a cool logo for our web page, and I think it would look great in the background of every page. But I really don't want to add it to each and every page - one at a time.

I've got you covered, Pixel. We can copy the same image to a new page. Here's how...

Copying an image to another page You may sometimes want to put the same graphic image on more than one page - for example: a logo, a school crest or a cartoon character. To copy an image from one page and paste it onto another: 1. Select the image by clicking on it. 2. Click Edit on the Menu bar, then click Copy. 3. To open the new (or destination) page, click File on the Menu bar, then click Open. 4. Select the new page or file name, then click OK. 5. In the newly opened web page, position the cursor where you want the image to appear. 6. Click Edit on the Menu bar, then click Paste. The image will appear on the new page. 7. Remember to save the page after you have copied the image to it.

Blip, I'm working on a page about popular movies during this time period. I have a background image of the ocean, and I have a GIF of the Titanic. How can I make this ship "float" on my web page?

That's easy! Just turn it into a transparent image.

Making a transparent image You can make a transparent GIF by removing the background color that surrounds an object. This is a good option if you want the object to float on your web page background. Or, if you want web graphics that have outlines other than square or rectangular. To make a transparent image: 1. Select the image by clicking on it. 2. Click the Make Transparent button on the Image Toolbar. 3. Move the cursor over the color you want to make transparent, then click once. 4. The color you selected will become transparent.

We've got to keep in mind, Pixel, that in this time period modems can be quite slow.

Yikes! I wish you reminded me sooner. Our visitors are going to go zany staring at a blank page, waiting for all our images to appear.

That's why FrontPage lets us create interlaced images. This allows the image to start appearing before it's fully loaded. That way, the viewer can gauge if the image is going to be worth the wait.

What are you talking about? Of course my images are worth the wait.

You budding artist-types are so touchy.

Making interlaced images You can interlace your GIF files to create a special visual effect for your web site visitors. When a file is interlaced, your visitors will see a blurry image that slowly fades into view while they wait for the complete image to load into their computers. Otherwise, they would have to wait to see the image filling in line-by-line from the top to the bottom of the screen. To interlace a GIF file: 1. Select the image by clicking on it. 2. Click Edit on the Menu Bar and select Image Properties. 3. The Image Properties dialog box will appear. Select the General tab. 4. Select the Interlaced check box, then click OK.

Pixel, the images you've put on our web page look great. But they're so big, I don't have much room to put text next to them.

No problem. I can resize the images so you'll have plenty of room.

Resizing an image To resize an image: 1. Select the image by clicking on it. 2. You will see eight sizing dots at the corners and sides of the image. Move your mouse pointer over one of these dots. The pointer will turn into a two-headed arrow. 3. Click and hold your mouse button, then drag your mouse to change the size of the image.

Resizing images makes them fit, but we sure lose a lot of details in the picture. We want to make sure that everyone can see those wild platform runners that kids wore in the 90s.

Well, we can always take out some of the space around the subject. I think we can do that using the crop button in FrontPage.

Cropping an image To "crop" an image means to remove a portion of it. You may only want to show part - but not all - of a particular image. For example, you may want to crop an image in the following scenario: you have a close-up photo of yourself with many other people in the background. You can draw visual attention to yourself by cutting off the part of the photo that contains the other people. To crop an image: 1. Select the image by clicking on it. 2. Click the Crop button on the Image toolbar. 3. You will see eight small white dots at the corners and sides of the image. Move your mouse over one of these dots and see it turn into a two-way arrow. 4. Hold down your mouse button and drag the arrow to outline the size you want the image to be. Let go of your mouse button when the correct area is outlined. 5. Press the Enter key.

We still need to offset the photo more because the text is crowding it. Any suggestions, Pixel?

Borders and buffers. A border puts a set of lines around an image. A buffer creates a blank space around an image so it has room to breathe.

Adding borders and buffers There are two ways to offset an image from the rest of the web page. You can use an image border, which is a set of lines that surround an image. You can also use an image buffer, which is a blank space that surrounds an image. To add a border: 1. Select the image by clicking on it. 2. Click Edit on the Menu bar and select Image Properties. 3. The Image Properties dialog box will appear. Select the Appearance tab. 4. To make a thicker border, click the up-arrow on the Border Thickness spin control boxes. To make a thinner border, click the down-arrow. 5. Click OK on the Image Properties dialog box. To add a buffer: 1. Select the image by clicking on it. 2. Click Edit on the Menu Bar and select Image Properties. 3. The Image Properties dialog box will appear. Select the Appearance tab. 4. To make a thicker buffer, click the up-arrows on the Horizontal Spacing and Vertical Spacing spin control. To make a thinner buffer, click the down-arrows. 5. Click OK on the Image Properties dialog box.

This page I'm doing on 90s fashion needs some work. The baggy pants are on top and the tiny t-shirt is on the bottom. I need to move them around. Plus, I want them on the left side of the page.

We can take care of that with some dragging and clicking.

Hmmm. Sounds like a new dance craze, the "Drag and Click".

Moving an image Images can be placed before or after text. You can also align text on the left or right, so the text wraps around the image. To move an image: 1. Select the image by clicking on it. 2. Place the cursor on the image. 3. Click and hold your left mouse button as you drag the image to a new place on the page. 4. Release the mouse button to position the image in its new location. To right and left align the image: 1. Select the image by clicking it. 2. Click Edit on the Menu Bar and select Image Properties. 3. The Image Properties dialog box will appear. Select the Appearance tab. 4. Click the Alignment drop-down box and select either left or right. 5. Click OK on the Image Properties dialog box.

Okay, now for my fashion page I'll add some photos of shoes, and of haircuts, and of--

Hold on, Pixel. You see that time indicator at the bottom of the screen? It's growing faster than hair on one of those Chia pets!

Ooo...I'm taking one of those relics back to the future. Did you mention something about a time indicator?

It estimates how long it will take this page to download with a 28.8 modem. The higher the time, the slower your web page, and the more people who will get frustrated and click away.

Got it. Speed is good. So maybe I won't use so many pictures on this one...

Checking image size and speed It's important to keep track of how long it will take for your page to download onto your web site visitor's computer. The bigger the image file, the longer it will take - and if your visitors have to wait too long, they may get bored and leave. Some people are more patient than others, but it's safe to assume that 20 seconds is an acceptable download time for your entire page. The time indicator at the bottom of the FrontPage Editor screen shows you an estimate of how many seconds it will take for your page to download on a 28.8 modem.

Some people turn off the image display on their Internet browser so they don't have to wait for pictures to download. In that case, you can provide text to describe the picture they're missing.

Let's name all our pictures Bikini. That will teach 'em not to turn their image display off.

Don't be a doppler, Pixel. This is a family web site.

I was just kidding.

Including a text alternative Some people shut off the image display on their Internet browsers because they don't want to wait for images to download. This means they see text only - no graphics. For these visitors, you can provide alternate text to show in place of the images. 1. Select the image by clicking on it. 2. Click Edit on the Menu bar and select Image Properties from the drop-down list that appears. 3. The Image Properties dialog box will appear. Select the General tab. 4. Type the alternate text into the Alternate Representations box. 5. Click OK on the Image Properties dialog box.

The Graphics Challenge ANNOUNCER: Good afternoon ladies and gentlemen, and welcome to today's exciting Graphics Challenge! We have two very accomplished Web site artists here - ready to make their choice for the best graphic file type: .gif or .jpg! We've got Mr. Art Ist from Atlanta, Georgia, and Ms. Dee Zign from Seattle, Washington. The pair are ready to put their visual taste to the test today! First, let me explain the rules. Each artist will put on our special earplugs and look at two graphics files - one .gif and one .jpg, of course. They will take a good, long look at the images, and will then choose which one they like best. You may have seen a similar game done with cola. With that game, however, players wear blindfolds. Obviously our players can't wear blindfolds - or they wouldn't be able to see the images! Hahahaha! Okay, the first artist is walking in… Let's give a warm round of applause to Mr. Art Ist! Are you feeling ready to play our game, Mr. Ist? ART: I'm always ready! I never know when I'm going to be asked to whip off a huge pile of artwork for my clients, so I've got to stay on the mark all the time. But that's okay because I drink a lot of cola… ANNOUNCER: Glad to hear it Art - but in a moment, you won't hear anything because we're going to ask you to put on your earplugs… Okay, you seem to have them on. Great! Can you hear me Art? ART: Huh? ANNOUNCER: Good! Now let's unveil the images… there's the .gif on the left monitor… and there's the .jpg on the right. Of course, we don't have them labeled. ART: Well, let's see… This one on the left first appears blurry on the screen - but now it's slowly coming into focus. A-ha! It's interlaced! Hmm… Interlacing is pretty good when an image is downloading. That way, the Web site visitor doesn't get too bored. The one on the right is coming onto the screen line-by-line - this can be too long a wait for the visitor. But oh! Look at the colors! They seem more vivid than the first image. Hey! I know the answer! The first one is a .gif and the second is a .jpg! I win! ANNOUNCER: Well, Art, no, you don't. Not quite. Now that you've got your earplugs out, I can tell you that you have correctly identified the file types - but that's not the object of the game. You're supposed to say which you think is better. ART: Oh, yes, well then, of course! Hmm… It's hard to say… The .gif can interlace, and that's interesting to watch. Then again, the .jpg has more colors… I can't decide which is better! It's so hard… This game is really stressing me out! Just forget it! I need a cola! I'm outta here! ANNOUNCER: Well, ladies and gentlemen - there you go! These artists can be so temperamental! He appears to have run off the stage in a bit of a snit! Hmmm… Maybe we'll have more luck with our next guest, Ms. Dee Zign. DEE: Hi, it's great to be here. Let's get right down to it, can we? Okay…my earplugs are in. ANNOUNCER: You've got to like that! All right. Here's the gif. on the left monitor, and the .jpg on the right. DEE: Let me see now… This one on the left has a transparent background - so it looks like it blends in with the Web page background. That's really cool. And this one on the right monitor looks good, too. The photo colors appear so realistic. Which one do I like the most? Hmmm… Well I know the transparent one is a .gif and the other one is a .jpg - but I just can't say which one I like the most. My honest answer is - I can't say which one is best. It depends what you want to use it for. ANNOUNCER: What an interesting game it's been today. Neither of our fine artists has been able to give us a definite answer on the .gif versus .jpg question. It looks like you're just going to have to experiment and find out which suits your own purpose best. But let me give you a word of advice - copyright. If you want to publish an image owned by someone else, you'd better get permission first. I understand we have some teachers out there today, and I want to tell you how important it is to go over this fact with your students. I guess that about wraps things up. Thanks for joining us at The Graphics Challenge.