1 / 22

Tutorial 7 Creating Liquid Layouts

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

odetta
Download Presentation

Tutorial 7 Creating Liquid Layouts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 7Creating Liquid Layouts

  2. 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

  3. 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

  4. 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

  5. Creating a Two-Column Liquid Layout New Perspectives on Blended HTML, XHTML, and CSS

  6. 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

  7. Creating a Two-Column Liquid Layout New Perspectives on Blended HTML, XHTML, and CSS

  8. Creating a Two-Column Liquid Layout New Perspectives on Blended HTML, XHTML, and CSS

  9. 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

  10. 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

  11. 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

  12. 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

  13. Creating Nested Divs New Perspectives on Blended HTML, XHTML, and CSS

  14. 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

  15. 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

  16. 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

  17. Creating Three-Column Liquid Layouts New Perspectives on Blended HTML, XHTML, and CSS

  18. Creating Three-Column Liquid Layouts New Perspectives on Blended HTML, XHTML, and CSS

  19. 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

  20. Modifying the Layout Width New Perspectives on Blended HTML, XHTML, and CSS

  21. 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

  22. Using Print Styles New Perspectives on Blended HTML, XHTML, and CSS

More Related