JavaJam Coffee House

Click Here to View Exercise

 

JavaJam Coffee House Logo

JavaJam Coffee House Logo

The following exercise is a continuation from Chapter 3's JavaJam Coffee House exercise. The files have been transferred over and then modified accordingly.


Chapter 4

Visual Elements and Graphics

Website Case Study JavaJam Coffee House P.154

The first thing I did was add the JavaJam Coffee House Logo to the top of each web page. If you will remember in the previous exercise it was just text only.

For the home page I added the windingroad.jpg and used the align="right" attribute to the image tag.

If you will remember the book did not specify a music page. So I created one. I did not want any broken links so I just put page under construction.

In this exercise we got a chance to create that music page by inserting content. I edited the music page to the specifications laid down in the book. The logo, main links and footer should look like every other page. Mainly the content of the main body of the page needed to be updated. I added a January and February section to the page. Within each section there is an area of text and a picture. One group of words describing the artist to the left and a picture of the artist to the right. I used <h3> tags for the titles. I put the description and pictures within a <p> tag.

To make sure everything is working accordingly the final piece for this website is editing the CSS style sheet.

The line-height syle rule was taken out of the h1 selector.

An h3 selector was added with padding options.

background-color: #ccaa66;
padding-left: 10px;
padding-bottom: 5px;

I configured a class named content. The book really didn't go into too much detail about how to apply this class. I assume it is for the music page. So I just made a guess and assigned this class to the paragraph tag containing text and pictures of the musicians.

I then added a padding-bottom attribute to the content class as I found the pictures still not lining up correctly.