Docstoc

Dreamweaver 8 PPT Chapter 4

Document Sample
Dreamweaver 8 PPT Chapter 4 Powered By Docstoc
					Macromedia Dreamweaver 8
Revealed


WORKING WITH
           LINKS
    Chapter Lessons
         Create external and internal links
         Create internal links to named
         anchors
         Insert rollovers with Flash text
         Create, modify, and copy a
         navigation bar
         Manage Web site links

Macromedia Dreamweaver 8 Revealed   Chapter 4   2
    Understanding Internal
    and External Links
          Web Pages contain two types of links
            – Internal or relative: links to Web pages
              in the same Web site
            – External or absolute: links to Web
              pages on other Web sites or to e-mail
              addresses



Macromedia Dreamweaver 8 Revealed   Chapter 4            3
    Create Links
          Create external links
            – Absolute paths
          Create internal links
            – Relative paths




Macromedia Dreamweaver 8 Revealed   Chapter 4   4
Macromedia Dreamweaver 8 Revealed   Chapter 4   5
    Creating External Links
           Steps
            – 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




Macromedia Dreamweaver 8 Revealed   Chapter 4           6
                     FIGURE 1   An example of an absolute path




Macromedia Dreamweaver 8 Revealed         Chapter 4              7
            FIGURE 3   Creating an external link to the Blue Angels Web site




Selected text                                                           URL for link

Macromedia Dreamweaver 8 Revealed           Chapter 4                                  8
           FIGURE 4   Site map displaying external links on the activities page




 Four internal links
 from the activities
page navigation bar

Two external links on
 the activities page




Macromedia Dreamweaver 8 Revealed            Chapter 4                            9
    Creating Internal Links
           Steps
            – 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 Property
              inspector to specify the relative path
              to the destination page



Macromedia Dreamweaver 8 Revealed   Chapter 4          10
                      FIGURE 2      An example of a relative path




Macromedia Dreamweaver 8 Revealed            Chapter 4              11
                FIGURE 5   Creating an internal link on the activities page




 Text to be
used for link       Relative path                                         Browse for
                                                                           File icon
Macromedia Dreamweaver 8 Revealed            Chapter 4                                 12
    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

Macromedia Dreamweaver 8 Revealed   Chapter 4       13
                  FIGURE 7   Named Anchor button on the Insert bar




Named Anchor
   button

Text used for
link to named
    anchor


  Named
  Anchor                                                             Point to File
                                                                        icon

Link to named
   anchor
Macromedia Dreamweaver 8 Revealed         Chapter 4                             14
                        FIGURE 8    Named Anchor dialog box




                                                      Name of new
                                                        anchor


Macromedia Dreamweaver 8 Revealed         Chapter 4                 15
             FIGURE 10   Dragging the Point to File icon to a named anchor




 Point to File
icon dragged
  to named
   anchor


Named anchor                                                             Point to File
preceded by #                                                               icon
Macromedia Dreamweaver 8 Revealed          Chapter 4                               16
    Insert Rollovers with Flash
    Text
          Flash text is a vector-based graphic
          file that contains text
          Flash text allows you to add visual
          interest to an otherwise “dull” Web
          page
          Flash text files are saved with the
          .swf file extension

Macromedia Dreamweaver 8 Revealed   Chapter 4    17
    Flash Text


    Text

                                                + link path
                                                 + rollover




Macromedia Dreamweaver 8 Revealed   Chapter 4                 18
    Inserting Flash Text




                     FIGURE 12      Media menu on the Insert bar


Macromedia Dreamweaver 8 Revealed             Chapter 4            19
    Inserting Flash Text




Macromedia Dreamweaver 8 Revealed   Chapter 4   20
                       FIGURE 13    Insert Flash Text dialog box
Font list arrow
                                                                    Size text box




Color text box                                                     Rollover color
                                                                     text box

 Text text box
                                                                    Link text box

                                                                     Target list
                                                                       arrow
    Save as
    text box

Macromedia Dreamweaver 8 Revealed          Chapter 4                          21
                     FIGURE 14   Flash category on the Assets panel




  Flash button


                                                                        Click play
                                                                        button to
                                                                      preview Flash
                                                                           text
   Flash text file




Macromedia Dreamweaver 8 Revealed           Chapter 4                            22
    Create a Navigation Bar
          Allow 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
          Macromedia Fireworks or Adobe
          Illustrator

Macromedia Dreamweaver 8 Revealed   Chapter 4    23
    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 mouse states




Macromedia Dreamweaver 8 Revealed   Chapter 4   24
    Mouse States
          Up: mouse pointer is not on top of
          the element
          Over: mouse pointer is positioned on
          top of the element
          Down: when you click the element
          Over while down: when you click the
          element and continue pressing and
          holding the mouse button
Macromedia Dreamweaver 8 Revealed   Chapter 4    25
    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



Macromedia Dreamweaver 8 Revealed   Chapter 4       26
                     FIGURE 16      Ohio Historical Society Web site




  Navigation bar
  with rollovers


Macromedia Dreamweaver 8 Revealed             Chapter 4                27
    Modify and Copy 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

Macromedia Dreamweaver 8 Revealed   Chapter 4         28
   Add button           FIGURE 17    Insert Navigation Bar dialog box




  Graphic file                                                          Element name
selected for Up                                                            text box
  image state
                                                                        Click to select
                                                                         an image for
                                                                        each element
  Insert list arrow                                                          state



                                                                 Remove check
                                                                    mark
 Macromedia Dreamweaver 8 Revealed           Chapter 4                             29
                  FIGURE 22   Changing settings for the activities element




  Show “Down
 image” initially
   is selected


Macromedia Dreamweaver 8 Revealed           Chapter 4                        30
                FIGURE 23   about us page with the modified navigation bar




Macromedia Dreamweaver 8 Revealed          Chapter 4                         31
    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 Web site
Macromedia Dreamweaver 8 Revealed   Chapter 4   32
    Manage Web Site Links
          Check Links Sitewide feature
            – Internal links
            – External links
            – Named anchors
            – Graphic files
            – Orphaned files
          View results in Link Checker panel

Macromedia Dreamweaver 8 Revealed   Chapter 4   33
                 FIGURE 24   Link Checker panel displaying external links




                                                          Show list
                                                           arrow
                               External links
                                 displayed




Macromedia Dreamweaver 8 Revealed          Chapter 4                        34
               FIGURE 25   Link Checker panel displaying no orphaned files




                                                         Show list
                                                          arrow
                               No orphaned
                               files shown



Macromedia Dreamweaver 8 Revealed         Chapter 4                          35
                        FIGURE 26   Assets panel displaying links




                                                                      External links
                                                                     for The Striped
                                                                    Umbrella Web site
  URLs button




Macromedia Dreamweaver 8 Revealed         Chapter 4                              36
    Chapter 4 Tasks
          Create external and internal links
          Create internal links to named
          anchors
          Insert rollovers with Flash text
          Create, modify, and copy a
          navigation bar
          Manage Web site links

Macromedia Dreamweaver 8 Revealed   Chapter 4   37

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:18
posted:9/2/2012
language:English
pages:37