Composer Tutorial
Adding Graphics - The Big Picture
Composer TutorialAdding Graphics - The Big Picture |
|
|
|
Ready to learn how to put graphics on web pages? With Composer, nothing
could be easier. If you are still working on your test page, delete everything
off so that the page is clean or open a new blank page to start fresh.
Make sure you have a background in place. The reason for this will become clear as we move through this tutorial. You can use a plain color if you'd like, the results will be the same. |
|
 |
|
 |
|
There are two types of graphics that you can use when building web pages
that are accepted by almost every browser. One is gif and the other is
jpg. The formula for which one to use is entirely up to you. There are
other types of graphics that can be used but not all browsers can see these
other types. If you want to reach the largest viewing audience possible,
stick to either of these two choices.
To the left are two files I created for you to use, or you can use some of your own. The top one is in gif format and the bottom one is a jpg. There are sites all over the internet where you can download free graphics. There are also graphic packages that allow you to make your own. To download a graphic using Netscape, place your cursor over the graphic. Click the right mouse button, a menu will pop up. Scroll your mouse down to "Save image as...". You will need to know which directory you are downloading to. |
|
|
Use the Formatting bar to center align your page. To add graphics to your
web page, click on the Image icon located on your Composition toolbar.
You will be presented with the Image Properties dialog box. Click on the
Choose File button. You will then need to scroll to the directory where
you have stored your graphic files and choose one to open. This will place
the path to the image location inside the text box located next to the
Choose File button.
Don't worry about the rest of the formatting features for right now. Just click OK for the graphic to be added to your web page. In my example below, I also hit the Enter key to drop me to a new line to add the other graphic. As you can see, adding images to web pages with Composer is very easy to do. Point and click is the only way to go for me! Note - there are 3 tabs on this dialog box. Right now we are only concerned with the first tab - Image. |
|
 |
|
 |
|
The two graphics I used are the gif and jpg images provided above. There
are two main types of gif files that I use. One type is transparent and
the other is non-transparent. The image on top is a transparent gif
and is the same file used above and on my test page. As you can see, it
works equally well on both backgrounds, meaning that you can see the background
through the image.
Remember in the earlier tutorial when I said not to use fancy fonts when typing your web pages? Well, this is a way to get around that. A lot of people will make a fancy "header" graphic using those same fancy fonts, then place it on their web pages. Isn't that ingenious? Okay, maybe not ingenious, but it's still pretty cool! |
|
| In order to use some of the other features of the Image Properties dialog box, let's use a smaller graphic. You can use this book grpahic or use one of your own. |
|
 |
|
|
Clear off your test page so that it is blank. Use the alignment option
on the Formatting toolbar to align your text on the left. Next, type at
least 2 paragraphs of text just as you would in a word processor. It can
be garbage text or anything you want. Use your Formatting feature to make
the text a little larger than usual so that you won't have to type as much.
I copied some text from a help file then copied and pasted it over and over again. What we want to accomplish with this is to have structure, with spaces and punctuation. I also bolded my text so that you could read it easier. Remember any text will do but for you to get the right effect, the paragraph should contain breaks in it. |
|
 |
|
| If you haven't downloaded the small book above then do so now or use any other graphic you like. Next, click at the beginning of the first paragraph to change your insertion cursor. You should have a blinking line at the beginning of the paragraph. Click on the Image icon and find the book.gif file and add it to your web page. Leave all the defaults as they are. | |||||||||||||||
|
|||||||||||||||
| Next, change your insertion point to the beginning of the next paragraph and add the image again, stopping at the Image Properties dialog box (refer to the caption above). This time, change the second option. This option is called "Text alignment and wrapping around images". Click on the first option which should look like this: | |||||||||||||||
|
|||||||||||||||
|
|||||||||||||||
|
|||||||||||||||
| The following screen shots will not be full page. This is so that you can more easily see what these formatting options will look like in conjunction with your own pages. Continue adding paragraphs and inserting the same image at the beginning of each one, changing the wrapping option as you go. Skip option 4 as it is the default one and is the one we used in the first paragraph. Some of the differences between the options are a little hard to see. I will confess that using an image at the beginning of a paragraph like this some of the options look identical. You will probably not notice a marked difference between 2 and 3 or 4 and 5. | |||||||||||||||
|
 |
|
You will see some difference between the default option 4 in the first
paragraph and option 1. Notice where the alignment of the text is in conjunction
with the graphic.
These two examples most clearly shows you how the wrapping of the graphics work with the text. The screen shots below show you the rest of the options in the order they are on the graph with the exception of the the default option 4. To recap - these are shown in the order of 4, 1, 2, 3, 5. |
|
||
 |
 |
|
|
| So in this tutorial we learned about "header" graphics and how they are used to *force* fonts that others might not be able to see. We touched on why we should use only gif or jpg type graphics. And we learned how to insert graphics into web pages and some of the basic formatting options that can be used with them. |
|
| Move on to: More about graphics |
|
| Go back one back one page. |
