Problem

JavaJam Coffee House Case StudyIn this chapter's case study you will use the existing...

JavaJam Coffee House Case Study

In this chapter's case study you will use the existing JavaJam (Chapter 5) website as a starting point to create a new version of the website. The new design is a centered page layout that takes up 80% of the browser viewport. You'll use CSS to configure the new page layout, a background image, and other styles, including font and padding. Figure displays a wireframe with the wrapper div, which contains the other web page elements.

You have six tasks in this case study:

1. Create a new folder for the JavaJam Coffee House website.

2. Update the javajam.css external style sheet.

3. Update the Home page: index.html.

4. Update the Menu page: menu.html.

5. Update the Music page: music.html.

6. Configure shadow with CSS3.

Task 1: Create a folder called ch6javajam to contain your JavaJam

Coffee House website files. Copy the files from the Chapter 5 Case Study ch5javajam folder. Copy the javabackground.gif and javalogo.gif files from the chapter6/starters folder in the student files into your ch6javajam folder.

Task 2: The External Style Sheet. Launch a text editor and open the javajam.css external style sheet file.

• The body element selector. Add style declarations to display a background image named javabackground.gif and to configure Verdana, Arial, or any sans-serif font typeface.

• The wrapper id selector. Code a selector for an id named wrapper. Configure the wrapper id to be centered (see Hands-On Practice) with a width of 80%, background color #F5F5DC, and a minimum width of 960 pixels.

• The h1 element selector. Code an h1 element selector with a height of 100 pixels that displays a background image of javalogo.gif. The background image should be centered and should not repeat. Recall that the h1 element contains the text "JavaJam Coffee House." Configure text-indent: -9999px; so that the text will not overlay the image and will not display unless images are turned off or CSS is not supported.

• The h3 element selector. Add a style declaration to display in uppercase text (use the text-transform property).

• The nav element selector. Code a nav element selector that configures bold text that is centered (use the text-align property).

• The content id selector. Code a selector for an id named content and configure this with 1 pixel of padding on the top and 20 pixels of padding the right, bottom, and left sides.

• The dt element selector. Code a dt element selector that configures bold text.

• The footer element selector. Add style declarations to configure 20 pixels of padding, small font size (.60em), italics, and centered text.

Save your javajam.css file. Use the CSS validator (http://jigsaw.w3.org/css-validator) to check your syntax. Correct and retest if necessary.

Task 3: The Home Page. Launch a text editor and open the home page, index.html. Code div tags to add a wrapper div that contains the content of the web page. Use Hands-On Practice as a guide. Remove the tags for the b element, the i element, and the small element-they are no longer needed since CSS is now used to configure the text. Save the file.

Task 4: The Menu Page. Launch a text editor and open the menu.html file. Code div tags to add a wrapper div that contains the content of the web page. Use Hands-On Practice as a guide. Remove the tags for the strong element, the b element, the i element, and the small element-they are no longer needed since CSS is now used to configure the text. Save the file.

Task 5: The Music Page. Launch a text editor and open the music.html file. Code div tags to add a wrapper div that contains the content of the web page. Use Hands-On Practice as a guide. Remove the tags for the b element, the i element, and the small elementthey are no longer needed since CSS is now used to configure the text. Save the file.

Test your web pages in a browser. Your home page should be similar to the example in Figure.

Task 6: Configure Shadow with CSS3. Launch a text editor and open the javajam.css file. Apply a shadow effect the to the wrapper id. Add the following style to the #wrapper selector:

box-shadow: 5px 5px 5px #2E0000;

Save the file. Launch a modern browser such as Safari, Google Chrome, or Firefox and test the home page (index.html) shown in Figure.

Figure The wrapper div contains the other page elements.

Figure The new JavaJam home page with centered layout.

Figure The JavaJam home page with a shadow effect.

Hands-On Practice

You?ll center a web page in this Hands-On Practice. When complete, your web page will look similar to the one shown in Figure.

You should already have the index.html and trilliumlogo.gif files in your trilliumch6 folder. If not, obtain these files from the chapter6/trillium4 folder.

Launch a text editor and open the index.html file.

1. Edit the embedded CSS, and remove the width and min-width style declarations from the body selector.

2. Edit the embedded CSS, and configure a new selector, an id named container. Add style declarations for the width, min-width, margin-left, and margin-right properties as follows:

#container { margin-left: auto;             margin-right: auto;             width: 80%;             min-width: 700px; }

3. Edit the HTML. Configure a div element assigned to the id container that ?wraps? or contains the code within the body section. Code an opening div tag on a new line after the opening body tag. Assign the div to the id named container. Code the closing div tag on a new line before the closing body tag. Save the file. When you test your index.html file in a browser, it should look similar to the one shown in Figure. The student files contain a sample solution in the chapter6/ trillium5 folder.

Figure The web page is centered with CSS.