Skip to content

class08.md

Latest commit

 

History

History
94 lines (67 loc) · 3.12 KB

class08.md

File metadata and controls

94 lines (67 loc) · 3.12 KB

Layout

  • Building Blocks 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.
    1. Block-level elements start on a new line
    2. Inline elements flow in between surrounding text.

CSS has the following positioning schemes that allow you to control the layout of a page: normal flow, relative positioning, and absolute positioning.

  • Normal flow
  • Relative Positioning
  • bsolute positioning

To indicate where a box should be positioned, you may also need to use box offset properties to tell the browser how far from the top or bottom and left or right it should be placed. (You will meet these when we introduce the positioning schemes.

  • Screen size*:

Different visitors to your site will have different sized screens that show different amounts of information, so your design needs to be able to work on a range of different sized screens. Screen Resolution Resolution refers to the number of dots a screen shows per inch. Page Sizes:Because screen sizes and display resolutions vary so much, web designers often try to create pages of around 960-1000 pixels wide . Liquid layout designs stretch and contract as the user increases or decreases the size of their browser window.

ccreen size

  • creen Resolution

Resolution refers to the number of dots a screen shows per inch.

  • Page Sizes

designers often try to create pages of around 960-1000 pixels wide (since most users will be able to see designs this wide on their screens).

Fixed Width Layouts

  • Advantages

  1. Pixel values are accurate at controlling size and positioning of elements.

  2. The designer has far greater control over the appearance and position of items on the page than with liquid layouts.

  3. You can control the lengths of lines of text regardless of the size of the user's window.

  • Disadvantages

  1. You can end up with big gaps around the edge of a page.

  2. f the user's screen is a much higher resolution than the designer's screen, the page can look smaller and text can be harder to read.

  3. The design works best on devices that have a site or resolution similar to that of desktop or laptop computers.

Liquid Layouts Liquid layout designs stretch and contract as the user increases or decreases the size of their browser window. They tend to use percentages

CSS Frameworks

CSS frameworks aim to make your life easier by providing the code for common tasks, such as creating layout grids, styling forms, creating printer-friendly versions of pages and so on.

frameworks

grid

  • elements are often used as containing elements to group together sections of a page.

  • Pages can be fixed width or liquid (stretchy) layouts.

  • 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).