Unit 6: Navigating Your Site

1
Unit 6 Navigating Your Site

• Dreamweaver CS4
• Adobe Authorized Training
• December 2008

2
Unit Topics

• Understanding Site Navigation
• Linking to Files in Your Site
• Linking to Sites
• Linking to Named Anchors
• Adding E-mail Links
• Linking from Images
• Creating a Jump Menu

3
Understanding Site Navigation

• Once you have determined your sites goals,
  target audience, and data requirements, you are
  ready to begin the sites navigation scheme
• A map that depicts how your web pages relate to
  one another
• Shows how users will travel through your site as
  they click links and interact with application
  interfaces

4
Understanding Site Navigation

• Navigation bar of text or images that have been
  created as hypertext links
• Series of hypertext links embedded within the web
  pages

5
Hypertext Links

• Hypertext was the main concept that led to the
  invention of the World Wide Web
• nothing more (or less) than an enormous amount of
  content connected by an enormous number of
  hypertext links
• Are most often represented on a web page by
  underlined text (although users may disable this
  in their browsers).
• Can jump the user to another document within
  the current web site or to a page in another web
  site.
• Are used in global site navigation, where a set
  of links are created in a consistent navigation
  bar.

6
Understanding Links

• Example of (underlined) links

7
Link Types

• Link to other pages within the same site
• Link to other sites
• Link to a named place within the same page
• Link to create an e-mail message

8
Linking to Files in Your Site

• Using the point-to-file icon
• Browsing to the file in Property inspector
• Typing explicitly in the Link text box in the
  Property inspector

9
File Paths

• Link to a file
• Document-relative path
• Site-root-relative path
• This course only covers document relative-paths
• Relative Folder Hierarchy

10
Relative Folder Hierarchy

• To link from contents.html to hours.html, the
  file path is hours.html.
• To link to tips.html, use the relative path
  resources/tips.html.
• To link to index.html, use the relative path
  ../index.html.
• To link to catalog.html, use the relative path
  ../products/catalog.html

11
Saving Files

• Always save a new file before creating a
  document-relative path
• path name is not valid without a definite
  starting point
• If link created before saving, an absolute path
  (file//) used until the file is saved
• When file saved, relative path calculated

12
Site Files Linking

• Files panel provides an easy way to add links to
  your page
• Select the text for the link
• Drag the Point-to-File icon on the Property
  inspector and point to the file in the Files
  panel
• Note If the file you want for the link is within
  a folder in Files panel, pause over the folder
  until it opens, and then point to the file

13
Site Files Linking

• Using Point-to-File icon

14
Select File Linking

• Use the Property inspector
• Select the link text
• Click the folder icon on Property inspector
• Locate the file for the link
• NoteYou can also select the text for the link,
  and then choose Modify ?Make Link

15
Select File

• Locate the linked file

16
Updating Links

• When you create a link, the path name for that
  link is embedded in the HTML code
• If you move a file with links to another folder,
  links may not work
• Use the Files panel to move any files
• Dreamweaver updates each link and graphic on the
  page to maintain the proper path
• If you use Windows Explorer or the Macintosh
  Finder, then you need to manually update those
  pages
• Note Dreamweaver has a Link Checker utility to
  find the broken links, covered in Unit 10.

17
Changing Link Colors

• Do not choose colors that might confuse your
  viewers be sure it works with background color
• Link colors should contrast with the background
  color of the page to preserve readability

18
Changing Link Colors

• To change link colors add a style rule for the
  links
• Choose Advanced in the New CSS Rule dialog box
• Choose from the four link types
• alink
• avisited
• ahover
• aactive
• Choose the text color in the style definition

19
Link States

• Three link states
• Links
• Visited Links
• Hover
• Active Links

20
Walkthrough 6-1

• Adding Links

21
Linking to Sites

• Using the Property inspector
• Select the text or graphic for the link
• Type the URL or pathname in the Link text box
• Begin the URL in the Link text box with http//
• Called an absolute link

22
Linking to Sites

• Links created in a site are available from the
  Link pop-up menu
• Select the text, then choose the link from the
  pop-up menu

23
Targeting a Link

• Linked pages replace current browser page
• To open a new page
• Choose _blank from the target pop-up menu
• Note Use caution when adding targets to open new
  browser windows. New windows impose extra RAM
  requirements on the user s computer as each
  window is opened.The user may also be confused if
  the new window opens over the existing one.

24
Walkthrough 6-2

• Adding an absolute link

25
Linking to Named Anchors

• When users click a link, they are taken to the
  top of the linked page
• Create a link that jumps the user to a specific
  place in the document
• Eliminates scrolling
• Create a named position an anchor referenced as
  the link

26
Creating an Anchor

• Named anchor consists of two parts
• Named entity (an anchor)
• Link to that anchor
• Can be placed at any point in a web page

27
Creating an Anchor

• To add an named anchor
• Place the pointer at the beginning of the section
  where you want to take the user
• Choose Insert ?Named Anchor, or click Named
  Anchor on the Common category of the Insert bar
• Type the name for your anchor in the Named Anchor
  dialog box

28
Creating an Anchor

• Named anchors are case-sensitive and must be
  unique in the page.
• Names can only contain letters or numbers, no
  spaces or special characters are allowed.
• Note If you place an anchor at the end of a
  heading, some browsers (for example,Internet
  Explorer on the Macintosh) display the content
  after the heading, not the heading itself.

29
Viewing Invisibles

• Anchors are invisible elements
• Dreamweaver warns you if you dont have invisible
  elements turned on

30
Viewing Invisibles

• Choose View ?Visual Aids Invisible Elements
• You will see yellow anchor icons

31
Linking to the Anchor

• Use anchors in links
• Select the text you want for the link
• In Link text box, type a number sign (), and
  then the anchor name
• Dont add a space after the number sign

32
Point-to-File Icon
33
Anchors in Other Pages

• Create the link to the page
• Append the anchor name to the link
• menu.htmdesserts

34
Walkthrough 6-3

• Using a Named Anchor

35
Adding Email Links

• Adding an e-mail link to provide your users a
  method of contacting someone about the
  information provided on your web site
• E-mail link opens a new message window in the
  mail program associated with the users browser

36
Creating an Email Link

• You can either
• Add an e-mail link to existing text on the page
• Use the dialog box to add the text and the link
• Create an e-mail link
• Select the text
• Click Email Link on the Common category of the
  Insert bar, or choose Insert ?Email Link

37
Create an E-mail Link

• Position the insertion point where you want the
  link to appear
• Choose Insert?Email Link
• Type the text you want in the Text box
• Type the email in the E-Mail text box

38
Extended Email Syntax
39
Walkthrough 6-4

• Using an E-mail link

40
Linking from Images

• Add a link to a graphic
• Select the graphic on the page
• Use the Link options in the Property inspector
• User can click anywhere on the image to go to
  that linked page

41
Image Maps

• An image that has several areas to take the user
  to different destinations
• A map of the world, and you want a link for each
  country
• Distinguish the different shapes of each country
• Assign a different link to each shape

42
Image Maps

• Link areas are hotspots
• Rectangle
• Circle
• Polygon

43
Image Maps

• Select an image and expand the Property inspector
  
• Use the map tools

44
Rectangles and Ovals

• To create hotspots
• Name each image map on your page uniquely in the
  Map text box
• Choose one of the hotspot tools and draw the area
  for the hotspot on the image
• Drag the tool over the area to draw the hotspot
  shape
• Move or change the size of the hotspot by
  selecting the Pointer hotspot tool to make the
  change

45
Rectangles and Ovals

• Rectangle and Oval hotspot tools work similar to
  tools in drawing applications
• Drag the tool to draw the hotspot shape
• Move or change the size by selecting and using
  the Pointer hotspot

46
Polygons

• Polygon hotspot tool works differently
• Click around the shape on the image, continuing
  in one direction
• Each click creates a point on the hotspot
• Each point is connected by a line to the previous
  point
• After the third click,you see the filled shape of
  the hotspot
• Continue clicking until you achieve the shape you
  want

47
Polygons
48
Image Maps

• Move the hotspot
• Select the Pointer hotspot tool
• Position the Pointer on the interior of the
  hotspot
• Drag it to its new location
• Move a point on the hotspot with the Pointer
  hotspot tool

49
Image Maps

• When completed, the Property inspector changes to
  display the options for the hotspot
• Link for the hotspot
• Alternate text that is displayed when the user
  moves the pointer over that area

50
Walkthrough 6-5

• Creating an image map

51
Creating a Jump Menu

• Pop-up menu that allows you to choose an option
  and then be redirected to the associated page

52
Creating a Jump Menu

• Insert ? Forms ? Jump Menu
• Insert bar, Forms category, Jump Menu

53
Creating a Jump Menu

• Insert Jump Menu dialog box

54
Editing a Jump Menu

• Double-click on Jump Menu in Behaviors Panel

55
Walkthrough 6-6

• Creating a jump menu

56
Unit Summary

• A link is text or a graphic a user clicks to
  displays a page in the current site, a page in a
  new site, or jump to a section within the current
  page.
• The Property inspector is used to type a link,
  choose a previously created link, browse to a
  page to link, or drag the Point-to-File icon to a
  file in the Files panel.
• You can link to a section in a document using
  named anchors.

57
Unit Summary

• E-mail links let users send e-mails from the
  browsers e-mail client.
• You can create a link on an image.
• Hotspots allow users to navigate to different
  pages based on where they clicked the image.