Web Design and Programming - Assignment 1 Report

1

Web Design and

Programming Assignment One

Daniel Seal

u3025958

This handbook details the construction of the Kangaroo University web site, beginning from the design and continuing to the final implementation of the product. This particular section will focus on the design stage.

Daniel Seal | u3025958

2

Table of Contents 1. Information Architecture ................................................................................................................ 3

1.1 The goal ................................................................................................................................... 3

1.2 The audience ........................................................................................................................... 3

1.3 The content ............................................................................................................................. 3

1.4 Visual presentation theme ...................................................................................................... 4

1.5 Site map and navigation ......................................................................................................... 4

1.6 Visual forms ............................................................................................................................ 5

2. Visual design of the pages ............................................................................................................... 6

2.1 Unity ........................................................................................................................................ 6

2.2 Variety ..................................................................................................................................... 6

2.3 Focal point ............................................................................................................................... 6

2.4 Contrast ................................................................................................................................... 8

2.5 Visual balance ......................................................................................................................... 8

3. Krug’s Three Laws of Usability ........................................................................................................ 9

3.1 Keep the web experience free from mental difficulty .......................................................... 10

3.2 Ensure each click is a mindless task ...................................................................................... 11

3.3 Remove three quarters of the the words on each page ....................................................... 11

4. Implementation of Cascading Stylesheets .................................................................................... 13

4.1 Explanation of the CSS rules ................................................................................................. 13

4.1.1 Element Selectors ......................................................................................................... 14

4.1.2 ID Selectors ................................................................................................................... 15

4.1.3 Class Selectors ............................................................................................................... 16

4.1.4 The difference CSS can make to the design of a page .................................................. 16

5. Implementation of Server-Side Code ............................................................................................ 18

5.1 Comparison of ASP.Net and HTML code fragments ............................................................. 18

6. Explanation of the ASP.Net code fragment .................................................................................. 19

Appendix ............................................................................................................................................... 20

Program code .................................................................................................................................... 20

Program outputs .................................................................................. Error! Bookmark not defined.


3

1. Information Architecture

1.1 The goal

The goal is to create a functional web site for the fictitious Kangaroo University. The purpose of the web site is to deliver information and services, via the World Wide Web, to those who are, or who wish to be, involved with the university. The design and implementation is of the upmost importance here. Whilst a content-rich web site is important, this handbook will not focus on the creation of countless web pages. The objective we are addressing here is that the theory of both web page design and programming is implemented using best practices. The task of creating many web pages does not matter. Now that the goal has been stated, let’s move onto identifying the users who will visit the web site.

1.2 The audience

To identify who are the target audience, one easy way to do this is to look at who visits the brick-and-mortar university in person. Obviously there are students, who go to university to obtain a higher education. Students are those who are currently studying at the university. It encompasses students studying a whole variety of qualifications, ranging from diplomas, bachelor degrees, masters and up to, and including, doctorates. To provide the necessary teaching, learning resources and research opportunities for the students, lecturers and tutors have to be included. Not to mention all the other employees too, such as the admin workers, maintenance team and security personnel. There are also prospective students who may be interested in studying at the uni, and most university campuses allow the general public to visit on-site. These visitors could be friends and relatives of a student, an employee or an interested third-party. After analysing all of the people involved with a university, we can classify them all into three distinctive groups:

Students

Staff

Guests Having identified the target audience, we must now decide what content will be included on the university web site.

1.3 The content

It was found that each audience group requirements differ in both their demands of functionality and information to be provided from the web site. Students will want to be able to enrol in a unit, find their timetable, and various other things. Guests, on the other hand, will want to be able to view the campus map.


4

A lecturer or tutor may want to be able to answer a student’s question(s), post an announcement, view their pay information, and send requests for maintenance and various other tasks. Of course, there is some overlap of demands between users. Students and guests may both be interested in enrolling in a new course or unit. Students and tutors/lecturers will both want to be able to access their scheduled timetable. As a result, some demands could certainly apply to more than one user group. It is vital to determine whether a demand is unique to one group, or applies to a multitude of users.

1.4 Visual presentation theme

The visual presentation theme is the global ‘look’ and ‘feel’ of the web site. It works as a template which applies a consistent design to all web pages.

1.5 Site map and navigation

The site map is relatively simple, as the goal was to design and implement a functional web site. It was never to create hundreds of web pages, like a real university web site. The advantage with linking only a small number of web pages to home page allows the structure to remain relatively simple, no matter how large the web site grows. Should the university require more web pages, they will simply be linked as subpages from the relevant section. The log in and register pages allows for the university to function with other technologies like blogs, forums, wikis, content management systems (CMS) and even social media.


5

The separation of the log in and register pages furthermore allows the university to adopt to changes in technology, as the basis for registering and recording a person have remained intact for many centuries, despite the means of authentication.

Home

Guests

Staff

Students

Log in

Register

Guests

Subpages

Students

Subpages

Staff

Subpages

This makes the web site quite easy to navigate. To further help the visitor, the home page link, title and breadcrumb navigation is employed universally throughout the web site. Regardless of the page they’re visiting, the user will always have a ample knowledge of where they are.

1.6 Visual forms

Now that the planning for the university have been finalised, it is time to focus on the visual design of the web site.


6

2. Visual design of the pages

2.1 Unity

Unity is an important factor to consider when designing a web site. It assures the visitor that they are on the same web site when they click on a link. It also keeps the respective information, within a page, in their same, predictable location for the user to read and interpret. To address unity within the page, all of the content and controls are centred in the middle with the background appearing on both the left and right-hand sides. More importantly, each page uses the exact same background image below.

The navigational links, title, log in and registration controls (utilities) and content are always arranged in the same position. As an example, the utilities component is always positioned at the top of every page. It will always be seen, no matter what web page the user is visiting.

In fact, with the exception of the home, virtually every page looks the same. There may been some variation in colour scheme and different images, however without these subtle variations, there would be no way to quickly and easily distinguish between each web page.

2.2 Variety

To maintain some variety, each section uses a slightly adjusted colour scheme and different images for the header. The home page also appears different to the lower level web pages. This is important as the home page serves as the launch pad to all site content. If the home page is fails to interest or entice the visitor to explore the web site deeper, then that is a potential loss of one customer.

2.3 Focal point

All web sites require something to focus on. The issue, however, it to ensure the most important information is interpreted first. It’s what separates the ‘memorable’ web sites from the ‘good’ pile. By using a clear focal point, it helps to define what your web site is all about. It portrays to the visitor what the web site’s intentions are and what content will be on the pages, at a quick glimpse.


7

To present the Kangaroo University as a unique web site, a background of kangaroos is positioned very prominently in the top-centre of the page. This immediately allows the visitor to make a distinction that this is the Kangaroo University, and not another higher-education institution.

Just below the background, the visitor’s eyes are then drawn to three distinct sections, with titles accompanying the related images. These are the three categories of the web site which leads the visitor to the relevant content. By using the images, the meaning of each title is more easily understood.

The log-in utility has been placed at the top, where the visitor can quickly log on. Although it is placed in a prominent position, it was vital that the kangaroo background theme and section links


8

were clearly visible. As a result, the utilities are a shade darker. This means experienced visitors can still quicker log on, however the attention of a new visitor is not drawn to unnecessary information.

2.4 Contrast

It is important to consider contrast when designing a web site to ensure that the content is recognisable and understandable. Without adequate contrast, there is no point in designing the web site at all, as the visitor will not be able to distinguish and interpret the various shapes and text on the pages. Contrast is a particularly important factor when considering textual content. It is best to use high contrast to ensure that words are legible. A dark background and light foreground, for the text, is preferable, however the inverse of the two tones is still regarded as an effective use of contrast. As a result, for large bodies of text, it was better to use a white background with black coloured text. To contrast with the textual content, the titles and breadcrumb navigation use a black background with white text or, in the case of the links, pale-coloured text.

2.5 Visual balance

Visual balance helps the visitor to distinguish and interpret the relationship between objects, based on factors such as proximity, colour, tone and size. If one element is positioned closely to another, it is automatically considered to be related. If say, a huge element is positioned away from some smaller objects, the huge elements will be considered separate. This is what the kangaroo background achieves. It is positioned away from the utilities and navigational elements and thus it considered to be a separate entity. The elements that are the utilities however are positioned very closely together, which implies that they all relate to the same purpose. This allows the user to log on effortlessly without having to spot all of the components. The same applies to the sections of the web site. All three sections have been grouped together. The visitor does not have to tediously search on the home page, in frustration, to simply go to a different area of the web site. Everything is positioned in groups for easy dissection.


9

3. Krug’s Three Laws of Usability

Visitors typically navigate a web site differently to what the web designer would have envisioned. Instead of reading all of the text and making a well-thought out decision, visitors read a web page by scanning for keywords. The first relevant-sounding link is then clicked. If that page fails to deliver what they’re after, they will return back to the previous page. Should the visitor not be able to find the intended information, after a few tries of aimless navigation, they will abandon the web site and try a different one. The end result is losing customers to other competitors. To design a web site according to how visitors navigate the web, Steve Krug devised 3 Laws of Usability:

Don't make me think.

It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice.

Get rid of half the words on each page, and then get rid of half of what's left. As a result it is vital that web designers meet the above criteria, in order for the web site to be a success.


10

3.1 Keep the web experience free from mental difficulty

To answer the first law, the content on the Kangaroo web site must be easy to digest. The user must not feel threatened. This includes maintaining enough white-space, positioning images next to their related text, keep wording simple.

As explained earlier, the focal point allows the visitor to obtain a clear understanding of what the web site is all about


11

3.2 Ensure each click is a mindless task

The second law is not so much about the number of clicking involved, but whether clicking links requires a high amount of concentration and thoughtful decision-making. If it is, the navigation system has been poorly designed. It is important to use clicking to break the information up into simple steps. This means making each click a purposeful action. For example, a user chooses to purchase an item online. If the user has to click each time to answer the next question, the entire process would take become too tedious and time-consuming. It can be dangerous if we oversimplify the process into too many steps. Instead, it is better to condense the online purchasing process into steps. Instead of countless page, the pages could well be condensed into five pages:

Quantity and discounts

Any other products?

Payment details

Order details

Other products Conversely, if the purchasing process was displayed all on one page, to the user, it would feel as though an avalanche of information had just pummelled them. When either compression or expansion of information is pushed too far, it is damaging to the usability of the web site. Basically it’s all about moderation. All content has been broken down into three sections:

Students

Guests

Staff Members

From each section, the visitor can then find the content they’re looking for, depending on which section they clicked on. Additionally, in order to help the user locate which page they are at, breadcrumb navigation has been incorporated into the web site. This assures the user that they know exactly where they are located in the web site hierarchy.

3.3 Remove three quarters of the the words on each page

The last law is there to prevent the text on pages from being too long. If the visitor has to continually scroll large amounts of text, they will most likely skip over whole paragraphs. It’s bad enough that visitors skim read, we don’t want them to completely ignore what you have to say.


12

To adhere to this law, the length of text has been kept to a minimum. The visitor does not have to scroll endlessly to read the content. Short titles have been employed to provide a quick glimpse of what each page is all about. Subtitles also separate large bodies of text to help the visitor quickly find the information they may be after on the page. Each page uses a restricted number of words. Everything has been kept to be as concise as possible and excessive scrolling has been avoided, by using lists and omitting unnecessary words.


13

4. Implementation of Cascading Stylesheets

In order to implement the visual presentation theme, the best way to do so is to use styling language called Cascading StyleSheet (CSS). Whilst it is possible to code the visual design in HyperText Markup Language (HTML), CSS is far more flexible makes it easier to maintain. In essence, HTML is best used for the structure and content, and CSS is best used for presenting this content visually.

4.1 Explanation of the CSS rules

Now that CSS has been determined to be the best for presenting the visual design of web pages, it is time to look at the syntax of CSS and what it can achieve. The cascading stylesheet language, unlike HTML and XML, does not use angled brackets. Instead the CSS syntax looks more like a programming language, where the selector is declared and parameters are surrounded in curly brackets. Don’t be fooled, however, into thinking that CSS and programming languages are the same. They are completely different and should be treated as such. There are three ways to implement CSS in a web page. The example of colouring a heading green is used to show the difference:

Inline – positioned inside the element.

<h1 style="color: green">This heading is green</h1>

Best used for unique, once-off styles.

Internal – placed at the top of page, within the header.

<head>

<style type=”text/css”>

h1

{

color: green;

}

</style>

</head>

<body>

<h1>This heading is green</h1>

</body>

Best used for page-specific styles.

External – contained in a separate file.

stylesheet.css

h1

{

color: green;

}

index.html

<head>

<link href="stylesheet.css" type="text/css" rel="stylesheet" />

</head>


14

<body> <h1>This heading is green</h1>

</body>

Best used for styles used across the whole web site.

4.1.1 Element Selectors

To demonstrate how CSS can be used to style a page, let’s alter the <body> element.

Styling the body tag by element

CSS Code HTML Code body {

margin: 01;

padding: 02;

font: 11pt3 Arial, Helvetica,

Tahoma, Verdana, sans-serif4;

background: #0005

url('../images/bg-backdrop.jpg')6

top center7 repeat

8;

text-align: center9;

color: #fff10;

}

<html>

<head>

<title>Kangaroo University »

Home</title>

<link href="styles/main.css"

rel="stylesheet" type="text/css" />

</head>

<body>



</body>

</html> The stylesheet above performs several modifications to the <body> element:

1. The margin on all sides is set to a size of zero pixels

2. The padding on all sides is set to zero pixels

3. Font changed to 11 point

4. The Arial font-family is set as the default to use.

If the font is not installed on the user’s computer, try the next font

5. Background is changed to a black colour

6. A background image is used to complement the black colour

7. Background image is set to begin at the very top (vertical) and centred (horizontal) position

8. Background image is set to tile both horizontally and vertically across the page

9. Text alignment is changed from left (default) to a centred placement

In the case of the Internet Explorer browser, child elements are also centred

10. Text colour is changed from black (default) to the colour white


15

4.1.2 ID Selectors

Now that’s all well and good, however what if we only want to change the appearance of a specific element, but not when this element is used elsewhere. This is where the ID selector comes to the rescue. Instead of using the element name for the selector, the designer is free to choose their own name. The only requirement is that this hash symbol precedes the name and that the given name is not a reserved word. To apply the ID selector to the specific element, the ‘id’ attribute has to be added to the corresponding HTML tag, in order for the ID to work its magic.

Styling a divider by ID

CSS Code HTML Code #theme {

width: 860px1; height: 500px

2;

background: url('../images/bg-kangaroos.jpg')

top left no-repeat3;

display: block4;

}

<div id="theme">

<!—

The kangaroo background

theme will appear here

-->

</div> The stylesheet above performs several modifications to the ID attribute called ‘theme’, which resides in the <div> element:

1. The width is set to 860px

2. The height is set to 500px

3. Background image is set to begin in the top left hand-corner and not tile

4. Turns the <div> into a fully-enclosed area of the set dimensions

This ensures the background image is displayed


16

4.1.3 Class Selectors

The ID tag is quite a powerful selector when it comes to adjusting specific elements; however what happens if more than one element requires specialised styling. The answer to this problem is class selectors. Much like ID selectors, a symbol precedes the chosen class name. In case of class selectors, a full stop is used before the class name. A class attribute also has to be added into the HTML code, as demonstrated below.

Styling a images by class

CSS Code HTML Code .disclaimer {

font-size: 9pt1;

color: #3332;

text-align: center3;

}

<p class="disclaimer">

Kangaroo University, ACT 2601 Australia, Switchboard

+61 2 6201 5111, © 2011 Kangaroo University<br />

Australian Government Higher Education (CRICOS)

Registered Provider numbers: Kangaroo University

#00212K

</p> The stylesheet above performs several modifications to the class attribute called ‘disclaimer’, which resides in the <p> element:

1. Font-size changed to 9 point

2. Colour of the text is set to a very dark grey

3. Text is aligned to the centre

4.1.4 The difference CSS can make to the design of a page

CSS can alter the visual presentation of pretty much anything on the web page. The two screenshots below demonstrate how a bland web page can be transformed into a more unique and attractive design:


17

CSS disabled

CSS enabled


18

5. Implementation of Server-Side Code

5.1 Comparison of ASP.Net and HTML code fragments

There are two ways to create ASP.Net controls. The first option is obvious: use ASP.Net syntax. The second option is to use Razor syntax. Unfortunately, the Razor syntax is only available with ASP.Net MVC3, so the following controls will be presented with the ASP.Net syntax.

Displaying the current time

ASP.Net Code HTML Code (in browser) <%

lbl1.Text = "The date and time is "

+ DateTime.Now;

%>

<html>

<head>

<title>Current date and

time</title>

</head>

<body>

<form id="Form1" runat="server">

<h3><asp:label id="lbl1"

runat="server" /></h3>

</form>

</body>

</html>

<form method="post" action="./" id="Form1">

<div class="aspNetHidden">

<input type="hidden"

name="__VIEWSTATE" id="__VIEWSTATE"

value="/wEPDwULLTEwOTI1OTYyNzVkZOj/Zl

AQHXFrPNQ3t3uwUtISSqR4etWIZWmBnXA79bJ

X" />

</div>

<h3><span id="lbl1">The date and time is

30/09/2011 11:34:25 PM</span></h3>

</form>

Button

ASP.Net Code HTML Code (in browser) <form runat="server" title="Form">

<asp:Button ID="myFirstButton"

runat="server" Text="This is a

button" />

</form>

<form method="post" action="./" id="ctl00"

title="Form">


<input type="hidden" name="__VIEWSTATE"

id="__VIEWSTATE"

value="/wEPDwULLTEwNTE5MjExOTlkZEXcOh1vB

o3tpNezaSIOjoYUToFV6t0ruW4s6Upc4iFp" />

</div>

<input type="submit"

name="ctl00$MainContent$myFirstButton"

value="This is a button"

id="MainContent_myFirstButton" />


<input type="hidden"

name="__EVENTVALIDATION"

id="__EVENTVALIDATION"

value="/wEWAgLr74jCBAKHqt2fD1gC5PBTeRQfV

BhxdXoRJn5I1U2AMU0xlWW4xJC9Ynfx" />

</div>

</form>

Menu of hyperlinks

ASP.Net Code HTML Code (in browser) <ul id="menu-container">

<li>

<ul="menu-container">

<li>


19

<%: Html.ActionLink("Home",

"Index", "Home")%>

</li>

<li>

<%: Html.ActionLink("About Us",

"About", "Home")%>

</li>

</ul>

<a href="/">Home</a>

</li>

<li>

<a href="/Home/About/">About Us</a>

</li>

</ul>

6. Explanation of the ASP.Net code fragment

As is depicted above, the dynamic ASP.Net code is converted into static HTML code when it arrives on the visitor’s web browser. The whole process is explained below:

1. Browser requests an ASP.Net file

2. Web server (i.e. ISS) forwards this request to the ASP.Net engine

3. Engine opens the requested ASP. Net file and reads it

4. ASP.Net file is executed, line by line

5. The file is passed back to the web server

6. The web server returns the ASP.Net file to the browser as plain HTML The reason why server-side languages are used so extensively on the web is that they present a large number of benefits including:

To ability to create or alter content dynamically

Hiding the source code away from prying eyes

Easily customisable skins and themes

Handle user queries or submitted data from forms

Access databases and present the data inside


20

Appendix

Program code

main.css html, body, p {

margin: 0; padding: 0;

}

html, body {

height: 100%;

min-height: 100%;

width: 100%;

}

html>body #content-container {

height: auto;

}

html {

cursor: default;

}

body {

margin: 0;

padding: 0;

font: 11pt Arial, Helvetica, Tahoma, Verdana, sans-serif;

background: #000 url('../Images/bg-backdrop.jpg') top center repeat;

text-align: center;

color: #fff;

}

h2, h3, h4, h5, h6 {

clear: both;

}

p {

margin-bottom: 1em;

}

#container {

position: relative;

min-width: 1127px;

max-width: 1127px;

width: 1127px;

height: auto !important;

height: 100%;

margin: 0 auto;

background: #000 url('../Images/bg-shading.jpg') top center repeat-y;

text-align: center;

}

#content-container {

width: 900px !important;

width: 1127px; /* Fixes an IE width issue */

margin: 0 auto;

text-align: center;

}

#main-layout {

padding: 0 20px;

background-color: #000;

padding-bottom: 4em;

width: 900px; /* Fixes an IE width issue */

max-width: 860px; /* Prevents standards-compliant browsers from

overextending the width */

text-align: left;

}

#utilities {

width: 860px;

background: url('../Images/bg-utilities.jpg') top left repeat-x;

margin: 0; padding: 0; padding: 10px 0;

display: block;

text-align: center;


21

vertical-align: baseline;

}

#footer-container {

width: 100%;

text-align: center;

}

#footer {

margin: 0; padding: 0;

padding-bottom: 10px;

position: absolute;

width: 1127px;

bottom: 0; left: 0;

}

.disclaimer {

font-size: 9pt;

color: #333;

text-align: center;

}

/************

* Home Page *

************/

#theme {

width: 860px; height: 500px;

background: url('../Images/bg-kangaroos.jpg') top left no-repeat;

display: block;

}

#site-sections {

}

.site-section {

margin: 0 8px 0 0;

float: left;

color: #ffffff;

width: 280px;

position: relative;

z-index: 2;

}

#last-site-section {

margin-right: 0px;

}

#student-section-image , #guest-section-image, #staff-section-image {

height: 383px;

}

#student-section-image {

background: url('../Images/bg-students.jpg') top center no-repeat;

}

#guest-section-image {

background: url('../Images/bg-guests.jpg') top center no-repeat;

}

#staff-section-image {

background: url('../Images/bg-staff.jpg') top center no-repeat;

}

#student-section-text, #guest-section-text, #staff-section-text {

margin-top: 10px;

padding: 0.5em 0;

text-align: center;

font-size: 16pt;

}

#student-section-text {

background: #330000;

}

#guest-section-text {



22

}

#staff-section-text {


}

#site-sections a {

cursor: default;

text-decoration: none;

}

/************

* Sub Pages *

************/

#logo {

width: 94px; height: 123px;

background: url('../Images/logo.gif') top left no-repeat;

float: left;

position: relative; bottom: 12px;

z-index: 1;

cursor: pointer;

}

#breadcrumb {

clear: both;

padding-top: 10px;

}

#breadcrumb a {


}

#breadcrumb a:link, #breadcrumb a:visited

{

text-decoration: underline;

}

#breadcrumb a:link

{

color: #fc9;

}

#breadcrumb a:visited

{

color: #f99;

}

#breadcrumb a:hover, #breadcrumb a:active

{


color: #cc9;

}

.wrapper {

padding: 5px 60px;

background: #fff; position: relative;

color: #000; z-index: 7;

}

#students-wrapper h2 {

color: #660000;

}

#students-wrapper {

border-top: 40px groove #c66;

border-bottom: 5px double #c66;

}

#guests-wrapper h2 {

color: #333300;

}

#guests-wrapper {

border-top: 40px groove #cc9;

border-bottom: 5px double #cc9;

}


23

#staff-wrapper h2 {

color: #663300;

}

#staff-wrapper {

border-top: 40px groove #fc9;

border-bottom: 5px double #fc9;

}

a:hover .section-image, a:hover .section-text {

cursor: pointer;

}

.text-input {

background: url('../Images/textfield.jpg') top left repeat-x;

border: 0;

}

.clear-all {

clear: both;

}

index.html <html>

<head>

<title>Kangaroo University » Home</title>

<link href="styles/main.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="content-container">

<div id="main-layout">

<div id="utilities">

<form>

Username: <input type="text" class="text-input"

name="username">

Password: <input type="text" class="text-input"

name="password">

<input type="submit" value="Login">

<input type="button" value="Register">

</form>

</div>

<div id="header">

</div>

<div id="content">

<div id="theme">

</div>

<div id="site-sections">

<a href="students.html"><div class="site-section">

<div id="student-section-image"

class="section-image" title="Image of students"></div>

<div id="student-section-text"

class="section-text">Students</div>

</div></a>

<a href="guests.html"><div class="site-section">

<div id="guest-section-image"

class="section-image" title="Image of guests"></div>

<div id="guest-section-text"

class="section-text">Guests</div>


24

</div></a>

<a href="staff.html"><div class="site-section"

id="last-site-section">

<div id="staff-section-image"

class="section-image" title="Image of staff"></div>

<div id="staff-section-text"

class="section-text">Staff Members</div>

</div></a>

<div class="clear-all"></div>

</div>

</div>

<div id="footer-container">

<div id="footer">

<p class="disclaimer">Kangaroo University, ACT

2601 Australia, Switchboard +61 2 6201 5111, © 2011 Kangaroo University<br />


Registered Provider numbers: Kangaroo University #00212K</p>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

students.html <html>

<head>



</head>

<body>





<form>


name="username">


name="password">



</form>

</div>

<div id="header">





</div></a>




</div></a>


25





</div></a>

</div>

<div id="breadcrumb">

<a href="index.html"><div id="logo"></div></a>

<a href="index.html">Home</a> »

Students

</div>

<h1>Students at KU</h1>

</div>

<div id="content">

<div id="students-wrapper" class="wrapper">

<h2>Announcements</h2>

<ul>

<li>New Three new Capital Works projects

commencing across campus Monday 26 September</li>

<li>New Student Ambassador Program for

Domestic Students - Apply Now!</li>

<li>New Maintaining Motivation and Focus:

Getting Back on Track at KU Health and Counselling.</li>

<li>Applications for LGBTIQ scholarships

close on 15 October 2011</li>

<li>The Careers Service has temporarily

relocated to 1C70</li>

<li>ACT with Anxiety: a Health and

Counselling program for KU students</li>

</ul>

<h2>Students Tools</h2>

<ul>

<li>MyKU - Learn More</li>

<li>LearnOnline (Moodle)</li>

<li>LearnOnline (Moodle 2 - KUELI Students

Only)</li>

<li>E-Mail</li>

<li>Computer Lab Locations and Usage on

Campus</li>

<li>Streaming videorecordings (Echo360) of

lectures are now available on the Moodle site for your course / unit, provided that

your lecturer has authorised us to make them available to you. Log into Moodle

here</li>

<li>KULSpace</li>

<li>AskKU</li>

</ul>

<h2>Emergency Contacts</h2>

<ul>

<li>Emergency Phone Numbers</li>

<li>Health and Counselling</li>

<li>Security Office</li>

</ul>

<h2>General Information</h2>

<ul>

<li>Academic Calendar / Principal

Dates</li>

<li>Academic Skills Program</li>

<li>Building a Better Campus (redevelopment

and building works)</li>

<li>Building Access</li>

<li>Campus maps</li>

<li>Courses and Units</li>

<li>Elections</li>

<li>Equity and Diversity</li>

<li>Events & dates</li>

<li>Examinations</li>


26

<li>Information and Technology

Management</li>

<li>Justices of the Peace, Statutory

Declarations and certifying true copies</li>

<li>Library | Request a purchase for the

library collections</li>

<li>Lost Property, see Security</li>

<li>Safety on Campus</li>

<li>Security</li>

<li>Shopping, Banking and Eating</li>

<li>Student Accommodation</li>

<li>Student Administration</li>

<li>Student Ambassadors</li>

<li>Student Centre</li>

<li>Student Commons / Teaching Commons</li>

<li>Student Equity and Support (Dean of

Students)</li>

<li>Study Abroad & Exchange</li>

<li>Team KUAN representing the University

in community events</li>

<li>Timetables</li>

<li>KU1 Card</li>

</ul>

<h2>Student Organisations</h2>

<ul>

<li>Clubs and Societies</li>

<li>KUU</li>

<li>Kangaroo University Students

Association (KUSA)</li>

</ul>

<h2>Policies</h2>

<ul>

<li>Academic Policies</li>

<li>Student Grievance Resolution

Policy</li>

<li>Student Guide to Policies (PDF format,

970 Kb)</li>

</ul>

</div>

</div>


<div id="footer">





</div>

</div>

</div>

</div>

</div>

</body>

</html>

guests.html <html>

<head>



</head>

<body>


27





<form>


name="username">


name="password">



</form>

</div>

<div id="header">





</div></a>




</div></a>





</div></a>

</div>




Students

</div>

<h1>All visitors are welcome!</h1>

</div>

<div id="content">

<div id="guests-wrapper" class="wrapper">

<h2>The Kangaroo University</h2>

<p>At the University of Canberra, Australia’s

Capital University, our focus is on preparing you for a successful and rewarding

career.</p>

<p>We call it professional preparation for

professional careers. And it works. Our graduates are consistently ranked among the

most employable in Australia.</p>

<p>To discover how the University of Canberra can

help you fulfil your potential, I invite you to explore this site, visit the campus

or contact one of my colleagues,

whose details you will find on this website.</p>

<p><strong>Professor Stephen Parker</strong><br />

<em>Vice-Chancellor and President</em></p>

<h2>What do you want most from your time at

University?</h2>

<ul>

<li>state of the art knowledge and skills

in your chosen discipline</li>

<li>professional preparation for a

competitive edge in your chosen career</li>


28

<li>the flexibility to change or add to

your mix of courses</li>

<li>the opportunity to take two degrees in

four years</li>

<li>experience of hands-on work-integrated

learning</li>

<li>lecturers informed by research and

regular consultation with their professions</li>

<li>career-enhancing qualifications that

are recognised and respected world-wide</li>

<li>the opportunity to participate in a

research culture that is making substantial contributions to sustaining our quality

of life. Australian students</li>

<li>the transformational experience that

only an inclusive, collegial relationship between students and academics can

provide</li>

<li>an enjoyable and relaxing social life

in a friendly, multicultural environment</li>

</ul>

<p>You’ll experience and enjoy all these and more

at The University of Canberra. This is the time to spread your wings, to open your

mind, widen your social circle

and start friendships that will last a lifetime.

Whatever discipline you study, you'll also find you develop professional networks

with friends, colleagues, academics

and mentors who'll be working in your own or

related fields in every state of Australia and many countries around the world.</p>

</div>

</div>


<div id="footer">





</div>

</div>

</div>

</div>

</div>

</body>

</html>

staff.html <html>

<head>



</head>

<body>





<form>


name="username">


name="password">


29



</form>

</div>

<div id="header">





</div></a>




</div></a>





</div></a>

</div>




Staff Members

</div>

<h1>Working at KU</h1>

</div>

<div id="content">

<div id="staff-wrapper" class="wrapper">

<h2>Announcements</h2>

<ul>

<li>New Three new Capital Works projects

commencing across campus Monday 26 September</li>

<li>Voice Survey 2011 results. You will

need to log on to My KU to follow this link</li>

<li>New Campus Signage</li>

<li>Bradley Report links</li>

<li>Course Convenors' Community Initiative

- Peer Enhanced Performance Program</li>

<li>Quality and Improvement</li>

<li>Review of Research Strategy. Access to

these documents is restricted to University staff</li>

</ul>

<h2>Blogosphere and Social Media</h2>

<ul>

<li>University Blogs (including Parker's

Pen)</li>

<li>Yammer (Kangaroo University staff)</li>

<li>Facebook (Kangaroo University)</li>

<li>Twitter (Kangaroo University)</li>

</ul>

<h2>The University</h2>

<ul>

<li>Building a Better Campus</li>

<li>Building Access</li>

<li>Campus maps</li>

<li>Dean of Students including information

for staff on student matters</li>

<li>Faculties, units and centres</li>

<li>Justices of the Peace, Statutory

Declarations and certifying true copies</li>

<li>Logos, templates, etc. (available to KU

Staff only)</li>


30

<li>Order office supplies (from Complete

Office Supplies. Designated staff only)</li>

<li>Principal dates</li>

<li>Scrivener Building</li>

<li>Staff directory</li>

<li>Staff Notices</li>

<li>Team KUAN representing the University

in community events</li>

<li>University Art Collection</li>

<li>Vice-Chancellor's Staff Excellence

Awards</li>

</ul>

<h2>Expertise Directory</h2>

<p>How to list yourself and your expertise on

Expertguide, KU's preferred expertise directory</p>

<h2>Human Resources</h2>

<ul>

<li>Development and training</li>

<li>Employment conditions and awards</li>

<li>Equity and Diversity</li>

<li>HR-Online</li>

<li>Positions vacant (externally

advertised)</li>

<li>Positions vacant (internal applicants

only)</li>

<li>Staff induction program</li>

</ul>

<h2>Health & Safety</h2>

<ul>

<li>Emergency response</li>

<li>Employee assistance program</li>

<li>Health and Counselling Centre</li>

<li>Health & safety training</li>

<li>Safety on campus</li>

</ul>

<h2>Information and Technology Management</h2>

<ul>

<li>Audio visual support</li>

<li>Computer & printing support</li>

<li>Computer Lab Locations and Usage</li>

<li>Email via Web</li>

<li>Telephone support</li>

<li>Web site support</li>

<li>Wireless network zones (KU-

CONNECT)</li>

</ul>

<h2>Services for Staff</h2>

<ul>

<li>Booking an official vehicle</li>

<li>Campus Planning and Development</li>

<li>Cleaning Services (contact by

email)</li>

<li>Financial Services</li>

<li>Lost Property, see Security</li>

<li>Maintenance Requests</li>

<li>Planning and Quality</li>

<li>Printing</li>

<li>Procurement</li>

<li>Records, Archives and MailRoom

Services</li>

<li>Statistics (KU Staff username and

password required for access.)</li>

<li>Transport (Public Transport)</li>

<li>Travel (on University business,

etc.)</li>

<li>KU1 Card</li>

<li>KUU</li>

</ul>


31

<h2>Services for Students</h2>

<ul>

<li>General Student Services</li>

<li>Learning Support Services</li>

</ul>

</div>

</div>


<div id="footer">





</div>

</div>

</div>

</div>

</div>

</body>

</html>

Date post:	28-Oct-2014
Category:	Documents
Upload:	enteroblivion
View:	22 times
Download:	0 times

Web Design and Programming - Assignment 1 Report

Documents