1 / 28

Web Developer & Design Foundations with XHTML

Web Developer & Design Foundations with XHTML. Chapter 10 Key Concepts. 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 single column page layouts using CSS

bess
Download Presentation

Web Developer & Design Foundations with XHTML

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. Web Developer & Design Foundations with XHTML Chapter 10 Key Concepts

  2. 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 single column page layouts using CSS • Configuring two column page layouts using CSS • Configuring three column page layouts using CSS • Configuring navigation using lists • Styling for print media • CSS page layout resources

  3. CSS Page Layout Overview • The idea of using CSS for page layout is not new • W3C Recommendations for CSS level 2 published in 1998 • In the past year or so --- An increasing number of commercial sites are using CSS for page layout Wired http://www.wired.com ESPN http://www.espn.com TruGreen http://www.trugreen.com

  4. CSS Page LayoutAdvantages • 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

  5. CSS Page LayoutDisadvantages • There is one large disadvantage – the use of this technology is not yet uniformly supported by browsers. • This current disadvantage will be less of an issue in the future people stop using old browsers and the newer browsers comply with standards. Examples in the text have been tested with Internet Explorer 6, Netscape 7, Opera 7.5, and Firefox 1.5, and Mozilla 1.7.

  6. The Box Model • Content • Text & web page elements in the container • Padding • Area between the content and the margin • Border • Between the padding and the margin • Margin • Determines the empty space between the element and adjacent elements

  7. CSS Positioning Properties (1) • Relative • Use to slightly change the location of an element in relation to where it would otherwise appear h1 { background-color:#cccccc; padding:5px; color: #000000; } #myContent { position: relative; left:30px; font-family:Arial,sans-serif; }

  8. CSS Positioning Properties (2) • Absolute • Use to precisely specify the location of an element in the browser window h1 { background-color:#cccccc; padding:5px; color: #000000; } #content {position: absolute; left:200; top:100; font-family:Arial,sans-serif; width:300; }

  9. h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:Arial,sans-serif; } #yls {float:right; margin: 5px; border: solid; } CSS Positioning Properties (3) • Float • 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.

  10. CSS Positioning Properties (4) • Display • The display property configures how and if an element is displayed. • An element configured with display:none will not be displayed. This is sometimes used when configuring styles to print a web page • An element configured with display:block will be rendered as a block element (even if it is actually an inline element, such as an anchor tag.

  11. CSS Positioning Properties (5) • Z-index • Used to modify the stacking order of elements on a web page. • The default z-index value is “0". • Elements with higher z-index values will appear stacked on top of elements with lower z-index values rendered on the same position of the page.

  12. CSS Properties Used with Page Layout & Formatting • See Table 10.1 in your text for an alphabetical listing. • Also see the Web Developer’s Handbook on the Student CD

  13. Checkpoint 10.1 • State three reasons to use CSS for page layout on a commercial site being developed today. • Describe the difference between relative and absolute positioning. • In the following code snippet the logo appears under instead of over the images. Explain why. (See your textbook for the code snippet.)

  14. Two Column Page Layout A common design for a web page is a two-column layout with left-column navigation and right-column logo and content.

  15. Two Column Page Layout body {margin:0px; font-family:Verdana, Arial, sans-serif; } #leftcolumn { float:left; width:100px; background-color:#eeeeee; height:400px; } #rightcolumn { } #logo{background-color:#eeeeee; color: #cc66cc; font-size:x-large; border-bottom: 1px solid #000000; padding:10px; } .content {padding:20px 0px 0px 150px; } #floatright {margin:10px; float:right; } .footer {font-size:xx-small; text-align:center; clear:right; } .navBar{ color:#000066; text-decoration:none; padding:3px; margin: 15px; display:block; } a.navBar:link {color:#000066; } a.navBar:visited {color:#000000; } a.navBar:hover {color:#cc66cc; }

  16. Navigation LayoutUsing Lists • Navigation link areas are actually “lists" of links • Some web design gurus argue that Navigation links should be configured using XHTML list elements • Use the list-style-image property to configure the “bullet" list-style-image:url(arrow.gif).

  17. CSS & XHTML Navigation List • CSS: .navBar{ color:#000066; text-decoration:none; padding:3px; margin: 15px; display:block; } • XHTML:<ul class="navBar"> <li><a class="navBar" href="home.htm">Home</a></li> <li><a class="navBar" href="spring.htm">Spring</a></li> <li><a class="navBar" href="summer.htm">Summer</a></li> <li><a class="navBar" href="fall.htm">Fall</a></li> <li><a class="navBar" href="winter.htm">Winter</a></li> </ul>

  18. Three ColumnPage Layout • Often a web page layout will consist of a header across the top of the page with three columns below: navigation, content, and sidebar. • If you are thinking about this layout as a series of boxes—you’re thinking along the right lines for configuring pages using CSS!

  19. Three Column Layout • Review the CSS on threecolumn.htm from the Student Files

  20. Checkpoint 10.2 1. The two column and three column page layouts you created in the Hands-On Practice did not use absolute positioning. Open the twocolumn.htm and threecolumn.htm pages in a browser. Resize the browser window. Describe what happens. What type of page design layout: ice, jello, or liquid is being used?

  21. Checkpoint 10.2 2. State a reason to use an unordered list to configure navigation links. 3. Describe how to choose whether to configure a XHTML tag, create a class, or create an id when working with CSS.

  22. Using CSSto Style a Form • Moderate Approach • Use a table to format the form but configure styles instead of XHTML table attributes. table {border:solid 3px #000000;width:100%;} td {padding: 5px;margin: 0px;} .mylabel {text-align:right;}

  23. Using CSS to Style a Form “Pure" CSS Approach • Do not use a table to format the form. Use CSS divs and spans with positioning properties to configure the page. #myForm {border:3px solid #000000; padding:10px;margin:10px;} .myRow {height:30px;} .myRowComments {margin-bottom:20px;} .labelCol{float:left;width:100px; text-align:right;}

  24. CSS Styling for Print • Create an external style sheet with the configurations for browser display. • Create a second external style sheet with the configurations for printing. • Connect both of the external style sheets to the web page using two<link> tags. <link rel="stylesheet" href="wildflower.css" type="text/css" media="screen" /> <link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print" />

  25. CSS Debugging Tips • Manually check syntax errors • Use W3C CSS Validator to check syntax errors • http://jigsaw.w3.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!

  26. CSS Page Layout Resources • For additional study: • http://glish.com/css/ • Large collection of CSS page layouts and links to tutorials • http://www.websitetips.com/css/index.shtml • Comprehensive list of tutorials and CSS-related sites • http://www.meyerweb.com/eric/css/ • The web site of Eric Meyer, a leading-edge web developer • http://www.w3.org/Style/CSS/learning • W3C’s list of CSS resources • http://www.bluerobot.com/web/layouts/ • A “reservoir” of CSS page layouts • http://www.blooberry.com/indexdot/css/ • CSS syntax reference list

  27. Checkpoint 10.3 • State an advantage of using CSS to style for print. • Describe a CSS display problem that you encountered and the steps you took to resolve it. • True or False. CSS that validates must always work.

  28. Summary • This chapter introduced you to using Cascading Style Sheets to configure page layouts. • This technique is difficult for even experienced web developers to master. • Be patient with yourself and plan on reviewing the CSS resources material. It takes a while to grasp this technology.

More Related