Web Development Design Foundations with XHTML Chapter 6
Web Development & Design Foundations with XHTML Chapter 6 Key Concepts
Learning Outcomes n In this chapter, you will learn about: n n n 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
CSS Page Layout Overview n W 3 C Recommendations for CSS level 2 published in 1998 n It took years for reliable browser support of CSS n Present Day: n It is common practice to design web page layouts with CSS Examples: n n http: //www. disability. gov http: //www. wired. com http: //www. espn. com http: //www. trugreen. com 3
CSS Page Layout Advantages n n n n 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
CSS Page Layout Disadvantages n There still remain issues with the lack of uniform browser support of CSS n 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
n Content n n Area between the content and the border Border n n The Box Model Padding n n Text & web page elements in the container Between the padding and the margin Margin n Determines the empty space between the element and adjacent elements 6
Normal Flow n Browser display of elements in the order they are coded in the Web page document
Relative Positioning h 1 { background-color: #cccccc; padding: 5 px; color: #000000; } #my. Content { position: relative; left: 30 px; font-family: Arial, sans-serif; } Changes the location of an element in relation to where it would otherwise appear 8
Absolute Positioning Precisely specifies the location of an element in the browser window h 1 { background-color: #cccccc; padding: 5 px; color: #000000; } #content {position: absolute; left: 200; top: 100; font-family: Arial, sans-serif; width: 300; } 9
Absolute Positioning Example
Float Property h 1 { background-color: #cccccc; padding: 5 px; color: #000000; } p { font-family: Arial, sans-serif; } #yls {float: right; margin: 0 0 5 px; border: solid; } n Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using the float property. 11
Display Property n Configures how and if an element is displayed n display: none ; n n display: block ; n n The element is rendered as a block element -even if it is actually an inline element, such as a hyperlink. display: inline; n n The element will not be displayed. The element will be rendered as an inline element – even if it is actually a block element – such as a <li>. You’ll work with the display property in Chapter 7. 12
Z-Index Property n Modifies the stacking order of elements on a Web page. n The default z-index value is “ 0". n Elements with higher zindex values will appear stacked on top of elements with lower z-index values rendered on the same area of the page. 13
CSS Properties Used with Page Layout & Formatting See Table 6. 1 in your text for an alphabetical listing. n Also see Appendix C n 14
Checkpoint 6. 1 1. State three reasons to use CSS for page layout on a commercial site being developed today. 2. Describe the difference between relative and absolute positioning. 3. Describe the purpose of the z-index CSS property. 15
CSS Page Layout Example Except for imagelogo, all elements on this page follow normal flow
Two Column Page Layout n wrapper contains the two columns – sets default background color n Left-column navigation n Right-column content n n float: left; width: 100 px; margin-left: 100 px; floatright (flower photo) n float: right; 17
body {margin: 0; font-family: Verdana, Arial, sans-serif; } #wrapper { background-color: #e 8 b 9 e 8; color: #000066; } #leftcolumn { float: left; width: 100 px; } #rightcolumn { margin-left: 100 px; background-color: #ffffff; color: #000000; } #logo { background-color: #eeeeee; color: #cc 66 cc; font-size: x-large; border-bottom: 1 px solid #000000; padding: 10 px; }. content {padding: 20 px 0 20 px; } #floatright {margin: 10 px; float: right; }. footer {font-size: xx-small; text-align: center; clear: right; padding-bottom: 20 px; }. nav. Bar{ text-decoration: none; margin: 15 px; display: block; } Two Column Page Layout 18
Deciding to Configure a class or id n Configure a class: n n Configure an id: n n If the style may apply to more than one element on a page Use the. (dot) notation in the style sheet. Use the class attribute in the XHTML. If the style is specific to only one element on a page Use the # notation in the style sheet. Use the id attribute in the XHTML. A class name should be descriptive of the 19
Choosing a Name for a class n A class name should be descriptive of the purpose: n n such as nav, news, footer, and so on The the 10 most commonly used class names are: footer, menu, title, small, text, content, header, nav, copyright, and button. n Source: http: //code. google. com/webstats 20
CSS Debugging Tips n n n n Manually check syntax errors Use W 3 C CSS Validator to check syntax errors n http: //jigsaw. w 3. org/css-validator/ Configure temporary background colors Configure temporary borders Use comments to find the unexpected cascade Don’t expect your pages to look exactly the same in all browsers! Be patient! 21
CSS Page Layout Resources n For additional study: n http: //glish. com/css/ n Large collection of CSS page layouts and links to tutorials http: //www. websitetips. com/css/index. shtml n Comprehensive list of tutorials and CSS-related sites http: //www. meyerweb. com/eric/css/ n The web site of Eric Meyer, a leading-edge web developer http: //www. w 3. org/Style/CSS/learning n W 3 C’s list of CSS resources http: //www. bluerobot. com/web/layouts/ n A “reservoir” of CSS page layouts http: //www. blooberry. com/indexdot/css/ n CSS syntax reference list n n n 22
Summary n This chapter introduced you to using Cascading Style Sheets to configure page layouts. n Be patient with yourself and plan on reviewing the CSS resources material. It takes a while to grasp this technology. 23
- Slides: 23