Dreamweaver chapter 04


Published on

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dreamweaver chapter 04

  1. 1. Chapter 4 Working with Links
  2. 2. Chapter 4 Lessons <ul><li>Create external and internal links </li></ul><ul><li>Create internal links to named anchors </li></ul><ul><li>Create, modify, and copy a navigation bar </li></ul><ul><li>Create an image map </li></ul><ul><li>Manage website links </li></ul>© 2010 Delmar Cengage Learning
  3. 3. Understanding Internal and External Links <ul><li>Web Pages contain two types of links </li></ul><ul><ul><li>Internal: links to web pages in the same website </li></ul></ul><ul><ul><li>External: links to web pages on other websites or to e-mail addresses </li></ul></ul>© 2010 Delmar Cengage Learning
  4. 4. Understanding Internal and External Links <ul><li>Internal and external links have two important parts that work together: </li></ul><ul><ul><li>The element that viewers see and click on a web page (text, image, or a button) </li></ul></ul><ul><ul><li>The path, or the name and location of the web page or file that will open when the element is clicked </li></ul></ul>© 2010 Delmar Cengage Learning
  5. 5. Creating Links <ul><li>Create external links </li></ul><ul><ul><li>Absolute paths </li></ul></ul><ul><li>Create internal links </li></ul><ul><ul><li>Relative paths </li></ul></ul>© 2010 Delmar Cengage Learning
  6. 6. Absolute and Relative Paths © 2010 Delmar Cengage Learning
  7. 7. Creating External Links <ul><li>Select the text or object that you want to serve as a link </li></ul><ul><li>Type the absolute path to the destination web page in the Link text box in the Property inspector </li></ul>© 2010 Delmar Cengage Learning
  8. 8. Fig. 1: Example of Absolute Path © 2010 Delmar Cengage Learning
  9. 9. Creating Internal Links <ul><li>Select the text element or graphic object that you want to make a link </li></ul><ul><li>Use the Browse for File icon next to the Link text box in the HTML Property inspector to specify the relative path to the destination page </li></ul>© 2010 Delmar Cengage Learning
  10. 10. Fig. 2: Example of a Relative Path © 2010 Delmar Cengage Learning
  11. 11. Fig. 5: Creating an External Link © 2010 Delmar Cengage Learning HTML button Text for link URL for link
  12. 12. Fig. 6: Creating Internal Link on Activities Page © 2010 Delmar Cengage Learning Text to be used for link Relative link to fishing.html Browse for File icon
  13. 13. Create Internal Links to Named Anchors <ul><li>Named anchor: specific location on a web page that has a descriptive name </li></ul><ul><ul><li>Acts as a target for internal links </li></ul></ul><ul><li>Target: location on the web page that a browser displays when internal link is clicked </li></ul>© 2010 Delmar Cengage Learning
  14. 14. Create Internal Links to Named Anchors <ul><li>Select the text or image that you want to use to make a link, and then drag the Point to File icon from the Property inspector to the named anchor icon on the page </li></ul><ul><li>Select the text or image to which you want to use to make a link, then type # followed by the named anchor name (such as “#top”) in the Link text box in the Property inspector. </li></ul>© 2010 Delmar Cengage Learning
  15. 15. Fig. 8: Using the Point to File Icon © 2010 Delmar Cengage Learning Named Anchor button Named anchors Link to named anchor Point to File icon Text used for link to named anchor
  16. 16. Fig. 9: Named Anchor Dialog Box © 2010 Delmar Cengage Learning Name of new anchor
  17. 17. Fig. 11: Dragging the Point to File Icon to a Named Anchor © 2010 Delmar Cengage Learning Point to File icon Named anchor name preceded by # sign Point to File icon dragged to named anchor Text to link to named anchor
  18. 18. Create a Navigation Bar Using Images <ul><li>Allows you to create a more visually appealing method for navigation that utilizes graphics rather than text </li></ul><ul><li>Can be created in many different graphics programs including Adobe Fireworks or Adobe Illustrator </li></ul>© 2010 Delmar Cengage Learning
  19. 19. Create a Navigation Bar <ul><li>Navigation bar elements can have four possible states </li></ul><ul><li>A state is the condition of the element relative to the mouse pointer </li></ul><ul><li>There are four possible states </li></ul>© 2010 Delmar Cengage Learning
  20. 20. Navigation Bars <ul><li>Can place only one navigation bar on a web page using the Insert Navigation Bar dialog box </li></ul><ul><li>Multiple links </li></ul><ul><li>Four rollover states </li></ul><ul><ul><li>Up, over, down, and over while down </li></ul></ul>© 2010 Delmar Cengage Learning
  21. 21. Four States <ul><li>Up Image: mouse pointer is not on top of the element </li></ul><ul><li>Over Image: mouse pointer is positioned on top of the element </li></ul><ul><li>Down Image: when you click the element </li></ul><ul><li>Over While Down Image: mouse pointer is positioned over an element that has been clicked </li></ul>© 2010 Delmar Cengage Learning
  22. 22. Fig. 13: NASA Website © 2010 Delmar Cengage Learning Navigation bar with rollovers Navigation links with rollovers Rollover images serving as links
  23. 23. Copy and Modify a Navigation Bar <ul><li>Create a navigation bar using images </li></ul><ul><li>Add elements to a navigation bar </li></ul><ul><li>Copy and paste a navigation bar </li></ul><ul><ul><li>Copy and Paste from menu bar </li></ul></ul><ul><li>Customize a navigation bar </li></ul><ul><ul><li>To change orientation, you must start over </li></ul></ul>© 2010 Delmar Cengage Learning
  24. 24. Fig. 14: Insert Navigation Bar © 2010 Delmar Cengage Learning Insert list arrow Click to select an image for each element state Element name text box Image file specified for Up image state
  25. 25. Table 2 © 2010 Delmar Cengage Learning
  26. 26. Fig. 20: Changing Settings for the Activities Element © 2010 Delmar Cengage Learning Show “Down image” initially is selected Asterisk is placed next to the element name
  27. 27. Fig. 21: About_us Page with Modified Navigation Bar © 2010 Delmar Cengage Learning
  28. 28. Create an Image Map <ul><li>Another way to create navigation links for web pages is to create an image map </li></ul><ul><li>Image map: graphic that has one or more hot spots placed on top of it </li></ul><ul><li>Hotspot: area on a graphic that, when clicked, links to different locations on the page or to another web page or website </li></ul>© 2010 Delmar Cengage Learning
  29. 29. Creating an Image Map <ul><li>Include alternate text for each hotspot. </li></ul><ul><li>Draw the hotspot boundaries a little larger than they need to be to cover the area you want to set as a link. </li></ul><ul><li>Hotspot tools </li></ul>© 2010 Delmar Cengage Learning
  30. 30. Fig. 22: Viewing an Image Map © 2010 Delmar Cengage Learning National Park Service website – www.nps.gov The pointer is over Hawaii, which causes a window with a photo and introductory text about Hawaii to display Clicking on an individual state will link to information about parks in that state
  31. 31. Fig. 24: Hotspot Properties © 2010 Delmar Cengage Learning Image map name Target for hotspot Link to index page Alternate text for the hotspot
  32. 32. Manage Website Links <ul><li>Check Links Sitewide feature </li></ul><ul><ul><li>Internal links </li></ul></ul><ul><ul><li>External links </li></ul></ul><ul><ul><li>Named anchors </li></ul></ul><ul><ul><li>Graphic files </li></ul></ul><ul><ul><li>Orphaned files </li></ul></ul><ul><li>View results in Link Checker panel </li></ul>© 2010 Delmar Cengage Learning
  33. 33. Fig. 26: Link Checker Panel Displaying External Links © 2010 Delmar Cengage Learning List of external links Show list arrow
  34. 34. Fig. 27: Link Checker Panel Displaying No Orphaned Files © 2010 Delmar Cengage Learning Show list arrow No orphaned files shown
  35. 35. Fig. 28: Assets Panel Displaying Links © 2010 Delmar Cengage Learning URLs button External links for The Striped Umbrella website