Designing Personal Web Sites
Part II: Using Images and Animated GIFs
Begin Netscape, select Composer, and choose File, Open
and then locate the file that you began in class on Tuesday. It will either
be in your a: drive or on your h: drive. It should be named index.htm.
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.
- 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 and then choose Image, Insert from the
top menu bar or else click on the Image 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 Link. 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: drive.
To use the background with one of your web pages,
- choose Format, Page Colors and Properties, Colors and Backgrounds (tab).
- click in the Use Image box
- type in the name of your file
- 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: 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 Format
- Table Properties - Cell(tab) and then Cell Background - Image -Choose
Image. 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’ newsgroup.