Web Training Course: Introduction to Web Editing Version 1.4 October 2007 Version 2.0 December Course Rationale: Aims & Objectives:

1

Web Training Course: Introduction to Web Editing

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

1. Introduction to Web services provided by NUI Galway

 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

3

2. NUI Galway’s Web policy and Web publishing templates

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 athttp://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

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 viewhttp://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

5

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.

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.

7 Relevant

Information made available should address the particular needs of potential clients and users of the Web site. Information should be presented in a user-focused 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

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.

9 Example: Sitemap  Home  Services  Hosting  Training  Help  Support  Telephone  Email  Web  FAQs  Staff  Contact File Structure

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.

11

Sitemap:

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

13 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]

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.

15

5. Introduction to the 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) The URL for the CMS is:http://www.nuigalway.ie/cms/

5.3. Explaining the Interface 5.3.1 Login

Login using the URLhttp://www.nuigalway.ie/cms/and your username and password for the Web server.

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

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

19 5.3.4 Control panel, buttons, & menus Control Panel

Buttons

- Edit button

- Design view of content in main body area

21

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