Tutorial 7 Creating Liquid Layouts - PowerPoint PPT Presentation

tutorial 7 creating liquid layouts n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Tutorial 7 Creating Liquid Layouts PowerPoint Presentation
Download Presentation
Tutorial 7 Creating Liquid Layouts

play fullscreen
1 / 22
Tutorial 7 Creating Liquid Layouts
139 Views
Download Presentation
odetta
Download Presentation

Tutorial 7 Creating Liquid Layouts

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