Web Programming Assignment

In this assignment, you will design and write a small website, with a topic of your own choice, consisting of webpages using HTML code and Cascaded Style Sheets. You are to develop a basic website, which provides information in clear way and links to other pages and websites (Part A). Students are to include appropriate images, lists and tables on their pages (Part B) and to CSS functionality (Part C).

Part A

You are to develop a basic website in the code and design view of Adobe Dreamweaver that enables a user to view certain website content on the webpages of this website. The user should be able to quickly understand the topic of this website. You are to show your understanding of good web design principles, such as clear hierarchy, easy navigation, clear presentation of information.

The following screenshot gives an example of a website that fulfils the criteria (for all parts actually, not just Part A).

Example of a well designed website - Code available on Moodle site

You are to demonstrate your understanding of the correct use of HTML tags. Use both the code and design view, if you are using Adobe Dreamweaver. It will be quite obvious to your tutor if you only used the design view, as it shows up in the code structure. Automatically generated code looks different from manually created HTML code. We will look for evidence that you either manually coded the webpages or that you manually corrected the code generated by Adobe Dreamweaver or a similar tool.

In Part A, you are to create a main page (named index.html) and a minimum of four different subpages. These can be on the same hierarchy level or on different levels. Remember that one of the points you will be marked on is good web design and a clear hierarchy! Each page needs to have a minimum of 150 words on them.

Make sure that the user can get to all of your pages via hyperlinks as well as return to previous pages via hyperlinks (rather than having to use the back button of the web browser). Also include at least one link to an external website, e.g. http://www.canberra.edu.au.

What the tutors will be looking for The tutor's instructions include

• Structure of the website: Is it clear? How many hierarchy levels are there? Have they described their choice of hierarchy in a Word document?

• Navigation: Is it easy to get from one page to another? Are all links (both to other pages on your site as well as external links) working?

• Layout: Is the information on the pages easy to find? Does the layout support the viewing of the pages? Does the student use a suitable colour scheme to produce a highly readable site?

• Has the student created the minimum number of webpages (five)?

• Has the student added a sufficient amount of original content (minimum 150 topic-related words) on each page?

• Is the code clearly structured (head, body)? Did the student use empty lines to separate blocks of code? Did the student use different levels of indentation in the code? Did the student use comments in the code? Are different tag pairs on different lines in the code?

Step by Step Guide for Part A

1. Start Adobe Dreamweaver. Do not click on "Create new HTML" or any other icon at this point.

Note: Screenshots were made using Adobe Dreamweaver

2. CSS3 They might look slightly different in CS5, which is the newer version installed in the UC computer labs, but overall the steps remain the same.

3. In the Preferences window, select "New Document" on the left, then set "Default Document Type (DTD)" to "HTML 4.01 Strict" or "HTML 5". Click on OK.

This will ensure that the HTML version used is strictly 4.01 (equivalent for HTML 5).

4. Now, click on "Create new HTML".

A new HTML file will be opened, which already has the basic HTML structure of head, body, and so on. Click on File ? Save, then type in index.html as file name for this main page file in the File Save dialog. Save this in a new directory / folder, e.g. IIT_Web_Assignment.

5. Create another four HTML pages (or more, if you feel like it) that will become the subpages. (Note: You might have to go via File ? New... ? Basic HTML ? HTML to get such a HTML skeleton). Make sure you save them! You can choose your own file names for these files, but make sure they end .html.

6. Think about the hierarchy of your website. Do you have one main page and then a second level in the hierarchy where all your pages live? Or do you have more levels of hierarchy, that is subpages of subpages? Whatever you decide, describe the hierarchy briefly in a Word document that you will submit as well, so that your tutor understands your reasoning. Why did you choose this hierarchy? What makes it suitable for your topic? Include a hierarchy tree / site map, for example:

Conference home page

|---------- Call for Papers

|---------- Important Dates

|---------- Information for Authors

|---------- Information for Students

7. Add content to the pages. The topic is your choice. Maybe a hobby, maybe a sports club, maybe a fashion line, maybe an event, etc. Note, the choice of topic or content will not be marked, but it's more fun if you choose an interesting topic.

8. Link your pages in a suitable way. Decide whether you will only provide links from the main page to all subpages and from each subpage back to the main page, or whether subpages will also link to each other.

9. Zip the entire project folder, including all files and the Word file describing the hierarchy, and submit via Moodle. Please note that you must first upload your ZIP file and then click on the Submit button. You are no longer required to submit a separate cover sheet. This is now part of the electronic submission via Moodle. The maximum ZIP file size allowed on Moodle is 10MB. If you find yours is larger than 10MB, check the file size of your image files and other files. If you follow the requirements listed here, 10MB is plenty and you should not need any more than that.

Part B

Here, you are to add some images / graphics, lists and tables.

Add a different image / graphics file to each of two of your pages (main page or subpages). What size is your image displayed at? What dimensions, DPI and file size does your image have? Is that suitable for web presentations? Remember, the smaller the file size, the faster the page loads!

Add an unordered list of four or more items to at least one of your pages.

Add an ordered list of four or more items to at least one other page.

Add a table with a minimum of three rows and columns. Choose a suitable table layout. Does your table have borders?

What the tutors will be looking for

• Same as for Part A, plus

• Minimum of two images / graphics files on separate pages (total, not per page).

o What size is the image displayed at?

o What file size does the actual image file have?

o Does the actual image size lend itself to be put on a webpage?

o Make sure the image is in the same folder or a subfolder.

• Minimum of one unordered list with at least four items.

• Minimum of one ordered list with at least four items.

• Minimum of one table with at least three rows and columns. Did the student choose a suitable table layout?

Part C

In this part, you are to use Cascaded Style Sheets (CSS) for the layout of your website. Create a menu for your pages to improve ease of navigation and clarity of your site (see the example website Interspeech 2008) and compare how it was done there. Your menu does not have to be on the lefthand site, it can be at the top, bottom or right-hand side. Define your own styles for menu entries, headings, background and font colours. Consider highlighting the current menu item in a suitable way (e.g. different font and/or background colour).

You are also to add metadata in accordance with the Dublin Core (http://dublincore.org/documents/dces/). As a minimum, include metadata for:

• Creator

• Title

• Subject (Keywords)

• Descriptions

• Type

What the tutors will be looking for

• Same as for Part A, plus

• Correct use of CSS

o Has the student defined their own styles and used these on the webpages?

o Have they defined a menu somewhere to ease navigation?

• Inclusion of metadata

o Has the student added metadata to each page? o Have they followed the Dublin Core recommendations?

In all parts, ensure that you ZIP the entire assignment folder including all files and submit it via the unit's Moodle site. Make sure that any additional files, e.g. image files, are part of your submitted ZIP file! The maximum file size is 10MB in total. If you find your ZIP file to be larger than 10MB, check your image files. Follow the steps to reduce the DPI and the resolution to right display resolution and you should have no problems to be within 10MB overall.