Web Training Course: Web Editing - How to use the Content
Management System (CMS).
Version 1.0 Draft October 2006
Version 1.1 March 2007
Version 1.2 April 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 schedule to use) the University CMS to edit your Web site
You have completed the Introduction course to the CMS
Course Content:
•
•
•
Introduction to the Content Management System (CMS)
Web Publishing – Use of the Content Management System (CMS)
o Creating a Web page with content and images (Exercise 1)
o Upload and link to documents (Exercise 2)
o Creating links (Exercise 3)
o Adding links to the side navigation (Exercise 4)
o Deleting content, links, images, Web pages & documents (Exercise 5)
o Edit the title, description, and keywords (Exercise 6)
Introduction to Web marketing
o Search engine optimisation (SEO)
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:
o
o
o
o
o
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 Web page below is displayed. This page is called the “File Structure
page” as it displays the list of the files & folders that make up your Web site.
1: Enter URL of Web site you wish to edit and then select “Show Editable Pages”
2: Latest CMS News
3: General activity of University CMS users
4: Auto logout display timer
5: Web site File Structure
• index.html – this is your home page and is the Web page you originally work
with to begin creating your site.
• /documents/ - the documents folder which stores all your documents which
are other than HTML e.g. PDF, Word, Excel, Power point.
• /template/ - the contents of the template folder are used by the CMS as the
template for creating new Web pages.
Functions
• “New File Here”
• “New Sub-Folder Here”
To preview a Web page you must mouse over the HTML file to view it in the
Preview Area.
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 are then in 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
to enter into edit mode for any editable area
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
1: The “Undo HTML cleaner” button is a facility in place to revert back to the
page’s original state before opening and saving in the CMS. This is necessary
as some Web editing tools such as Microsoft Word create additional code that
the CMS will attempt to clean up by removing it, however in its attempt to remove
the code you may lose some of your page’s content. The “Undo HTML cleaner”
button will revert to its original content.
4: The “Preview saved Web page” button allows you to see the page as it will
appear to visitors of the Web site. This button opens a new browser window to
display the page.
6
Editable Area menus
21: 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.
13: The editor of the page can also undo any of the “Styles” applied to the page
by simply clicking the “Cleanup (remove styles)” button which will clear the whole
page of any styles used.
22: To emphasise headings the user can format the text so it will appear as one
of six options available, alternatively you can 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
formatting headings should be used most often.
7
2.
Web Publishing – Use of the Content Management System (CMS)
2.1. Creating a Web page with content and images (Exercise 1)
Create example Web page for staff information and add content and images.
2.1.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 or sub-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.
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, which appears in the lower right hand side of the page.
See picture below.
Please click 'Show Editable Pages' to refresh your view after ~1 minute to display
the newly created page in the Web site’s file structure area.
This indicates the page is being created and being published on the
Web server.
Note: You can also use the “Create new Web pages” facility to copy files.
8
2.1.2. Adding or modifying textual content on Web pages
1: To open a Web page in edit mode click on the Web page in the “File Structure” view
2: Modify the Breadcrumb, header, body area and footer to reflect your Web site’s details
by clicking edit buttons.
3: Don’t forget to “Save”, this will close all edit boxes and save the Web page.
At this stage it is useful to preview your Web site, do this by opening a new
browser window and typing the address of your Web site. In the case I’m using
here it would be http://www.nuigalway.ie/webtraining/1/. You can keep this open
while you edit your Web site to preview from time to time. Remember to click the
“Refresh” button on your Web browser as you make changes.
The Web page you created will not automatically appear in the side navigation,
we will add a link in the side navigation to the Web page later.
9
2.1.3
Uploading or inserting images into Web pages
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 A –
Optimising Images
Inserting graphics / 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 480px, so images will have to be smaller
than this size (max 450px 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.
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).
10
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”
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”.
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 the 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.
11
2.2.
Upload documents (Exercise 2)
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.
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 'Show Editable Pages' and then open /documents/ again to refresh
your view after 1 minute
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 (open in new
window).
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)
12
2.3.
Creating links (Exercise 3)
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 or
http://www.nuigalway.ie )
o Create links to documents either internal or external to your Web site
2.3.1. Inserting links (URL)
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 wished to be linked (Display Text).
2: Click “Insert Hyperlink” button
on the edit menu.
13
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
Target: For internal links = same frame (_self) and for external links = new empty
window (_blank)
Title: Descriptive title
Internal Link
External Link
Click “OK” and then “Save” on the Control Panel.
14
2.3.2. Editing the footer
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”.
15
2.4.
Adding links to the side navigation (Exercise 4)
Create side navigation that links to index page and Web page created in Exercise 1
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 (Discussed in Introductory Course).
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 or out-dent 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.
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.
16
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 a link to the Web page you have
created in Exercise 1 and then open the Web site to test the link.
17
2.5.
Deleting content, links, images, Web pages & documents (Exercise 5)
Deleting 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.
Deleting 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”.
Deleting 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.
Deleting a Web page or document
To delete a Web page or document, enter “File Structure” view. In this view use your
mouse 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 File” button becomes active, click this
button to delete the file.
After you delete a Web page or a document the “Show Deleted Pages” button
becomes active, this shows you the files or documents you have just deleted and
it will hold a copy of them for 2 weeks should you need to retrieve them.
18
2.6.
Edit the title, description and keywords (Exercise 6)
The title, description and keyword 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 on the control panel select “Search Engine Optimisation”
. 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 by filled out in a descriptive but short manner.
19
3: 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.
20
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.
21
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
22
Appendix A - 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 480px. 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 450px (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).
23
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
24
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.
25
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.
•
•
•
•
26
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.
27
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.
28
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
29