INFO10034:  Web Page Design, Level 3 
Assignment 2 — 30 marks


Continuing your work from assignment 1, you will now add more web pages to make a fully-functional web site for the "recipe" company "Devil's Food". When you have completed this assignment, your web site should be working completely.

Create 3 files named index.html, welcome.html (from welcome.txt) and contact.html (from contact.txt). You will also edit sitemenu.html to incorporate changes that are necessary to work in a "frames" setting. You will also make additions to the CSS file devil.css. Save these files on disk and follow the instructions at the bottom of this page to upload these files to your web account (to join with the files created in your first assignment) for grading.

  1. General instructions for all files:      [3 marks 1 mark per file]

    • Use indented HTML coding with standard HTML, HEAD and BODY sections for each HTML file. Click here for a sample of "nested" HTML code.
    • (hint: you don't use a BODY tag in a frameset file)
    • Include an HTML comment tag near the top of each HTML file with your name and student number in the comment
    • Include a TITLE definition with your name and the file name in each HTML file
    • use indented-style coding for your CSS file with proper "style sheet" layout and format

  2. Cascading Style Sheets: Add to the file devil.css.    [4 marks total]

    This file needs to incorporate the following "style" items for all of the pages included in this assignment. Once you have prepared the file, link it to every HTML file so that the style rules will be applied to each HTML file (index.html, welcome.html, footer.html, recipes.html — as well as ALL the HTML files containing "recipes") in this assignment.     [1 of 4 marks]


  3. Things to include in the file index.html:      [5 marks]

    • this is your "frameset" file and the main page for this web site
    • be sure to include a good "title" for this file ... it's the only "title" that most visitors will see
    • you will need to set up 3 frames which will initially contain the HTML files: sitemenu.html, welcome.html and footer.html
    • name each frame with an appropriate name that fits that frame (your choice of frame name — be creative!!)
    • you may use any arrangement for these frames such as:

    site
    menu
    .html
    welcome.html
    footer.html
    OR
    sitemenu.html
    welcome.html
    footer.html

    • although the diagram shows a "border", this is only for your benefit. Your frames should have NO visible border
    • you need to edit sitemenu.html so that each hypertext link with open in the frame that initially contains the file "welcome.html". You might want to adjust your table in sitemenu.html so that it "fits" in the frame to the best possible advantage (for example: do you want the image/logo at the top or left? Do you want the menu hypertext links in the middle? Another logo at the right or bottom?)
    • each frame should scroll if necessary. Try to size the frames that initially contain the files sitemenu.html and footer.html frames so that scrolling is not necessary.
    • only the frame that initially contains welcome.html will change its frame contents while this web site is being used. The sitemenu.html and footer.html files should always be visible in their respective frames.

  4. Things to include in the file welcome.html:      [8 marks]

    • use a fluid layout table with no visible border. This table will be one row with 2 equally-sized columns.
    • use the "col" feature to define your columns and sizing for this table.
    • this table should have a "caption" that welcomes the visitor to this web site
    • include the text from the file "welcome.txt" (included in your student/assignment file) in the first column of the table.
    • in the second column, include an in-line frame pointing to the file "recipes.html" which uses scroll bars when necessary.


  5. Things to include in the file contact.html:      [8 marks]

    • include the text from the file "contact.txt" (included in your student/assignment file) in the first column of the table.
    • create an HTML table that scrolls (size this table so that a visitor only sees the information for two people at a time)
    • include the table definitions for "thead" "tbody" and "tfoot" (where applicable to your table)
    • this table should have a "caption" that informs a visitor that these are contacts for Devil's Food
    • use the "col" feature to define your columns and sizing for this table.
    • group the columns so that the person's name is bold and one size larger than the rest of the fonts (using CSS for this)
    • each person gets one "table row" for their contact information
    • turn each "email" address into an email link
    • edit the 'webmaster' contact information so that it's YOUR information (but leave the phone number alone — you don't need to include your phone number!). Just include your name and email address.

  6. Upload all of the files you have created and edited in this assignment (HTML, CSS and image files) into your account on "nexus".   [2 marks]

Return to main page