Visit the Web Style Guide, 3rd edition by Patrick Lynch and Sarah Horton (http://webstyleguide.com/wsg3/index.html). Read chapters 3 and 4 (chapters 1 and 2 are optional) for this assignment; eventually you will be asked to read chapter 5 as well.

This assignment is designed to get you thinking about and planning your final project Web presentation project for this course. You are asked to create two new Web pages. The first one should be accessed by selecting the hyperlink (relative) for Assignment 4 from your unordered list on your homepage. (Please make sure this link works so that I can access your Assignment 4 pages!). The second Web page that you create for assignment 4 should be accessed from the first Assignment 4 page. I would recommend calling the first file something like a4a.html and the second file a4b.html.

In addition to content, in this assignment we will be looking for good coding style in your Web pages as well: useful comments, XHTML that is syntactically correct, code that is easy to read, and Web pages that validate.

Requirements for the first Assignment 4 Web page are:

• The Web page should contain a heading and title that identify this page as Assignment 4a for CS403 with your section number and name (first and last). The date and time stamp should also be present.
• The Web page should provide a (relative) link back to your homepage.
• The Web page should contain the following:
  1. Theme
     Decide on a theme for your Web presentation project. Decide which type of Web presentation you will be creating: biography/personal page, business page, tutorial, or guide. Write several paragraphs describing the theme of your project and what type of presentation it is.
  2. Goals
     Write down your goals for this project. Address each of the goals mentioned in class plus any others that are pertinent to your particular presentation. (Goals include: audience, date, graphics, length, maintenance, money, objective, research, and writing.) Incorporate the project requirements from the Project Description.
  3. Navigational Scheme
     Decide on the navigational scheme for your Web project. Describe which of the organizational arrangements you will be using for your project and why it is appropriate. (Navigational schemes are: circular, exploratory, and hierarchical.) If you decide to use a scheme not described in class, describe it.
  4. Link
     After describing your theme, goals, and navigational scheme for your project, include a link to the second Assignment 4 page.

Requirements for the second Assignment 4 Web page are:

• The Web page should contain a heading and title that identify this page as Assignment 4b for CS403 with your section number and name (first and last). The date and time stamp should also be present.
• The Web page should provide a (relative) link back to your first assignment 4 Web page.
• This Web page should contain six images that you will be using in your project as well as a prototype of a header and a footer that you can use for your final project. The information on this Web page should be organized as follows:
  1. Header Prototype
     After the heading described above (Assignment 4b etc.), include a horizonal rule line. Your header prototype should follow the horizontal rule line and another horizontal rule line should follow that.
  2. Images
     The six images you plan to use in your final project presentation should appear next. Collect the six images by doing one or more of the following:
     • Finding them on the Web (and getting permission and/or crediting the source).
     • Using a scanner to copy photographs.
     • Creating them using a digital camera.
     • Creating them using image editing software.
     Put them in the IMAGES sub-directory of the public_html directory.
     Display the images on this page satisfying the following requirements:
     1. Include the first image inline with some text that describes it. Follow this with a horizontal rule that is the full width of the page.
     2. The second image should be centered. Provide a description under the image. Follow the description with a horizontal rule that is the full width of the page.
     3. Position the next image to the left side of the page. Include several lines of descriptive text that flows next to the image on the right side of the image. This can be done using the style = "float: left;" attribute of the image tag. Follow this with a horizontal rule that is aligned to the left and is 1/2 the full width of the page.
     4. Position the next image to the right side of the page. Include several lines of descriptive text to the left of the image. This is done using the style = "float: right;" attribute of the image tag. Follow this with a horizontal rule that is 1/2 the full width of the page and is aligned to the right.
     5. Position the last two images to the left side of the page and to the right side of the page (across from one another). Include several lines of text flowing in between. Follow this with a horizontal rule that goes across the full width of the page and clears both images (that is, the line is below both images).
        
     Note: Be sure to include the alt, height, and width attributes when using the image tags!
  3. Footer Prototype
     Design a footer for your Web presentation and include it here, after the images. Include a horizontal rule line before the footer.

© McGraw-Hill 2007. All rights reserved.