Introduction The effect of technology on our day to day life has considerably transformed how people live, work,

k, and do business. Practically all businesses, companies, and society today use the internet and websites as means to communicate, and interact with one another. As computer and internet usage grows larger and larger, the chances a website brings can show that it is priceless. Benefits of this project Regardless of the challenges and purposes of this assignment (building such a website), the benefits has exceeded the effort put to create this web project. This web design assignment has open up a new and unique line of communication.

Designing and planning Website pages The first stage of this assignment is the planning aspect needed for creating a quality website. I visited three (3) websites as listed below, studied the basics of the site structures, colour schemes, understand web standard and the need to ensure that the web site is accessible to all users. a. University of Greenwich b. University of Kent c. University reading

Web standards Web standards are formal, nonproprietary standards that define aspect of the World Wide Web. Before, people connect to the web using mouse, keyboard, and monitor, though this is still in practice, but with ever-increasing technologies that are web enabled. People can now access the internet using handheld devices such as PDA, pocket pc and cell phone. Web standard is a core rules which ensure that websites work on all devices in harmony with web standards. The body responsible with creating and maintaining the web standard is World Wide Web Consortium (W3C). Some of the web standards are HTML, CSS, XML, XHTML etc.

University of Greenwich, Is simple and fast, though the flash embedded in the FrontPage take some time to load, all information can be accessed via the links in the home page. This website give a quick link to some important links that will interest a visitors especially those who are looking for admission through the program finder, and a quick link to some services offered by the university and how to get around. Also a quick link to my Greenwich, this is very important especially to new student who are yet to familiarize themselves with some functionality the site provide. What I like about this site is its simplicity that is the structure which is based on a 3 column page, the program finder and especially my Greenwich which give quick access to both student and staff to portal respectively.

University of Kent: The website is user friendly, fast and almost all the information is accessible from the home page as the main menu contains virtually most of the links to the entire site. The page that I like most I this website is the international student page where you can see different country flags to show that each citizen of the world is welcomed to the university.

University of reading: This website is very simple, with good colour scheme.

The World Wide Web is an international platform, a model for the dissemination of information and knowledge produced by corporate body, organization, and individuals alike. Web site increasingly finds reason for existence as they provide the means for better communication between consortium members, make information easily accessible and they provide a point of reference fr promoting the work undertaken. In a similar manner, this web design assignment provides the means for the promotion of the work undertaken on key performance indicator and intelligent transport systems to the international and transport community. This report is divided into three parts dealing with the aim, structure and the usage of the web design assignment. The purpose of the web site is to serve as the dissemination and working tool. The design of the website was expected to provide a user friendly environment for both external visitors and members of the class looking to retrieve information on the site. The web site include information such as about me, professional, and news.
2

Problem analysis
To build a user friendly website, the first thing was the analysis stage to determine what, how, who. The web design model is based on identified needs of users and established requirements of the system. To determine the best way to organize the web content, this was to examine the project objectives. The main objective of the project was to design a website that centered to be about me. Thus the need for hierarchical structure for the layout of the web, and content, the site will be built on principles of a well-structured, efficient and virtually engaging website as follows: a. b. c. d. e. Structure, Functionality Content Consistency Aesthetics

Problem solution
The solutions identified are: a. Design the skeletal structure of the web b. Hierarchy of the website c. Using HTML and CSS among others Page structure (layout) is one of the most top priorities in expressions of creating a user friendly website design. This is to give the users a feel of how the content of the pages are structured for them to use it efficiently.

Header Main Menu Bar

Second Menu Bar

Column 2

Content Page

Column 3

Footer

Figure 1: Skeletal structure of the website

4

Index Page

Home

Projects

Professional

About me

Gallery

Cool Links

Contact Me

Past

Current

Education

Professional Interest

A bit about me

Hobbies

Country

General Pictures

Family & Friends

Trip to Singapore

Trip to Rotterdam

Christain Sites

Figure 2: Website Hierarchy

Problem Implementation
Description and structure The most visible page of the website is the home page as seen in figure 3; this welcomes all visitors before they are navigated to more specific subpages of the website. As users look to access different information, the main function of the home page is to provide the essential link to the various pages and to let site visitors easily navigate each page as efficiently and as accurately as possible to their pages of interest. Therefore, the home page should be user friendly, easily comprehendible, containing intriguing information on the project and providing all the necessary navigation tools for users.

Creating Webpages with html The first stage was to design the master template using Hypertext Markup Language (HTML). Here emphasis is place on the web content and the site structure as seen in the earlier design. This was done entirely with a web browser and text editor such as Notepad ++ or simple Notepad. A simple basic HTML skeleton page contain these important code/elements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">

<html> <head> <title>Internet Electronics Assignment by am763: Home</title> <link rel="stylesheet" type="text/css" href="mystyle.css" media="screen" /> </head> <body> <div id="body"> <div id="header"> This the Content Area </body> <div id="footer"> </html> The first line of code declares the document to be XHTML 1.0 strict. XHTML 1.0 strict is an XML version of HTML 4 strict. <div id="body"> - this code is the part that controls the body of a page.
6

<div id="header"> - this code is the part that controls the header of a page. <div id="footer"> - this code is the part that controls the footer of the page. <div id="menu"> - this the navigation goes or the main menu, in this case the content of the page load first before the menu loads. <ul class="menu"> - this is what is used to generate the menu. The code in blue <html> detects the language used (file type) for the web browser <html> This closes the html element also end the page. <head> this is where title page is placed</head> this closes the head section. <title>is the name displayed in the title bar of the page as demonstrated in the site. </title>this closes the title. <body> </body> the content of the page is placed between this tags. Html code for the three (3) column structure is attached in appendix A, followed by CSS code in appendix B, as it can be seen it is self-explanatory because there is comment on almost all the codes. Almost all of the codes described above are referenced to the style sheet since html code have a global link to the css style sheet. Formatting website with Style Sheets In this assignment an external style sheet was used since the website contain many pages. With an external style sheet, the way the entire website looks can be changed from one single style sheet file. Each page must link to the external style sheet using a <link> tag. This link tag goes into the head as seen in the above html code, or as seen below:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" media="screen" /> </head>

The css code below define the body properties of the body tage in html code: this defines the body magin to 0, body { margin:0; padding:0; border:0; /* This sets the borders to 0*/ width:100%; background:#fff; min-width:600px; /* Minimum width of layout */ font-size:100%; } Graphics Website design:
7

Discussion of Result
Navigation often users find it difficult to locate the information they require on a given site. This can usually be attributed to lack of effective navigation within a site. This is especially apparent in pages that contain a very large amount of information as, without effective navigation aids; a user can quickly become lost or frustrated. Inclusion of effective navigational elements will increase the ease with which a visitor can find what they came to the website for. Such elements include now common place design piece like a navigation bar directly across the top of the page underneath the banner, with additional links within a left column. An example can be seen in figure 2. One example of such element is a drop down or side out menu, in which hovering over a single link displays a list of sub links.

Aesthetics: The aesthetic of a site is one of the first things a user consciously come to notice, and as such, it can prove n opportunity to make a good first impression on visitors to the page. I fact, this aspect of a website can cause a user to leave a site before exploring. The basis of an aesthetically pleasing website is a good layout, but there are other factors such as the colours used throughout and their combinations. Another aesthetic choice that is important to the user is font style and size used in links and text. If a font is too small or stylized, it will decrease not only the readability, but also possibly the perception of professionalism inherent to the website.

Creating links: Links to the pages refers to the address or the Uniform Resources Locator (URL), of the webpages. This consist of various parts for example a link to the home page as seen below: <li><a href="index.html">Home</a>

Graphics: Graphics enhance the page aesthetics of page. Here is an example of how to link an image <img src="images/falanivillage.gif" alt="" />

Heading:
8

The webpages includes some heading, as well as subheadings. <h1></h1> is used to identify heading as level 1 while <h2> </h2> is use to identify heading as level so and son on. I was able to create a basic html form as can it can be seen in the code below: <form action="mailto: am763@gre.ac.uk" method="POST"> <input type="text" name="user" value="" /> <label for="user">Name</label><br /> <input type="text" name="emailaddress" value="" /> <label for="emailaddress">Email Address:</label><br /> <textarea name="comments"></textarea> <label for="comments">Comments:</label><br /> <input type="submit" name="submitbutton" id="submitbutton" value="Submit" /> <input type="Reset" name="resetbutton" id="resetbutton" value="Reset" /> </form> The form is declared using the form tags <form></form>. The first line tells the form to post the message to the email am763gre.ac.uk, while the other line as indicated are labeled, and all the necessary input and text areas.

Problems encountered: In the course of the work I have encountered several problems especially the css code such as displaying the menu properly. Initially the drop down menu was hidden and I was able to get help from the tutor in the person of Dr. Melis Wim many thanks. Also I had problems with the images; they were not displaying on the pages as should be. So I had to change the sizes and then convert them to gif format.

Conclusion
The original objective of this project was to design a website for assignment that not only reflected todays effective web design techniques, but also communicate successfully with its diverse
audience.

10

Appendix A
<div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1"> </div> <div class="col2"> <!-- Column 2 start --> <h1>Worksheet 7</h1>

<!-- Column 2 end --> </div> <div class="col3"> <!-- Column 3 start --> <h1>Tutorial 7</h1> <!-- Column 3 end --> </div> </div> </div> </div>

Appendix B
/* column container */ .colmask { position:relative; clear:both; float:left; width:100%; overflow:hidden; } /* common column settings */ .colright, .colmid, .colleft { float:left; width:100%; position:relative; } .col1 h2{ color: #000000;

/* width of whole page */ /* This removes any overhanging divs */

/* width of page */

11

} .col1 a { color:#00008B; text-decoration: none; } .col2 a { color:#00008B; text-decoration: none; } .col3 a { color:#00008B; text-decoration: none; } img { float:none; } .col2 h1{ color: #A52A2A; } .col3 h1 { color: #008000; } .col1, .col2, .col3 { float:left; position:relative; padding:0 0 1em 0; /* no left and right padding on columns, only top and bottom padding */ overflow:hidden; } /* 3 Column settings */ .threecol { background:#FFA500; } .threecol .colmid { right:25%; background:#fff; } .threecol .colleft { right:50%; background:#87CEEB; } .threecol .col1 {

/* right column background colour */

/* width of the right column */ /* center column background colour */

/* width of the middle column */ /* left column background colour */

12

width:46%; left:102%; } .threecol .col2 { width:21%; left:31%; } .threecol .col3 { width:21%; left:85%; }

/* width of center column content */

/* Width of left column content */

/* Width of right column content */

Appendix C
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"> <head> <title>Internet Electronics Assignment by am763: Home</title> <link rel="stylesheet" type="text/css" href="mystyle.css" media="screen" /> </head> <body> <div id="body"> <div id="header"> <p><img src="images/logo-greenwich.gif"</p> </div> <div id="menu"> <ul class="menu"> <li><a href="index.html">Home</a> <li><a href="project.html">Projects</a> <ul> <li><a href="past.html">Past</a></li> <li><a href="current.html">Current</a></li> </ul> <li><a href="professional.html">Professional</a> <ul> <li><a href="education.html">Education</a></li> <li><a href="professionalinterest.html">Professional Interest</a></li> </ul> <li><a href="abitaboutme.html">About Me</a> <ul> <li><a href="abitaboutme.html">A bit about me</a></li> <li><a href="hobbies.html">Hobbies</a></li>
13

<li><a href="country.html">Country</a></li> </ul> <li><a href="gallery.html">Gallery</a> <ul> <li><a href="generalpicture.html">General Pictures</a></li> <li><a href="familyfriends.html">Family and Friends</a></li> <li><a href="singapore.html">Trips to Singapore</a></li> <li><a href="rotterdam.html">Trips to Rotterdam</a></li> </ul> </li> <li><a href="coollink.html">Cool Links</a> <ul> <li><a href="coollink.html">Christain Sites</a></li> </ul> </li> <li><a href="contactme.html">Contact Me</a> </li> </ul> <p id="secmenubar"><a href="universities.html">Universities</a> | <a href="computing.html">Computing</a> | <a href="#blog.html">My Blog</a> |<a href="sitemap.html"> Sitemap</a> | </p> </div> <div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1"> <!-- Column 1 start --> <h2>Home:</h2> <p>Hello, my friend Welcome to my website feel free and enjoy.</p> <img src="images/matthias.1.jpg" alt="Matthias" /> <!-- Column 1 end --> </div> <div class="col2"> <!-- Column 2 start --> <h1>Internet Electronics</h1> <p><a href="#assignment.html">Assignment</a></p> <p><a href="#worksheet.tutorials.html">Worksheets/Tutorials</a></p> <p> <a href="#labs">Labs</a> </p> <p><a href="#presentation.html">Presentation</a></p> <!-- Column 2 end -->
14

</div> <div class="col3"> <!-- Column 3 start --> <img src="images/falanivillage.gif" alt="" /> </div>

</ul> <!-- Column 3 end --> </div> </div> </div> </div> <div id="footer">Copyright 2012 Mattias Amuda, am763 <a href="#"></a> </div> </body> </html>

Appendix D
A complete CSS code: body { margin:0; padding:0; border:0; width:100%; background:#fff; min-width:600px; font-size:100%; } a{ color:#FFA500; /* colour of the hover link */ text-decoration: none; /* to remove the underline under the link*/ } a:hover { color:#fff; text-decoration:none; /* to remove the underline under the link*/ } h1, h2, h3 { margin:.8em 0 .2em 0; padding:0;
15

/* This sets the borders to 0*/

/* Minimum width of layout */

} p{ margin:.4em 0 .8em 0; padding:0; } img { margin:10px 0 5px; } /* Header styles */ #header { clear:both; float:left; width:100%; } #header { border-bottom:1px solid orange; } #header p, #header h1, #header h2 { padding:.4em 15px 0 15px; margin:0; } .menu {background:white; padding:0px; margin:0; list-style-type:none; height:30px;} .menu li {float:left; height:30px; border-right: solid 1px white;} .menu li a {padding:9px 20px; display:block; color:#6b6c5a; text-decoration:none; font:12px arial, verdana, sans-serif; font-weight: bold;} .menu li:hover a {text-decoration:none; z-index:1}

16

.menu ul {position:absolute; left:-9999px; top:-9999px; list-style-type:none;} .menu li:hover {position:relative; background:orange; z-index:1} .menu li:hover ul {left:0px; top:30px; background:none; padding:3px; border:1px solid #FFA500; width:160px;} .menu li:hover ul li {height:18px; border:none; position:relative;} .menu li:hover ul li a {height:18px; padding:0px; display:block; font-size:11px; width:158px; line-height:18px; text-indent:5px; color:#444; background-color:#FFFFFF; text-decoration:none; border:1px solid transparent;} .menu li:hover ul li a:hover {height:18px; background:#FFA500; color:#000000; } /* 'widths' sub menu */ #secmenubar { clear:both; background:#6b6c5a; border-top:4px solid #FFA500;
17

margin:0; padding:6px 15px !important; text-align:right; text-decoration: none; } /* column container */ .colmask { position:relative; clear:both; float:left; width:100%; overflow:hidden; } /* common column settings */ .colright, .colmid, .colleft { float:left; width:100%; position:relative; } .col1 h2{ color: #000000; } .col1 a { color:#00008B; text-decoration: none; } .col2 a { color:#00008B; text-decoration: none; } .col3 a { color:#00008B; text-decoration: none; } img { float:none; } .col1 h3{ } .col2 h1{ color: #A52A2A; }
18

/* width of whole page */ /* This removes any overhanging divs */

/* width of page */

.col3 h1 { color: #008000; } .col1, .col2, .col3 { float:left; position:relative; padding:0 0 1em 0; overflow:hidden; }

/* no left and right padding on columns, only top and bottom padding */

/* 3 Column settings */ .threecol { background:#FFFAFA; } .threecol .colmid { right:25%; background:#fff; } .threecol .colleft { right:50%; background:#FFFAFA; } .threecol .col1 { width:46%; left:102%; } .threecol .col2 { width:21%; left:31%; } .threecol .col3 { width:21%; left:85%; } /* Footer styles */ #footer { clear:both; float:left; width:100%; border-top:1px solid #000; text-align: center; color: white; line-height: 24px;

/* right column background colour */

/* width of the right column */ /* center column background colour */

/* width of the middle column */ /* left column background colour */

/* width of center column content */

/* Width of left column content */

/* Width of right column content */

19

background-color: #6b6c5a; } ul#sitemap { margin: 0; padding: none; list-style: none; }` ul#sitemap ul { padding-left: 5em; list-style: circle; } ul#sitemap li { border-bottom: 2px solid #FFFFFF; } ul#sitemap li a:link, ul#sitemap li a:visited{ display: block; padding: 0.4em; text-decoration: none; color: #057FAC; } ul#sitemap li a:hover { background-color: #999999; color: #FFFFFF; } ul#sitemap li li a:link, ul#sitemap li li a:visited{ background-color: #FFFFFF; display: block; padding: 0.4em; } ul#sitemap li li a:hover { background-color: #FFFFFF; color: #057FAC; } label{ float: left; width: 120px; font-weight: bold; }
20

input, textarea{ width: 180px; margin-bottom: 5px; } textarea{ width: 250px; height: 150px; } .boxes{ width: 1em; } #submitbutton{ margin-left: 120px; margin-top: 5px; width: 90px; } br{ clear: left; }

21