Your SlideShare is downloading. ×
Dreamweaver chapter 04
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Dreamweaver chapter 04

2,208
views

Published on

Published in: Education, Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,208
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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