Jump to Content

Creating new webpages using the templates

Steps in this process

Use the templates in FrontPage to create new webpages in the *.asp format rather than creating them in another format and having to convert them.

If you can't avoid using Word when creating new content follow these guidelines

 

Saving the templates

You must save a copy of the template before using it. As the template files are read-only you cannot directly modify them.

Having a clear plan of your site's information architecture when using the templates will make the process of constructing your website in the new environment a lot easier. Keep your IA structure in view as you go through the process of saving templates as pages in your site (this applies to creating new webpages or converting existing webpages).

To access the templates

  1. Open your new site in www.newdev.unisa.edu.au/*
  2. Click on the Templates folder to view its contents. You will see the three template optionsTemplates folder showing the three template types
    1. fullscreen.asp
    2. left_menu.asp
    3. no_left_menu.asp
  3. Double click on a template in the Folder List to open in the right hand (page) screen
  4. The name of the template displayed in the top bar of the right window in FrontPage should be 'Templates/leftmenu.asp' (or whatever your template choice is)

Save the template (see Method 1 or Method 2)

Method 1

  1. Open the template
  2. Go to File, then Save As...
  3. In the Save As dialogue box choose the folder you want to save the file to (this will be a folder you have created eg Current students) or it could be just the general folder for your unit eg 'art'
  4. Give the file a name. If it is the index or introduction file for a folder, or the home page, call it default.asp (see Naming conventions)

Method 2

  1. Select the template you wish to save in the Folder List
  2. Right click the mouse and select Copy
  3. Select the folder you want to put the template copy in - this could be www.newdev.unisa.edu.au/*  or a folder you have created
  4. Right click the mouse and select Paste (the template will be saved in the place you have chosen)
  5. Select this saved template in your Folder List
  6. Right click the mouse and select Rename
  7. Type the new name eg default.asp and press Enter (see Naming conventions)

Follow either of these methods each time you want to create a new webpage. You can use any file to create a new file; it doesn't have to be the template each time. Just make sure you are saving the right template.

The statement Please do not delete this statement or add any content above this line appears at the top of the page to ensure that the banner specifications are not deleted. The statement Please do not delete this statement or add any content below this line appears at the bottom of the page to ensure that the footer specifications are not deleted.

Viewing your pages in the browser

What you see in FrontPage when using a template is not how it will look on the web. Use the icon Preview in Browser in the Standard toolbar to see your page on the web. Viewing your page on the web will also tell you which is the best template to use.

top^

 

Inputting text and other style features

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

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 style

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>
 

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
  3. Once the line has appeared, highlight it and right click your mouse
  4. Select Horizontal Line Properties...

 

  1. In the Height: box change from the default 2 to 1
  2. In the Color: box choose the dark grey from the pull down menu
  3. Click OK

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^

 

Inserting images

The templates have been designed for monitors with resolutions of 800x600 pixels. Bandwidth affects download time, so images of more than 30-40kb may take too long for a user to download. Ideally keep your images at less than 15kb (15000 bytes).

To ensure that image and text complement each other you will need to view your page in the browser. You may find you have to make your image smaller (resize) or put white space around it to make it presentable on the webpage. Try looking at your webpages in different browsers to get a sense of the best compromise. See Web browsers for details.

Inserting your image into a saved template

Images in the new templates will automatically be aligned to the right of text unless they fill the page.

FrontPage 2002

  1. Open your site in FrontPage
  2. Open the saved template page you want to insert the image into
  3. Put your cursor next to the text where you want the image to appear
  4. Go to Insert and select Picture, then From File...
  5. Find the file in your images folder
  6. Select the file and click Insert
  7. Save and Preview in Browser

The image should be placed so it looks like this like the image on the right. When viewed in a web browser the image will float to the right.

Image width and size

The preferred image width for the corporate web is 260 pixels wide if landscape or 180 pixels wide if portrait. To find out the width of your image

  1. Open the image file in FrontPage and right click on it
  2. Select Properties
  3. Check the width of your image in the Size box

The preferred image size for the corporate web is less than 15kb. To find out the size of your image

  1. Select the image file in your images (or other) folder
  2. Right click on the file
  3. Choose Properties...
  4. In the dialogue box look at the file size next to Size:

Properties box showing image size

Adjusting your image

Following are instructions for how to fix the problem of your image not presenting well in the browser or affecting the layout of the text it accompanies.

If the right hand contents drop down from the top of the page

An image is too large for your page if the contents drop when you view your page in the browser.

Note: The preferred method is to resize using software like Photoshop or Paint Shop Pro but if you do not have this option you can use Frontpage.

Reducing the width and size of an image in FrontPage 2002

  1. Select the graphic by clicking on it in the page
  2. Drag one of the corner handles inward to make the graphic smaller
  3. Go to View, select Toolbars then Pictures to open your Pictures toolbar
  4. In the Pictures toolbar click on the Resample icon to reduce the file size
  5. In the File menu click Save
  6. You may want to rename your picture file or save it to another folder (make sure you keep your original picture file)

If your image is too wide for the screen (ie more than 550 pixels)

If your image goes off the screen when you look at your page in the browser, you will need to reduce its size (resize). See instructions above for doing this in FrontPage 2002, or use a specific software program (eg Photoshop, Paint Shop Pro, Microsoft Image Composer) if you have it installed.

If unrelated text appears on the left of your image

Your image may be too small for that particular space. You can create white space horizontally and/or vertically around your image using FrontPage 2002

  1. Right click on your image in the file
  2. Select Picture Properties…
  3. In the Appearance tab dialogue box, under the heading Layout, look at the Horizontal spacing and Vertical spacing boxes. They will automatically be on 0. Increase the Horizontal spacing to create white space either side of your image and prevent the text from appearing next to it
  4. Preview in Browser to see how it looks

Note: If unsure what procedure to follow to make your page presentable in the browser once you have inserted your image, contact the corporate web team.

Inserting alt text

For accessibility reasons, you will need to insert a text alternative into your image.

FrontPage 2002

  1. Insert your image into your saved template page
  2. Right click on the image
  3. Select Picture Properties...
  4. Look for the heading Alternative representations, under the General tab of the dialog box
  5. In the Text: box type a brief but meaningful description of the image you have inserted (if the image has a text heading don’t just repeat this heading as a speech reader will read this anyway)

Picture Properties box showing how to insert Alt text for an image

 

  1. Click OK and Save your page
  2. View your page in the browser. When you put your cursor over the image the text should appear

If your image is decorative and does not need a specific title you still need to provide alt text. What you do in this case is insert a couple of space bar clicks into the Text: box. This will show in the browser as a very small empty box when you put the cursor on the image. A speech reader will recognise that this image can be ignored.

Inserting longdesc (long description) text

If your image is a flow chart or complicated diagram, it may require a long description rather than a short sentence to explain its meaning for accessibility reasons. There are two ways of doing this

  1. Put a summary of the image underneath it or next to it and note that in the image's alt text
  2. Create an HTML file containing your long description and then put a link to it in your HTML view in FrontPage, noting that this link exists in the alt text by adding '[with longdesc]'

Method 2

Your HTML code for an image might look like this in the HTML view in FrontPage

<img border="0" src="images/chair.JPG" alt="Chair sculpture (using cotton fibre) by Lois Lane">

If you add longdesc to the HTML code it will look like this

<img border="0" src="images/chair.JPG" alt="Chair sculpture (using cotton fibre) by Lois Lane [with longdesc]" longdesc="http://www.unisa.edu.au/art/chairdesc.asp">

Unfortunately, no current browsers support this attribute. Therefore, it has become common practice to use a descriptive link. This is basically an additional text link that appears next to the image in the browser and provides a redundant link to the longdesc URL.

If you add a descriptive link to your HTML code it will look like this

<img border="0" src="images/chair.JPG" alt="Chair sculpture (using cotton fibre) by Lois Lane [with longdesc]" longdesc="http://www.unisa.edu.au/art/chairdesc.asp"><a href="http://www.unisa.edu.au/art/chairdesc.asp">Further information available from this link</a>

When you view the image in the browser this will appear as a hyperlinked 'Further information available from this link' next to your image. For an example of longdesc go to the diagram at Site structure (have a look at the HTML view as well as the Normal view).

For more information on longdesc go to Bobby Report Help Files at http://bobby.watchfire.com/bobby/html/en/gls/g12.html

FrontPage 2002 supports any longdesc information a user codes in by hand within the HTML view, but the user interface is dedicated to providing the functionality that is available to web users today (specifically Internet Explorer and Netscape).

top^

 

Creating tables

Avoid using tables for layout as the templates determine page layout. Following are some guidelines for formatting data tables so that they are accessible to all users.

Creating header cells

If your table is relatively simple, just creating header cells will help a speech reader make sense of it

  1. Highlight the headings in your table (column or row)
  2. Right click on these highlighted headings
  3. Select Cell Properties...
  4. Under Layout in the Cell Properties dialogue box, tick Header cell
  5. Click OK

Providing a table summary

Likewise providing a table summary in the HTML view will help a speech reader make sense of your table. A summary should describe the relationships of cell contents

  1. Select the text just before your table in Normal view in FrontPage
  2. Click on HTML view and look for your selected text
  3. Following on from that text you should see <table border="0" cellpadding="0"… (or something similar)
  4. After the word ‘table’ type summary=”….” eg <table summary="This table tells you the names of programs and program directors within the School. This information can also be found by going to http://www.unisanet.unisa.edu.au/unisanet/courseinfo and using the List Programs by School pull down menu." border="0"…(etc)
  5. Return to Normal view and Save

You will not be able to see your table summary in the browser but a speech reader will be able to read it.

Complex tables

To format complex tables so that they are accessible to all users, you will need to know how to use HTML. For information on how to do this

At the very least, create a table summary (in HTML) to tell your users what the table contains.

Other formatting features

Tables on the corporate web have been formatted so that they present well on the page. This involves changes to cell padding and cell border colour. These changes can easily be made in FrontPage.

  1. In the Normal screen, right click your mouse in your table, and choose Table Properties...
  2. Under the heading Layout, set the Cell padding box to 3 (it is defaulted at 0)
  3. Under the heading Borders, from the Color drop down menu select the standard dark grey
  4. Click OK and save your page

Note: If the contents have dropped down from the top of the screen when you view your page in the browser, your table is too large for the page, and you will need to reduce its size. Another option might be to use the full screen template.

 

top^