Web Training Course: Introduction to Web Editing Course Rationale ...

Web Training Course: Introduction to Web Editing
Version 1.4 October 2007
Version 2.0 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:
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)
Aims & Objectives:
To familiarise university Web administration staff with NUI Galway's Web Services,
Web content generation, using the Web, and an introduction to the Content Management
System (CMS).
Prerequisites:
You are a university Web administrator
Course Content:
1. Introduction to Web services provided by NUI Galway
2. NUI Galway’s Web policy and Web publishing templates
3. Web content generation
4. Using the Web
5. Introduction to the Content Management System (CMS).
1

1. Introduction to Web services provided by NUI Galway
1.1. Web Services management
Ger Hurley – VP for Strategic Initiatives & External Affairs
Pat Dempsey – Head of Strategic Services, Computer Services
1.2. Web Services team
Denise Melia, Technical Specialist
Cillian Joy, Web Editor
Evan Ryder, Web Technologist
Web site: http://www.nuigalway.ie/web/
1.3. Services provided
Web site hosting
DNS hosting
Web training
Automated broken link notification system - 404 email
Tools
o HTML cleaner
o IP address
o Header information
o Page load timer
1.4. Add-ons provided
Labelled interactive campus map
New and recently updated pages list
Random images
Printer friendly pages
RSS reader
Search facility
Online survey framework
Online tutorial booking system
2

2. NUI Galway’s Web policy and Web publishing templates
2.1. Web policy framework
University-wide policy and standards framework contain three documents.
Top level policy document
Web standards - outlining mandatory standards, covering three distinct areas
i. Organisational responsibilities
ii. Layout – describes which Web publishing template is required for
which organisational unit category.
iii. Content
Web Best Practices – guidelines on other aspects of Web page content
Available at http://www.nuigalway.ie/web/documentation/
2.2. Web publishing template suite
The Web publishing template suite defines which Web publishing template
should be used for NUI Galway Web sites depending on their association with
NUI Galway.
The suite of templates operates with the university Content Management System
(CMS) and once a Web site is created/converted to the CMS an appropriate
template is selected.
Standard template
Cross-Organisational template
Personal template
Standard template
3

This template applies to organisational units’ Web sites that cater to a specific target
audience as outlined below. The template incorporates certain flexibility allowing the
sub-site to establish a slightly customised look and feel, based on the corporate
template.
University Management Offices
Faculty Offices
Administration Offices
Departments
Services Offices
Research
o Institutes
o Centres
o Technology Centres
o Units
o Others
For an example of this template view http://www.nuigalway.ie/hr/
Different style sheets and header images are loaded depending on the category of the
Web site. Each style sheet is colour coded, for example “Administration & Services”
is blue and “Current Students” is yellow. For details of all the colours used, view the
Web page (http://www.nuigalway.ie/colours_used.html). Header images loaded are
randomly selected from specific categories, again, depending on the category of Web
site. The images are loaded from a central image library and broken into the
following categories: Research, Future, Current, About, Admin, Faculty, All, or
General.
This template, the Standard Template is the default template and should be used if
you are unsure which template to use.
Options:
Standard – no right bar
Standard – with right bar
Standard – full width
4

Cross organisational template
This template applies to discrete units of the Web site where third party involvement
has been recognised, such as “www.deri.ie” or “www.remedi.ie”. The template has
minimal constraints placed on the layout and presentation of pages, allowing for
greater flexibility for the third party, while maintaining a technical and brand
connection with the university.
The CMS can be used to edit the body area of the Web template.
Personal Template
This template applies to personal pages, such as staff and student personal pages.
These pages should not contain the university logo but do require a disclaimer, to
limit the university’s liability for content published on these pages.
The CMS can be used to edit the body area of the Web template.
5

3. Web content generation
3.1. Web content generation guidelines
The university Web content generation guidelines encourage the creation of
effective Web sites. These Web sites establish a clear identity for the university
on the world wide web consistent with the university's standing as an
internationally recognised, research intensive university with an excellent
teaching reputation.
The guidelines encourage the development and maintenance of sites to facilitate
ease of access for users moving from site to site across the university Web site.
This is achieved by bringing a measure of consistency to the design, navigational
methods, structure, and language used.
General Objectives of University Web Guidelines
The university seeks to ensure that Web sites published under its domain are
Authoritative,
Secure,
Accurate,
Relevant,
Current
Authoritative
Appropriate control should be exercised over information and services published
on the world wide web in order to ensure that they effectively meet the other
objectives as listed above. Official Web sites must be immediately identifiable as
an authoritative source of information by their adherence to consistent design
measures.
Secure
Appropriate security precautions should be taken to protect the information from
interference and inappropriate access. Computer Services are responsible for the
security of the system.
Accurate
Information made available should accurately reflect university policies and
positions. Organisational units should avoid disseminating or duplicating
information for which they are not the primary source.
6

Relevant
Information made available should address the particular needs of potential
clients and users of the Web site. Information should be presented in a userfocused
fashion.
Current
Appropriate procedures and technologies should be employed to ensure that the
information made available is always up to date.
3.2 Organising information
Without a solid and logical organisational structure, your Web site will not
function well even if your basic content is accurate, current, relevant, attractive,
and well written. It is accepted that most people can hold only about four to
seven discrete chunks of information in short-term memory. The way people
seek, use, and reference information also suggests that smaller, discrete sections
of information are more functional and easier to handle than long,
undifferentiated sections or Web pages.
There are five basic steps in organising your information [1]:
1. Divide your content into logical sections
2. Order these sections according to importance
3. Use this order/structure to define navigation – thereby creating a sitemap
4. Build a Web site (file structure) that is closely based on your sitemap
5. Analyse and review success of the Web site’s navigation from a functional
and user perspective
7

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
• Hosting
• Training
Help
• Support
Telephone
Email
Web
• FAQs
Staff
Contact
File Structure
9

Exercise:
A local fitness club have been in operation for a number of years. They have
many loyal members who participate in the club’s many activities. Recently, they
introduced several new classes and timetables and want to publicise this to both
existing and potential members. Traditionally they would have distributed
brochures and flyers; however, this is no longer cost effective. Therefore, the
club has decided to use a Web site to inform everyone.
In addition, the fitness club would like to provide general information about
themselves, their history, and founding members etc on the Web site. In
particular the fitness club would like to highlight the new classes and changes to
the timetable in each of these areas on the Web site:
Gym
Pool
Tennis
Fit zone
Finally, they would also like to include information on prices for all
activities/courses and contact information.
As a Web administrator you are asked to generate a suitable sitemap and file
structure for the club based on the information they have available.
10

Sitemap:
File structure:
11

4. Using the Web
4.1. What are the Internet and the World Wide Web?
The Internet is a network of computers across the globe allowing individuals to
communicate with one another. Often called the World Wide Web or Web for
short, it is a collection of electronic documents that are linked together in a
structure similar to a spider’s web. These documents are stored in various
locations around the globe on computers called servers. [2] [3]
4.2. What is the Web made of?
The Web is made up of a user’s Personal Computer (PC), Web browser software
used to gain access to the Web, a connection to an Internet Service Provider
(ISP), servers to host the data, and finally routers and switches. The routers and
switches are used to direct the transfer and flow of this data for viewing as Web
pages in Web browsers. [2] [3]
4.2.1. Web Browser
An Internet browser is a software programme used for accessing and navigating
the Internet to view Web pages on a PC. A browser, also known as client
software, retrieves data from servers and displays this data as Web pages. The
two most commonly used browsers for viewing the Internet are Microsoft
Internet Explorer (IE) and Mozilla Firefox (Firefox). Some others include Safari,
Opera, and Netscape. [2] [3]
Title Bar
The name of the Web site or title of the Web page can be found in the top left
hand corner of the browser screen in the title bar section. It is the horizontal blue
bar that runs across the screen. [3]
Address Bar
The address bar can be used for navigating the Web. If you know the address of
a Web page you want to visit, type the Uniform Resource Locator (URL) in the
address bar and press Return/Enter on the keyboard, or Go on the right hand side
of the address bar. [3]
Status Bar
The status bar is the name given to the bar that runs across the bottom of the
browser screen. It reports on the progress of data download and also displays
link information when hovering over a hyperlink. [2]
Note: You should be familiar with your browser type and also know the version
of the browser you are using. New versions are frequently made available to
computer users and we recommend that you upgrade as soon as possible.
12

4.2.2. Servers
Web pages are stored as data on Web servers located across the globe. Entering
a URL of a Web page into the address bar of a Web browser or clicking a link
sends a request to a server which hosts the data for the required Web page. The
server sends the Web page to your PC and your Web browser displays the
information on your screen. [2]
4.2.3. Web pages
A Web page is an electronic document written in computer language called
HTML. Web pages are usually a combination of text and images. Each page has
a unique address, URL, which identifies its location on the server. [2]
The URL must be typed exactly as it exists for the browser to locate the desired
Web page.
The meaning of a URL address:
http://www.nuigalway.ie/webtraining/training.html
http:// Short for HyperText Transfer Protocol, this indicates a hypertext
document or directory.
www.nuigalway.ie - this is the domain name.
/webtraining/ - this is a sub-directory or folder of the Web site.
training.html - this is the filename of the Web page inside the folder.
Web pages usually contain hyperlinks to other Web pages. Hyperlinks can be
text hyperlinks or hyperlinked graphic images that reference the URLs of other
Web pages. [2] [3]
4.2.4. Web sites
A Web site is a collection of related Web pages. Each Web site contains a home
page, which acts like an index, indicating the content on the site, and may contain
additional pages. From the home page you can click hyperlinks to access other
Web pages. The Internet is dynamically changing therefore many Web sites
change on a daily or even hourly basis. [2] [3]
13

4.3. Navigating Web sites
There are many ways to navigate through Web sites and Web pages.
URL
Typing the URL of a Web site or Web page into the address bar of your Web
browser and then pressing the Return/Enter key or Go button. [2]
Favourites
Using the Favourites function of the Menu Bar is a quick and easy way to
navigate around previously saved links.
Hyperlinks
Clicking a text hyperlink or a hyperlinked graphic image will provide access to
other Web pages that have their addresses embedded in that hyperlink. [2] [3]
Side Navigation
Web sites generally have a list of links that represent the main Web pages of that
Web site. Although the words may not be underlined these items are still
hyperlinks.
Note: The hand icon symbol appears when you hover over a text hyperlink or a
hyperlinked graphic image.
14

5. Introduction to the Content Management System (CMS)
5.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/
5.2. Data Flow
15

5.3. Explaining the Interface
5.3.1 Login
Login using the URL http://www.nuigalway.ie/cms/ and your username and
password for the Web server.
16

5.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.
17

5.3.3 Editable areas
After you click on an 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.
18

5.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
19

Editable Area menus
20

Bibliography
[1] - Lynch, P. J., Horton, S. (2002). Web Style Guide: Basic Design Principles for
Creating Web Sites, Second Edition. Yale University Press
[2] - http://www.learnthenet.com/english/web/000www.htm
[3] - http://www.aarp.org/learntech/computers/basic_web/a2004-10-15-lti-lesson1.html
21