| |
Adding Graphics
Plain Lines
To add a plain horizontal divider line to your page, click the line button.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. We offer a class called Editing and Converting Graphics where you can learn these skills with Adobe PhotoDeluxe.
To Add a Graphic
You can get graphics from a digital camera, scanner, or the Internet. But be sure to save the graphic in your images folder on your disk. If you don't pay attention to where your graphics are saved, you may find that they don't work when you publish your page.Position your cursor in the area where you want the graphic to appear.
Click theInsert/Place Object button
Or From the menu, click Insert, Object, Image
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. When it is selected, you'll see the handles as illustrated below:
Use the text alignment buttons 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.
Notice the button bar changes to show the following five options:
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 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
Note that many pictures lose quality when resized in a web editor. It is better to edit the size of the graphic in a graphic editing program instead (such as Adobe PhotoDeluxe).One way is to click on the graphic and use the handles to drag it bigger or smaller.
OR Click on the graphic.
Be sure you are viewing the inspector as shown to the right. (PC: Right click on your page and choose Show Inspector. Mac: From the menu, choose Window, Show Inspector)
Change the width and height by pixels (dots on the screen) or percent.Changing Other Graphic Options
Click on the graphic.
Be sure you are viewing the inspector. (PC: Right click on your page and choose Show Inspector. Mac: From the menu, choose Window, Show Inspector)The ALT Label will give a text label for text-only browsers or for people who have turned off the graphics.
The 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.
