Designing Personal Web Sites
Part II: Using Images and Animated GIFs
If Front Page is not open, begin Front Page, choose File, Open
and then load index.html.
If you see an image somewhere on a web site that you like, and if the image
is not copyrighted, you may copy the image for your own use. Please do
not copy an image if the owner explicitly requests that you do not. To copy
an image for your own use, follow these steps:
- put the mouse over the image
- right click
- choose Save Image As ...
- either accept the filename as is or give it a new file name. Make sure
you are saving it to your website folder on the disk in your a: drive or
h: drive.
- To try this out, please use your browser to go to the URL:
http://www.ravecentral.com/harrypotter.html
and copy the image of the cover of the original soundtrack from the movie.
Save it as harry.jpg ,(type jpeg), making sure to save it in the same
folder on your a: or h: drive.
- To use the image in your own web site, follow these instructions:
- Move your cursor to the spot on your web page where you want the image
to appear. In our case, let's put it in one of the cells of the table we
created. Move to the cell containing the text Harry Potter and hit the return
button to create some space under the name. Now choose Insert/Picture/From
File from the top menu bar or else click on the Insert Picture From
File icon on the other bar.
- You will be prompted for an image location (either a URL address or
a file name). We will give it a file name, in this case harry.jpg.
You may either type it in or browse for the file.
- Leave everything else alone and click OK.
- When you see the actual image on your web page, you can use the resizing
function of your mouse to make it whatever size you want. You can also justify
it on the page or in the table, or whatever.
- Let’s make it a link to the website on which it was found: click on the
image you just inserted (to select it) and choose Insert/Hyperlink.
In the link to field type in the URL for the movie: http://www.ravecentral.com/harrypotter.html
and select OK.
- Save and Preview. Make sure the link works.
If you find a background that you like that is being used as the background
on another web site, the same rules about copying apply as before. If the owner
does not mind for you to copy the background, follow these instructions:
- put the mouse over the background (anywhere)
- right click
- choose Save Background As ...
- accept the suggested name or make up your own. Be sure to save it to
the correct folder on your a: or h: drive.
To use the background with one of your web pages,
- choose Format/ Background/Background (tab) and then choose Background
Picture .
- type in the name of your file or browse to select the name.
- OK
- Let’s try it out. Go to this page: http://www.cs.transy.edu/tgarrett/example.html
and save the ugly green background. Just right click anywhere
on that ugly background and Save Background As.. Use
the name ugly.jpg and make sure you are saving it to the correct folder
on your a: or h: drive.
- Now, following the previous instructions , use that ugly background for
your "hobbies" pages. Now that you have done it, feel free to change
it!
- Now select one of the cells of your table on your index page and use this
background as the background for the cell. Move to the cell and choose Table/Properties/
Cell and then in the Background section, click on Use background
picutre and then type in the file name (or browse to find it.) Remember
that you must have something in the cell for the background to show
up -- even if it is only a "space".
A good place to go for backgrounds to choose from is : http://www.silkpursegraphics.com
To use an animated gif, follow the same procedures as for copying an
image. To try it out, go to the URL: http://members.aol.com/Genschman/animgif2.htm
. Place your mouse over the moving "under construction" gif and right click.
Choose Save Image As.. and name it construct.gif . Make
sure it is saved to the correct folder.
- Go to one of your pages and insert this image. Save and Preview.
.
- When you find a good site for downloading images, backgrounds, or animated
gifs, please post its URL to our class’ discussion group on Blackboard..