Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
2
New XHTML elements
To start with page layout two elements
are needed:
◦ div
◦ span
XHTML
<div> element
A block-level element
4
XHTML
<div> Element Example
Configure a page footer area
Embedded CSS:
<style type="text/css">
.footer { font-size: small;
text-align: center; }
</style>
XHTML:
<div class=“footer">Copyright © 2009</div>
5
XHTML
<span> element
An inline-level element
Purpose:
◦ configure a specially formatted area displayed
in-line with other elements, such as within a
paragraph.
There is no line break before and after
the span.
6
XHTML
<span> Element Example
Embedded CSS:
<style type="text/css">
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em;
}
</style>
XHTML:
<p>Your needs are important to us at <span
class=“companyname">Acme Web Design</span>.
We will work with you to build your Web site.</p>
7
THE BOX MODEL
Content
◦ Text & web page
The Box Model
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
9
The CSS border Property
Configures a border on the top, right, bottom,
and left sides of an element
Consists of
◦ border-width
◦ border-style
◦ border-color
No padding configured:
Configuring Padding on
Specific Sides of an Element
Use CSS to configure padding on one or more
sides of an element
◦ padding-bottom
◦ padding-left
◦ padding-right
◦ padding-top
h1 { background-color:#cccccc;
padding:5px; Changes the location of
an element in relation to
color: #000000; where it would
} otherwise appear
#myContent { position: relative;
left:30px;
font-family:Arial,sans-serif;
}
21
Absolute Positioning
Precisely specifies 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;
} 22
Absolute Positioning Example
float Property
24
The h2 text
is displayed
clear Property
in normal
flow. Useful to “clear” or
terminate a float
Values are: left, right,
and both
◦ display:block ;
The element is rendered as a block element – even if it is
actually an inline element,
such as a hyperlink.
◦ display:inline;
The element will be rendered as an inline element – even
if it is actually a block element – such as a <li>.
26
Z-Index Property
Modifies the stacking order of
elements on a Web page.
27
Checkpoint 1
28
PAGE LAYOUT
Page Layout Design Techniques
Ice Design
◦ AKA rigid or fixed design
◦ Fixed-width, usually at left margin
Jello Design
◦ Page content typically centered
◦ Often configured with a fixed or percentage width
such as 80%
Liquid Design
◦ Page expands to fill the browser at all resolutions.
31
CSS Page Layout
Example
Except for imagelogo, all elements
on this page follow normal flow
Two Column
Page Layout
wrapper contains the two
columns – sets default
background color
Left-column navigation
◦ float: left;
◦ width:100px;
Right-column content
◦ margin-left: 100px;
33
Two Column
body {margin: 0;
font-family: Verdana, Arial, sans-serif; }
#wrapper { background-color :#e8b9e8;
color: #000066;
width: 100%;
Page Layout
min-width :800px; }
#leftcolumn { float: left;
width: 100px; }
#rightcolumn { margin-left :100px;
background-color :#ffffff;
color :#000000; }
#logo { background-color :#eeeeee;
color: #cc66cc;
font-size :x-large;
border-bottom: 1px solid #000000;
padding: 10px; }
.content {padding :20px 20px 0 20px; }
#floatright {margin :10px;
float: right; }
#footer {font-size: xx-small;
text-align: center;
clear: right;
padding-bottom: 20px; }
div#leftcolumn a { text-decoration :none;
margin: 15px; display :block; } 34
Deciding to Configure a class or id
Configure a class:
◦ 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.
Configure an id:
◦ 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.
35
Choosing a Name for a class or an id
A class or id name should be descriptive of the
purpose:
◦ such as nav, news, footer, etc.
Source: http://code.google.com/webstats
36
CONFLICT
RESOLUTION
The
Cascade
40
Example: Specificity
In-line style, Id, Class, Element
p{} {0,0,0,1} 1 (one element selector)
div p { } {0,0,0,2} 2 (two element selectors)
.sith {0,0,1,0} 10 (one class selector)
div p.sith { } {0,0,1,2} 12 (two element selectors and a class selector)
#sith {0,1,0,0} 100 (one id selector)
body p {} {0,0,0,2} 2 (two element selectors)
p {} {0,0,0,1} 1 (one element selector)
ul li { } {0,0,0,2} 2 (two elements)
ul ol li .red { } {0,0,1,3} 13 (one class, three elements)
41
Summary
This chapter introduced you to using Cascading
Style Sheets to configure page layouts.
42