Recitation Project / Assignment #2

Expand Your Personal Web Site

Assignment 2 builds on Assignment 1 by imposing additional constraints on the look, feel and structures of your home page. It will also be necessary to have a 3 page rather than a 1 page site. How much you start over and how much you re-use depends on your own work style.

For this assignment, you will create two seperate versions of a website. Each version will contain a link to your assignment 1 homepage named "index.php" and two additioal pages named: "west.php" and "east.php". The three pages should have in common a header, a footer and a nav tag. For now, the code for the east and west components will simply be cut and pasted. (You will see down the road how PHP templates might make this easier.)

The two seperate versions will reside in their own sub-folders (you need not alter your main page, however you may choose to if you like one of these designs better). They will be described as the `east' and `west' versions. Please simply name the sub-folders `east' and `west'. The HTML should be exactly the same.

In the East version,

  • Content width is fixed (say 800 pixels)
  • Content becomes centered if page is wider than necessary
  • Navigation is across the top

In the West version,

  • Content fills 90% of the available width
  • Content has a min-width of 600 pixels
  • Navigation is along the left border

On both versions,

  • Header must be a single line of text
  • Have at least three Navigation links: home, east, and west. Links must not be underlined and must respond visually to `hover'.
  • You pick the title and contents of the pages - there should be at least two paragraphs of text on each page.

There is tag in HTML for quoted material (blockquote). If you do not feel like writing from scratch a lot of text, you may quote with attribution from Wikipedia where the license is ammenable or use Lorem Ipsum. By attribution, we mean both a link to the page of origin and also the governing license.

Please make use of these color palettes for East and West versions. You may simply add pure white and pure black to either palette and you may wish to do this in order to have text standout clearly:

East
  • #2703A6;
  • #200F8C;
  • #141259;
  • #F2B705;
  • #F29F05;
West
  • #06070E;
  • #29524A;
  • #94A187;
  • #F7F7F2;
  • #102542;

Huge Hint - you are actually only writing three pages of HTML. All styling is handled in the east versus west style sheets.

To structure this assignment, there must be two folders, one ‘east’ and one ‘west’ In each will reside west.php and east.php and style.css. In the root of the folder have your homepage as index.php. Note, you are being asked to use the .php suffix even though you need not use any PHP commands. Refer to the example below for more clarification on the file structure.

  • #inside local_html
  • index.php
  • index.css
  • ./east/east.php # should include east.css and link to ../index.php and ../west/west.php
  • ./east/east.css
  • ./west/west.php # should include west.css and link to ../index.php and ../east/east.php
  • ./west/west.css
  • # You can tar all these files with the following command while in local_html
  • tar -cvf [YOUR-EID-HERE].tar index.php east west

You will submit a single tar file "[eid].tar" (replaced with your eid, of course) with all the required files. Submission will be through Canvas.

To do this assignment, please use a text editor and type all the necessary tags by hands. Please do not use any web development application to create your home page. Your work will be tested with Chrome on department machines.

Addendum

None at this time

Grading Criteria:
  1. Page layout and constarints met as explained (40 points)
  2. Navigation between three web pages (30 points)
  3. Well balanced use of color pallettes (20 points).
  4. W3C validation (10 points).