| |
Adding Graphics
Plain Lines
To add a plain horizontal divider line to your page, click the line button.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.However, Claris HomePage has a neat feature called Consolidate. This feature will gather your graphics from various locations and put them all the in image folder for you. It isn't perfect though. If you have used graphics from several floppy disks, you will have a confused mess! I would suggest using this feature ONLY when you use the graphics that come with Claris HomePage. If you plan to use graphics from other sources, be sure to save or copy them to your images folder BEFORE adding them to your page.
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. (One exception: On the MAC, Claris HomePage converts PICT files for you). 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 the Claris HomePage Library
From the menu, choose File, Library
Pick a library that interests you.At this point, avoid the backgrounds, movies, filemaker form, filemaker reference, and quicktime libraries.
A separate window will appear similar to the following:
Click on the picture you like.
You can drag the picture from the window to your file.
Or You can click the Insert in Pagebutton.
Close the library when you're finished. If it says something about saving the library or .hlb folder, DON'T save it. You may have made some changes to the library and you don't want to change the library.
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. Click on the wrench (the object editor).
or Double click on the graphic.
Be sure you are viewing the Appearance tab.
Notice the Alignment drop down menu.
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
One way is to click on the graphic and use the handles to drag it bigger or smaller.
OR Click on the graphic. Click on thewrench (the object editor).
Be sure you are viewing the Appearance tab.
Change the width and height by pixels (dots on the screen) or percent.Changing Other Graphic Options
Click on the graphic. Click on the wrench (the object editor).
Be sure you are viewing the Appearance tab.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).Consolidate the Graphics
Remember our discussion on graphics and file management? Graphic files do not become part of the web page, and therefore need to be saved in the same place as the web pages. We are saving our graphic files in the images folder inside our web page folder. Are the graphics we have just added in the images folder?You're right, they're not! They are still in the HomePage folder. Consolidate will copy them from the HomePage folder on the hard drive to our images folder.
Click on the Consolidate button (almost the end of the first row)
or from the menu, Edit, Consolidate.
NOTE: if you haven't saved your file, you will be prompted to do so.
The Consolidate dialog box appears.
For Consolidate media files, choose "in a separate media folder"
It should be saving in the images folder.
Click Consolidate.It should give you a message telling you how many files were checked and consolidated.
If you added 1 graphic from the HomePage library, and you consolidate for the first time, it should say 1 link checked and 1 file consolidated.
Then, if you added two more graphics from the HomePage library, and you consolidate again, it would say 3 links checked (for your three graphics), and 2 files consolidated (for the two new files).
To Add a Graphic from Your Disk
If you get graphics from another source: 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 theInsert Image button
Find the file from the images folder on your disk.
Click Open.Position the graphic on the page as we did with the graphics above.
© 2000 Instructions created by Janine Lim for Berrien County Intermediate School District and shared with AVLN by permission.
