Web Development and Design Foundations with XHTML, 5th Edition

(Steven Felgate) #1
Web Site Case Study:Using Graphics^157

Hands-On Practice Case
Obtain the images used in this case study from the student files. The images are located
in the Chapter4/CaseStudyStarters/JavaJam folder. The images are: melanie.jpg (Figure
4.28), melaniethumb.jpg (Figure 4.29), greg.jpg (Figure 4.30), gregthumb.jpg (Figure
4.31), javalogo.gif (Figure 4.32), windingroad.jpg (Figure 4.33), and background.gif
(Figure 4.34). Save them in your javajam folder.

Figure 4.28
Melanie Morris (melanie.jpg)


Figure 4.29
Melanie Morris thumbnail
(melaniethumb.jpg)

Figure 4.30
Greg (greg.jpg)

Figure 4.31
Greg thumbnail
(gregthumb.jpg)

Figure 4.32
JavaJam logo
( javalogo.gif )


Figure 4.33
Winding road
( windingroad.jpg)



  1. The Home Page. Launch Notepad and open the index.html file from your javajam
    folder. Modify the index.html file to look similar to the Web page shown in
    Figure 4.26.
    ● Replace the JavaJam Coffee House heading with the javalogo.gif, Figure 4.32.
    Be sure to include the alt,height, and widthattributes on the tag
    for the graphic.
    ● Configure windingroad.jpg, Figure 4.33, to display on the right side of the
    paragraph. Be sure to include the alt,height, and widthattributes.Hint:
    Use the align="right"attribute on the tag.Note: In Chapter 6
    you’ll learn to use CSS to configure this alignment.
    Save and test your new index.html page.

  2. The Menu Page. Launch Notepad and open the menu.html page from your java-
    jam folder. Modify the menu.html page in a similar manner—adding the logo
    banner. Save and test your new menu.html page.


Figure 4.34
Background
(background.gif)
Free download pdf