HTML and CSS Advanced

1. Neal Stublen nstublen@jccc.edu HTML and CSS Advanced

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

3. Chapter 4:Creating Advanced Navigation

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

5. 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.

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. What’s Ahead? • Create CSS menus from lists • Use images in CSS menus • Create image maps

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. What’s Ahead? • Create CSS menus from lists • Use images in CSS menus • Create image maps

14. What’s an Image Map? • An image map defines regions within an image that can be used as individual hyperlinks <imgsrc=“images/myimage.jpg” />

15. What’s an Image Map? • An image map defines regions within an image that can be used as individual hyperlinks <imgsrc=“images/myimage.jpg” usemap=“#mymap” /> <map id=“mymap”>…</map>

16. 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>

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. What’s Behind? • Create CSS menus from lists • Use images in CSS menus • Create image maps

20. Review

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