Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Page layouts flexible and fixed layout with CSS

2,876 views

Published on

CSS layout design flexible and fixed layout, how to use clear, float, comparing between html4 and html5, example and assignment

Published in: Education
  • If you want a girl to "chase" you, then you have to use the right "bait". We discovered 4 specific things that FORCE a girl to chase after you and try to win YOU over. copy and visiting... ■■■ http://scamcb.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How long does it take for VigRX Plus to start working? ◆◆◆ http://t.cn/Ai88iYkP
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • System for lasting clear skin, How to get flawless complexion ex-sufferer reveals his secrets ★★★ http://ishbv.com/buk028959/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How will you feel when your Ex boyfriend is in bed with another woman? Don't let this happen. Get him back with ♥♥♥ http://goo.gl/FXTq7P
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ■■■ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Page layouts flexible and fixed layout with CSS

  1. 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. 2. WDS CS KKU Web Design Technology | 2015 2
  3. 3. Layouts Page Header Page Body Page Footer { { { WDS CS KKU Web Design Technology | 2015 3
  4. 4. Layouts – Using <table> vs <div> WDS CS KKU Web Design Technology | 2015 4
  5. 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. 6. Layouts - Using <div> Elements WDS CS KKU Web Design Technology | 2015 6
  7. 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. 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. 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. 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. 11. Fixed And Fluid Layouts Fixable Layout Fluid Layout Web Design Technology | 2015 11
  12. 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. 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. 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. 15. Example Layout HTML5 Web Design Technology | 2015 15 WDS CS KKU
  16. 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. 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

×