Web Development & Design Foundations with XHTML

Web Development & Design Foundations with XHTML Chapter 7Key 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

More on Relative Linking • <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> Relative links from the home page: index.htm

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>

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>

CSSPseudo-classes • Pseudo-classes and the anchor element • link – default state for a link (anchor tag) • visited –a link that has been visited • hover – triggered whenthe mouse moves over the link • active – triggered when the link is being clicked a:link {color:#000066;} a:visited {color:#003366;} a:hover {color:#0099CC;} a:active {color#FF0000;}

CSSPseudo-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>

Styling CSS “buttons”

CSS “buttons” <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; } </style> <div align="center"> <h2>CSS Buttons!</h2> <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>

Navigation LayoutUsing 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).

CSS & XHTML Navigation List • CSS: .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> twocolumn1.html

CSS & XHTML Navigation List • CSS: • .nav { padding: 5px; • background-color:#cc66cc; • color:#000066; • font-family:Verdana, Arial, sans-serif; • text-align:center; } • .navli { 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 ColumnPage 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!

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;

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" />

TheCascade • 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

Summary • This chapter introduced you to a variety of topics related to hyperlinks, lists, and layout.

Web Development & Design Foundations with XHTML