![]() | ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
Adding Graphics
Plain Lines
To add a plain horizontal divider line to your page, click the H. Line button.
Assignment:
Switch back to Composer and add a line to your page. To delete it, click on it so you can see the handles around the line and press the delete key on your keyboard.Other Graphics
Unlike a word processor, graphics do not become part of your document. When you add a graphic, you're really adding a "link" to the graphic. So make sure your graphics are in the images folder on your disk before you add them.Graphics can greatly enhance your site and make it more attractive. You can find graphics by hunting the Web and saving graphics as described earlier. Graphics for the Web must come in one of two formats: GIF or JPG/JPEG. There are many shareware convertors that can change graphics from one format to another. Adobe Photoshop, Adobe PhotoDeluxe, and PaintShop Pro are very helpful for creating and manipulating graphics. When using graphics, keep in mind that they can make the page loading time very long. If people grow tired of waiting for your page to load they may go elsewhere. Try to keep the images small.
To Add a Graphic from Your Disk
If you get graphics from the following sources: digital camera, scanner, or the Internet, you will add it from the disk.Position your cursor in the area where you want the graphic to appear.
From the menu, click Insert, Image
Or Click the Image button
Find the file from the images folder on your disk.
Click Open.Editing and Positioning the Graphic
DON'T get annoyed here! Graphics are placed relatively, i.e. either they are left justified, centered, or right justified. You cannot just drag it where you want it to be. This is a limitation of HTML. Remember it is limited so that the pages transfer quickly over the Net. You cannot place the graphic in one specific place unless you use tables. We'll be learning that soon.Position
Click on the graphic to select it.
Use the text alignment pull down menu to justify the graphic (left, right, center).
You can drag the graphic around somewhat. It will drop where the cursor is blinking. Generally it will be attached to text in some way.
Changing the Way the Text Wraps Around
Click on the graphic. Click on the image button.
or Double click on the graphic.
Be sure you are viewing the Image tab.
Notice the text alignment buttons.
Top Aligns one line of text to the top right of the picture.
Middle Aligns one line of text to the middle right of the picture.
Bottom Aligns one line of text to the bottom right of the picture.
Left and Right alignment will not show in Netscape Composer. You need to use the Preview button to see how these options change the alignment.
Left Aligns several lines of text to the right of the picture. (The picture goes Left).
Right Aligns several lines of text to the left of the picture. (The picture goes Right).These are your only options. That's the nature of HTML! Remember though, tables can help.
Resizing the Graphic
One way is to click on the graphic and use the double arrow on the corners to drag it bigger or smaller.
OR double click on the graphic.
Be sure you are viewing the Image tab.
Change the dimensions (width and height) by pixels (dots on the screen) or percent.Changing Other Graphic Options
Double click on the graphic.
Be sure you are viewing the Image tab.The ALT Text will give a text label for text-only browsers or for people who have turned off the graphics.
The Solid Border option will put a border around the graphic. 0 is invisible, 1 is a thin border, etc.
The border will be the default color (black) of your normal text unless it is a link to another page (blue).
© 2000 Instructions created by Janine Lim for Berrien County Intermediate School District and shared with AVLN by permission.