WEB 210  Web Design
Chapter 6 Web Site Case Study

On pages 255-268 are the four web site case studies continued from Chapter 4. The titles of these are:

  1. JavaJam Coffee House (page 255)
  2. Fish Creek Animal Hospital (page 259)
  3. Pasha the Painter (page 261)
  4. Prime Properties (page 265)

The case studies in this chapter are modifying the code that was created in Chapter 4. (There was no hands-on coding for the case studies in Chapter 5.) Continue working on the odd or even number cases that you are building. In your pcsdata network folder, create a Chapter 6 folder. As in the past chapters, create subfolders using the case names. From your Chapter 4 folder, copy the graphics subfolder and the template.htm file from the Chapter 4 case folder to the equivalent Chapter 6 case folder. To clarify, in chapter 4 the folders for the even number case studies should be:

In both the javajam and pashapainter folders, there should be a file named "template.htm". Copy all the files, including the template.htm and the css file from both of the case folders in chapter 4 to the same case folder under chapter 6. Also copy the graphics subfolder under both of the case folders from chapter 4 to the same case folder under chapter 6. After completing the copying you should have the following structure:

Specific Case Instructions:

Any instructions involving the copying of files should have been taken care of with the above instructions. Also note that all Web page files should use the .htm file extension and the file shown in the instructions as index.html should have been named default.htm.

  1. JavaJam Coffee House
    1. All htm files should be set to use the javajam.css file. Make changes in the css file as instructed in step 2 on pages 256-258.
    2. Page 256, #2, First bullet point: Configure the background color of the container id to #FFFFCC instead of #e8d882.
    3. The descendant selector in the instruction on page 257 is shown in the code given. #nav a is using the id named "nav" and the "a" tag to assign the id nav where the anchor tag is used.
    4. Be sure to make the changes made in default, menu, and music files to the template file.
    5. Include in the css file the Bonus Style in step 5 on page 258.

  2. Fish Creek Animal Hospital
    1. All htm files files should be set to use the fishcreek.css file. Make changes in the css file as instructed in step 2 on pages 260-261.
    2. Page 260, #2, Second bullet point: Use padding-left: 55px; instead of padding-left: 70px;
    3. Be sure to make the changes made in default, services, and askvet files to the template file.

  3. Pasha the Painter
    1. All htm files files should be set to use the painter.css file. Make changes in the css file as instructed in step 2 on page 263.
    2. Be sure to make the changes made in default, services, and testimonial files to the template file.
    3. Include in the css file the Bonus Style in step 6 on pages 263-264.

  4. Prime Properties
    1. All htm files files should be set to use the prime.css file. Make changes in the css file as instructed in step 2 on pages 265-267.
    2. Add the div element to enclose all of the page content. Assign the id "wrapper" to the div.
    3. Be sure to make the changes made in default, listings, and financial files to the template file.
    4. Include in the css file the Bonus Style in step 5 on pages 267-268.

Back