1 / 22

HTML and CSS Advanced

Neal Stublen nstublen@jccc.edu. HTML and CSS Advanced. 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. What’s Ahead?.

leoma
Télécharger la présentation

HTML and CSS Advanced

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related