1 / 8

Chapter 11

Chapter 11. Introducing CSS Layout. Types of Web Page Layouts. Fixed width Most control over how your design looks Can inconvenience some of your visitors Small monitors cause much scrolling Large monitors end up with wasted space Liquid Grow or shrink to fit the browser window Elastic

adie
Download Presentation

Chapter 11

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. Chapter 11 Introducing CSS Layout

  2. Types of Web Page Layouts • Fixed width • Most control over how your design looks • Can inconvenience some of your visitors • Small monitors cause much scrolling • Large monitors end up with wasted space • Liquid • Grow or shrink to fit the browser window • Elastic • Combination of the advantages of both designs

  3. Fixed Width • Regardless of the browser window, the content’s width remains the same • Sometimes the design can cling to the left edge or the window or (more common) center in the middle • Usually below 1,000 px wide • Causes the use of scroll bars • Most common width is 960 • Most websites are fixed width • Example: NY Times

  4. Liquid • Page gets wider or narrower as your visitor resizes the window • Makes the best use of the browser real estate • More challenging to make the design look good at the various sizes • On a very large monitor, the design looks ridiculously wide and difficult to read • Example: Google Maps

  5. Elastic • A fixed-width design with a twist—type size flexibility • You define the width using em values • An em changes size when the browser’s font size changes • Design’s width ultimately based on the browser’s base font size • It is almost like “zooming in” • Falling out of favor because the newer browser versions replaced the “increase text size” command with a “page zoom” command. • Thus, Ctrl + enlarges everything on the page

  6. DIV tag • Layout involves putting chunks of content into different regions of the page • DIV tag is the most common element used to do this • Has not inherent formatting properties • It represents a logical grouping of elements or divisions on a page • i.e., logo, banner, navigation bar, other DIV tags, • Use Class or ID names to identify your DIV tags

  7. Delicate Balancing Act • Don’t go crazy with DIVs • A common trap is to believe you must wrap everything on a web page in a <div> tag. • Nav bar an unordered list, no <div>, the <ul> tag is best as long as it contains the main navigation bar links, just add an ID to the <ul> tag • Want to use a pullquote: use the HTML <blockquote> tag. Positioned and floated, it works better than a <div> tag.

  8. Techniques for CSS Layout

More Related