Web Page Layout PowerPoint Presentation

Web Page Layout
Presentation Transcript
Collapse/Expand

• Slide 1 -

  CS134 Web Design & Development Web Page Layout Mehmud Abliz

• Slide 2 -

  table vs. div table Pros: supported by all browsers Cons: bind style to content; hard to maintain div Pros: easy to maintain Cons: not supported by all browsers We recommend – div, reasons: CSS is to separate structure from content. Supporting most common/popular browsers are enough. May be it’s time for some people to upgrade their browsers.

• Slide 3 -

  Common Layouts Variable width content: 2 columns - left menu 2 columns - right menu 3 columns Centered (fixed width content): 2 columns 3 columns 4 columns (fluid/variable width) Many other …

• Slide 4 -

  2 columns - left menu

• Slide 5 -

  2 columns - left menu #Header { margin:50px 0px 10px 0px; padding:17px 0px 0px 20px; border:1px dashed #999; background-color:#eee; } #Content { margin:0px 50px 50px 200px; padding:10px; border:1px dashed #999; background-color: #eee; } #Menu { position:absolute; top:100px; left:20px; width:150px; padding:10px; background-color:#eee; border:1px dashed #999; }

• Slide 6 -

  2 columns – centered, static width

• Slide 7 -

  2 columns – centered, static width body { margin:0px; padding:0px; text-align: center; } #Wrapper { width:700px; margin-right:auto; margin-left:auto; border:1px dashed #999; } #Header { background: #eee; }

• Slide 8 -

  2 columns – centered, static width #Menu { float:right; width:200px; background: #eee; } #Content { float:left; width:500px; background: #666; } #Footer { clear: both; background: #eee; }

• Slide 9 -

  2 columns - right menu

• Slide 10 -

  2 columns - right menu #Header { margin:50px 0px 10px 0px; padding:17px 0px 0px 20px; border:1px dashed #999; background-color:#eee; } #Content { margin:0px 200px 50px 50px; padding:10px; border:1px dashed #999; background-color: #eee; } #Menu { position:absolute; top:100px; right:20px; width:150px; padding:10px; background-color:#eee; border:1px dashed #999; }

• Slide 11 -

  3 columns - flanking menu

• Slide 12 -

  3 columns - flanking menu .content { position:relative; width:auto; min-width:120px; margin:0px 210px 20px 170px; border:1px solid black; padding:10px; z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */ } #navAlpha { position:absolute; width:128px; top:20px; left:20px; border:1px dashed black; background-color:#eee; padding:10px; z-index:2; }

• Slide 13 -

  3 columns - flanking menu #navBeta { position:absolute; width:168px; top:20px; right:20px; border:1px dashed black; background-color:#eee; padding:10px; z-index:1; }

• Slide 14 -

  z-index (or stack level) z-index: auto | | inherit Z-axis positions are particularly relevant when boxes overlap visually. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Boxes with higher z-index stacked on top of the boxes with lower z-index. Boxes with the z-index are stacked back-to-front according to document tree order.

• Slide 15 -

  3 columns – centered, static width

• Slide 16 -

  3 columns – centered, static width body { text-align:center; margin:0px; padding:0px; font:12px verdana, arial, helvetica, sans-serif; } #frame { width:750px; margin-right:auto; margin-left:auto; margin-top:10px; text-align:left; border:1px dashed #999; background-color: yellow; } #topcontent { background-color: #eee; }

• Slide 17 -

  3 columns – centered, static width #centercontent { float:left; width:400px; background-color: green; } #leftcontent { float:left; width:175px; background-color: red; } #rightcontent { float:left; width:175px; background-color: red; } #bottomcontent { background-color:#eee; text-align:center; }

• Slide 18 -

  4 columns - variable width

• Slide 19 -

  4 columns - variable width #topcontent { background-color: yellow; } #leftcontent { position: absolute; left:1%; width:20%; top:50px; background:#fff; } #centerleft { position: absolute; left:22%; width:28%; top:50px; background:#fff; }

• Slide 20 -

  4 columns - variable width #centerright { position: absolute; left:51%; width:28%; top:50px; background:#fff; } #rightcontent { position: absolute; left:80%; width:19%; top:50px; background:#fff; }