Web Development & Design Foundations with HTML5

Skip to Content 8th Edition

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

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