Web Programming Labs

8 Shape Up! exercises for th Edition)

Shape Up! 6 Use 2- and 3-column layouts ll enhance the formatting of the home page that you worked on in

chapter 5 so it uses a 2-column layout. with new content to the page.

Specifications for the 2-column layout

Float the aside in the main element to a sidebar that s displayed to the left of the section. The width of the sidebar should be 245px. not displayed below the list.

Adjust the margins and padding for the sidebar and section as necessary. (Note: b apply any additional margin or padding to it.)

9 Shape Up! exercises for th Edition)

lor of the h3 headings in the section.

Specifications for the 3-column layout

To create the 3-column home page, you can copy the index.html page you just completed and rename it index_3_column.html. Then, you can copy the main.css file and rename it main_3_column.css

Modify the link element for the style sheet in the 3-column home page so it refers to the new style sheet.

Move the existing sidebar before the section in the HTML, and assign an id to this sidebar. Then, modify the CSS so it refers to the sidebar by this id.

Add another sidebar after the section, and add the content shown above to this sidebar. Be sure to assign an id to this sidebar so you can use it to refer to the sidebar in the CSS. Then, format the sidebar as shown above.

Increase the width of the page to 1200px. Then, set the widths and spacing for the section and two sidebars and the floating for the new sidebar so the page appears as shown above.