Internet Electronics - Assignment - Design a Website

Table of Contents Internet Electronics - Assignment - Design a Website (ELEE 1046)

1

BEng Hons Electrical and Electronic Engineering Technology

Purpose of the task Learning objective: How will we do it ?

Dr. Wim JC Melis

University of Greenwich
Academic year 2012-2013

Practical requirements Topic The Web-site The Report

c Dr. Wim JC Melis

University of Greenwich

Year 2012-2013, Slide 2 / 13

Internet Electronics - Assignment - Design a Website

Purpose of the task

Internet Electronics - Assignment - Design a Website

Purpose of the task

Table of Contents
1

Learning objective:

Purpose of the task Learning objective: How will we do it ? Practical requirements

This task should enable you to experience the following: Go and search for reliable information in relation to the designing of web-pages. Determine the style and structure for a web-page. Create a static web-site making use of the most recent HTML and CSS standards. Report on the work being done.

c Dr. Wim JC Melis

University of Greenwich

Year 2012-2013, Slide 3 / 13

c Dr. Wim JC Melis

University of Greenwich

Year 2012-2013, Slide 4 / 13

Internet Electronics - Assignment - Design a Website

Purpose of the task

Internet Electronics - Assignment - Design a Website

Practical requirements

How will we do it ?

Table of Contents
1

Purpose of the task Practical requirements Topic The Web-site The Report

To achieve these learning objectives, you will be required to: Decide on what you want to put on your web-page. Find three web-sites similar to the one you need to make and indicate which parts of these example sites you like. Explain what specically you like about them. You will then start designing the structure of your website as well as how it should look like. Once you dened how it will look like, you can start creating it.

c Dr. Wim JC Melis

University of Greenwich

Year 2012-2013, Slide 5 / 13

c Dr. Wim JC Melis

University of Greenwich

Year 2012-2013, Slide 6 / 13

Internet Electronics - Assignment - Design a Website

Practical requirements

Internet Electronics - Assignment - Design a Website

Practical requirements

Topic
You will create a website that describes yourself. A few examples on what can go on it: Personal information:

Topic (2)

Where you are born Family composition Hobbies, Interest(s) Album, photos, ... Do be careful with contact details !

The above is only an example, you can freely choose on structure and content, but it has to be a page about yourself !

Professional:
Education Professional interests

News Links: Some of your favourite websites (and why ?)

c Dr. Wim JC Melis University of Greenwich Year 2012-2013, Slide 7 / 13 c Dr. Wim JC Melis University of Greenwich Year 2012-2013, Slide 8 / 13

Internet Electronics - Assignment - Design a Website

Practical requirements

Internet Electronics - Assignment - Design a Website

Practical requirements

The Web-site
The web-site needs to full the following requirements: Structure/Content:
There should be a start-page and then a number of pages that can be

The Web-site (2)

All the code for the pages should be hand-written, you are not allowed

accessed from this start-page as sub-topics. It is up to you to determine the structure, how many dierent levels you use and how they can be accessed. There should be a contact page where a visitor can contact you, by using a web-form that generates an email, an email-link, ... There should be at least some pictures, and links on other pages.

to use any graphical design environment that generates the code for you ! Your page should be static. However, you can make use of anything that runs within the browser (on the client side), like: javascript, ash etc.. However, you should be able to explain the code that you use (javascript, ash, ...) and not make a page completely based on Flash !

Your website should work in Internet Explorer (IE) and Firefox. Do not use copyrighted material, anything on the page should be your own creation. Since the web-site is static you can do most of the testing on the machine you work on, but there will be a web-server provided later on during this term. Exact details of how to access it and use it will follow in due time. The website should be uploaded to the server by WEEK 13 : Monday 10/12/2012, 08:00 AM.
c Dr. Wim JC Melis University of Greenwich Year 2012-2013, Slide 10 / 13

Coding:
The web-site should make full use of CSS, so you can quickly change

any style-related item on a single location. No local style settings within the HTML pages !

c Dr. Wim JC Melis

University of Greenwich

Year 2012-2013, Slide 9 / 13

Internet Electronics - Assignment - Design a Website

Practical requirements

Internet Electronics - Assignment - Design a Website

Practical requirements

The Report
The report should at least contain: The web-sites you decided to take as example, what you liked about them and why. You need to describe the draft of your web-page, which includes:
The draft design of how you want your web-site to look like on the

The Report (2)

Please bare in mind that describing your design is not a picture book exercise, but it is all about the code you created, so describe/explain the code. Please also answer the question: Do you consider putting this website onto the internet itself ? If (not) so, why ? Your report should have the following (standard) structure: Introduction: situate the problem set within this project. Situate the problem, and mention the possible solutions to it. Mention your preferred example pages, what you liked about them as well as the initial stages of your design. Discuss the web-site you developed. Explain the problems you encountered, and explain the key sections of the code that you consider important, and how they work. Is there any code you had to adapt for the site to work in IE and/or Firefox ?
c Dr. Wim JC Melis University of Greenwich Year 2012-2013, Slide 12 / 13

screen: i.e. location of menu bar, use of columns, centred or not, etc. (this can be a sketch on paper which is scanned and put into your report) The structure that you want to use on your web-site. Starting with the start page and then all other related pages shown in a structured manner.

Describe the problems you encountered and how you overcame them. Ensure that you also discuss the nal result, as well as where you see possibility for future improvements.
c Dr. Wim JC Melis University of Greenwich Year 2012-2013, Slide 11 / 13

Internet Electronics - Assignment - Design a Website

Practical requirements

The Report (3)

Conclusion: What were the lessons learned, what do you want the reader to remember about this project report. Is there any future work, if so what is it ? Depending on the length of your code and the importance you give to it, you can put some of your code in an appendix. The report should be submitted electronically by WEEK 13 : Monday 10/12/2012, 08:00 AM.

c Dr. Wim JC Melis

University of Greenwich

Year 2012-2013, Slide 13 / 13