HTML AND CSS ADVANCED

Neal Stublen

nstublen@jccc.edu

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