ADDING IMAGES |
LESSON #7 |
But what we really need is some pictures!
A webpage can use .GIF files for images as well as .JPG. Another image format is catching on called .PNG but for most purposes you will stay in .GIF and .JPG. NEVER use a .BMP on a webpage.
And be sure if you make your own images to keep them under 20K in file size at most!
How about this one?
Tell me a photo like that wouldn't make any web page a little better!
But how is it we get pictures on our webpage?
Right click on the image above and save it in the directory/folder that your webpage is in. Call it girl.jpg.
Find a good empty place on your page for a picture and move the blinking cursor there.
Go to the toolbar and click on the Insert Image button:
This should bring up a box like the one below:
Click the browse button and locate the directory you saved the image "girl.jpg"
in. Select that image and click OK. Now you are back at the box above but
Locations should now be filled in. If it is click OK again. You just put
an image on your webpage!
But shoot there are more options than just that!
You'll notice that the picture you just put on your page can only have text above and below it. Go ahead and type something above it, see how it moves your picture down?
Okay that's okay for beginning websites, but we want more don't we? How about pictures in the text (like a newspaper) that the text wraps around?
Write a bunch of text on your page like we have on the right. Just use the word "word" over and over.
Click right in the middle of all the text you added.
Click that image button again.
Now the box below appears:
Have a close look at this section of that box this time:
Use the Browse button to locate your copy of girl.jpg again then click OK. Now back at the box above choose a different alignment location. Your choices are Top, Middle, and Bottom. Then you can wrap the text around the picture by choosing Left and Right.
Examples of each are included in the right column of this page.
That is really all there is putting images on your webpage!
You can use this method to place graphics:
You can use this method to place buttons:
Or as we just demonstrated photographs.
If you are interested in creating your own graphics check out our software section for free graphics editors.
Now how about making a graphic (button) or photograph a link?
It's really no big deal. Find a graphic you want to use like the button above that says NEXT PAGE. Go ahead and use your right click button to save that button to your directory where the webpage is you are working on.
Use the steps above to place that button somewhere on your page. Now highlight
the button on your page and click the link button:
Fill out the box however you want (Read more about inserting links here). Click OK and you have just made that button linkable!
Wait a minute though!
Your button may be linkable but now it has some bizarre blue border around it! I don't know about you but I don't want no blue border around my buttons!
Highlight that button again and click the image button:
Look closely at the bottom left of the box and find this checkbox:
Uncheck that box and the blue will leave your button.
By the way you see that box called description next to the checkbox? In that box you can type a description of your image. What is that for?
Blind folks. They can move their cursor over the buttons on your page and their computer will read the decriptions to them.
Don't forget to save your webpage...
File > Save As > Make sure location is right and then click the
button.
FAQ
EXAMPLES
ALIGNMENT BOTTOM:
Words words words words words words words words words words wordswords
words
words
words words words words words words wordswords words words words words words
words words words wordswords words words words
ALIGNMENT MIDDLE
words
words words words words wordswords words words words words words words words
words wordswords words words words words words words words words wordswords
words words words words words words words words
ALIGNMENT TOP
wordswords words words words words words words words words wordswords
words
words words words words words words words wordswords words words words words
words words words words wordswords words
ALIGNMENT FLOATING LEFT
words words words words words words words wordswords words words words words
words words words words wordswords words words words words words words words
words wordswords words words words words words words words words
wordswords
words words words words words words words words wordswords words words words
words words words words words wordswords words words words words words words
words words wordswords words words words words words words words words wordswords
words words words words words words words words wordswords words words words
words words words words words wordswords words words words words words words
words words wordswords words words words words words words words words wordswords
words words words words words words words words wordswords words words words
words words words words words
ALIGNMENT FLOATING RIGHT
wordswords words words words words words words words words wordswords words
words words words words words words words wordswords words words words words
words words words words wordswords words words words words words words words
words wordswords words words words words words words words words
wordswords
words words words words words words words words wordswords words words words
words words words words words wordswords words words words words words words
words words wordswords words words words words words words words words wordswords
words words words words words words words words wordswords words words words
words words words words words wordswords words words words words words words
words words wordswords words words words words words words words words wordswords
words words words words words words words words wordswords words words words
words words words words words