Web Training Course: Web Editing - How to use the Content
Management System (CMS).
Version 1.0 October 2007
Version 2.1 December 2007
Course Rationale:
The university is currently rolling out new Web publishing templates to all organisational
units. The templates are only editable using our Content Management System (CMS).
The CMS is a Web page online editing tool that replaces existing tools used by
organisational units, namely (MS FrontPage, Macromedia Dreamweaver, and WS-FTP).
This tool allows users to quickly, safely, and easily:





Change textual content on their Web pages
Upload and insert images into editable areas of their Web pages
Manage their Web site’s side navigation bar
Edit Meta Tags (used by search engines for page ranking)
Create new Web pages
Aims & Objectives:
To familiarise university Web administration staff with the capabilities of the university
CMS and also introduce concepts of Web marketing.
Prerequisites:



You are a university Web administrator
You are using (or are scheduled to use) the university CMS to edit your Web site
You have completed the Introduction course to the CMS
Course Content:
1. Introduction to the Content Management System (CMS)
2. Web Publishing – Use of the Content Management System (CMS)
o Creating Site Map and File Structure (Exercise 1)
o Creating Web pages and Sub-Folders (Exercise 2)
o Adding Content (Exercise 3)
o Creating Tables (Exercise 4)
o Edit the title, description, and keywords (Exercise 5)
o Formatting Page Content (Exercise 6)
o Adding Images (Exercise 7)
o Creating links (Exercise 8)
o Upload and link to documents (Exercise 9)
o Adding links to the side navigation (Exercise 10)
o Edit the footer (Exercise 11)
o Deleting content, tables, images, links, Web pages, & documents
(Exercise 12)
o Restore pages/documents from archive or deleted area (Exercise 13)
1
1. Introduction to the Content Management System (CMS)
1.1. Introduction to the CMS
The CMS is a Web page online editing tool that replaces existing tools used by
organisational units, (namely MS FrontPage, Macromedia Dreamweaver, and WS-FTP).
This tool allows users to quickly, safely, and easily:





Create new Web pages
Change textual content on their Web pages
Upload and insert images into editable areas of their Web pages
Manage their Web site’s side navigation bar.
Edit Meta Tags (used by search engines for page ranking)
The URL for the CMS is: http://www.nuigalway.ie/cms/
1.2. Data Flow
2
1.3. Explaining the Interface
1.3.1 Login
Login using the URL http://www.nuigalway.ie/cms/ and your username and password for
the Web server.
3
1.3.2 File Structure
After you login, the following Web page will be displayed. We call this page the “File
Structure page” as it displays a list of the files & folders that make up your Web site.
1: General activity of university CMS users
2: Auto logout display timer
3: Web site File Structure
 index.html – this is your home page and only Web page to start with
 /documents/ - documents folder which stores all your documents which are
not HTML i.e. PDF, Word, Excel, Power point.
 /template/ - template folder the contents of which are used by the CMS as the
template when creating new Web pages.
Functions
 “New File Here”
 “New Sub-Folder Here”
To edit a Web page you must click on the HTML file to open the Web page in
Edit mode.
4
1.3.3 Editable areas
After you click on a HTML (.html) file you will be brought to edit mode.
Each Web page is divided into distinct areas to assist when editing and managing your
Web site content.
Editable Areas:
1: “Breadcrumb” Trail / Locator
2: Page “Body Area” for general text and images
3: Web page “Footer”
Press edit button
4: Navigation
5: Control Panel
to enter into edit mode for any editable area
Note: Each one of your Web pages uses the same navigation and footer areas.
Therefore you can update these from any Web page and if you make a change in
one Web page it will be reflected in each Web page.
5
1.3.4 Control panel, buttons & menus
Control Panel
Buttons
- Edit button
- Design view of content in main body area
- HTML view of content in main body area
6
Editable Area menus
7
2. Web Publishing – Use of the Content Management System (CMS)
2.1 Create a Sitemap and File Structure (Exercise 1)
Create a sitemap and file structure for the Web site. The Web site should display:
o
o
o
o
information about the department
staff details in the following sections – academic, administration, and technical
departmental contact details
course information for both undergraduate and postgraduate students
A sitemap is a collection of hyperlinks that reflects the structure of your Web site, based
on the importance you placed on each section. This sitemap is the basis of your Web
site’s navigation.
When you have created a sitemap you can begin generating content for your Web site.
The sitemap should be your starting and your reference point throughout the process of
creating and maintaining your Web site.
From the sitemap, you generate the file structure, which is the logical arrangement of
files and directories on the Web server.
[1]
8
Example:
Sitemap





Home
Services
o Hosting
o Training
Help
o Support
 Telephone
 Email
 Web
o FAQs
Staff
Contact
File Structure
9
2.2 Creating Web pages and Sub-Folders (Exercise 2)
Create example Web pages and sub-folders to build a Web site from the Sitemap.
2.2.1 Creating new Web pages
1: In the “File Structure” view, begin creating a new Web page using the New File dialog
box by clicking “New File Here” in the main folder.
2: Enter file name, select the file extension, and select template file.
3: Finally press the Create button to create the new Web page.
4: Create the following pages:
o contact.html
o undergraduate.html
o postgraduate.html
The new Web page will take less than a minute to create. As it is being created it
is being put onto the server. This is referred to as ‘Publishing’ by the CMS. It is
indicated by a timeline. See picture below.
Please click ‘Refresh File List’ to refresh your view after ~1 minute to refresh the
file structure area.
This indicates the page is being created and being published on the Web server.
10
Note: You can also use the “Create new Web pages” facility to copy files.
2.2.2 Creating Sub Folders
1: In the “File Structure” view, begin creating a new Sub-Folder using the New SubFolder prompt box (dialog box) by clicking “New Sub-Folder Here” in the main folder.
2: Enter sub-folder name and press OK to create.
3: Create the following sub-folder:
o staff
The new sub-folder will take less than a minute to create. Please click ‘Refresh
File List’ to refresh your view after ~1 minute to refresh the Web site’s file
structure area.
4: In the newly created sub-folder follow the steps for creating new Web pages and create
the following:
o academic_staff.html
o administration_staff.html
o technical_staff.html
11
5: Create a further sub-folder inside of the “staff” sub-folder: (use your own details in
naming this folder)
o firstname_lastname
6: In this sub-folder create the following page:
o index.html
12
2.3 Adding Content (Exercise 3)
1: To open a Web page for edit mode click on the Web page filename in the “File
Structure” view.
2: Four editable sections exist, breadcrumb, body, footer, and side navigation, three have
specific edit buttons to select this area only; the breadcrumb, body, and footer.
3: Click the “Edit” button for the body area (middle edit button). Modify the header by
double clicking on top of current text. Highlight the text and type over with new heading.
The template page carries the Heading 1 as the first heading to appear on the page, we
recommend this format for the first heading.
4: Type/Insert textual content on page. Text can be inserted by typing or copying from
another document and pasting directly into the body section. Pasted content will be
cleaned of fonts and varying sizes upon save. Do not perform any formatting at this
stage.
o To get a line break press the ‘Shift key’ with the ‘Return key’ on keyboard. (Shift
Return)
o To get a paragraph break press the ‘Return key’ on keyboard. (Return)
4.1: Jump to (Exercise 5)
5: Save changes made using “Save” button on control panel.
6: Repeat these steps for all pages created.
13
2.4 Creating Tables (Exercise 4)
1: Enter “Edit Mode” for a Web page and click the “Edit” button for the body area.
2: From the Editable Area Menu click “Insert Table” and use the “Table Dialog box” to
insert a table.
3: The “Table Dialog box” is used to specify number of rows, columns, width, and height
values (recommended to represent value as %) and various other table properties that are
adjustable.
4: Clicking into a cell of the new table activates all table buttons in the Editable Area
Menu. Here additional rows and columns can be added or removed, cells merged or split
vertically or horizontally and each cells properties altered to suit. Text and images can be
inserted to each cell.
14
2.5 Edit the title, description, and keywords (Exercise 5)
The title, description, and keywords are critical aspects of your Web pages and should
NOT be ignored. To add or modify these elements enter “Edit Mode” for a Web page
and click the “Edit” button for the body area. You will notice that the header section of
the Web page turns into an editable area where you can enter the title, description, and
keywords.
Note: The description and keywords are only used by search engines to index
and rank your Web pages. The title is seen and used by Web site users and
should always be filled out in a descriptive but short manner. See Appendix A –
Introduction to Web marketing
The title element stores the title of the document. A well written document title should be
short and specific to the document's content. A good length for a document title is around
sixty characters and it should include specific keywords found in the content.
The text you place in the <title> tag appears in the title bar of the browser when a Web
page is viewed. This is displayed across the top of the browser. Example of a title tag:
<title>Welcome to the Department of Web Editing</title>
15
The description tag stores a summary of a Web page's content that can be displayed in
search engine results. Several major engines, and a lot of minor ones, use this tag in this
manner. The content can be up to 1024 characters long, most search engines will cut off
the displayed description somewhere between 100 and 200 characters. Example of a
description tag:
<meta name="description" content=" Web Editing – Courses on Web Editing for
University staff”>
The keywords tag provides a list of specific keywords and phrases that define the content
and purpose of the web site. The keywords must exist in the content of the page.
Keywords must be all lowercase separated by a comma and a space. Example of the
keywords tag:
<meta name="keywords" content="diploma, masters, doctorate, study, studying,
distance, learning, higher, education, undergraduate">
1: Insert title, description and keyword information for all pages created.
2: From “File Structure” enter “Edit Mode” for each Web page and click “Edit” button
for body area.
3: Type title, description and keywords according to each page, and save using the
“Control Panel”.
3.1: Return to (Exercise 3) step 5.
16
2.6 Formatting Page Content (Exercise 6)
1: Enter “Edit Mode” for a Web page and click the “Edit” button for the body area.
2: To emphasise headings format the text so it will appear as one of six options available,
alternatively leave the text as normal paragraph text. The headings available range in
size and appearance with ‘Heading 1’ being the principal one for page titles and then
decreasing in size to ‘Heading 6’. These formatted headings should be used most often.
Use the “Heading Styles” drop down menu from the Editable Area menu to select the
necessary headings to be applied.
The headings should be applied in order of precedence with heading 2 used after heading
1 and heading 3 used after heading 2 etc. Do not use varying headings for equivalent
section headings.
3: Also when editing pages different “Styles” are available that will format the text on the
page to the chosen style. These styles are in place to allow users to change the look of
text for different purposes such as short descriptions of photographs or to simply make it
different to the normal text. The “Styles” can be selected from the “Styles” drop down
menu in the Editable Area menu.
The editor of the page can also undo any of the “Styles” applied to the page before
saving by simply clicking the “Cleanup (remove styles)” button which will clear the
whole page of any styles used.
2.7 Adding Images (Exercise 7)
You can only insert images into the body area of your Web page. Images must
first be optimised for the Web site before you upload or insert. See Appendix B –
Optimising Images
o Optimise images for the Web site by resizing each image to its optimal width and
height dimensions for the specific location where you want to display it on the Web
page
o Generally images you will be using will be much larger in file size and dimensions
than that is required for a Web site. The typical image from a digital camera is ~
1500px height and ~ 2000px width, with a file size of ~ 500KB. The average file size
for a Web image is 20KB
o When inserting images into the body of a Web page, you must consider the context of
the image. For example, if you want to fill the width of the body area remember that
the max body width of the Web template is 750px, so images will have to be smaller
than this size (max 700px width) to fit in the body area of the Web pages.
o Alternatively, you may want to insert an image next to text. For example, you may
want to add staff pictures to the right or left of staff details on a Web page. This
requires a smaller image of ~150px width for each staff member.
o Images can be optimised (resized and saved) by using PhotoShop, Fireworks, or
PaintShop.
o Once the images have been optimised for use on your Web site, copy or move them
to a location on your pc.
17
1: To insert an image, first open the Web page in “Edit Mode” and open the body area for
editing. Then place the cursor in the exact position where you want to insert the image.
(Keep in mind you can later align the image to the left or right of the text).
2: Then click
to open the “Insert Image” dialog box
o Images can be inserted using the “Library” drop down menu, this displays all images
that are stored in the images folder of the Web site you are working on, if you have
sub folders which subsequently also have image folders, then you will also be able to
access those images through the “Library” drop down menu. Another folder
available through the “Library” drop down menu is “NUIG Stock Images” which
holds many images available for use.
o To select an image from the “Library” simply select the required image from the list
available and click the “Select” button to insert it.
o If you have an image saved in a location different to those available in the “Library”,
you can “Upload” an image to the library for use. To do this click the “Browse”
18
button to locate the image then click the “Upload” button to put it into the image
library. Now follow the same process as above to insert an image from the “Library”.
2.7.1 Aligning graphics / images
After you insert the image you can also align it on the Web page. To align the image
select the image and then click the “Image Properties”
icon which will open the
“Image Properties” dialog box. Select “align” to the “right”, then “OK” and finally
“Save” in the control panel. This will align the image to the right of the text.
19
2.8 Creating Links (Exercise 8)
Create hyperlink from body area of Web page to different Web pages.
A hyperlink or a link is a reference in one Web page to another Web page or document.
Links are used to:
o Create links to Web pages in your Web site (Internal Links e.g. creating a link from
your index.html to your staff.html Web page)
o Create links to Web pages or Web sites outside your Web site (External Links e.g.
creating a link from your Web page to http://www.google.com , http://www.eci.ie etc.
Internal Links e.g. creating a link from your Web page to http://www.nuigalway.ie)
o Create links to documents either internal or external to your Web site.
o Create anchor links to different points on a page.
o Create email links
To create a hyperlink in a Web page you must enter “Edit Mode” by selecting the file you
wish to create the link from.
1: Then select the text that you wish to be linked (Display Text).
2: Click “Insert Hyperlink” button
on the edit menu.
A link dialog box will open where you enter the link details:
Type: Link
URL: Web address of the Web page you are linking to
20
Target: For internal links = same frame (_self) and for external links = new empty
window (_blank)
Title: Descriptive title
Internal Link
3: Create an internal link from index.html to contact.html. Select the display text to put
the link on. Click “Insert Hyperlink” button. In the link dialog box specify the
following:
Type: Link
URL: use the “Link to one of my files” drop down menu and select the contact.html page
from the list.
Target: same frame (_self)
Title: Contact Page
Click “OK” and then “Save” on the Control Panel.
4: Create an internal link from index.html to http://www.nuigalway.ie. (Open another
browser window and go to www.nuigalway.ie and copy the address from the address
bar.) Select the display text to put the link on. Click “Insert Hyperlink” button. In the
link dialog box specify the following:
Type: Link
URL: Paste the address into the available area.
Target: same frame (_self)
Title: NUI Galway Home Page
Click “OK” and then “Save” on the Control Panel.
External Link
5: Create an external link from index.html to http://www.google.ie. (Open another
browser window and go to www.google.ie and copy the address from the address bar.)
Select the display text to put the link on. Click “Insert Hyperlink” button. In the link
dialog box specify the following:
Type: Link
URL: Paste the address into the available area.
Target: new empty window (_blank)
Title: Search Engine
Click “OK” and then “Save” on the Control Panel.
Anchor Link
6: Create anchor links on the technical_staff.html page. Place the cursor at a point on the
page for the first anchor. Click “Insert Hyperlink” button. In the link dialog box specify
the following:
Type: Anchor
Name: firstnameinitial_lastname
Title: Firstname Lastname
21
Click “OK”
Select the display text that will go to the newly created anchor. Click “Insert Hyperlink”
button. In the link dialog box specify the following:
Type: Link to Anchor
Anchors: select from the anchors available the correct one.
Target: same frame (_self)
Title: Denise Melia
Click “OK”
7: Create an email link on the technical_staff.html page. Type the full email address
followed by a space, by pressing the spacebar key after typing the email address this will
automatically activate the link to be an email link i.e. [email protected] and
then click “Save Changes” on the control panel.
22
2.9 Upload and link to documents (Exercise 9)
Upload a document and create a link to it.
Note: In this case documents are defined as any document that is not HTML i.e.
PDF or Word documents. You can only upload documents into the /documents/
folder.
1: In the “File Structure” view, open the /documents/ folder and click “Upload a File
Here”. This action will open the “upload file dialog box”. The dialog box gives you the
option to browse your computer to select a file to upload. Once you have chosen a file,
select “Upload”. This uploads the document to the documents folder.
The new document will take less than a minute to appear.
Please click ‘Refresh File List’ and then open /documents/ again to refresh your
view after 1 minute
2: To create a link to the document from your Web site, you must enter “Edit Mode” and
create a hyperlink to the document. Treating it like an external link to open in new
window (new empty window (_blank)).
When creating links to documents it is advised to give the user as much information as
possible before they download or open the document. For example
[Document name – this text is linked] - (250KB PDF document that opens in a new
window)
23
2.10 Adding links to the side navigation (Exercise 10)
Create side navigation that links to Web pages created in Exercise 2.
The side navigation is the main navigation of your Web site and should reflect the
structure of your content, i.e. the Web sites sitemap (Exercise 1).
The side navigation can be edited from any Web page in “Edit Mode”.
Side Navigation ‘Actions’ (these are accessed using the control panel)
o Add or delete links – by using the control panel
o Move links up or down – by using the control panel
o Indent (create category) or out-dent (remove category) links – by using the control
panel
Note: You can modify the link display text and link URL by clicking on the link text
and inputting the display and URL.
24
Note: To select the side navigation and access the extra functions that appear on
the control panel, click on a radio button to the left of a link. You can also click on
the text of a link to modify the link.
2.10.1 Creating Navigation Categories
To make sub links you need to sort them into different categories. The category name
you choose will not be a link but rather will expand when you click on it to display the
subsequent sub links.
To create sub links, begin by creating a link as normal and then click the indent button.
This displays a prompt box in which you must enter the category name and click “OK”.
The sub link now appears below the category name.
Note: You do not need to create an additional Web page for each category.
Categories are simply groupings of sub pages or sub links. They are not Web
pages. This means that when you click a category, it simply expands to show the
list of sub links or sub pages. It does not open a new Web page.
You should use the side navigation to create links to the Web pages you have
created in Exercise 2 and then open the Web site to test the links.
1: Edit existing side navigation links
o “Home” – click on the link text, change the display text to “Welcome” and select the
index.html page from the drop down menu available. The URL field will update once
the index.html page is selected from the list. Finally click “Save” to save it to the side
navigation but also click “Save Changes” on the control panel to save the side
navigation changes permanently.
o “Untitled” – click on the link text and change the display text to “Contact” and as
with the Welcome link look for contact.html from the drop down menu.
o Add a new link to the side navigation. New links are added above the current
selection. Select the radio button of the second link “Contact” and use the control
panel to “Insert Link”. Now move this new “Untitled” link down below “Contact”.
Select “Untitled” and use the “Move Down” command on the control panel.
o Edit the newly created “Untitled” link to “Academic Staff” and link to necessary
page.
2: Create a category for “Staff”. Select the radio button of the newly created “Academic
Staff” link. Use the Control Panel to “Indent Link”. A Prompt Box will alert you to
name the category this link will appear under. Call this category “Staff”. Save using the
Control Panel.
Now you can build links in this category as above.
25
Note: Links can be moved up or down on the side navigation which also
facilitates moving into categories and out of categories.
To remove categories delete links as normal that exist in the category until
there is one remaining; this last link must be out-dented to remove the category.
2.11 Edit the footer (Exercise 11)
The footer can be edited from any Web page in “Edit Mode” and the changes made will
be reflected in every Web page where that footer is used.
In the footer you can enter your Web site’s title, your address, phone number, fax, and
email address.
To enter an email address type the full email address (followed by a whitespace to
activate the link) i.e. [email protected] and then click “Save”.
1: Edit the footer from the index.html page. Click the bottom “Edit” button to access the
footer. Enter your name, office address, phone number and email.
2: Click “Save Changes” on the control panel to save changes. The new details will be
reflected on all pages that use the footer.
26
2.12 Delete content, tables, images, links, Web pages, & documents (Exercise 12)
2.12.1 Delete content
Delete content by entering edit mode and use the mouse to select the content you wish to
remove or edit. Then press “Delete” or Backspace” on your keyboard.
2.12.2 Delete tables
To delete a table, enter edit mode and use the mouse to select the entire table. Once
selected simply press “Delete” on your keyboard. Rows and Columns can be deleted as
necessary using the two available buttons from the Editable Area Menu once they are
selected.
2.12.3 Delete images
To delete an image click the “Insert Image” icon. Use the “Library” drop down menu to
select the correct images folder. Then select the required image from the list available
and click the “Delete” button to delete it.
Caution: Preview the image in the “Preview” pane to ensure this is the correct
image for deleting as images can not be restored once deleted.
2.12.4 Delete links and keep link display text
To delete a link and the link’s display text, select the text and press delete on your
keyboard.
To delete a link without losing the link’s display text, select the text (or part of the text)
that is linked. Then click the hyperlink button, this opens the link dialog box. Highlight
the link in the URL text area and press delete on your keyboard. Then click “Ok”.
2.12.5 Delete a Web page or document
To delete a Web page or document, enter “File Structure” view. In this view use your
mouse to hover over the file that you wish to delete. You will notice that after two
seconds it will highlight in blue. Then the “Delete Selected” button becomes active, click
this button to delete the file.
After you delete a Web page or a document the “Archive” area holds a copy of
them for 2 weeks should you need to retrieve them.
1: Delete a Web page previously created in Exercise 2. Ensure all existing links to this
Web page are deleted before deleteing the Web page, i.e. links from other pages of the
Web site and links in the side navigation.
2: Delete the document uploaded in Exercise 9. Ensure that the links to this document
have been removed before deleting the document.
27
2.13 Restore pages/documents from archive or deleted area (Exercise 13)
To restore pages or documents that were previously deleted less then 2 weeks ago, click
“Archive”. Hover over the page or document to be restored until it is highlighted in blue.
Now click “Restore Selected”. The timeline indicates restoration progress, when this
completes, click “Edit Pages” and then “Refresh File List” to see the newly restored file.
Pages are archived as changes are made and saved within the last 2 weeks; therefore it is
possible to retrieve a page to a previous state within this timeframe. To do this, click on
“Archive”. Hover over the version of the page to be retrieved and click “Restore
Selected”. When the restoration completes, click “Edit Pages” and then “Refresh File
List” to update the list with the retrieved page.
28
Appendix A - Introduction to Web marketing
Search engine optimisation (SEO)
SEO allows you to increase the number of visitors being directed to your Web site
through the major search engines. There are a wide variety of factors to take into
consideration when optimising your Web site.
What search engines like
o
o
o
o
o
o
Relevant keywords
Page titles
Page text (HTML)
Navigation, internal links, sitemaps
Popularity
Age
Essentially: established Web sites that are well organised and well-managed.
Considerations:
Write useful, interesting and unique content that is specifically geared towards the target
audience. Incorporate the key search terms and phrases in the first paragraph of the page.
The first 500 words are typically indexed by search engines and your Web site’s ranking
is based on this indexing.
Do NOT use search engine tricks and other tactics that will only lead to negative traffic
and potential banning of the site from any search engines.
Always check for spelling and grammar. If the content has misspellings and poor
grammar the Web site and organisation will appear unprofessional and may sway people
away.
HTML Tags
Certain HTML tags impact how a search engine or directory indexes and categorises a
Web site. These tags are found within the <head> tags of a web page. The most important
of these tags are <title>, <meta>, and heading tags.
29
Title Tag
The Title element stores the title of the document. A well written document title should
be short and specific to the document's content. A good length for a document title is
around sixty characters and it should include specific keywords found in the content.
The text is you place in the <title> tag appears in the title bar of the browser when a Web
page is viewed. This is displayed across the top of the browser. Below is an example of a
title tag:
<title>An Introduction to Search Engines</title>
Meta Tags
Meta tags specify metadata which is information about the document rather than the
document content. The Meta element can be used to include name/value pairs describing
properties of the document, such as author, expiry date, a list of key words etc.
Meta tags have never been a guaranteed way to gain a top ranking on crawler-based
search engines. The most valuable feature they offer a Web site owner is the ability to
control to some degree how their Web pages are described by certain search engines.
The following is a list of popular meta elements that impact the way a Web site is
indexed and ranked.
Meta Name
Content Value
Description
site dependant
Keywords
site dependant
Description
This tag is a summary of a web page's content that can
be displayed in search engine results. Several major
engines, and a lot of minor ones, use this tag in this
manner. The content can be up to 1024 characters
long, most search engines will cut off the displayed
description somewhere between 100 and 200
characters.
This tag provides a list of specific keywords and
phrases that define the content and purpose of the web
site.
Included below are a few examples of <meta> tags:
<meta name="description" content=" National University of Ireland, Galway (NUI
Galway / NUIG / UCG) - an information resource for prospective and current students
including research and faculty”>
<meta name="keywords" content="diploma, masters, doctorate, study, studying,
distance, learning, higher, education, undergraduate">
Once the meta tags have been created and the document uploaded to the server, an
analysis can be done using some of the tools provided in the tools and resources section
below.
30
Heading Tags
HTML has defined six heading levels that are intended to signify the relative importance
of a defined section. These tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The <h1>
element represents the most important, whereas <h6> represents the least. Search engines
use heading tags as part of the indexing algorithm. Correspondingly the greater the
heading tag, the more relevant the search engine considers it.
What can we do?
Using the CMS we can:
- Add descriptive but short titles to every page
- Add descriptive but short descriptions to each page
- Add descriptive keywords (separated by commas) to each page
- Use formatting headings <h1><h2><h3><h4><h5><h6> for heading text.
Tools and resources
All tools and services listed here are free, only a few require registration.
Google Information for Webmasters - http://www.google.com/webmasters - This includes
vital information on submitting your site to Google, PageRank information, do's and
don'ts, and detailed design and content guidelines.
Meta Tag Generator - http://vancouver-webpages.com/META/mk-metas.html - Meta Tag
Generator is a basic tool that will help write meta tags in HTML quicker and easier.
Crawler Alert - http://www.crawler-alert.com - This is a free system that will email
whenever a search engine spider/bot is detected on a site. Very useful to find out when a
site is going to be indexed.
Wordtracker - http://www.wordtracker.com/ - Keyword services for professional search
engine optimisation
31
Appendix B - Optimising Images
1. Introduction
2. How to optimise an image
3. Crop an image
1: Introduction
The objective of this document is to inform University Web administration staff of how
to optimise an image for use on the University’s Web sites.
1.1 What is an optimised image?
An optimised image is when an image’s file size is reduced so it will load on the Web site
in the quickest possible time.
Note: Reducing the file size will not be evident by simple resizing the image’s
width and height proportions, it needs to be sufficiently Optimised.
1.2 File sizes





A byte is commonly used as a unit of storage measurement in computers, regardless
of the type of data being stored. A kilobyte is 1,024 bytes.
The University’s Web sites should use the average file size of images at 20kb (20480
bytes) as a rule of thumb.
To determine an image file size simply right click on the image and choose
“Properties” to see the size details on that image.
A typical digital camera image is 500kb which is roughly 1500px height by 2000px
width.
A pixel (px) is a single point in a graphic image and can be used for measuring the
height and width of images.
1.3 Maximum image widths for University Web sites
The body area width of the University Web template is 750px. No image can have a
width larger than this.
Full width
If an image is to be displayed the full width of a University Web page than the image
width should be 700px (images of buildings or graphs).
Smaller images
If an image is to be inserted aligned to the left or right of existing text then the suggested
width for the image is 150px (images of staff members).
32
1.4 File formats
When working with images on the University Web site one of two formats should be
chosen for the image. Depending on the amount of colours in use on the image and the
type of image it is (photo, logo, graph) a format should be chosen accordingly.
JPEG
A jpeg is a common image format and should be the used for images like photos, art, or
any image that contains many colours or shading. The filename should be something like
“image_name.jpg”.
PNG
A png is an image format that should be used for logos, screenshots, or any image that
has few colours. The file name should be something like “image_name.png”.
File naming convention
- Use all lower case characters
- Use an underscore _ to denote a new word
- Do not use illegal characters like !”£$%^&*()?><@#’;:
For example: web_training_cms.pdf
33
2: How to optimise an image
This outlines how would use Macromedia Fireworks 8 to optimise an image.
Contact Computer Services – User Support to obtain this software
For this example an image will be optimised as a jpeg to use on a Web page. We will
then use the CMS to upload and insert the image.
2.1 Launch Fireworks and open the image you want to optimise. To open an image,
choose “File”, “Open” and browse to where the image is located, then click “Open”.

This image is so large in height and width (3072px x 2048px) the whole picture is
not visible.
34
2.2 Choose “Modify”, “Canvas” and “Image Size…”

This opens an “Image Size” properties box.

Here make sure that “Constrain proportions” is checked, this ensures that when you
change the width of the image that the height will change in relation to this and vice
versa. When constrain proportions is selected it is indicated by the padlock sign.
Image dimensions may not be pixels by default so select this using the drop down
menu.
For this image we want it to cover the full width of the Web page. As stated earlier
we know it must be 450px in width to do this, so type this value into the width text
area. The height value will update also, now press “OK”.
Alternatively enter 150px into width text area if the image is for insertion beside text.
These measurements are guides so follow as needed.
Now the image is fully viewable at 100% with the dimensions of 450px x 300px.




35
2.3 Optimise the image using the Optimise panel. If the panel is not available choose
“Window” and “Optimise” to view the panel.
Make sure “JPEG” is selected from the file format menu and begin to reduce the quality
of the image gradually using the quality menu in the Optimise panel.






Reduce it by 10 to see the difference by either typing in the number or using the drop
down button to the left to reduce using scale.
Now preview the new version of the image using the “Preview” button. Use the 2-Up
button to see the difference between the quality of this image and the original quality.
When previewing the image here information is available at the bottom of the image
regarding file size and download time, for this image it is now at 51.17k filesize and
the download time is 8 seconds.
When the Optimised image shows no visible degradation lower Quality settings can
be entered to achieve a smaller file size and faster download time.
Further changes in quality can be made until the desired filesize has been reached.
Use the 4-Up button to view all changes however by default the 4-Up window
displays the current Optimised settings for the three Optimised versions.
Try additional Quality settings as needed until you are satisfied with the balance of
file size and image quality. The desired filesize for University Web site images is
20k.
When you have determined the appropriate Quality setting, select the Optimised
image with that setting applied and then click the “Preview” button.
Note: Quality level set to 70 gives a good balance of image quality versus
filesize. This setting should be normally used.
36
2.4 Save the image. To do this choose “File” “Save As”


When saving ensures the “Save as type” has been set to the necessary format, for this
it is a JPEG. Then click “Save”.
The image is now saved to the location you specified and can be uploaded from here
to the CMS as needed.
37
3: Crop an image
Note: Sometimes you may have pictures that need to be cropped. This may be
because one item in the picture is all that is needed.
This can be done in Macromedia Fireworks 8.
3.1 Launch Fireworks and open the image you want to crop.
3.2 Select the “Crop” tool as highlighted in diagram; use this tool to draw a box around
the item you want to select in the image. This will give you a black dotted line, simply
double click inside this box and the image is cropped.
3.3 Now select the “Pointer” tool
to Optimise”
near the “Crop” tool and return to Step 1 for “How
38
Bibliography
[1] - Lynch, P. J., Horton, S. (2002). Web Style Guide: Basic Design Principles for
Creating Web Sites, Second Edition. Yale University Press
39