Documentation

x

x

Building A Page

Formatting Images

Once you've added an image to a cell on your Web page, you can format the image in a variety of ways. Here's the cell created in the previous topic:

Go to the Web for Updated Help Topics

Table of Contents

Index of Help Topics

Next Topic

Next Topic

Previous Topic

Previous Topic

To edit the image left-click on it. The image will now have a thick red border, indicating that the image has been selected:

Now right-click on the image and click on "Images/Edit" or select "Edit" and then "Images" and then "Edit" from the menu. The following screen will appear (notice that it is the same screen as when we originally added the image):

You can apply image formatting using this screen when you first add an image or after an image already exists on a page, as in this case. There are three types of formatting you can use this screen to effect:

File Containing the Image You can use the Images screen to select another image file from the list and/or even add image files to the list. Display Size and Proportions When you first add an image to a cell, the program will set the size equal to that of the source file. (The original image size is shown at the right of the screen, under the "thumbnail" representation of the image). If you want to change the size, simply type in the new dimension for either height or width. In the example below, we are going to change the width of the coffee cup image from 75 to 125 pixels:

The choice of the gif or jpeg file that contains the image The display size and proportions Alternate text for the image

Note that as you type the new Width, "125", the height automatically adjusts itself to 125 pixels. That is because the checkbox to the right, "Keep Aspect Ratio" is checked. If you want the proportions of the resized image to be different from the original, simply click on the box to uncheck it, as we are going to do:

After unchecking the "Keep Aspect Ratio" box, let's enter a height of 145 pixels. The Image will now have dimensions of 125 pixels wide by 145 pixels high. Click "OK" to view the cell with the resized image:

Note that the image is considerably larger now than when we started. The coffee cup is taller and thinner than the original proportions of the image. The image is somewhat "grainier" than the original -- this is common when you make an image significantly larger than its original size. Note that the title has "wrapped" under the image, because the resized image does not leave enough room for the entire title to display within the cell width. If we widen the cell, it can look like: Repositioning In-Line Images You can change the relationship of text and image in the cell by dragging the image to various positions. Just click on the image, and holding the left mouse button, drag to a particular place in the line of text.  Below are three versions of the cell with the image in different positions:

	Coffee Time Have a hot cup of our fresh-roasted house blend. Not only will it open your eyes, it will also tickle your taste buds!

With a bit of experimentation you can find a great many interesting effects combining text and images in cells using image alignment. Deleting Images To delete an image, left-click on it until you see the thick red border, and then press the delete key (or "Edit/Images/Delete" on the menu). The image will be deleted, and any text in the cell will be intact.     Now let's break for a cup of coffee. . . .

	Coffee Time Have a hot cup of our fresh-roasted house blend. Not only will it open your eyes, it will also tickle your taste buds!

	Tip You generally should not make an image smaller than its original dimensions. Most images consist of thousands (if not tens or hundreds of thousands) of bytes in size. The more images there are on a page, and the larger the images, the longer it will take for your page to load on your users' browsers, expecially those who have relatively slow connections to the Internet. As a designer, you want to minimize the amount of time it will take for your users to see your pages. As a result, you don't want to consume any extra resources for a large image to load and then be reduced to fit your page. It is far preferable to use a graphics program to shrink the image to the size it will appear in the page and then add it to the page in its reduced size. By doing so you will increase the efficiency of the Web site you design.

	Coffee Time           Have a hot cup of our fresh-roasted house blend. Not only will it open your eyes, it will also tickle your taste buds!

	Copyright 2002-2005 Net Fulfillment Technologies, Inc. All rights reserved.

	Coffee Time Have a hot cup of our fresh-roasted house blend. Not only will it open your eyes, it will also tickle your taste buds!

	Coffee Time Have a hot cup of our fresh-roasted house blend.   Not only will it open your eyes, it will also tickle your taste buds!

Site Search