WEB 210  Web Design
Chapter 4 Web Site Case Study

On pages 155-168 are the four web site case studies continued from Chapter 3. The titles of these are:

  1. JavaJam Coffee House (page 155)
  2. Fish Creek Animal Hospital (page 159)
  3. Pasha the Painter (page 161)
  4. Prime Properties (page 164)

Continue working on the odd or even number cases begun in Chapter 2. In your pcsdata network folder, copy the case folders from the Chapter 3 folder to the Chapter 4 folder. Also, there are some graphic files found on the pcsdata in a folder labeled "Student Data Files". The graphics are in a subfolder under Chapter 4 labeled CaseStudyStarters. For each case, create a graphics subfolder under the case name and copy the graphic files to the graphics folder under the appropriate folder in your Chapter 4 folder on the pcsdata network. For example, the partial path for the JavaJam Coffee House graphics in Chapter 4 will be chapter4\javavam\graphics. In the XHTML code, the path for the JavaJam graphic image will be graphics/javalogo.gif. Note in XHTML the frontslash is used instead of the backslash.

In these labs, graphics will be added to various web pages and new pages created. Note that if you make any changes effecting all pages, other than changes to the external CSS file, you will need to update your template file. Be sure that you have the necessary listed graphic files copied to a graphics folder within the case folder, within the chapter folder in your folder on the network. Before changing any code, read the introductory information in the case and do not make any changes to any page until you get to the instructions specific to the page being changed. View the pages periodically to be sure that the pages look as they should. Example screenshots are shown in the textbook. Formatting will not show until the external CSS file is updated and saved.

Specific Case Instructions:

You may want to create the new pages in each case study by using the template file you should have created. With using the template, you do not have to delete any content. However you will need to copy the common code to each of the other pages. To find the dimensions of a graphic, open Windows Explorer, navigate to the folder location where the files are listed. Point the mouse to the filename and a caption should appear showing the height and width. Another option is to right-click the filename and select "Properties" from the menu, select "Details" tab from the Properties dialog box.

  1. JavaJam Coffee House
    1. Add the javalogo.gif to all pages, including the template page.
    2. On the home page, add the paragraph "Follow the winding road to JavaJam..." before the bulleted list.
    3. It may help to work on the javajam.css in step 4 before creating the Music page in step 3.
    4. In the img code for the thumbnail images, use 80 x 80 for the dimensions of the graphics.
    5. In the instructions for the Music page, the paragraph beginning with "The section describing each..." references a <h3> element. This should use the <h2> element as instructed in the specific instructions for the text "January" and "February".
    6. On The Music Page: For the January & February Music Performance bullets, use the "details" class instead of the "content" class.
    7. Use the class "content" for the section below the navigation.
    8. When setting the image link to the larger graphics, use the target attribute to open the graphic in a new window.

  2. Fish Creek Animal Hospital
    1. In the Ask the Vet page, the last line of the paragraph is different in the instructions vs the screen shot on page 159. The last part of the sentence should read "....they can feed Sparky dog treats" instead of ".....they can feed Sugar dog treats."
    2. Be sure to update all web pages in the Fish Creek Animal Hospital web site.

  3. Pasha the Painter
    1. When setting the image link to the larger graphics, use the target attribute to open the graphic in a new window.
    2. In the Testimonials page, the graphic file name for the Remodeling testimonial section should be "undecorate_small.jpg" instead of "undecorated_small.jpg".

  4. Prime Properties
    1. Be sure the look of the title is consistent in all pages.
    2. Before setting up the navigation buttons, look at a preview of the various buttons. The button for the current page is the blue button. All other navigation buttons within a page are the green background buttons. Be sure to update the navigation buttons in the default.htm and financing.htm files.
    3. When setting the image link to the larger graphics, use the target attribute to open the graphic in a new window.