Download Web Page Layout PowerPoint Presentation

Iframe embed code :

<iframe src='http://www.slidesfinder.com/embedpresentation/MzQ4NA==' width='630' height='570' frameborder='0' marginwidth='0' marginheight='0' scrolling='no' allowfullscreen></iframe>

Presentation url :

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

About This Presentation

quicker

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

« Understanding URL PowerPoint Presentation

Fitness For All PowerPoint Presentation »

User Presentation

Google Search Engine

by bestpresentation

Computer Generation

by freelancepresenter

Social Media Optimization Tips

by freelancepresenter

Learn Networking

by onlinesearch

Virtual Reality

by quicker

Social Networking All Florida PETS

by quicker

Cascading Style Sheets CSS

by quicker

Introduction to the Internet

by quicker

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

Slidesfinder is a sharing website for PowerPoint presentations search and share. Find your interest in the form of powerpoint presentations on slidesfinder and save your valuable time . On Slidesfinder you get presentations from our huge library of professional ppt presentations. We believe in making your search INFORMATIVE and FUN. Find your best ppt presentation from a pool of PowerPoint presentations stacked under important industry categories like business & management, heath & Wellness,eduction & training etc. We provide unique informative PowerPoint presentation for marketers, presenters and educationists. These professional PowerPoint presentations are uploaded by professionals from across numerous industry segments.These ppt presentations are available for FREE download.

Not just finding your interest, but facilitate you broadcast your interest. We have created this platform for easy sharing of PowerPoint presentations, ensuring that these presentations get maximum exposure. Create your slidesfinder account and upload PowerPoint presentations for free, share on social media platforms and BUILD YOUR CROWD WITH PRESENTATION !!

The Great Buddha says, "Share your knowledge.It’s a way to achieve immortality"! So, start sharing knowledge and we are here to make that immortal !!

Re-productivity of content are not allowed. Without prior written permission from author, commercial use of any content is illegal.

Download Web Page Layout PowerPoint Presentation

Web Page Layout PowerPoint Presentation

About This Presentation

Share on Social Media

Web Page Layout Presentation TranscriptCollapse/Expand

Web Page Layout
Presentation Transcript
Collapse/Expand