Welcome to WEB 150!
Download
Report
Transcript Welcome to WEB 150!
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 named anchor 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 both screen and print display
Utilize the “cascade” in CSS
2
More on
Relative Linking
Relative links
from the home
page: index.htm
<a href="contact.htm">Contact</a>
<a href="products/collars.htm">Collars</a>
<a href="../index.htm">Home</a>
<a href="../services/bathing.htm">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 Internal Links
using the <a> element
A link to a part of a web page
Also called bookmarks, named fragments,
named anchors
Two components:
1. The anchor tag that identifies a bookmark or
named fragment of a web page. This requires
two attributes: the id attribute and the name
attribute.
<a name=“top” id=“top”></a>
2. The anchor tag that links to the bookmark or
named fragment of a web page. This uses the
href attribute.
<a href=“#top”>Back to Top</a>
5
CSS
Pseudo-classes
Pseudo-classes and the anchor element
link – default state
for a link (anchor tag)
a:link {color:#000066;}
a:visited {color:#003366;}
a:hover {color:#0099CC;}
a:active {color#FF0000;}
visited –a link that
has been visited
hover – triggered when
the mouse moves over the link
active – triggered when the link 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 { border: 2px inset #cccccc;
width: 100px;
padding: 3px 15px;
color: #ffffff;
background-color: #006600;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration:none;
}
a.button:link { color : #FFFFFF; }
a.button:visited { color : #cccccc; }
a.button:hover { color : #66cc33;
border:2px outset #cccccc;
}
<div align="center">
<h2>CSS Buttons!</h2>
</style>
<a href="index.html" class="button">Home</a>
<a href="products.html" class="button">Products</a>
<a href="sevices.html" class="button">Services</a>
<a href="contact.html" class="button">Contact</a>
<a href="about.html" class="button">About</a>
<div>
CSS “buttons”
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
.navBar { text-decoration:none;
list-style-image:url(arrow.gif);
XHTML:
<ul class="navBar">
<li><a class="navBar" href="home.html">Home</a></li>
<li><a class="navBar" href="spring.html">Spring</a></li>
<li><a class="navBar" href="summer.html">Summer</a></li>
<li><a class="navBar" href="fall.html">Fall</a></li>
<li><a class="navBar" href="winter.html">Winter</a></li>
</ul>
11
twocolumn1.html
CSS & XHTML Navigation List
CSS:
.nav { padding: 5px;
background-color:#cc66cc;
color:#000066;
font-family:Verdana, Arial, sans-serif;
text-align:center; }
.nav li { display:inline; list-style-type:none; }
a.nav { text-decoration:none; }
XHTML:
<ul class="nav">
<li><a class="nav" href="home0.html">Home</a></li>
<li><a class="nav" href="spring.html">Spring</a></li>
<li><a class="nav" href="summer.html">Summer</a></li>
<li><a class="nav" href="fall.html">Fall</a></li>
<li><a class="nav" href="winter.html">Winter</a></li>
</ul>
home0.html
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
Right-column content
float: right;
width:200px;
Center column – uses the
remaining screen room available
room after the floating columns
display
float: left;
width:150px;
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
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
18
Summary
This chapter introduced you to a
variety of topics related to hyperlinks,
lists, and layout.
19