• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 2. Working with Graphics > Positioning Graphics

Positioning Graphics

When you place an image directly in the body of a document, you have a limited number of options for positioning it. The following exercise is a method of creating an alignment that uses <div> tags. These tags are essentially containers that specify the alignment of everything between the tags. You will learn about other ways to align images later in this lesson and also in Lesson 4.

In invent_lens.html, click the invlens_header.gif image to select it. In the Property inspector, click the Align Center button.

If you don't see the Align Center button, click the expander arrow in the bottom right corner. The image becomes centered on the page.


The Align Center button is not the same as the Align drop-down menu that you will see below the three alignment buttons.

Insert a paragraph break after the page-title graphic by clicking off of the image and pressing Return or Enter. Import the text from invent.txt, select all the text and click the Align Left button in the Property inspector to set the alignment to the left.

You can copy and paste the text from invent.txt into the invent_lens.html document just like you did in Lesson 1.

When you work with multiple elements, you must put them in separate paragraphs to give them different alignments. You cannot center part of a paragraph and align the rest left. When you insert text directly below an image, for example, you need to use a regular paragraph break (press Return on a Macintosh or Enter in Windows) between the image and the text. If you use a single line break (by pressing Shift+ Return on the Macintosh or Shift+Enter in Windows) between them, any alignment you apply affects both the image and the text, because they would be considered part of the same paragraph block.

Set the following text options using the Property inspector for all the text: font should be Verdana, size should be –1.

You can save this file and preview it in the browser.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint