Objectives of this Tutorial

Generally: To apply custom effects, such as element positioning and hypertext rollovers.

Specifically: On completion of this lesson, you will be able to:

• Position graphics on a page
• Position text on a page
• Add a background image to a web page
• Apply HTML and CSS character effects
• Apply indents and spacing to paragraphs
• Create hypertext rollover effects

HTML is primarily designed to give the logical layout of text, in terms of heading levels, body text, lists and so on. As HTML web pages have become more and more sophisticated, the capabilities of HTML are being extended by various new technologies. These allow the website designer greater control over the appearance of the page. Using these technologies, a graphical editor like FrontPage allows you to create very sophisticated graphical layouts. The only drawback is that some effects might not work in older browsers.

One of the main improvements to page layout is the ability to position elements. Elements on a basic HTML page are displayed sequentially. The browser reads the HTML file to find out what to display, and puts each element in position as it gets to it. The exact position of objects on a web page will vary according to the type of browser, the size of the window and the settings the user has made for displaying text.

Basic HTML allows you to align text around pictures and to insert elements into tables to exert some control over the page layout. However, you can also use Cascading Style Sheets to position elements at a specific point on the page. Positioning also allows you to create layers of elements. For example, you could put a caption over a graphic.

Note: Positioning is implemented using CSS 2.0, which is only interpreted correctly in version 4.0+ browsers. Positioning needs to be used with some care. If the page is viewed in windows of different sizes or with different screen resolutions, the results may not be quite what you intended.

Position Graphics and Text on a Page

Use absolute positioning to locate the top-left corner of an element an exact number of pixels from the top-left corner of its container (usually the web page).

One of the uses of absolute positioning is to control the captioning of images, in order to stop the image wandering off by itself due to the settings of the user's browser. The following example shows you how to position an image and a text element.

Note: Do not try to make an animated DHTML element absolutely positioned.

To position an image

• Click on the image once to select it
• On the Pictures toolbar, click Absolute Positioning

OR

• From the Format menu, select Position...

The Position dialogue box is displayed.

Position dialogue box

• Under the Positioning style section, select Absolute
• In the Left: and Top: box set the coordinates of the image's top left corner

The Width and Height boxes contain the dimensions of the image and do not need to be changed.

• Click OK

The position of the image on the page is now set. As you can see from the screenshot, it "floats over" the surrounding text.

The image is absolutely positioned

Once you have setup the image properties to use absolute positioning, you can use drag-and-drop to move the image. It will use absolute positioning until you change the positioning style back to None.

Tip: You should hide HTML Reveal tags when working with positioned elements.

To position text

• Click in the paragraph of text that you want to position
• From the Format menu, select Position... and set the Positioning style to Absolute
• Optionally, set the Left: and Top: coordinates
• Click OK

Selection handles are displayed around the text.

Text selection handles

• You can click-and-drag the handles to resize the box - the text will word wrap to remain within the box
• To move the text, point to the border of the text box so that a four arrow move pointer appears then click-and-drag the caption to a new position on the page

Continued...