BooksChapter6

BooksChapter6 - Web Development & Design Foundations with...

Info iconThis preview shows pages 1–9. Sign up to view the full content.

View Full Document Right Arrow Icon
Web Development & Design Web Development & Design Foundations with XHTML Foundations with XHTML Chapter 6 Key Concepts
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Learning Outcomes Learning Outcomes In this chapter, you will learn about: Reasons to use CSS for page layout Relative and absolute positioning The CSS Box Model Configuring basic page layouts using CSS Configuring two column page layouts using CSS Locating CSS page layout resources 2
Background image of page 2
CSS Page Layout Overview CSS Page Layout Overview W3C Recommendations for CSS level 2 published in 1998 It took years for reliable browser support of CSS Present Day: It is common practice to design web page layouts with CSS Examples: http://www.disability.gov http://www.wired.com http://www.espn.com http://www.trugreen.com 3
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CSS Page Layout Advantages CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility Ability to define styles for multiple media types Support of the Semantic Web 4
Background image of page 4
CSS Page Layout CSS Page Layout Disadvantages Disadvantages There still remain issues with the lack of uniform browser support of CSS If you are already adept at designing page layout using XHTML tables, your productivity will temporarily drop as you learn to configure page layout with CSS. 5
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
The Box Model The Box Model Content Text & web page elements in the container Padding Area between the content and the border Border Between the padding and the margin Margin Determines the empty space between the element and adjacent elements 6
Background image of page 6
Normal Flow Normal Flow Browser display of elements in the order they are coded in the Web page document Figure 6.5 Figure 6.6
Background image of page 7

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Relative Positioning Relative Positioning Changes the location of an element in relation to where it would otherwise appear 8 h1 { background-color:#cccccc; padding:5px; color: #000000; } #myContent { position: relative; left:30px; font-family:Arial,sans-serif;
Background image of page 8
Image of page 9
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 12/03/2011 for the course INFS 3380 taught by Professor Ahmed during the Fall '11 term at Toledo.

Page1 / 25

BooksChapter6 - Web Development & Design Foundations with...

This preview shows document pages 1 - 9. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online