1. Neal Stublen nstublen@jccc.edu

2. Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using CSS  Incorporate meta content and multimedia

4.  Create CSS menus from lists  Use images in CSS menus  Create image maps What’s Ahead?

5. Menus Are Lists of Links Home Catalog About We just apply some styling to the list.

6. Display Property  Determines how an element is displayed on the page  block Line break above and below  inline No line breaks  none Element is not visible  list-item Element displayed as a list

7. CSS Pseudo-class  Pseudo-classes add special effects to some selectors  Common pseudo-classes for anchor elements :link :visited :active :hover

8. Practice Activity  CSS-based menus, Activity 1 Create a CSS-based menu (p.84)

9. Practice Activity  CSS-based submenus, Activity 2 Create a CSS-based submenu (p.89)

10.  Create CSS menus from lists  Use images in CSS menus  Create image maps What’s Ahead?

11. 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;

12. Practice Activity  Menu images, Activity 3 Add images to CSS menus (p.98)  What if you wanted the images on the right side of the text?

13.  Create CSS menus from lists  Use images in CSS menus  Create image maps What’s Ahead?

14. What’s an Image Map?  An image map defines regions within an image that can be used as individual hyperlinks

15. 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” /> …

16. Inside the Map <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”/>

17. About Map Areas  You can use rect, circle, or poly x1, y1, x2, y2 x1, y1, radius x1, 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

18. Practice Activity  Images maps, Activity 4 Create an image map as a “menu” (p.110)

19.  Create CSS menus from lists  Use images in CSS menus  Create image maps What’s Behind?

21. Review What shapes can be placed in an image map? A. circle B. ellipse C. rectangle D. triangle

22. Review What shapes can be placed in an image map? A. circle B. ellipse C. rectangle D. triangle