Javajam Coffee House Case Study Chapter 7

Chapter 6 Page Layout

You’ve already configured the centered page layout with CSS. We’ll add to your toolbox of CSS page layout techniques in this chapter, starting with the box model. You’ll explore floating and positioning elements with CSS. You’ll be introduced to using CSS to add interactivity to hyperlinks with pseudo-classes and use CSS to style navigation in unordered lists. You will practice coding new HTML5 elements that structure web page content.

Inspiration

The Box Model


Little Boxes

Resources & Chapter Links


Explore Further

Visit Modernizr and explore a free open-source JavaScript library that enables backward compatibility for HTML5 and CSS3 in older browsers.

Review Activities

Review game activities are available for this chapter.
Check your knowledge of chapter terms and concepts.

Chapter Updates

  • Page 285, HTML5 Shim (AKA HTML5 Shiv)
    The HTML5 Shiv has moved from Google to GitHub at https://github.com/aFarkas/html5shiv.

    Download https://github.com/aFarkas/html5shiv/archive/master.zip
    Extract the .zip file. Locate the dist/html5shiv.js file and copy it into the same folder as your web page.

    Include the following code in the head section of your web page.
    <!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
    <![endif]-->


  • Hands-On Practice 6.11, Page 286
    Obtain the html5shiv.js file as described above,
    Step 3 Add the code listed above below the closing style tag and above the closing head tag.

  • Hands-On Practice 6.7, Page 272
    Name the folder replacech6 instead of replacech5.

  • JavaJam Coffee House Case Study
    Configure the HTML5 Shim as noted in the first chapter update.

  • Fish Creek Animal Hospital Case Study
    Configure the HTML5 Shim as noted in the first chapter update.

  • Pacific Trails Resort Case Study
    Configure the HTML5 Shim as noted in the first chapter update.

  • Path of Light Yoga Studio Case Study
    Configure the HTML5 Shim as noted in the first chapter update.

    Do not delete the id="hero" code from the Classes and Schedule pages. You will use this in the Chapter 7 Case Study.


Questions or Comments?

The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com

Chapter 4 Visual Elements and Graphics

A key component of a compelling website is the use of interesting and appropriate graphics. This chapter introduces you to working with visual elements on web pages.

When you include images on your website, it is important to remember that not all users are able to view them. Some users may have vision problems and need assistive technology such as a screen reader application that reads the web page to them. In addition, search engines send out spiders and robots to walk the web and catalog pages for their indexes and databases; such programs do not access your images. Visitors using a mobile device may have images disabled. As a web developer, strive to create pages that are enhanced by graphical elements, but are usable without them.

Resources & Chapter Links

Image Map Example


Image Map Code:

<map name="fishing">
<area href="http://nature.org/"
  target="_blank"
  shape="rect"
  coords="0,51,416,170"
  alt="The Nature Conservancy">
<area href="http://www.doorcounty.com"   target="_blank"
  shape="rect"
  coords="24, 188, 339, 283"
  alt="Door County Vacations">
</map>
<div>
<img src="fishingboat.jpg" usemap="#fishing" alt="Door County" width="416" height="350">
</div>

Graphic Resources

Find free to use photos on Flickr.com — select the advanced search page and check Only search within Creative Commons-licensed content. Be sure to follow the instructions for attribution when indicated.

Free Image Editors

Free online image editor applications:

Free image editor applications to download:

Free Online Image Optimization Tools:

Round the corners of rectangular images:

Create an icon from your image:

Free Graphics Tutorials

Often students need a logo banner or a button for their first web site project but have not taken any graphics courses yet. You can learn how to create a logo and button with the free tutorials below:

Instant Buttons and Logo Banners


Review Activities

Review flash card activities are available for this chapter.
Check your knowledge of chapter terms and concepts.

Chapter Updates

  • The HTML5 Main Element
    As of 9/23/2014, current versions of Internet Explorer still do not support the HTML main element and do not recognize the main element as a block display element. This results in Internet Explorer ignoring some CSS properties such as padding. Backward compatibility for HTML5 elements is discussed further in Chapter 6 but a quick workaround for when you experience main element display issues with Internet Explorer is to add the following to your CSS:
    main { display: block; }

  • Page 149 Hands-On Practice 4.5, Step 2
    Use myisland.jpg as the value of the src attribute in the img tag.

  • Page 169 Hands-On Practice 4.9, #2 — configure the style declarations for the h1 element selector as shown in the code sample.

  • Page 169 — There is a typo in the second-to-the last code sample. To configure a dark-gray drop shadow with 5px horizontal offset, 5px vertical offset, and a 5px blur radius code:
    box-shadow: 5px 5px 5px #828282;

  • JavaJam Coffee House Case Study
    Page 187:
    Configure the text in the paragraphs to match Figure 4.44.
    The text for Melanie should be:
       Melanie Morris entertains with her melodic folk style.
    The text for Greg should be:
       Tahoe Greg is back from his tour. New songs. New stories.

  • Pacific Trails Case Study
    Page 191 Task 2: The Home Page
    You will modify the index.html file to look similar to the web page shown in Figure 4.47.

Questions or Comments?

The author would like to hear from you! Send an e-mail to webdevfoundations@gmail.com

One thought on “Javajam Coffee House Case Study Chapter 7

Leave a Reply

Your email address will not be published. Required fields are marked *