1 / 31

15 Layout

15 Layout. Controlling the position of elements Creating site layouts Designing for different sized screens. to control where each element sits on a page and how to create attractive page layouts.

otto
Télécharger la présentation

15 Layout

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 15 Layout Controlling the position of elements Creating site layouts Designing for different sized screens

  2. to control where each element sits on a page and how to create attractive page layouts. • different ways to position elements using normal flow, relative positioning, absolute positioning and floats • how various devices have different screen sizes and resolution, and how this affects the design process. • difference between fixed width and liquid layouts, and how they are created • use grids to make your page designs look more professional.

  3. Key Concepts in PositioningElements • CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box. • Block-level elements start on a new line • Examples include: <h1> <p> <ul> <li> • Inlineelementsflow in between surrounding text • Examples include: <img> <b> <i>

  4. Boxen • Block-level elements

  5. Boxes • Inlineelements

  6. Containing Elements • If one block-level element sits inside another block-level element then the outer box is known as the containing or parent element.

  7. Controlling thePosition of Elements • CSS has the following positioning schemes • Normalflow • RelativePositioning • Absolute positioning

  8. Position of Elements • Normal Relative Absolute

  9. box offset properties Fixed Positioning Floating Elements

  10. Normal flow • position:static • chapter-15/normal-flow.html

  11. Relative Positioning • position:relative • chapter-15/position-relative.html

  12. Absolute positioning • position:absolut

  13. Absolute positioning • position:absolute • chapter-15/position-absolute.html

  14. Fixed position • position:fixed • chapter-15/position-fixed.html

  15. Overlapping elements • z-index • chapter-15/z-index.html

  16. Floating elements • Float • chapter-15/float.htmld

  17. Using float to place elements side by side • chapter-15/using-float.html

  18. Clearing floats • Clearchapter-15/clear.html

  19. Parents of floated elements Problem & solution • chapter-15/float-problem.html • chapter-15/float-solution.html

  20. Creating multi-column layouts with floats • Width • Float • Margin • chapter-15/columns-two.html • chapter-15/columns-three.html

  21. Screen Sizes • designingfor the web, you are faced with the unique challenge that different users will have different sized screens.

  22. Screen Sizes

  23. PageSizes • designers often try to create pages of around 960-1000 pixels wide

  24. Fixed Width Layouts • Fixed width layout designs do notchange size as the user increases or decreases the size of their browserwindow.

  25. LiquidLayouts • stretch and contract as the user increases or decreases the size of their browser window

  26. Fixed Width layoutLiquid Layout • chapter-15/fixed-width-layout.html • chapter-15/liquid-layout.html

  27. Layout Grids • use a grid structure to help them position items on a page, and the same is true for web designers

  28. Using the 960.GS Grid chapter-15/grid-layout.html

  29. Mulitiple Style Sheets • @import • chapter-15/multiple-style-sheets-import.html • link • chapter-15/multiple-style-sheets-link.html

  30. Summary • <div> elements are often used as containing elements to group together sections of a page • Browsers display pages in normal flow unless you specify relative, absolute, or fixed positioning • The float property moves content to the left or right of the page and can be used to create multi-column layouts. (Floated items require a defined width.) • Pages can be fixed width or liquid (stretchy) layouts

  31. Summary • Designers keep pages within 960-1000 pixels wide, and indicate what the site is about within the top 600 pixels (to demonstrate its relevance without scrolling). • Grids help create professional and flexible designs • CSS Frameworks provide rules for common tasks • You can include multiple CSS files in one page

More Related