web design and programming - assignment 1 report
DESCRIPTION
Report for the first Web Design and Programming assignment at University of Canberra, Australia, that was submitted in Semester 2 of 2011. The 2nd year unit is compulsory for all students studying a Bachelor of Information Technology.Covers a broad range of elements that were factored into the design of the web site. Following this, these design choice were implemented into HTML and CSS code.TRANSCRIPT
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.
Daniel Seal | u3025958
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.
Daniel Seal | u3025958
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.
Daniel Seal | u3025958
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.
Daniel Seal | u3025958
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.
Daniel Seal | u3025958
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
Daniel Seal | u3025958
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.
Daniel Seal | u3025958
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.
Daniel Seal | u3025958
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
Daniel Seal | u3025958
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.
Daniel Seal | u3025958
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.
Daniel Seal | u3025958
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>
Daniel Seal | u3025958
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>
<!-- 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 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
Daniel Seal | u3025958
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
Daniel Seal | u3025958
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:
Daniel Seal | u3025958
17
CSS disabled
CSS enabled
Daniel Seal | u3025958
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">
<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 HTML Code (in browser) <ul id="menu-container">
<li>
<ul="menu-container">
<li>
Daniel Seal | u3025958
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
Daniel Seal | u3025958
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;
Daniel Seal | u3025958
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 {
background: #333300;
Daniel Seal | u3025958
22
}
#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;
}
Daniel Seal | u3025958
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>
Daniel Seal | u3025958
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 />
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 » 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>
Daniel Seal | u3025958
25
<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> »
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>
Daniel Seal | u3025958
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-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 » Home</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
Daniel Seal | u3025958
27
<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> »
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>
Daniel Seal | u3025958
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-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 » 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">
Daniel Seal | u3025958
29
<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> »
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>
Daniel Seal | u3025958
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>
Daniel Seal | u3025958
31
<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>