Developing Systems FD1: Week 8

Classroom Exercises

Putting it all together and resources

Introduction
This classroom exercise provides guidance on completing the first assessment for
this module of creating a website for a company. The requirements are to develop a
mini website for a company based on the company’s background and requirements.
In this case the company is the ‘Fizzy Bubbles’ case study you are studying as part
of the assessment for another module. You are to create a minimum of a five to ten
page website where pages are based around the following:

• ‘Home’ webpage which is the first webpage a visitor of the website will see.
This will give an overview of the company.
• ‘About us’ webpage giving more background details on the company and
owners.
• ‘Our brands’ webpage giving an overview of the products the company sells
both current and future.
• ‘Corporate Social Responsibility’ webpage giving an overview of the
companies ethical and core values.
• ‘Contact us’ webpage giving an address, telephone and email address of who
to contact with regards to products (e.g. customer queries/complaints), sales
and website. These will fictitious where you are to use made up details. They
should be realistic in terms of what you would normally find on a company’s
‘Contact us’ webpage.
• ‘Accessibility’ webpage detailing what accessibility features the website has,
e.g. accesskeys for important navigation links and Javascript for changing font
size and colours.
• ‘Site map’ webpage containing links to all of the webpages on your website.

The content for each of these webpages in the form of text will either be obtained
from the case study text, derivable from the case study text or you will have to ask
the clients for more information. The clients in this case are the tutors.

Graphic images to use on the webpages as images or backgrounds will be of your

own creation. There is software on the PCs in the various computer labs at
Millennium Point such as Photoshop. Alternatively, you can use images from the
Internet that are free or you can purchase stock images from a number of websites,
details of which are given below. If you use images from such websites, then you
are to state which images and where you obtained them from where details on how
to reference materials other than you own are in the assignment brief.

In order to create the website, it is recommended you follow these steps:

1
 1. Find out about the company.

2. Compare with other websites.

3. Plan out the website in terms of the webpages and how they will be ‘linked’.

4. Plan the webpage design.

5. Create a template XHTML document based on the webpage design.

6. Create webpages based on website design using XHTML template.

7. Populate webpages with content.

1. Find out about the company

The details you require are in the ‘Fizzy Bubbles’ case study document or you are to
post a question on the ‘Assignment Forum’ on the Developing Systems UG1 moodle.

2. Compare with other websites

Look at corporate websites that do not necessarily sell products online but offer a
service. Look as competitor websites in order to gain an idea of the organisation and
content. You should include a reference to any websites that help in the design of
your website for the assignment.

3. Plan out the website

For any website being by making a list of the information that will go on the website
and organise this into webpages. Generally, each main item in the list will become a
webpage. For the assignment, the majority of the items are already defined,
however, you can elaborate where you may find that some more webpages are
required to complete or elaborate on topics.

Once you have a list of items think about how they will become webpages and how
they will link together. There must be a link to all of the webpages in order for a
browser to be able to access every webpage on the website. Without a link, the
webpage would be effectively inaccessible unless a browser knew the direct URL to
the webpage.

One way webpages are organised into websites is as a hierarchy of webpages

where there is a ‘root’ page from which a browser would select a webpage of a main
item. From the main item webpage, a browser can select further webpages that go
into more detail on that main item. The ‘root’ page in this case would be the ‘Home’
page that would contain links to the main items of the website organised as a
navigation bar. An example illustration of a website plan of a university website as a
hierarchy is shown below:

2
The lines represent the connection between webpages where the ‘Home’ page
would have links to the main items on the university webpage. On clicking on one of
those links, a browser would get the webpage on that main item with further links to
related topics. For example, the ‘Course’ webpage would have links to the main
types of course run by the university, undergraduate and post graduate courses.
Website diagrams like this can be created in most drawing packages where the
above diagram was created in Microsoft Visio. Alternatively, you may want to sketch
the website design using pen and paper. This is acceptable as long as the sketch is
legible where you are to include it in your final report.

You can link between webpages at the same level, e.g. there may be links from the
undergraduate and postgraduate webpages to the full-time and part-time study
pages but you do not have to display all of the links on all of the webpages on the
website design diagram. You do need to show that there is at least a link from one
webpage to another and that all webpages are reachable from the ‘Home’ webpage.

4. Plan the webpage design

Once you have created the website design, then the next stage is to plan out the
layout of the webpages on your website. For simplicity, it is often the case that the
layout of all of the webpages is the same based on a template defining where text is
located within the document. There are a variety of designs in use where most are
of the column based layout described in week 4’s sessions. It is up to you how many
columns you use on your webpages but at a minimum there should be a navigation
menu of links and a main content area for text. It is in this main content area that
you add the text for the item in the list of items you created in step 3.

You may sketch the webpage design with pen and paper showing the main divisions
of the webpage where an example is shown below. The level of detail you show in
the webpage design is up to you where at a minimum you should show where the
elements of the webpage are located, e.g. headers and/or footers in any, navigation
bar, etc.

With regards to the layout, it is up to you as to the sizes, positions, formatting, etc. of
the divisions. For example, you can have the navigation bar on the left of the
webpage which is common on the majority of websites. You may have the

3
navigation on the right of the webpage. You could have the navigation horizontally
just below the header. Below is an example sketch of a design using a website
design package called Denim (http://dub.washington.edu:2007/denim/).

Below are some useful links to websites that show, describe or for inspiration in your
own designs:

Webpage design layout tools

http://developer.yahoo.com/yui/grids/builder/ - Useful to creating a webpage design
using the mouse and analysing the source code.

4
Online image editors
These are image editors much like Adobe Photoshop although not as sophisticated
and are available through a web browser.
http://www.pixlr.com/app/
http://www.splashup.com/splashup/
http://aviary.com/tools/phoenix

Choosing a colour scheme

http://colorschemedesigner.com/ - This website allows you to define a colour scheme

for you website based on an overall colour. It can show you an example of what a
website would look like in that colour scheme.
http://www.colourlovers.com/ - Similar to the above website on colours.
http://webdevfoundations.net/color/index.htm - Website listing the web safe colours
for use on webpages. By safe, this means they will displayed consistently in
different web browsers.

Graphics
http://www.iconbuffet.com/freedelivery/packages - Free icons for websites. Website
also has a collection of icons for purchase.
http://www.buttongenerator.com/ - Creates images to use as buttons on webpages.
http://www.flickr.com - Free images.
http://www.freeimages.co.uk/ - Free images.
http://office.microsoft.com/en-gb/clipart/default.aspx - Free images
http://www.bgpatterns.com/ - Background patterns

Inspiration
http://logopond.com/ - Contains a variety of designs for ‘logos’ for websites.
http://csszengarden.com/ - Contains a variety of designs for webpages based on a
central theme. Useful website for finding out how to create certain effects in CSS.
http://thebestdesigns.com/

Further information on CSS and webpage layout

http://www.alistapart.com/topics/code/css/
http://www.cssbasics.com/
http://webdesignfromscratch.com/html-css/css.php
http://css-tricks.com/the-css-box-model/
http://woork.blogspot.com/2008/01/three-column-fixed-layout-structure.html
http://woork.blogspot.com/2007/10/design-page-layout-using-css.html
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
http://www.cssplay.co.uk/index

5
5. Create a template XHTML document based on the webpage design.
Once you have an overall layout for your webpages, create a templage
XHTML document with all of the XHTML tags required to start a webpage for
your website. At a minimum, use the XHTML template file that you have been
given as part of the classroom exercises, the xhtml-master-template.html file.
To this file, add the divisions you have identified in your design from the
previous step. For example, if you have designed your page to have a
header, navigation menu, main content area and footer, then you would add
the following between the <body> and </body> tags.

<body>
<div id=”header”>
<!-- Text to display at the top of the webpage goes here
-->
</div>
<div id=”nav_menu”>
<!-- List of links to main webpages on the website goes
here -->
</div>
<div id=”main_content”>
<!-- The text that describes the main item for this webpage
goes here -->
</div>
<div id=”footer”>
<!-- Text that is to appear at the bottom of the webpage
goes here, such as date of website and copyright message -->
</div>
</body>

The comments, the symbols <!-- and --> would be replaced with the text or images
or both that are specific to that webpage. For example, the ‘Home’ webpage would
have the text and/or images that is to be displayed on when the browser first
accesses the website.

If you are using the column based layout, then your divisions will be different where
see examples from the classroom exercises about using “wrapper” divisions to
markup a column based layout (week’s 4 and 5).

Once you have marked up the template XHTML document, then save it with a
meaningful name, e.g. webpage-master-template.html. Whenever you want to
create a webpage for your website, then you would load this file and save it with the
name of the webpage, e.g. the ‘Home’ webpage would be named index.html or
home.html.

6. Create webpages based on website design using XHTML template.

Using the template file created for the previous step, create the XHTML
webpage files for the webpages on your website based on the plan for step 3.
For the example design on page 3 we would create the files:

6
 • index.html
• courses.html
• undergraduate.html
• postgraduate.html
• students.html
• fulltime.html
• parttime.html
• finance.html
• fees.html
• bursaries.html
• news.html
• research.html
• about.html

using the template file created in step 5.

7. Populate webpages with content.

To complete the website, add the content for each webpage file create in the
previous step. The content will be the text and images that are relevant to the main
item or topic that is to be displayed by that webpage when the browser views it in
their web browser. The content will be of your own design where you are to make
sure that any text has been checked for spelling and grammar.