Jump to Content

Inputting text and other style features

To meet the W3C accessibility guidelines it is very important not to use the formatting menu options (Format, Font or Format, Paragraph) available within FrontPage to change text size or colour.

Use the information on this page in conjunction with the web style guide.

 


Implementing heading styles

Mainly use headings 1, 2 and 3. If you want to use a level 4 heading, you can either choose the template Heading 4 (italic and unbolded), or choose Normal from the pull down menu and italicise or bold.

Which heading style?

Heading 1

This is the main heading at the top of the page. Make sure the wording for this heading exactly replicates the left menu link (if it has one). Note: only use one Heading 1 on each page at the top.

Heading 2

This heading should be the next heading level you use after Heading 1.

Heading 3

This heading should be the next heading you use after Heading 2, if a subheading of Heading 2.

How to implement a heading style

  1. In FrontPage, make sure the Formatting toolbar is showing (if not, go to View > Toolbars).
  2. Select the text you want to apply the heading style to.
  3. Use the pull down Style menu to choose the heading you want. This heading will already be in the corporate web style so you will not need to format it.

The Style menu and Formatting toolbar in FrontPage

 

Checking your heading structure

This webpage illustrates how your heading structure should work. Using correct level headings will make the meaning of your content clear to the user and will comply with W3C accessibility guidelines.

You can check in the browser that the template headings look as they should. If they do not look like other headings 1, 2 and 3 (see the corporate webpages to make sure) then go back into FrontPage and ‘remove formatting’ from this heading, then reset the Heading style.

top^

 

Changing text size

You may want to change text size (eg for citations and references) to small or medium text. You need to do this in the HTML code.

In FrontPage 2002

  1. Highlight the text you want to make small or medium
  2. Click on the HTML tab at the bottom of your page
  3. In the HTML screen look for your highlighted text
  4. In front of this text will be the code <p>
  5. Change this code to look like this: <p class=”mediumtext”> (or <p class=”smalltext”>)
  6. Save and preview in the browser (it won’t show in FrontPage)

 

Changing text colour

You may want to change text colour to make something stand out in addition to the use of heading, bold or italic styles. A style called 'alert' has been created which is the same colour as heading 1 but is the same size as the normal text. You need to do this in the HTML code.

In FrontPage 2002

  1. Highlight the text you want to use the alert style
  2. Click on the HTML tab at the bottom of your page
  3. In the HTML screen look for your highlighted text
  4. In front of this text will be the code <p>
  5. Change this code to look like this: <p class="alert">
  6. Save and preview in the browser (it won’t show in FrontPage)

 

Adding a caption to your image

Artist's impression of the new Garth Boomer Building at Mawson Lakes campus - image courtesy of MGT Architects and Russell & Yelland Architects

A caption style exists for use with images as per the image to the right of this text.

Below is the HTML code - in italics - you will need to insert just before the paragraph where you want the image to sit. The use of the caption style is highlighted with bold text. You will need to change the image details to those of your own image. We have used a table so the caption will align with the image.

<table summary="" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" align="right" width="10%">
<tr>
<td><img border="0" src="yourimagehere.jpg" alt=" ">
<p class="caption">Artist's impression of new City East Health Sciences building - image courtesy of Cox Grieve Gillet</p></td>
</tr>
</table>

 

top^

 

Inserting horizontal rules

For pages that are lengthy, the corporate website has used

To insert the horizontal line using the corporate web look

  1. In FrontPage position the cursor where you want the line to appear
  2. Go to Insert and select Horizontal Line

When viewed in the browser on the corporate web, the Horizontal Rule properties have been defined in the stylesheets to be a grey, 1 pixel high line rather than the default Frontpage line so you won't need to define its properties.

 

Inserting a 'top' link

To insert a 'top' link you will need to put HTML text into your page

  1. In FrontPage, where you want to insert your top link, highlight the text above in Normal view
  2. Click on the HTML tab to go into HTML view
  3. Look for your highlighted text
  4. Below your highlighted text type <p class="smalltext"><a href="#top">top^</a></p>
  5. Go back to the Normal view to see your top link displayed
  6. Save and Preview in Browser

Note: If the 'top' link does not work check you have inserted the correct HTML from point 4 above.

 

 

top^