Teach me the Web at Montgomery College

Teach Me the Web Logo as stitching on a fabric background

My caption

Session 11

Agenda

  • Session 10 Review
  • CSS for Positioning (cont’d)
    • Spacing out your nav
    • Layout Types
      • Fixed Width Layouts

        Example

        • Finite length
        • Fixed line length
        • Built on screen resolution
        • Left, center, or right position in screen

        Demo

      • Liquid/Fluid Layouts

        Example

        • Sections stretch to fill the screen
        • Adjusting line length
        • Use percentages instead of finite measurements

        2 column Demo

        3 column Demo

      • Elastic Layouts

        Example

        • Finite section length that adjusts
        • Line length adjusts with page adjustment
        • Use EMs on all widths

        Demo

      • Zoom Layouts

        Example

        • Layout for low vision users
        • Usually provided as an alternate
        • high contrast, large type, single column, smplified nav, reduced graphics to enhance readability.
  • Best Practices with CSS
  • Exit Card

Readings

Homework

Portfolio Re-organize

Let’s do a mini spiff up of our portfolio’s. Reorganize your portfolio using the div structure we have discussed. Include a header, navigation, content, and footer section. You may do some minimal styling, font-size, color, some borders, etc. If you feel comfortable with Photoshop or Fireworks you may continue and begin using graphics.

Article: None

No article.

Resources

Float

Page Layout with CSS

last edited on January 26th, 2009 by Mr. Brown

I made this
Jeffrey T Brown
Montgomery College
51 Mannakee Street
Rockville , Maryland , 20850 USA
301-253-7062

Templated with Blueplate, the template framework which uses the Jquery javascript library, managed with Wordpress with a custom theme developed by me for teaching web related courses at Montgomery College in Rockville, MD.

This work is liscenced under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. If in doubt, contact me with information above.