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

Table of Contents
1. Information Architecture ................................................................................................................ 3 1.1 1.2 1.3 1.4 1.5 1.6 2. 2.1 2.2 2.3 2.4 2.5 3. 3.1 3.2 3.3 4. 4.1 The goal ................................................................................................................................... 3 The audience ........................................................................................................................... 3 The content ............................................................................................................................. 3 Visual presentation theme...................................................................................................... 4 Site map and navigation ......................................................................................................... 4 Visual forms ............................................................................................................................ 5 Unity ........................................................................................................................................ 6 Variety ..................................................................................................................................... 6 Focal point............................................................................................................................... 6 Contrast................................................................................................................................... 8 Visual balance ......................................................................................................................... 8 Keep the web experience free from mental difficulty .......................................................... 10 Ensure each click is a mindless task ...................................................................................... 11 Remove three quarters of the the words on each page ....................................................... 11 Explanation of the CSS rules ................................................................................................. 13 Element Selectors ......................................................................................................... 14 ID Selectors ................................................................................................................... 15 Class Selectors ............................................................................................................... 16 The difference CSS can make to the design of a page .................................................. 16

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

Krugs Three Laws of Usability ........................................................................................................ 9

Implementation of Cascading Stylesheets .................................................................................... 13 4.1.1 4.1.2 4.1.3 4.1.4

5. 6.

Implementation of Server-Side Code............................................................................................ 18 5.1 Comparison of ASP.Net and HTML code fragments ............................................................. 18 Explanation of the ASP.Net code fragment .................................................................................. 19 Program code .................................................................................................................................... 20 Program outputs .................................................................................. Error! Bookmark not defined.

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

Daniel Seal | u3025958

1.
1.1

Information Architecture
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, lets 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 brickand-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.

Daniel Seal | u3025958 A lecturer or tutor may want to be able to answer a students 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.

Daniel Seal | u3025958 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.

Register

Log in Home Guests Guests Subpages Students Subpages Staff Subpages

Students

Staff

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

Daniel Seal | u3025958

2.
2.1

Visual design of the pages

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. Its 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 sites intentions are and what content will be on the pages, at a quick glimpse.

Daniel Seal | u3025958

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

Daniel Seal | u3025958 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.

Daniel Seal | u3025958

3.

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

Daniel Seal | u3025958

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

10

Daniel Seal | u3025958

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 its 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 theyre 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. Its bad enough that visitors skim read, we dont want them to completely ignore what you have to say.

11

Daniel Seal | u3025958

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.

12

Daniel Seal | u3025958

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

13

Daniel Seal | u3025958

<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, lets alter the <body> element.

Styling the body tag by element

CSS Code
body { margin: 01; padding: 02; font: 11pt3 Arial, Helvetica, Tahoma, Verdana, sans-serif4; background: #0005 url('../images/bg-backdrop.jpg')6 top center7 repeat8; text-align: center9; color: #fff10; }

HTML Code
<html> <head> <title>Kangaroo University &#187; Home</title> <link href="styles/main.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- this CSS alters the <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 users 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

14

Daniel Seal | u3025958

4.1.2

ID Selectors

Now thats 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
#theme { width: 860px1; height: 500px2; background: url('../images/bg-kangaroos.jpg') top left no-repeat3; display: block4; }

HTML Code
<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

15

Daniel Seal | u3025958

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
.disclaimer { font-size: 9pt1; color: #3332; text-align: center3; }

HTML Code
<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:

16

Daniel Seal | u3025958

CSS disabled

CSS enabled

17

Daniel Seal | u3025958

5.
5.1

Implementation of Server-Side Code

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

HTML Code (in browser)

<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
<form runat="server" title="Form"> <asp:Button ID="myFirstButton" runat="server" Text="This is a button" /> </form>

HTML Code (in browser)

<form method="post" action="./" id="ctl00" title="Form"> <div class="aspNetHidden"> <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" /> <div class="aspNetHidden"> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLr74jCBAKHqt2fD1gC5PBTeRQfV BhxdXoRJn5I1U2AMU0xlWW4xJC9Ynfx" /> </div> </form>

Menu of hyperlinks
ASP.Net Code
<ul id="menu-container"> <li>

HTML Code (in browser)

<ul="menu-container"> <li>

18

Daniel Seal | u3025958

<%: 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 visitors 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

19

Daniel Seal | u3025958

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;

20

Daniel Seal | u3025958

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 { background: #333300;

21

Daniel Seal | u3025958

} #staff-section-text { background: #663300; } #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 { text-decoration: none; } #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 { text-decoration: none; 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; }

22

Daniel Seal | u3025958

#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 &#187; 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>

23

Daniel Seal | u3025958

</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 /> Australian Government Higher Education (CRICOS) Registered Provider numbers: Kangaroo University #00212K</p> </div> </div> </div> </div> </div> </body> </html>

students.html
<html> <head> <title>Kangaroo University &#187; 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 id="site-sections"> <a href="students.html"><div class="site-section"> <div id="student-section-text" class="section-text">Students</div> </div></a> <a href="guests.html"><div class="site-section"> <div id="guest-section-text" class="section-text">Guests</div> </div></a>

24

Daniel Seal | u3025958

<a href="staff.html"><div class="site-section" id="last-site-section"> <div id="staff-section-text" class="section-text">Staff Members</div> </div></a> </div> <div id="breadcrumb"> <a href="index.html"><div id="logo"></div></a> <a href="index.html">Home</a> &#187; 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>

25

Daniel Seal | u3025958

<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-container"> <div id="footer"> <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> </div> </div> </div> </div> </div> </body> </html>

guests.html
<html> <head> <title>Kangaroo University &#187; Home</title> <link href="styles/main.css" rel="stylesheet" type="text/css" /> </head> <body>

26

Daniel Seal | u3025958

<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 id="site-sections"> <a href="students.html"><div class="site-section"> <div id="student-section-text" class="section-text">Students</div> </div></a> <a href="guests.html"><div class="site-section"> <div id="guest-section-text" class="section-text">Guests</div> </div></a> <a href="staff.html"><div class="site-section" id="last-site-section"> <div id="staff-section-text" class="section-text">Staff Members</div> </div></a> </div> <div id="breadcrumb"> <a href="index.html"><div id="logo"></div></a> <a href="index.html">Home</a> &#187; 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, Australias 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>

27

Daniel Seal | u3025958

<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>Youll 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-container"> <div id="footer"> <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> </div> </div> </div> </div> </div> </body> </html>

staff.html
<html> <head> <title>Kangaroo University &#187; 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">

28

Daniel Seal | u3025958

<input type="submit" value="Login"> <input type="button" value="Register"> </form> </div> <div id="header"> <div id="site-sections"> <a href="students.html"><div class="site-section"> <div id="student-section-text" class="section-text">Students</div> </div></a> <a href="guests.html"><div class="site-section"> <div id="guest-section-text" class="section-text">Guests</div> </div></a> <a href="staff.html"><div class="site-section" id="last-site-section"> <div id="staff-section-text" class="section-text">Staff Members</div> </div></a> </div> <div id="breadcrumb"> <a href="index.html"><div id="logo"></div></a> <a href="index.html">Home</a> &#187; 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>

29

Daniel Seal | u3025958

<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 (KUCONNECT)</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>

30

Daniel Seal | u3025958

<h2>Services for Students</h2> <ul> <li>General Student Services</li> <li>Learning Support Services</li> </ul> </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 /> Australian Government Higher Education (CRICOS) Registered Provider numbers: Kangaroo University #00212K</p> </div> </div> </div> </div> </div> </body> </html>

31