Transcript Welcome to WEB 150! - SC4 CIS Student Sites

Web Development & Design
Foundations with XHTML
Chapter 7
Key Concepts
Learning
Outcomes

In this chapter, you will learn how to :

Code relative hyperlinks to Web pages in folders within a Web
site
Configure a hyperlink to a fragment identifier internal to a Web
page
Add interactivity to Web pages with CSS pseudo-classes
Configure a navigation layout list with CSS
Configure three-column page layouts using CSS
Configure CSS for screen, print, and mobile device display
Utilize the “cascade” in CSS






2
More on
Relative Linking
Relative links from the
home page:
index.html
<a href="contact.html">Contact</a>
 <a href="products/collars.html">Collars</a>
 <a href="../index.html">Home</a>
 <a href="../services/bathing.html">Dog Bathing</a>

3
Opening a Link
in a New Browser Window

The target attribute on the anchor element
opens a link in a new browser window or new
browser tab.
<a href="http://yahoo.com"
target="_blank">Yahoo!</a>
4
XHTML Linking to Fragment Identifiers
A link to a part of a Web page
 Also called named fragments, fragment ids
 Two components:

1. The element that identifies the named fragment of a
Web page. This requires the id attribute.
<div id=“top”> ….. </div>
2. The anchor tag that links to the named fragment of a
Web page. This uses the href attribute.
<a href=“#top”>Back to Top</a>
Note the use of the # in the anchor tag!
5
CSS Pseudo-classes

Pseudo-classes and the anchor element
◦ link – default state
for a hyperlink
◦ visited –a hyperlink that
has been visited
◦ focus – triggered when
the hyperlink has focus
a:link {color:#000066;}
a:visited {color:#003366;}
a:focus {color:#FF0000;}
a:hover {color:#0099CC;}
a:active {color:#FF0000;}
◦ hover – triggered when
the mouse moves over the hyperlink
◦ active – triggered when the hyperlink is being clicked
CSS
Pseudo-classes
<style type="text/css">
a:link { background-color: #ffffff;
color: #ff0000;
}
a:visited { background-color: #ffffff;
color: #00ff00;
}
a:hover { background-color: #ffffff;
color: #000066;
text-decoration: none;
}
</style>
7
Styling CSS “buttons”
8
<style type="text/css">
#button a {
border: 2px inset #cccccc;
padding: 3px 15px;
color: #FFFFFF;
background-color: #000066;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration:none;
}
#button a:link {
color: #FFFFFF;
}
#button a:visited {
color: #CCCCCC;
}
#button a:focus {
color: #DDA0DD;
background-color:#000000;
border:2px outset #000000;
}
#button a:hover {
color: #66CCFF;
border:2px outset #cccccc;
}
#button a:active {
color: #DDA0DD;
border:2px outset #000000;
}
</style>
CSS “buttons”
<h1>CSS Buttons!</h1>
<div id="button">
<a href="index.html">Home</a>
<a href="products.html">Products</a>
<a href="sevices.html">Services</a>
<a href="contact.html">Contact</a>
<a href="about.html">About</a>
</div>
9
Navigation Layout
Using Lists

Navigation hyperlink areas are sematically
“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).
10

CSS:
CSS & XHTML
Navigation List
div#leftcolumn ul { list-style-image:url(arrow.gif);
}
div#leftcolumn a { text-decoration:none;
}

XHTML:
<div id="leftcolumn">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="spring.html">Spring</a></li>
<li><a href="summer.html">Summer</a></li>
<li><a href="fall.html">Fall</a></li>
<li><a href="winter.html">Winter</a></li>
</ul>
</div>
twocolumn1.html
11
CSS & XHTML Navigation List

CSS:
div.nav li { display:inline;
list-style-type:none; }
div.nav a { padding:5px;
background-color:#e8b9e8;
color:#000066;
text-decoration:none;
font-family:Verdana, Arial, sans-serif;
text-align:center; }
div.nav a:link {color:#000066;
background-color:#e8b9e8; }
div.nav a:visited {color:#000000;
background-color:#cc66cc; }
div.nav a:focus {color:#cccccc;
background-color:#000000}
div.nav a:hover {color:#ffffff;
background-color:#cc66cc; }
div.nav a:active {color:#cccccc;
background-color:#cc66cc; }
home0.html
 XHTML:
<div class="nav“>
<ul>
<li><a href="page1.html">Home</a></li>
<li><a href="spring.html">Spring</a></li>
<li><a href="summer.html">Summer</a></li>
<li><a href="fall.html">Fall</a></li>
<li><a href="winter.html">Winter</a></li>
</ul>
</div>
Checkpoint 7.1
1. State a reason to use an unordered list to configure
navigation links.
2.You are using CSS pseudo-classes on a Web page to
configure the navigation links to look like buttons.
You want the “regular” links in the Web page content to
be configured as they normally would (not look like a
button).
Describe how you could configure the styles and
XHTML to accomplish this.
Three Column
Page Layout


A common Web page layout consists 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!
14
Three Column
Layout

container sets default background
color, text color, and an minimum
width

Left-column navigation
◦ float: left;
◦ width:150px;

Right-column content
◦ float: right;
◦ width:200px;

Center column – uses the
remaining screen room available
room after the floating columns
display
◦ margin: 0 200px 0 150px;

Footer – clears the float
◦ clear:both;
15
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 /> elements.
<link rel="stylesheet" href="wildflower.css" type="text/css" media="screen" />
<link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print" />
16
CSS Styling for the Mobile Web
eMarketer.com predicts 134.3 million
mobile Internet users by 2013
 Three Approaches to Mobile Web:

◦ Develop a new mobile site with a .mobi TLD
◦ Create a separate Web site hosted within
your current domain targeted for mobile
users
◦ Use CSS to create a style sheet to configure
your current Web site for display on mobile
devices.
<link href="mobile.css"
rel="stylesheet" type="text/css"
media="handheld" />
Mobile Web Limitations
Small Screen Size
 Low bandwidth
 Limited fonts
 Limited color
 Awkward controls
 Lack of Flash support
 Limited processor and memory
 Cost per kilobyte

Design Techniques for Mobile Web










One column design
Avoid floats, tables, frames
Descriptive page title
Descriptive heading tags
Optimize images
Descriptive alt text for images
Elminate unneeded images
Navigation in lists
Provide “Skip to Content” hyperlink
Provide “Back to Top” hyperlink
Notice the overlap between between these techniques and designing to
provide for accessibility?
The
Cascade

This “cascade” applies the styles in the order of precedence.

Site-wide global styles can be configured in the external CSS.

Styles can be overridden when needed for a specific page or
element.
Checkpoint 7.3
1. State an advantage of using CSS to style for print.
2. Describe how to choose whether to configure an
XHTML tag, create a class, or create an id when
working with CSS.
3. List the following terms in the order that the properties
and attributes are applied when using CSS.




Inline styles
External styles
XHTML attributes
Embedded styles
21
Summary

This chapter introduced you to a variety
of topics related to hyperlinks, lists, and
layout.
22