Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: WORKING WITH LINKS
Chapter 4 Lessons <ul><li>Create external and internal links </li></ul><ul><li>Create internal links to named anchors </li...
Understanding Internal and External Links <ul><li>Web Pages contain two types of links </li></ul><ul><ul><li>Internal or r...
Understanding Internal and External Links <ul><li>Internal and external links have two important parts that work together:...
Create Links <ul><li>Create external links </li></ul><ul><ul><li>Absolute paths </li></ul></ul><ul><li>Create internal lin...
Absolute and Relative Paths
Creating External Links <ul><li>Select the text or object that you want to serve as a link </li></ul><ul><li>Type the abso...
Fig. 1: Example of Absolute Path
Fig. 3: Creating an External Link Selected text URL for link
Fig. 4: Site Map Displaying External Links on Activities Page Four internal links from the activities page navigation bar ...
Creating Internal Links <ul><li>Select the text element or graphic object that you want to make a link </li></ul><ul><li>U...
Fig. 2: Example of a Relative Path
Fig. 5: Creating an Internal Link Text to be used for link Relative link to fishing.html Browse for File icon
Create Internal Links to Named Anchors <ul><li>Named anchor: specific location on a Web page that has a descriptive name <...
Fig. 7: Named Anchor Button on the Insert Bar Named Anchor button Named Anchor Text used for link to named anchor Link to ...
Fig. 8: Named Anchor Dialog Box Name of new anchor
Fig. 10: Dragging the Point to File Icon to a Named Anchor Point to File icon dragged to named anchor Named anchor precede...
Understanding Flash Text <ul><li>Flash text is a vector-based graphic file that contains text </li></ul><ul><li>Flash text...
Flash Text graphic.swf + link path + rollover Text
Inserting Flash Text
Fig. 12: Media Menu on Insert Bar
Fig. 13: Insert Flash Text Dialog Box Color text box Font list arrow Size text box Rollover color text box Target list arr...
Fig. 14: Flash Category on Assets Panel Flash button Flash text file Click play button to preview Flash text
Create a Navigation Bar  Using Images <ul><li>Allows you to create a more visually appealing method for navigation that ut...
Create a Navigation Bar <ul><li>Navigation bar elements can have four possible states  </li></ul><ul><li>A state is the co...
Navigation Bars <ul><li>Can place only one navigation bar on a Web page using the Insert Navigation Bar dialog box </li></...
Four States <ul><li>Up Image: mouse pointer is not on top of the element </li></ul><ul><li>Over Image: mouse pointer is po...
Fig. 17: Ohio Historical Society  Web Site Navigation bar with rollovers Images serving as links
Copy and Modify a Navigation Bar <ul><li>Create a navigation bar using images </li></ul><ul><li>Add elements to a navigati...
Fig. 18: Insert Navigation Bar Element name text box Image file specified for Up image state Insert list arrow Remove chec...
Table 3
Fig. 24: Changing Settings for the Activities Element Show “Down image” initially is selected Asterisk is placed next to e...
Fig. 25: About_us Page with Modified Navigation Bar
Create an Image Map <ul><li>Another way to create navigation links for Web pages is to create an image map </li></ul><ul><...
Fig. 26: Viewing an Image Map  Clicking an individual state will link to information about parks in that state Pointer is ...
Fig. 28: Properties of the Hotspot Image map name Alternate text for hotspot Target for hotspot Link to index page
Manage Web Site Links <ul><li>Check Links Sitewide feature </li></ul><ul><ul><li>Internal links </li></ul></ul><ul><ul><li...
Fig. 30: Link Checker Panel Displaying External Links Show list arrow External links displayed
Fig. 31: Link Checker Panel Displaying No Orphaned Files Show list arrow No orphaned files shown
Fig. 32: Assets Panel Displaying Links URLs button External links for The Striped Umbrella Web site
Chapter 4 Tasks <ul><li>Create external and internal links </li></ul><ul><li>Create internal links to named anchors </li><...
Upcoming SlideShare
Loading in …5
×

Dreamweaver Ch04

2,045 views

Published on

Published in: 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,045
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dreamweaver Ch04

  1. 1. Adobe Dreamweaver CS3 Revealed CHAPTER FOUR: 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>Insert rollovers with Flash text </li></ul><ul><li>Create, modify, and copy a navigation bar </li></ul><ul><li>Create an image map </li></ul><ul><li>Manage Web site links </li></ul>
  3. 3. Understanding Internal and External Links <ul><li>Web Pages contain two types of links </li></ul><ul><ul><li>Internal or relative: links to Web pages in the same Web site </li></ul></ul><ul><ul><li>External or absolute: links to Web pages on other Web sites or to e-mail addresses </li></ul></ul>
  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>
  5. 5. Create 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>
  6. 6. Absolute and Relative Paths
  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>
  8. 8. Fig. 1: Example of Absolute Path
  9. 9. Fig. 3: Creating an External Link Selected text URL for link
  10. 10. Fig. 4: Site Map Displaying External Links on Activities Page Four internal links from the activities page navigation bar Two external links on the activities page
  11. 11. 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 Property inspector to specify the relative path to the destination page </li></ul>
  12. 12. Fig. 2: Example of a Relative Path
  13. 13. Fig. 5: Creating an Internal Link Text to be used for link Relative link to fishing.html Browse for File icon
  14. 14. 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>
  15. 15. Fig. 7: Named Anchor Button on the Insert Bar Named Anchor button Named Anchor Text used for link to named anchor Link to named anchor Point to File icon
  16. 16. Fig. 8: Named Anchor Dialog Box Name of new anchor
  17. 17. Fig. 10: Dragging the Point to File Icon to a Named Anchor Point to File icon dragged to named anchor Named anchor preceded by # Selected text to link to named anchor Point to File icon
  18. 18. Understanding Flash Text <ul><li>Flash text is a vector-based graphic file that contains text </li></ul><ul><li>Flash text allows you to add visual interest to an otherwise “dull” Web page </li></ul><ul><li>Flash text files are saved with the .swf file extension </li></ul>
  19. 19. Flash Text graphic.swf + link path + rollover Text
  20. 20. Inserting Flash Text
  21. 21. Fig. 12: Media Menu on Insert Bar
  22. 22. Fig. 13: Insert Flash Text Dialog Box Color text box Font list arrow Size text box Rollover color text box Target list arrow Text text box Link text box Save as text box
  23. 23. Fig. 14: Flash Category on Assets Panel Flash button Flash text file Click play button to preview Flash text
  24. 24. 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>
  25. 25. 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>
  26. 26. 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>
  27. 27. 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>
  28. 28. Fig. 17: Ohio Historical Society Web Site Navigation bar with rollovers Images serving as links
  29. 29. 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>
  30. 30. Fig. 18: Insert Navigation Bar Element name text box Image file specified for Up image state Insert list arrow Remove check mark Click to select an image for each element state
  31. 31. Table 3
  32. 32. Fig. 24: Changing Settings for the Activities Element Show “Down image” initially is selected Asterisk is placed next to element name
  33. 33. Fig. 25: About_us Page with Modified Navigation Bar
  34. 34. 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 Web site </li></ul>
  35. 35. Fig. 26: Viewing an Image Map Clicking an individual state will link to information about parks in that state Pointer is over Arkansas, which results in a window with a photo and introductory text about Arkansas to display
  36. 36. Fig. 28: Properties of the Hotspot Image map name Alternate text for hotspot Target for hotspot Link to index page
  37. 37. Manage Web Site 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>
  38. 38. Fig. 30: Link Checker Panel Displaying External Links Show list arrow External links displayed
  39. 39. Fig. 31: Link Checker Panel Displaying No Orphaned Files Show list arrow No orphaned files shown
  40. 40. Fig. 32: Assets Panel Displaying Links URLs button External links for The Striped Umbrella Web site
  41. 41. Chapter 4 Tasks <ul><li>Create external and internal links </li></ul><ul><li>Create internal links to named anchors </li></ul><ul><li>Insert rollovers with Flash text </li></ul><ul><li>Create, modify, and copy a navigation bar </li></ul><ul><li>Create an image map </li></ul><ul><li>Manage Web site links </li></ul>

×