Skip to Main Content
HTML5 Digital Classroom
book

HTML5 Digital Classroom

by Jeremy Osborn, AGI Creative Team
October 2011
Intermediate to advanced content levelIntermediate to advanced
448 pages
10h 15m
English
Wiley
Content preview from HTML5 Digital Classroom

Lesson 5: Advanced CSS Layout

web08.psd

In this lesson, you’ll learn how to refine the appearance of your page layout by adding graphics, color, and additional page sections.

What you’ll learn in this lesson:

  • Using comments in cascading style sheets
  • Using background images
  • Creating navigation styles
  • Working with absolute positioning

Starting up

You will work with several files from the HTML5_05lessons folder in this lesson. Make sure you have loaded the HTML5lessons folder onto your hard drive from www.digitalclassroombooks.com/HTML5. See “Loading lesson files” in the Starting Up section of this book.

2609.jpg This lesson uses the TextWrangler text editor to create the markup, but you can use any text editor and get the same results.

Building your page layout

In this lesson, you will be working with the two-column fixed-width layout from Lesson 4. In Lesson 4, you added background colors to the various page elements. In this lesson, you will remove the background colors to unify the appearance of the page.

You will also create a more attractive and useful navigation bar, add more images, create a styled data table, and add form elements for a contact page. At the end of the lesson, you will look at a few alternative page layouts based on the one you create.

Removing the background color ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Sams Teach Yourself CSS 24 in Hours

Sams Teach Yourself CSS 24 in Hours

Kynn Bartlett

Publisher Resources

ISBN: 9781118128770Purchase bookOther