WEB 210  Web Design
Chapter 9 Web Site Case Study

On pages 390-397 are the four web site case studies continued from previous chapters. The titles of these are:

  1. JavaJam Coffee House (page 390-392)
  2. Fish Creek Animal Hospital (page 392-394)
  3. Pasha the Painter (page 394-396)
  4. Prime Properties (page 396-397)

In your pcsdata network folder, create a Chapter 9 folder. Copy case subfolders from the Chapter 8 folder to the Chapter 9 folder.

The case study for this chapter is setting up forms in the cases. You may find that using a web page editing software such as Dreamweaver will make this work go smoother. Dreamweaver does work with CSS either through the Code window or the CSS Styles panel on the right side of the window. If the CSS Styles panel does not show, click the Window menu option and select CSS Styles from the drop down menu. In the CSS Styles panel, use the All button to see the rules for both the external CSS file as well as any embedded styles.

Specific Case Instructions:

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. There may also be differences in folder names. Continue to note that the web page files use the .htm file extension instead of .html.

  1. JavaJam Coffee House
    1. In creating the Jobs page, you should be able to use your template.htm file as the starting point.
    2. You may setup the form with using div tags or a table. The spacing and layout is easier to work with by following the instructions using the div tags.
    3. Check carefully the position of the form element and spacing.
    4. If using Dreamweaver to add the labels in the form and using a table, the Insert, Form, Label, jumps to the Code view for the label text to be typed in. Be sure to remove the " " code following the closing label tag.
    5. The Experience textarea box shown in figure 9.29 on page 391 appears to be larger than the two rows as given in the instructions.

  2. Fish Creek Animal Hospital
    1. For the Contact page, you should be able to use your template.htm file as the starting point.
    2. You may setup the form with using div tags or a table. The spacing and layout is easier to work with by following the instructions using the div tags.
    3. Check carefully the position of the form element and spacing.
    4. If using Dreamweaver to add the labels in the form and using a table, the Insert, Form, Label, jumps to the Code view for the label text to be typed in. Be sure to remove the " " code following the closing label tag.
    5. The Comments textarea box shown in figure 9.31 on page 393 appears to be larger than the two rows as given in the instructions.

  3. Pasha the Painter
    1. To create the Free Estimate page, you should be able to use your template.htm file as the starting point.
    2. You may setup the form with using div tags or a table. The spacing and layout is easier to work with by following the instructions using the div tags.
    3. Check carefully the position of the form element and spacing.
    4. If using Dreamweaver to add the labels in the form and using a table, the Insert, Form, Label, jumps to the Code view for the label text to be typed in. Be sure to remove the " " code following the closing label tag.
    5. The Comments textarea box shown in figure 9.32 on page 394 appears to be larger than the two rows as given in the instructions.

  4. Prime Properties
    1. There should be a template.htm file that can be used the starting point to create the Contact page.
    2. You may setup the form with using div tags or a table. The spacing and layout is easier to work with by following the instructions using the div tags.
    3. Check carefully the position of the form element and spacing.
    4. If using Dreamweaver to add the labels in the form and using a table, the Insert, Form, Label, jumps to the Code view for the label text to be typed in. Be sure to remove the " " code following the closing label tag.
    5. The Comments textarea box shown in figure 9.33 on page 396 appears to be larger than the two rows as given in the instructions.

Back