Download Web Developer & Design Foundations with XHTML

Web Developer & Design
Foundations with XHTML
Chapter 10
Key Concepts
1
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
2
© 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.com
ESPN http://www.espn.com
TruGreen http://www.trugreen.com
3
© 2007 Pearson Education
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
© 2007 Pearson Education
CSS Page Layout
Disadvantages
• 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.
5
© 2007 Pearson Education
• Content
– Text & web page
elements in the
container
• Padding
The Box Model
– 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
6
© 2007 Pearson Education
CSS Positioning
Properties (1)
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
#myContent { position: relative;
left:30px;
font-family:Arial,sans-serif;
}
© 2007 Pearson Education
• Relative
– Use to slightly
change the location
of an element in
relation to where it
would otherwise
appear
7
CSS Positioning
Properties (2)
• Absolute
h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
#content {position: absolute;
left:200;
top:100;
font-family:Arial,sans-serif;
width:300;
}
– Use to precisely
specify the location
of an element in
the browser
window
8
© 2007 Pearson Education
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.
9
© 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.
10
© 2007 Pearson Education
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 zindex values will appear
stacked on top of
elements with lower zindex values rendered on
the same position of the
page.
11
© 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
12
© 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.)
© 2007 Pearson Education
13
Two Column Page
Layout
A common design for a web page is a twocolumn layout with left-column navigation and
right-column logo and content.
14
© 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; }
© 2007 Pearson Education
Two Column
Page Layout
15
Navigation Layout
Using 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).
16
© 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>
17
</ul>
© 2007 Pearson Education
Three Column
Page 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!
© 2007 Pearson Education
18
Three Column
Layout
• Review the CSS on
threecolumn.htm from the
Student Files
19
© 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?
20
© 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.
21
© 2007 Pearson Education
Using CSS
to Style a Form
• Moderate Approach
– Use a table to format the form but
configure styles instead of XHTML table
table {border:solidattributes.
3px
#000000;width:100%;}
td {padding: 5px;margin: 0px;}
.mylabel {text-align:right;}
22
© 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;}
© 2007 Pearson Education text-align:right;}
.labelCol{float:left;width:100px;
23
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" />
24
© 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!
25
© 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/
26
– CSS syntax reference list
© 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.
27
© 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.
28
© 2007 Pearson Education