This site uses cookies to deliver our services and to show you relevant ads and presentations. By clicking on "Accept", you acknowledge that you have read and understand our Cookie Policy , Privacy Policy , and our Terms of Use.
X

Download Web Page Layout PowerPoint Presentation


Login   OR  Register
X


Iframe embed code :



Presentation url :

X

Description :

Download free Web Page Layout PowerPoint Presentation

Tags :

web page layout | web layout | website designing | web design

Home / Computers & Web / Computers & Web Presentations / Web Page Layout PowerPoint Presentation

Web Page Layout PowerPoint Presentation

Ppt Presentation Embed Code   Zoom Ppt Presentation

About This Presentation


Description : Download free Web Page Layout PowerPoint Presentation Read More

Tags : web page layout | web layout | website designing | web design

Published on : May 31, 2016
Views : 136 | Downloads : 0


Download Now

Share on Social Media

             

PowerPoint is the world's most popular presentation software; you can create professional Web Page Layout powerpoint presentation with this powerful software easly. And give your presentation on Web Page Layout in conference, a school lecture, a business proposal or in webinar.

Uploader spend their valuable time to create this Web Page Layout powerpoint presentation slides, to share their knowledgable content with the world. This ppt presentation uploaded by quicker in their relavent Computers & Web category is available for free download and use according to your industries likefinance,marketing,education,health and many more.

SlidesFinder.com provides a platform for marketers, presenters and educationists along with being the preferred search engine for professional PowerPoint presentations on the Internet to upload your Web Page Layout ppt presentation slides to BUILD YOUR CROWD!!

User Presentation
Related Presentation
Free PowerPoint Templates

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