Part A-Planning Report
MARIA MARAGOUDAKIS
HTTP://CSUSAP.CSU.EDU.AU/~MMARAG01
Intended Audience
My web site is aimed at:
 My fellow students at Charles Sturt University
 Anyone who has access to the csusap
Goals of This Site
The goals of my web site are:
 To provide information about me and my hobbies to the visitors of my
web site
 To provide a “joke corner” where visitors can go to and read jokes
 To have student interaction by posting the jokes that students have sent
in to the “joke corner”
 To start a joke competition if student participation is satisfactory
 To test my ability to create a web site by composing the xhtml myself
and not use an editing tool to compose the xhtml code
Site Diagram
MARIA’S WEB SITE
SITE DESIGN DIAGRAM – MAY 2007
Home Page Outline



Home Page
Index.html

Introduce myself
Give an overview of my website
Provide relative links to the other pages in my
website
Provide an e-mail address for visitors wanting to
communicate with me

Hobbies
Joke Corner
References
Validator Report
Hobbies.html
Jokes.html
References.html
Validator.html
Hobbies



Jokes
Introduce my hobbies
Provide absolute links to
other relevant sites
Provide a relative link to
movies.html and
index.html





Movies
Movies
Provide an overview on the
rules for submitting jokes
Include jokes sent in
Provide a relative link back to
index.html
Provide a relative link to
home.html
References



Show all the resources used in creating
this web site
Provide absolute links to the URL of all
the resources used
Provide a relative link back to index.html
Validator


Provide the validator output of
the xhtml used for this web site
from w3.org
Provide a relative link back to
index.html
References
Site Diagram
Movies.html


Introduce the movies I like
Provide a relative link back to
index.html
http://csusap.csu.edu.au/~mmeek
Web Features Used on My Web site
 Index.html
The index.html contains the following:
1.
Internal style sheet with an orange background and black text, font-family verdana
and font-size 12pt
2.
An invisible table at the top of the page containing the relative links to the other pages
in my web site
3.
A relative link to the Part A-Powerpoint presentation
4.
The “strong” and “italics” font styles for emphasis
5.
A relative link to the joke.html where visitors can read the joke rules before submitting
their jokes
6.
An animated gif for the mailbox to grab visitors’ attention
7.
An animated divider that gives my home page a “happy feeling”
8.
A copyright symbol with my details so that the visitor knows who created this web site
Web Features Used on My Web site
 Hobbies.html
The hobbies.html contains the following:
1.
An internal style sheet with an orange background, header size 1 and 2 and paragraphs
in black text, font family-chisel wide, font-size 14pt
2.
Headers which are aligned “center” for better layout
3.
The “big” and “italics” font styles that are used to add emphasis
4.
An animated gif divider with a swimming theme that is used to separate my swimming
awards with the remainder of the text
5.
An unordered list for the swimming awards
6.
Absolute links to the URL of two sites that I have found helpful in learning
photography
7.
A relative link to my other hobby, movies.html
8.
An animated gif link back to my home page, index.html
Web Features Used on My Web site
 Movies.html
The movies.html contains the following features:
1. An internal style sheet, background colour “orange”, font-family “verdana”, p font-size
“12pt”, header 1 and header 4, font-family “broadway” and header one colour “balck”
2. Header 1 is which is aligned “center” for better layout
3. A horizontal rule which was inserted to separate the text with the ordered list
4. An ordered list which shows my top 5 movies
5. An animated gif that blends in with the cinema theme of the page
6. A horizontal rule to separate the animated gif above with the home gif
Web Features Used on My Web site
 Jokes.html
The jokes.html contains the following:
1. An internal style sheet with an orange background , font-family “tahoma”, font-size
2.
3.
4.
5.
6.
7.
8.
9.
“12pt” and header size 1, “green” colour to emphasise my swimming awards , font-size
“30pt” , paragraph align “center”
The “strong” font stylewhich is used together with h1 to make the title stand out
A nested list for the joke rules
The “underline” element to highlight h3
An animated gif that was included instead of a horizontal rule to separate the rules from
the jokes
A jpg image that was placed above the jokes to add humour to the text below
The “italics” element to highlight the students’ names
A horizontal rule to separate the jokes above with the home gif
An animated gif link back to my home page, index.html
Web Features Used on My Web site
 References.html
The references.html contains the following:
1. An internal style sheet with an orange background , font-family “lucinda console”, fontsize “14pt” and header size 1, font-family “banner”, font-colour “green” used to
emphasise the “resources used” title
2. The “italics” font style is used in h1 and in the text in the table for presentational
purposes
3. A table with two columns. The first column fontains the description of the resource used
and the second column contains the absolute link to that resource
4. An animated gif link back to my home page, index.html
Web Features Used on My Web site
 Validator Report
The validator_report.html contains the following:
1.
An internal style sheet with an orange background , font-family “arial narrow”, fontsize “12pt” and header size 1, font-family “castellar”, font-colour “green” , header 1
font-size “30pt”, used to emphasise the “validator output” title
2.
Links to the validator output files
3.
An animated gif link back to my home page, index.html