|
Step-by-Step: Align & Space Images
|
 |
What you will learn: |
to align image to left
to add space around image
to stop text wrapping
to center image |
Start with:
,
hector11.htm,
resource files
The bottom part of Hector's page looks bare. You will
insert some images to make it more interesting and then set the alignment
and spacing for a more attractive look.
Insert Image
-
Save the page with the name hector12.htm
in the web folder of your Class disk.
-
Put
your cursor at the beginning of the paragraph under Travel.
-
Insert
the image travel.gif that is in the
web folder on your Class disk. (You should
know how to do this now!)
The bottom of the image lines up with the baseline of the text. This
does not look very nice.
Align and Space Image
-
Right
click on the new image and from the popup menu select
.
- Click on the Appearance tab.
- In the drop list Alignment select left.
This will add align="left"
to the image tag so that the text will wrap around the image.
-
Set
Horizontal spacing to 5, which means 5 pixels.
- Click on OK.

The text now wraps around the image, but is moved a short distance away.
Success!
Stop Text Wrapping
The illustrations for the next steps were captured at
640 x 480 with a maximized window. At different resolutions and window
sizes, the text wrapping can be quite different. You will use the <br>
tag with the clear attribute to make sure
the wrapping is right for all window sizes.
- Resize the FPX window, if necessary, to be approximately 640
x 480.
- At the left of the paragraph that follows the heading Fishing,
insert the image fish.gif that is in
your web folder.
-
Set
the same Alignment and Spacing settings as before: Left and 5
pixels.
If your window is about 640 x 480, the next heading, Soccer,
is now sitting beside the fish image instead of being at the left
margin. Not at all appropriate!
- Move your cursor to the left of the heading Soccer.
-
From
the menu select | The dialog Break Properties opens
-
Select
Clear Left Margin
and click on OK.
The text moves down until it clears the image entirely.
The
symbol
shows where you inserted the break. For some reason FPX will display
this mark but will not display a normal paragraph mark.
Line Wrapping in Large Windows
Viewing your HTML pages in different window sizes can
often reveal unhappy surprises. For example, at 640 x 480 or smaller, the
heading Fishing appears on the left margin. But at 800 x 600 or
larger, the heading Fishing is to the right of the images! You can
(and should!) fix the problem even if your own monitor cannot hold a
window large enough to show the problem.
-
If
it is possible on your monitor, enlarge FPX window until the
Fishing heading wraps beside the image
travel.gif (larger than 640 x 480). The larger the window, the
more obvious the problem.
- Place your cursor at the end of the sentence
...I am not done with traveling yet.
- Insert a break to clear to the left margin.
-
Resize
the window slightly to make the screen redraw to show the break
correctly, if necessary.
- If there is an extra paragraph break above the heading Fishing
(as shown in the 800 x 600 view below), remove it by putting
the cursor to the left of Fishing and backspacing once.
More Images
-
Insert
the image ball.gif from your
web folder to the left of I
never played soccer as a child.
- Set the image properties the same as you did for
fish.gif.
- Insert a break of the type Clear Left
Margin to move the heading Cooking
below the image.
- Remove the extra blank paragraph.
- Insert the image grill.gif at the
left of the paragraph Dad taught me early that...
and set the image properties the same as you did for
fish.gif.
- Insert a break to Clear Left
Margin to make sure the heading Comments
and Suggestions is on the left margin.
-
Save your page. [hector12.htm]
Other Alignments
- Open the Image properties for the mailbox image at the
bottom of the page.
- Experiment by applying each of the alignment choices
in turn to this image. Which ones are noticeably different?
- Experiment by applying different horizontal and vertical
spacing.
-
Apply
the same settings for this image as you used earlier:
Alignment Left
5 pixels horizontal spacing
0 vertical spacing.
-
Save your page. [hector12.htm]
Center Images
In the Alignment list there is no choice that
centers an image on the page. To center an image on the page you must
center the whole paragraph that contains the image. Awkward!
-
Move
your cursor to the left of the image of Hector and Carla.
- Click on
the Center button on the toolbar.
The whole paragraph is centered horizontally, so all three
images move to the center.
- View the HTML code. ( |
) To the left of the image tag for
carla.jpg the paragraph tag has changed from changed from
<p> to
<p
align="center">
- Close HTML View.
-
Save your page. [hector12.htm]