Upload
bess
View
37
Download
1
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
1
Web Developer & Design Foundations with XHTML
Chapter 10
Key Concepts
2
© 2007 Pearson Education
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
© 2007 Pearson Education
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.comESPN http://www.espn.comTruGreen http://www.trugreen.com
4
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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.
h1 { background-color:#cccccc;padding:5px;color: #000000;}p { font-family:Arial,sans-serif;}#yls {float:right;margin: 5px;border: solid;}
10
© 2007 Pearson Education
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
© 2007 Pearson Education
CSS Positioning Properties (5)
• Z-indexUsed 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
© 2007 Pearson Education
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
© 2007 Pearson Education
Checkpoint 10.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. In the following code snippet the logo appears under instead of over the images. Explain why. (See your textbook for the code snippet.)
14
© 2007 Pearson Education
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
© 2007 Pearson Education
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; }
Two Column Page Layout
16
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
Three Column Layout
• Review the CSS on threecolumn.htm from the Student Files
20
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
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
© 2007 Pearson Education
Checkpoint 10.3
1. State an advantage of using CSS to style for print.
2. Describe a CSS display problem that you encountered and the steps you took to resolve it.
3. True or False. CSS that validates must always work.
28
© 2007 Pearson Education
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.