Lab 2: Designing a Website

1.     Introduction

This is a two-stage project, the first being collecting all the information of “what a web-site would include”. The second stage would be learning a tool that could speed up the process of developing the web-pages instead of typing the often tedious HTML program, even more the comprehensive web-site management. It is assumed that at begin of stage-two the student understands the components of the Website from the Requirement Document that was written.

Also note that the steps stated here are not detailed. Not attending the labs shall not compensate for the same. You can, however, ask questions in class (not after the class), or in the lab. Moreover, there is NO example on the Class Webpage for stage-two of the project. Sections 2 through 4 are obsolete for the second-stage of the project. Section 5 points to features of the Microsoft FrontPage that might be useful for the website management or design. Section 6 is the Submission policy for stage-two.

2.     Design Process

The information will be posted on your home-page replacing the Lab1 homepage we created. You may want to refer to the text-book for theory on types of web-sites, examples listed there, and some of your favourites too. Gather all the information (for your website), and organize it as shown in the example document. Note that this example is just a reference, and by no means is a “complete” document. It indicates the structure of information in the target document. The final webpage should look like this.

Again, this information need not be related to you, your hobby, etc. But it should not contain any illegal or plagiarised information.

3.     Requirement Document

This document shall contain “styles and formatting” from the Format menu of the Microsoft Word menu-bar. This is NOT optional and shall not be accepted without “styles”. (This feature is not present on Microsoft Works or similar software).

The default styles that may be used are “Heading 1”, “Heading 2”, “Heading 3”, “Normal”, etc.

Headings MUST be auto-numbered (precisely, outline numbered).

Any non-heading text should be formatted justified (this could be selected from the toolbar, or could be modified in paragraph section of styles). A Time New Roman with 12 size fonts MUST be used for this texture.

You may define decent paragraph spacing, if at all.

Other important aspect of the document shall be the “link diagram” – as shown in the example. For the link diagram showing your overall website design, you may need to use the Drawing toolbar, which usually appears at the bottom of the Microsoft Words window. If this is absent, you can activate by selecting it from the “Insert menu => Toolbars options => Drawing”. You can select draw many shapes from there using ovals, rectangles, text-boxes, lines, arrows, organization charts. Please note, if you are using this for the first time, it might take a lot of time to embed the diagram in the document. Please start working as soon as possible. This feature may not be supported by similar software. You MUST use Microsoft Word, if that is a case.

4.     Submission Policy, Stage - 1

A soft-copy of requirement document is necessary – by email – is due 2/18/07.

There is 10% penalty for late submissions.

Also, read the "Cooperation on Homework Assignments" of the syllabus.

Contact me if you have any questions during my office hours or by email appointment.

5.     Important Features to Explore

Following is the list of features that might be frequently used to manage and/or design the website. These are NOT necessarily the most important by any means and only the suggestion. Please explore these and any other features you could to understand the capabilities of the tool. For the matter of this assignment we shall discuss Microsoft FrontPage but you CAN submit website using Netscape, Macromedia, or any other software.

ü      Click on the “New” icon from the toolbar and select “Web” = => Select “Empty Web”

ü      Click on the “New” icon from the toolbar and select “Page” = => Select “Normal Page”

ü      View Menu = => View Bar option (this appears on the left-hand side of the window).

ü      Explore the icons on the View Bar – Folder, Reports, and Hyperlinks. Alternatively, these can be viewed from the View Menu (and Report submenu).

ü      Click on the “Table” toolbar and select a size of table you would want.

ü      Right click on the page in the Table and select “Table Properties”. Explore the options in applet.

ü      Right click on the page in the Table and select “Cell Properties”. Explore the options in applet.

ü      Right click on the page (not necessarily within the Table) and select “Page Properties”. Explore the options in applet.

ü      The Hyperlinks can be inserted by selecting the text, using the toolbar (or right click and select hyperlink).

ü      The picture can be inserted using the Insert menu (or the picture toolbar). Please follow the next three points.

ü      Extra care MUST be taken for “Clip Arts”.  Instead of selecting the image from “Clip Art” gallery, right click and select “Copy”.

ü      Select the “Folder” from the View Bar (if it is not already selected) to view the folder bar alongside your webpage window.

ü      Whether a downloaded picture or copied “Clip Art”, an image MUST be “pasted” (or downloaded) in the images folder. Finally, to insert the image at a certain location select the image from the folder bar.

ü      One can edit the picture, after selecting the picture, using “picture toolbar” (View = => Toolbars = => Pictures).

ü      Remember to save your “Web” frequently, and remember the location where you are saving your web. For instance, if it is “C:\Temp\”.

6.     Submission, Stage – 2

The “rough web site” should be submitted by email on or before Mon, 02/18, 2007.

The “web” MUST be uploaded to your FTP directory in public_html. All the files from C:\temp\ (for instance) should be copied to FTP public_html.

The final website is due Mar. 5th 2007. The final submission requires a formatted lab-report with headings, sub-headings.

The Lab-Report shall explain the finer design details of each web-page, and any design decisions you had changed from “Requirement Document”. You MUST include as section of References citing specific references. One could be your own Requirement Document for instance.

Also, read the "Cooperation on Homework Assignments" of the syllabus.

Contact me if you have any questions during my office hours or by email appointment.

If you have any questions with regards to FrontPage or SFTP please ask in the class so as to share your questions with other class-mates.