Chapter 4 class power point

451 views

Published on

Web Design & Development

Published in: Education, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
451
On SlideShare
0
From Embeds
0
Number of Embeds
212
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chapter 4 class power point

  1. 1. Chapter 4: iframes & Image Maps Web Design & Development
  2. 2. 4. Students will analyze and create unique features in HTML by: • Inserting iframes into a website by using its elements and attributes • Creating at least one type of image map on a website • Writing coding for at least one type of image map on a website using its elements and attributes • Using Microsoft Paint to determine coordinates for at least one type of image map shape • Defining key terms used in the chapter.
  3. 3. Iframes Used to display a website within a webpage
  4. 4. • <iframe></iframe • Paired element • Attribute: src • URL of website <iframe src=“http:google.com” width=“600” hieght=“600” frameborder=“3” frame></iframe> (see example on next page with banners…
  5. 5. Image Maps (Hot Spots) One image with multiple “clickable areas”
  6. 6. Image Maps (Hot Spots) • Need two objects: 1. An image with distinct areas to click on 2. Markup to map the different regions to the urls
  7. 7. Image Maps elements • <map></map>: holds the map information • <area />: links specific parts of map to URLs • <img />: sets the picture
  8. 8. Map Attributes • name: identifies the map • value of name should match value of usemap in <img /> element
  9. 9. Area Attributes • shape: specifies the shape of region (rect, circle, poly [triange or polygon]) • coords: defines the region’s coordinates
  10. 10. Break down of Coords: • Rect: left, right, top & bottom points • Circle: x and y point on circle as well as radius • Poly: x and y coordinates for every vertex in the polygon
  11. 11. Area Attributes • href: specifies the URL • alt: must be used to identify image • title: provides a screen tip
  12. 12. <img src="Pics/park.jpg" width="300" height="200" usemap="#park" border="0"/> <map name="park" /> <area shape="rect" coords="190,67,197,195" href="http://www.stillmanvalley.org" title="SVSHS" alt="SwingSet Website" target="_blank" /> <area shape="rect" coords="56,108,45,0" href="http://www.google.com" title="Google" alt="Horses" target="_blank" /> <area shape="rect" coords="258,136,256,4" href="http://www.yahoo.com" title="Yahoo" alt="Horses" target="_blank" /> </map>
  13. 13. Determining Coords in Paint Place your cursor on the spot on the picture: • X1—190 • Y1—(60)
  14. 14. Determining Coords in Paint To determine the bottom X2 & Y2, move your cursor straight down from the picture to the bottom line. These will be your coords for: • X2—199 • Y2—198
  15. 15. Chapter 4: iframes & Image Maps Web Design & Development

×