Adding images to your Web page

The images that you include on your Web pages can be simple line art or color photographs. You can use an image for visual effect alone, or make it function as a clickable link to another Web page or to a Common Gateway Interface (CGI) script. In addition to static images, you can also use QuickTime movies or other plug-in data files to make your Web pages truly multimedia.

You can make an image interlaced so that viewers can see more of the image as it's downloading onto their computers. You can also add a single transparent color to an image to make parts of it (like the background) disappear.

You can even use an image to create a background pattern for your Web page. For more information, see Setting the color and background of your Web page.

Claris Home Page comes with a library of clip art to use on your Web pages. You can also create your own libraries of images. For more information, see Using libraries and clip art.

Note Sometimes viewers turn off image loading in their browser, and some browsers don't support images. Keep these possibilities in mind when deciding where to include images on your Web pages and what alternative labels to use as image placeholders.

Converting image files

Images that you include on your Web page must be in one of the two standard formats used on the Web: GIF (Graphics Interchange Format) or JPEG (Joint Photographic Experts Group).

Claris Home Page automatically converts PICT files on the Macintosh and BMP files on Windows into GIF format. You can also convert images to GIF or JPEG format using an image editing program, such as Adobe Photoshop, or a conversion program, such as the Equilibrium Debabilizer on the Macintosh. Such programs may produce smaller files than the Claris Home Page automatic conversion.

Note To view JPEG images that you insert into Claris Home Page on the Macintosh, you need QuickTime 2.0 or later installed on your computer. Your Web page viewers won't need this application if their browser supports JPEG images.

Adding an image

When you add an image to a Web page, Claris Home Page creates a pointer to the folder where the image file is stored. When viewers open your Web page, their browser downloads the image and displays it.

Web pages with large image files take longer to download. As you add images to your Web page, you can check how long it will take viewers to download. For more information, see Using the Docum ent Statistics window.

Before you add images to your Web pages, make sure the image files are stored in the image folder that you have set up for your Web site. You can set the image folder to be the default location where Claris Home Page stores converted files. See Managing your image files for more information.

To add an image to your Web page:

Place the insertion point in the page where you want the image to appear.
Choose Image from the Insert menu.
An Open dialog box appears.
In the Open dialog box, select the GIF, JPEG, BMP, or PICT image file and click Open.
The image appears on the Web page.

If the image is a JPEG or GIF file, Claris Home Page creates a pointer to the current location of the file. If the image is a BMP or PICT file, Claris Home Page converts the file to GIF format and places the converted file in the default images folder.

Using the Image Object Editor

Once you've added an image to your page, you can use the Image Object Editor to change the attributes of your image. The bottom section of the Image Object Editor is expanded or collapsed depending on how you left it last.

You can open the Image Object Editor three different ways:

Double-click an image.
Click an image, and choose Show Object Editor from the Window menu.
Click an image, and click the Object Editor button on the toolbar.

To expand the Image Object Editor, click the triangle at the bottom of the window or click the Both tab.

To change the attributes of an image, select the image and then change the settings in the Image Object Editor. To apply the new settings, press Tab or click the close box of the Image Object Editor.

Use this image attribute setting

To do this

Alt Label

Type the text that appears in place of the image if your viewer's browser doesn't support images or if your viewer has turned image loading off. You should always provide an alternative label for important images.

Border

Change the thickness in pixels of the border around the image. A setting of 0 makes the border around the image invisible.

Alignment

Change how the image is aligned with text. Choose Top to align the top of the image with the top of the text next to it. Choose Middle to align the middle of the image with the text next to it. Choose Bottom to align the bottom of the image with the bottom of the text next to it. Choose Left or Right to place the image on the left side or right side of the page and have text flow around it.

Note View your page in a browser to see the actual left and right alignment of the image within text.

Client-Side Image Map

Click Edit to open the Client-Side Image Map Editor so you can create a client-side image map and add hotspots to it. See Creating a client-side image map for more information. Click Clear to remove client-side image map data from your Web page.

The following feature is only available in the complete version of Claris Home Page 2.0. When you're ready to upgrade, choose How To Upgrade from the Help menu.

Server-Side Image Map

Click Edit to open the image file in the Server-Side Image Map Editor so you can add hotspots to a server-side image map. See Creating a server-side image map for more information.

Transparency and Interlace

Click Set to make a GIF image interlaced or add transparency to a GIF image. See Creating an interlaced image, Adding transparency to an image, and Creating a server-side image map for more information.

Width

Change the width of the image.

Height

Change the height of the image.

Reset Size

Restore a resized image back to its original size.

Behavior

Change how an image works. You can set the image to be a normal image, a form button, or a server-side image map for links. For more information, see Making images interactive.

The following feature is only available in the complete version of Claris Home Page 2.0. When you're ready to upgrade, choose How To Upgrade from the Help menu.

Extra HTML

Add other HTML attributes to your table. (This is an advanced feature that requires knowledge of HTML; it specifies additional parameters for the <IMG> tag. For more information, see Working with HTML and Java applets.

Use this image attribute setting	To do this
Alt Label	Type the text that appears in place of the image if your viewer's browser doesn't support images or if your viewer has turned image loading off. You should always provide an alternative label for important images.
Border	Change the thickness in pixels of the border around the image. A setting of `0` makes the border around the image invisible.
Alignment	Change how the image is aligned with text. Choose Top to align the top of the image with the top of the text next to it. Choose Middle to align the middle of the image with the text next to it. Choose Bottom to align the bottom of the image with the bottom of the text next to it. Choose Left or Right to place the image on the left side or right side of the page and have text flow around it. Note View your page in a browser to see the actual left and right alignment of the image within text.
Client-Side Image Map	Click Edit to open the Client-Side Image Map Editor so you can create a client-side image map and add hotspots to it. See Creating a client-side image map for more information. Click Clear to remove client-side image map data from your Web page.
The following feature is only available in the complete version of Claris Home Page 2.0. When you're ready to upgrade, choose How To Upgrade from the Help menu. Server-Side Image Map	Click Edit to open the image file in the Server-Side Image Map Editor so you can add hotspots to a server-side image map. See Creating a server-side image map for more information.
Transparency and Interlace	Click Set to make a GIF image interlaced or add transparency to a GIF image. See Creating an interlaced image, Adding transparency to an image, and Creating a server-side image map for more information.
Width	Change the width of the image.
Height	Change the height of the image.
Reset Size	Restore a resized image back to its original size.
Behavior	Change how an image works. You can set the image to be a normal image, a form button, or a server-side image map for links. For more information, see Making images interactive.
The following feature is only available in the complete version of Claris Home Page 2.0. When you're ready to upgrade, choose How To Upgrade from the Help menu. Extra HTML	Add other HTML attributes to your table. (This is an advanced feature that requires knowledge of HTML; it specifies additional parameters for the <IMG> tag. For more information, see Working with HTML and Java applets.

Setting the image size

How you set an image to scale in a browser depends on the type of image. For example, you may not want a photograph to rescale as your viewers resize their browser windows because it distorts the image, but you may want a simple border or dividing line to rescale as the browser window changes. In Claris Home Page you can set fixed dimensions for how the image is displayed in a browser. Or, you can have a border or other image resize proportionately as your viewers resize their browser windows.

To resize an image or set how the image size adjusts to the size of a browser window:

Double-click on the image to open the Image Object Editor.

Choose a setting type from the Width or Height pop-up menus.

Choose this type

To have the image sized like this

Percent

Image width or height appears as the chosen percentage of the browser window width or height.

Pixels

Image width or height always appears as the specified size, measured in pixels, regardless of the browser window's size.

Type the number of pixels or percent for the image's width or height.
Press Return (Macintosh) or Enter (Windows).

Choose this type	To have the image sized like this
Percent	Image width or height appears as the chosen percentage of the browser window width or height.
Pixels	Image width or height always appears as the specified size, measured in pixels, regardless of the browser window's size.

Tip Use the mouse to change the width and height of the image proportionately. Select the image, hold down the Shift key, and then drag the lower-right corner handle.

To set the image to its original size, click the Reset Size button.

Making images interactive

You can make images more than just visual elements on your Web pages. You can make them interactive so the viewer can click them to perform an action.

You can make an image function as:

An image map, so viewers can click different parts of it to activate different links. For more information, see Linking parts of an image.
A Submit button in a form, so viewers can click it to send form data to the server. For more information, See Adding a submit button.
A link, so viewers can click it to go to a different Web page or to an anchor in the same Web page. For more information, see Creating links and anchors.

Creating an interlaced image

When a browser downloads a normal GIF image, the image gradually appears, line by line, from top to bottom on the screen. If an image is large and takes a long time to download, this can be frustrating for the viewer. viewers might have to wait for almost the entire image to download before they really know what the image is.

To avoid this problem, you can change an image so that it is interlaced. When a browser downloads an interlaced GIF image, a rough outline of the entire image is displayed first and then detail is gradually added.

To make an image interlaced:

Double-click the image to open the Image Object Editor.
Click the Set button to the open the image file in the Transparency and Interlace Image Editor.
Click the Interlace button on the toolbar.
To change the image back into a non-interlaced image, click the Don't Interlace button .
Close the Transparency and Interlace Image Editor and save the changes to the image file when Claris Home Page prompts you to.
The image file is stored and displayed as an interlaced image.

Tip To open the image in the Transparency and Interlace Image Editor using the mouse, Control-click (Macintosh) or right-click (Windows) the image and choose Edit Transparency/Interlace from the pop-up menu.

To set Claris Home Page to convert PICT and BMP images into interlaced GIF images:>

Choose Preferences from the Edit menu.
Choose Images from the pop-up menu or click the Images tab to display a new set of options.
Select Make Interlaced GIFs.
Click OK.

Note This setting only affects GIF files that Claris Home Page automatically converts from PICT or BMP files. For more information on image conversion, see Converting image files.>

Adding transparency to an image

You can make a single color in an image transparent so the background of the Web page shows through. This is useful for making the rectangular background and outline of an image disappear.

To make the background of an image transparent:

If necessary (such as with most scanned images and photographs), use an image-editing program to make the image background a single color and then add the image to your Web page.
Select the image and open the Image Object Editor.
Click the Transparency and Interlace Set button to open the image file in the Transparency and Interlace Image Editor.
Click the Transparency Tool button on the toolbar.
Move the pointer over the image until it turns into an eyedropper.
QuickTimeUsing the eyedropper, click to select the color of the image you want to make transparent.
All pixels of the selected color become transparent.
Close the Transparency and Interlace Image Editor and save the changes to the image file when Claris Home Page prompts you to.
The color you selected in the image becomes transparent so you can see the background of your Web page. To learn how to change the color or background of your Web page, see Setting the color and background of your Web page.<>

To remove transparency from an image, open the image in the Transparency and Interlace Image Editor, and click the Remove Transparency button on the toolbar.

Managing your image files

You can specify the folder where Claris Home Page stores the GIF files it creates when you add a PICT or BMP image to your Web page. You can also have Claris Home Page prompt you for a filename and location each time it converts a file.

If you store your images folder in the same folder that contains your Web pages, the relative path to the images is always maintained, even when you move your Web site onto the Web server. The path can be broken, however, if you move an image file, the folder containing the image file, or the Web page that references the image. If you do this, you must reinsert the image into the Web page to set the new path.

If you need to store your image folder somewhere other than within your Web site folder, you can specify an absolute path to the image files that won't change when you move your Web page files to a new location. For example, the images you add to your Web pages may already reside in a special image folder on the Web server you're going to use for your Web pages.

You can also use a Site document to have all the images you use on your Web pages stored in a specific folder. For more information, see chapter 11, "Uploading to a server."

For more information about organizing your Web pages, see Planning your Web site.

Specifying where converted image files are stored

To set the default location where Claris Home Page stores the converted GIF files:

Choose Preferences from the Edit menu.
Choose Images from the pop-up menu or click the Images tab to display a new set of options.
Click Set.
Macintosh: Navigate to the folder where you want to store the created images and click Select "folder name."
Windows: Type the directory path where you want to store the created images and click OK.
Click OK.

To specify that Claris Home Page prompt you for a filename and location each time it converts an image file:

Choose Preferences from the Edit menu.
Choose Images from the pop-up menu or click the Images tab.
Select Prompt for File Name/Location and click OK.
When Claris Home Page converts a file, it prompts you to assign a filename and a location for the converted file.

To specify absolute paths to where your images are stored:

Choose Preferences from the Edit menu.
Choose HTML Output from the pop-up menu or click the HTML Output tab.
Select Use Absolute Pathnames and click OK.
Claris Home Page generates a complete, exact pathname that's not relative to the location of your Web page each time you insert an image. For more information about absolute paths, see Using relative or absolute paths.

Adding QuickTime movies and plug-in data files

You can add QuickTime movies and other plug-in data files to your Web page. QuickTime movies and other plug-in data files rely on a plug-in addition to your browser in order to provide advanced output such as animation and music to your Web page viewers.

Note You can only add "flattened", or in other words, cross-platform, QuickTime movies to your Web page. In addition, you cannot activate a QuickTime movie or other plug-in data file in Claris Home Page. You must preview your Web page in a browser to activate them.

To add a QuickTime movie to your Web page:

Choose QuickTime Movie from the Insert menu.
In the Open dialog box, select the QuickTime movie file and click Open.
The QuickTime movie appears on your Web page with the movie's "poster picture" (usually the first frame of the movie) showing.
Double-click the QuickTime movie to open the QuickTime Movie Object Editor.
To see all of the settings in the QuickTime Movie Object Editor, click the triangle or click the Both tab.

To change the attributes of the QuickTime movie, change the appropriate settings and press Tab or click the close box of the QuickTime Movie Object Editor:

Use this QuickTime attribute setting

To do this

Width

Change the width of the QuickTime movie. Choose Pixels to make the movie a specific width in pixels or Percent to make the movie a specific percentage of the browser window's width.

Height

Change the height of the QuickTime movie. Choose Pixels to make the movie a specific height in pixels or Percent to make the movie a specific percentage of the browser window's height.

Reset Size

Reset the size of the QuickTime movie to its original dimensions.

Loop

Choose Yes to have the QuickTime movie play over and over. Choose No to have the QuickTime movie play once.

Autoplay

Select to have the QuickTime movie automatically play when the Web page is first opened and the movie is ready to play.

Controller

Choose Yes to display a QuickTime movie controller at the bottom of the movie so the viewer can control how it plays. Choose No to display the movie without a controller. Choose (unspecified) to have the browser decide whether or not to display a controller at the bottom of the movie.

Important If you choose No, you should choose Autoplay and/or Loop so your movie plays.

Plugin Page

Choose a URL that has the QuickTime plugin available for downloading. If the viewers don't have the QuickTime plugin installed on their systems, most browsers will open the specified URL for them when the QuickTime movie is activated.

Important Normally, you should not change this setting from its default value, http://quicktime.apple.com.

The following feature is only available in the complete version of Claris Home Page 2.0. When you're ready to upgrade, choose How To Upgrade from the Help menu.

Extra HTML

Add other HTML attributes to your table. (This is an advanced feature that requires knowledge of HTML; it specifies additional parameters for the <EMBED> tag. For more information, see chapter 12, "Working with HTML and Java applets.")

Use this QuickTime attribute setting	To do this
Width	Change the width of the QuickTime movie. Choose Pixels to make the movie a specific width in pixels or Percent to make the movie a specific percentage of the browser window's width.
Height	Change the height of the QuickTime movie. Choose Pixels to make the movie a specific height in pixels or Percent to make the movie a specific percentage of the browser window's height.
Reset Size	Reset the size of the QuickTime movie to its original dimensions.
Loop	Choose Yes to have the QuickTime movie play over and over. Choose No to have the QuickTime movie play once.
Autoplay	Select to have the QuickTime movie automatically play when the Web page is first opened and the movie is ready to play.
Controller	Choose Yes to display a QuickTime movie controller at the bottom of the movie so the viewer can control how it plays. Choose No to display the movie without a controller. Choose (unspecified) to have the browser decide whether or not to display a controller at the bottom of the movie. Important If you choose No, you should choose Autoplay and/or Loop so your movie plays.
Plugin Page	Choose a URL that has the QuickTime plugin available for downloading. If the viewers don't have the QuickTime plugin installed on their systems, most browsers will open the specified URL for them when the QuickTime movie is activated. Important Normally, you should not change this setting from its default value, http://quicktime.apple.com.
The following feature is only available in the complete version of Claris Home Page 2.0. When you're ready to upgrade, choose How To Upgrade from the Help menu. Extra HTML	Add other HTML attributes to your table. (This is an advanced feature that requires knowledge of HTML; it specifies additional parameters for the <EMBED> tag. For more information, see chapter 12, "Working with HTML and Java applets.")

To add a plug-in data file other than a QuickTime movie to your Web page:

Choose Plugin from the Insert menu.
A warning message appears to not select an actual plugin, but the data file for it instead.
Click OK.
In the Open dialog box, select the plugin data file and click Open.
A rectangular box representing the plugin data file appears on your Web page.
Double-click the box to open the Plugin Object Editor.
To see all of the settings in the Plugin Object Editor, click the triangle or click the Both tab.

To change the attributes of the plugin data file, change the appropriate settings and press Tab or click the close box of the Plugin Object Editor.

Use this plugin attribute setting

To do this

Width

Change the width of the plugin data file. Choose Pixels to make the plugin a specific width in pixels or Percent to make the plugin a specific percentage of the browser window's width.

Height

Change the height of the plugin data file. Choose Pixels to make the plugin a specific height in pixels or Percent to make the plugin a specific percentage of the browser window's height.

Plugin Page

Choose a URL that has the actual plug-in data file available for downloading. If the viewer doesn't have the required plugin installed on their system, most browsers will open the specified URL for them when the plugin is activated.

The following feature is only available in the complete version of Claris Home Page 2.0. When you're ready to upgrade, choose How To Upgrade from the Help menu.

Extra HTML

Add other HTML attributes to your table. (This is an advanced feature that requires knowledge of HTML; it specifies additional parameters for the <EMBED> tag. For more information, see Working with HTML and Java applets.)

Use this plugin attribute setting	To do this
Width	Change the width of the plugin data file. Choose Pixels to make the plugin a specific width in pixels or Percent to make the plugin a specific percentage of the browser window's width.
Height	Change the height of the plugin data file. Choose Pixels to make the plugin a specific height in pixels or Percent to make the plugin a specific percentage of the browser window's height.
Plugin Page	Choose a URL that has the actual plug-in data file available for downloading. If the viewer doesn't have the required plugin installed on their system, most browsers will open the specified URL for them when the plugin is activated.
The following feature is only available in the complete version of Claris Home Page 2.0. When you're ready to upgrade, choose How To Upgrade from the Help menu. Extra HTML	Add other HTML attributes to your table. (This is an advanced feature that requires knowledge of HTML; it specifies additional parameters for the <EMBED> tag. For more information, see Working with HTML and Java applets.)