Course Road Map
Create web page layouts using CSS Manage CSS Test website validity Create navigation menus using CSS Incorporate meta content and
multimedia
CHAPTER 4:CREATING ADVANCED NAVIGATION
Create CSS menus from lists Use images in CSS menus Create image maps
What’s Ahead?
Menus Are Lists of Links
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“catalog.html”>Catalog</a></li>
<li><a href=“about.html”>About</a></li>
</ul>
We just apply some styling to the list.
Display Property Determines how an element is displayed on the
page
blockLine break above and below
inlineNo line breaks
noneElement is not visible
list-itemElement displayed as a list
CSS Pseudo-class
Pseudo-classes add special effects to some selectors
Common pseudo-classes for anchor elements:link:visited:active:hover
Practice Activity
CSS-based menus, Activity 1Create a CSS-based menu (p.84)
Practice Activity
CSS-based submenus, Activity 2Create a CSS-based submenu (p.89)
Create CSS menus from lists Use images in CSS menus Create image maps
What’s Ahead?
Background Images
We’ve used the background-color style to set the color of the background
We can also use background images:background-image: url(“image.jpg”)background-repeat: no-repeat;background-position: top left;
Practice Activity
Menu images, Activity 3Add images to CSS menus (p.98)
What if you wanted the images on the right side of the text?
Create CSS menus from lists Use images in CSS menus Create image maps
What’s Ahead?
What’s an Image Map?
An image map defines regions within an image that can be used as individual hyperlinks
<img src=“images/myimage.jpg” />
What’s an Image Map?
An image map defines regions within an image that can be used as individual hyperlinks
<img src=“images/myimage.jpg”
usemap=“#mymap” />
<map id=“mymap”>…</map>
Inside the Map
<map id=“mymap”>
<area shape=“rect”
coord=“10, 25, 60, 40”
href=“rect.html”
alt=“My Rect”/>
<area shape=“circle”
coord=“108, 94, 32”
href=“circle.html”
alt=“My Circle”/>
</map>
About Map Areas
You can use rect, circle, or polyx1, y1, x2, y2x1, y1, radiusx1, y1, x2, y2, …, xn, yn
Coordinates are references from the upper-left corner of the image
The areas themselves are not visible, but only reference areas on the image
Practice Activity
Images maps, Activity 4Create an image map as a “menu” (p.110)
Create CSS menus from lists Use images in CSS menus Create image maps
What’s Behind?
REVIEW
Review
What shapes can be placed in an image map?
A. circle
B. ellipse
C. rectangle
D. triangle
Review
What shapes can be placed in an image map?
A. circle
B. ellipse
C. rectangle
D. triangle