Page layouts flexible and fixed layout with CSS

50 %
50 %
Information about Page layouts flexible and fixed layout with CSS

Published on September 29, 2015

Author: ypromdee

Source: slideshare.net

1. PAGE LAYOUTS (FLEXIBLE AND FIXED LAYOUT) WDS CS KKU 322 432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas Computer Science Khon Kaen University Web Design Technology | 2015 1

2. WDS CS KKU Web Design Technology | 2015 2

3. Layouts Page Header Page Body Page Footer { { { WDS CS KKU Web Design Technology | 2015 3

4. Layouts – Using <table> vs <div> WDS CS KKU Web Design Technology | 2015 4

5. Layouts - Using <table> Layout Page using <table> showed 2 Column <table style="width:100%"><tr><td colspan="2" style="background-color:#600; color:#fff"><h1>Header</h1></td></tr><tr valign="top"><td style="background- color:#FF0080; width:20%;text-align:top; "><b>Navigation</b></td><td style="height:200px; text-align:top;">Content</td></tr><tr><td colspan="2" style="background-color:#600; text- align:center; color:#fff">Footer</td></tr> </table> WDS CS KKU Web Design Technology | 2015 5

6. Layouts - Using <div> Elements WDS CS KKU Web Design Technology | 2015 6

7. Example1 <div id="container" style="width:500px”> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background-color:#FFD700; height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © W3Schools.com</div> </div> WDS CS KKU Web Design Technology | 2015 7

8. Layout Using HTML5 header Defines a header for a document or a section nav Defines a container for navigation links section Defines a section in a document article Defines an independent self-contained article aside Defines content aside from the content (like a sidebar) footer Defines a footer for a document or a section details Defines additional details summary Defines a heading for the details element WDS CS KKU Web Design Technology | 2015 8

9. Example2 header { background-color:green; color:white; text-align:center; padding:5px; } nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } section { width:350px; float:left; padding:10px; } footer { background-color:rgb(23, 116, 116); color:white; clear:both; text-align:center; padding:5px; } <header> </header> <nav> </nav> <section> </section> <footer> </footer> /* Html code */ /* CSS code */ /* Output */ WDS CS KKU Web Design Technology | 2015 9

10. Layouts - Using <div> Elements using a unit of measurement like the pixel ex. 800x600, 1024x780 , 1280x800, 1280x960, 1280x1024 pixel The content of the page resizes to adapt to the size of the browser window displaying it or the font used on the page. Using a relative the percent ("%"). Relative layouts are accomplished by using a relative unit like the em using a combination of "em" and "%" as its unit of measurement. 1. Fixed Layout 2. Liquid Layout 3. Elastic Layout 4. Hybrid Layout WDS CS KKU Web Design Technology | 2015 10

11. Fixed And Fluid Layouts Fixable Layout Fluid Layout Web Design Technology | 2015 11

12. Classification float - an element can be pushed to the left or right, allowing other elements to wrap around it. Ex. float:left ,right, none display- The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. Ex. Display > none , block, inline WDS CS KKU Web Design Technology | 2015 12

13. Classification (Cont.) clear use the clear property left right both none visibility hides an element visible hidden collapse WDS CS KKU Web Design Technology | 2015 13

14. CSS Dimension Properties height: width: max-height: max-width: min-hight: min-width: auto length % inherit none length % inherit length % inherit Example. Creative Design Layouts: Getting Out Of The Box WDS CS KKU Web Design Technology | 2015 14

15. Example Layout HTML5 Web Design Technology | 2015 15 WDS CS KKU

16. Web Design Technology | 2015 16 WDS CS KKU Assignmenth1,font=Arial black, ,font color= #FFF color, shadow=2px 2px blur 5px,#33333, spacing with character 5px width:70% height:460px height:300px height:100px width:300px border 5px solid #666 margin=center margin=center margin:20px word spacing10px box1-3 padding 15,10,0,10px, text justify color #6CF #09C lightgrey cornflowerblue rgb(23,116,116)

17. Web Design Technology | 2015 17 <header><h1>header</h1> </header> <nav> Navigition</nav> <section> <article>Box 1 <p>Web design concepts,color setting, background, content, layout, font design, create web by Tools, and graphic tools</p> </article> <article>Box 2 <p>Web design concepts,color setting, background, content, layout, font design, create web by Tools, and graphic tools</p> </article> <article>Box 3 <p>Web design concepts,color setting, background, content, layout, font design, create web by Tools, and graphic tools</p> </article> </section> <footer>web design technology </footer> HTML CODE

#fff presentations

Add a comment

Related pages

CSS: Page Layouts | Lynda.com

CSS: Page Layouts. Skip navigation Lynda ... CSS page layout concepts like, "float" in positioning elements, and move on to exploring different types of ...
Read more

Fixed vs. Fluid vs. Elastic Layout: What's The Right One ...

... Flexible Layouts: ... uses a fluid Web page layout, ... Discusses the pros and cons of the three types of CSS layouts: fixed, ...
Read more

Fixed Width Layouts Versus Liquid Layouts - HTML, CSS, and ...

Fixed Width Layouts ... of the entire page is flexible depending ... viewing the page. Fixed width layouts allow a designer more ...
Read more

How To Design For Flexible Layouts In Css: Page Layouts

Designing for flexible layouts provides you with in ... How To Design For Flexible Layouts In Css: Page ... That means that just like fixed layouts, ...
Read more

Flexible Web Design : Types of Web - page Layouts - Peachpit

Flexible Web Design: Types of Web ... flexible layouts” can mean different ... of layout because before CSS became usable for page layout, ...
Read more

Creating a fixed-width layout with CSS - TechRepublic

Creating a fixed-width layout with CSS. Columnist Michael Meadhra shares his tips for building fixed-width, CSS-based page layouts.
Read more

Create fluid layouts with HTML5 and CSS3 | Creative Bloq

HTML; Create fluid layouts with HTML5 and CSS3; Create fluid layouts with HTML5 and CSS3. Posted HTML Ben Frain explains how to create fluid layouts by ...
Read more

Documentation & Demos – YAML CSS Framework

Flexible Layouts. The CSS2 Box Model is best suited for fixed measurements (i.e. pixels). The total width of a container is determined by adding the ...
Read more

Layout a Page with CSS: Part 1 - Tutorial: Part 2

Beginners CSS Tutorial For Web Designers. Beginners CSS Tutorial For Web Designers. Menu . Home; Introduction to CSS. ... Layout a Page with CSS Continued ...
Read more