Web Design with HTML and CSS

174

Building your page layout

Web Design with HTML and CSS Digital Classroom

Building your page layout

In this lesson, you will be working with the two-column fi xed-width layout from Lesson 7.

In Lesson 7, 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

Your fi rst task is to remove the background colors from the page. You do not need to delete

the CSS properties for these elements, just comment them out in the code.

1 In your text editor, choose File > Open. In the dialog box that appears, navigate to the

web08lessons folder, choose the 08_start.html fi le, and click Open. Preview this page in

your browser to see the current layout.

Your page in its initial state

2 Return to your text editor. Choose File > Save As, and in the dialog box that appears, go

to the web08lessons folder. Name this fi le 08_layoutwork.html, and then click Save. This

ensures you have a backup fi le.