230 likes | 407 Views
Tutorial 7 Creating Liquid Layouts. Objectives. Discern the differences among various types of layouts Create a liquid layout Create a nested div Conform the footer width to the main column width. Objectives. Create a three-column layout Modify the layout width Create print styles
E N D
Objectives • Discern the differences among various types of layouts • Create a liquid layout • Create a nested div • Conform the footer width to the main column width New Perspectives on Blended HTML, XHTML, and CSS
Objectives • Create a three-column layout • Modify the layout width • Create print styles • Link a file to a print style sheet New Perspectives on Blended HTML, XHTML, and CSS
Creating a Two-Column Liquid Layout • Must decide between a portrait or landscape orientation • A liquid layout is a design that expands or contracts in proportion to the size of the user’s viewport • Measurements are specified using percentages • In an elastic layout, em values are used instead of percentage values • In a hybrid layout, part of the content may have a liquid layout, and the remainder has a fixed-width layout New Perspectives on Blended HTML, XHTML, and CSS
Creating a Two-Column Liquid Layout New Perspectives on Blended HTML, XHTML, and CSS
Creating a Two-Column Liquid Layout • To create a two-column liquid layout: • Decide the width (in percentages) of the narrower of the two columns. Generally, the sidebar column is narrow and the main column is wide. • Decide whether you want the sidebar column to appear on the left or the right • In the style sheet, enter the code for the sidebar and main id selectors. Assign a width (as a percentage) to the sidebar column. Do not assign a width to the main column • In the document body, enter start and end div tags for the sidebar and main divs • If you are not floating all the id selectors, change the source order so that the floated content appears before nonfloated content • If necessary, change the margins and cellpadding of your columns New Perspectives on Blended HTML, XHTML, and CSS
Creating a Two-Column Liquid Layout New Perspectives on Blended HTML, XHTML, and CSS
Creating a Two-Column Liquid Layout New Perspectives on Blended HTML, XHTML, and CSS
Creating a Two-Column Liquid Layout • To reposition the sidebar column, change the float property to right, and change the margin-left property to margin-right New Perspectives on Blended HTML, XHTML, and CSS
Creating a Two-Column Liquid Layout • Using styles to create a horizontal navbar from an unordered list New Perspectives on Blended HTML, XHTML, and CSS
Creating a Two-Column Liquid Layout • Creating a hover effect and a footer • The hover effect changes the appearance of an element when your mouse hovers over it New Perspectives on Blended HTML, XHTML, and CSS
Creating Nested Divs • A nested div is a div within another div • Used previously to create a structure with container and wrapper divs New Perspectives on Blended HTML, XHTML, and CSS
Creating Nested Divs New Perspectives on Blended HTML, XHTML, and CSS
Creating Three-Column Liquid Layouts • Create a style for the universal selector to zero out padding and margins for all elements • Style the body element New Perspectives on Blended HTML, XHTML, and CSS
Creating Three-Column Liquid Layouts • Enter the code and styles for the header and navbar • If necessary create a hover effect for the navbar New Perspectives on Blended HTML, XHTML, and CSS
Creating Three-Column Liquid Layouts • To create a three-column liquid layout: • Decide on the width (in percentages) for each of the narrower two sidebar columns • Decide how you want the sidebar columns to float • In the style sheet, enter the code for the sidebar and main id selectors. Assign widths to both sidebar columns. Do not assign a width to the main column • In the document body, enter start and end div tags for the sidebars and the main divs • If necessary, change the source order so that the floated content appears before nonfloated content New Perspectives on Blended HTML, XHTML, and CSS
Creating Three-Column Liquid Layouts New Perspectives on Blended HTML, XHTML, and CSS
Creating Three-Column Liquid Layouts New Perspectives on Blended HTML, XHTML, and CSS
Modifying the Layout Width • Add a start div tag for the container, just below the start body tag, and an end div tag just above the end body tag • Style the container id selector New Perspectives on Blended HTML, XHTML, and CSS
Modifying the Layout Width New Perspectives on Blended HTML, XHTML, and CSS
Using Print Styles • A print style is a style designated to create output for printed copy • To create print styles: • Change the text color to black and the background color to white • Specify a font size in points • Specify the font family as a serif font • Style the navbar, banner, and images to have a display property value of none • Set the line height to 120% or greater • Use the @page rule to set the page size and margin New Perspectives on Blended HTML, XHTML, and CSS
Using Print Styles New Perspectives on Blended HTML, XHTML, and CSS