.
Version 1.0 October 2007
Version 2.1 December 2007
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
To familiarise university Web administration staff with the capabilities of the university
CMS and also introduce concepts of Web marketing.

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
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.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” to enter into edit mode for any editable area Press edit button
4: Navigation
5: Control Panel
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.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 information about the department o staff details in the following sections – academic, administration, and technical o departmental contact details o 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 Sub-
Folder 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.
denise.melia@nuigalway.ie
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.
training@nuigalway.ie
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

-
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 Relevant keywords o Page titles o Page text (HTML) o Navigation, internal links, sitemaps o Popularity o 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
Description
Keywords
Content Value site dependant 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

1. Introduction
2. How to optimise an image
3. Crop an image
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

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

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 near the “Crop” tool and return to Step 1 for “How to Optimise”
38

[1] Lynch, P. J., Horton, S. (2002).
Web Style Guide: Basic Design Principles for
Creating Web Sites, Second Edition . Yale University Press
39