CIS 205—Web Design & Development

1. CIS 205—Web Design & Development Dreamweaver Chapter 4 Working With Links

2. Chapter 4: Working With Links • Introduction • The printed media has always been very sequential • With hyperlinks (links), the Web is non-sequential • Links allow the user to go anywhere within a Web site (internal) or to other Web sites (external) • Understanding Internal and External Links • An internal link connects to a page within a Web site • An external link connects to a page outside a Web site or to an email address • A link has two parts: • The element the user sees and clicks • The path to the page or file that will open as a result

3. Lesson 1: Create External and Internal Links • Creating External Links • To create an external link, select the text or object that will serve as the link • Then type the absolute path to the destination Web page in the Link text box in the PI • The absolute path (http://www.ibm.com/index.html) contains • The protocol (such as http://) • The Web site URL (such as www.ibm.com) • The filename (such as index.html)

4. Lesson 1: Create External and Internal Links (2) • Creating Internal Links • The home page should have links to all major pages in a Web site • To create an internal link, select the text or object that will serve as the link • Then use the Browse for File icon next to the Link text box in the PI to specify the relative path to the page • A relative path consists of folder names and filenames relative to the location of the page containing the link • images/banner_graphic.jpg • You can also use the Point to File icon in the PI or drag a file from the Files panel to the Link text box in the PI

5. Lesson 1: Create External and Internal Links (3) • Create an external link • Open The Striped Umbrella Web site, open dw4_1.html from your Data Files, save it as activities.html in the striped_umbrella root folder • Overwrite the existing page but don’t update links • Attach the su_style.css file, then apply the body_textstyle to the paragraphs of text (not the navigation bar) Hint: Use Style list in the PI • Select the first broken image, click Browse for File icon next to the Src text box, select the heron_waiting_small.jpg file in the Data Files folder • Repeat Step 3 for the second image (two_dolphins_small.jpg)

6. Lesson 1: Create External and Internal Links (4) • Create an external link (continued) • Select the text Blue Angels (fifth paragraph) • Click in the Link text box in the PI, type http://www.blueangels.navy.mil, press [Enter] • Repeat Steps 5-6 to create a link to the USS Alabama site, http://www.ussalabama.com • Save you work and preview in a browser

7. Lesson 1: Create External and Internal Links (5) • View external links in the site map • Click the Expand to show local and remote sites button on the Files panel (upper right) • Click the Site Map list arrow on the toolbar, click Mapand Files • Click the + sign to the left of the activities page icon to view the list of links on this page • Click the – sign next to the activities page icon to collapse the list of links • Click the Collapse button on the toolbar to return to Document view

8. Lesson 1: Create External and Internal Links (6) • Create an internal link • Select the text “fishing excursions” in the third paragraph • Click the Browse for File icon next to the Link text box in the PI, then double-click fishing.html in the dialog box (the text fishing.html appears in the Link text box) • You can press [F4] to hide all panels, giving you a better view of a page, then press [F4] to restore open panels • Select the text “dolphin cruises” in the same sentence • Drag the file cruises.html from the Files panel to the Link text box in the PI • Save your work and preview in a browser

9. Lesson 1: Create External and Internal Links (7) • View internal links in the site map • Click the Expand to show local and remote sites button on the Files panel (upper right) • Click the Site Map list arrow on the toolbar, click Mapand Files • Click the + sign to the left of the activities page icon to view the list of links on this page • Click the – sign next to the activities page icon to collapse the list of links • Click the Collapse button on the toolbar to return to Document view • Close the activities page

10. Lesson 2: Create Internal Links to Named Anchors • Inserting Named Anchors • You can divide a large Web page into specific locations (such as top or bottom) and then create internal links on the page that go to these locations • Each such location is given a named anchor (or destination) which serves as the target of an internal link • Place the insertion point at the desired location on a page, click the Named Anchor button in the toolbar, and enter a short descriptive name for the anchor • A named anchor shows as a yellow anchor on the page • Click View on the menu bar, point to VisualAids, click InvisibleElements to show or hide named anchor icons

11. Lesson 2: Create Internal Links to Named Anchors (2) • Creating Internal Links to Named Anchors • Select the text or image that will be the link to a named anchor, then • Drag the Point to File icon (next to the Link text box) to the named anchor icon on the page, or • Type # followed by the name of the anchor in the Link text box (such as #top)

12. Lesson 2: Create Internal Links to Named Anchors (3) • Insert a named anchor • Open The Striped Umbrella Web site, open spa.html, click the banner image, then press [] to place the insertion point to the left of the banner • On the menu bar, click View, point to VisualAids, verify that InvisibleElements is checked • Click the Common tab on the Insert bar • Click the Named Anchor button on the Insert bar, type top in the Anchor name text box, click OK • Don’t begin an anchor name with a number, use lower case, and don’t use spaces or special characters

13. Lesson 2: Create Internal Links to Named Anchors (4) • Insert a named anchor (continued) • Click to the left of the Skin Care Treatments heading and insert a named anchor called skin_care • Insert named anchors to the left of the other headings using the names body_treatments, massages, and packages • Save your work

14. Lesson 2: Create Internal Links to Named Anchors (5) • Create an internal link to a named anchor • Select the words “skin care treatments” in the first paragraph, drag the Point to File icon next to the Link text box in the PI to the skin_care anchor • Repeat Step 1 for the remaining descriptions in the first paragraph that correspond to the other named anchors on the page • Save your work and preview in a browser, testing the links • Close the browser

15. Lesson 3: Insert Rollovers with Flash Text • Understanding Flash Text • Flash is software for creating vector-based graphics and animations, which are based on mathematical formulas • Vector-based graphics are smoother-looking and smaller in file size than pixel-based graphics (GIF, PNG, or JPEG) • Flash text is a vector-based graphic that contains text and have a .swf filename extension • Dreamweaver automatically stores the JavaScript code to a folder called Scripts when Flash text is added

16. Lesson 3: Insert Rollovers with Flash Text (2) • Inserting Flash Text on a Web Page • Flash text can be created within Dreamweaver by clicking the Media list arrow on the Commontab of the Insertbar and then clicking FlashText • Type the text to appear and format it • Enter the path for the destination link in the Link text box • Use the Target list to specify how the destination page will open • _blank (new window), _parent (replacing the frameset), _self (same frame or window), or _top (whole browser window) • Type a name for the Flash text file and save it in the same folder as the containing Web page

17. Lesson 3: Insert Rollovers with Flash Text (3) • Using Flash Player • To play Flash movies on your computer, the Flash Player must be installed • Download Flash Player from www.adobe.com • In Internet Explorer, click Tools on the menu bar, click InternetOptions, click the Advancedtab, click Allow active content to run in files on my computer check box, click OK • For other browsers, look for a similar setting under Options or Preferences

18. Lesson 3: Insert Rollovers with Flash Text (4) • Create Flash text • Open The Striped Umbrella Web site, open spa.html, click after the last sentence on the page, press [Enter] twice to end the ordered list • Click the Common tab on the Insert bar, click the Media list arrow, click FlashText • Set the font to Arial, Size to 14, Color to #000066, Rollover color to #66CCFF, type Top of page in the Text text box, type spa.html#top in the Link text box, click the Target list arrow, click _top, type top.swf in the Save as text box, click OK • Type Link to top of page in the accessibility dialog box, click OK

19. Lesson 3: Insert Rollovers with Flash Text (5) • Create Flash text (continued) • Click Assets in the Files panel group, click the Flash button on the Assets panel (at left), click the Refreshbutton (at bottom) • Click the top.swf file in the Assets panel, click the Playbutton (green arrow), move the pointer over the Top of page Flash text in the Assets panel to test • Drag top.swf from the Assets panel to the end of the last bulleted entry in each of the spa service groups, adding the text Link to top of page in each dialog box • Click the Files panel tab and refresh the Files panel • Save spa.html, click OK in the Copy Dependent Files dialog box, preview the page in a browser

20. Lesson 3: Insert Rollovers with Flash Text (6) • Align Flash text • Click the Top of page button at the end of the Skin Care Treatments section, click the Align list arrow in the PI, click Top • Repeat Step 1 for the Top of page buttons in the other spa services sections • Click View on the menu bar, point to Visual Aids, click Invisible Elements to hide invisible elements • Save your work and preview spa.html in a browser

21. Lesson 4: Create, Modify, and Copy a Navigation Bar • Create a Navigation Bar Using Images • A navigation bar can use images instead of just text • The images can be created with graphics software • All images should be exactly the same size • To insert a navigation bar, click Insert, ImageObjects, NavigationBar • Each link is an element in four possible states: • Up image (mouse pointer is not on top of the element) • Overimage (mouse pointer is positioned over the element) • Downimage (state when you click the element) • Overwhiledownimage (pointer is over a clicked element) • Using different images for the states creates a rollover

22. Lesson 4: Create, Modify, and Copy a Navigation Bar (2) • Copying and Modifying a Navigation Bar • You can copy and paste a navigation bar to other pages • The navigation bar should be in the same location on each page • You can use the Modify Navigation Bar dialog box to customize the navigation bar for each page

23. Lesson 4: Create, Modify, and Copy a Navigation Bar (3) • Create a navigation bar using images • Open The Striped Umbrella Web site, open spa.html, select the entire navigation bar and delete it • Click the Common tab on the Insert bar, click the Images list arrow, click Navigation Bar • Type home in the Element name text box, click the Insert list arrow in the dialog box, click Horizontally, remove the check mark in the Use tables check box • Click Browse next to the Up image text box, navigate to the assets folder in your Data Files, double-click home_up.gif

24. Lesson 4: Create, Modify, and Copy a Navigation Bar (4) • Create a navigation bar using images (continued) • Repeat Step 4 for the other image text boxes, choosing home_down.gif in each case, clicking Yes to overwrite existing file when prompted • Type Navigation button linking to home page in the Alternate text text box • Click Browse next to the When clicked, Go to URL text box, double-click index.html in the striped_umbrella root folder • Click OK, refresh the Files panel, deselect the button • Place the insertion point in front of the button, press [Backspace],press [Shift][Enter],save your work

25. Lesson 4: Create, Modify, and Copy a Navigation Bar (5) • Add elements to a navigation bar • Click Modify on the menu bar, click NavigationBar • Click the Add button (+) in the dialog box, type about_us in the Element name text box • Use about_us_up.gif for the Up image and about_us_down.gif for all other images for this button • Type Navigation bar linking to about_us page in the Alternate text text box and link the button to about_us.html • Similarly add café, spa, and activities buttons • Click OK, save your work, and preview in a browser

26. Lesson 4: Create, Modify, and Copy a Navigation Bar (6) • Copy and paste a navigation bar • Select the entire navigation bar in spa.html • Click Edit on the menu bar, click Copy (or press [Ctrl][C]) • Double-click activities.html in the Files panel • Select the original navigation bar in activities.html, click Edit on the menu bar, click Paste (or press [Ctrl][V]) • Click in front of the navigation bar, press [Backspace],press [Shift][Enter]

27. Lesson 4: Create, Modify, and Copy a Navigation Bar (7) • Customize a navigation bar • Click Modify on the menu bar, click NavigationBar • Click activities in the Nav bar elements text box, click Show “Down Image” initially check box • Click OK, then save and close activities.html • Repeat Steps 1-3 to modify the navigation bar in spa.html in a similar fashion • Open index.html and about_us.html, paste the new navigation bar over the existing navigation bars, modifying the Down image in each (as in Step 2) • Make sure only the appropriate button is “Down” in each • Save your work and preview in a browser

28. Lesson 5: Create an Image Map • An image map is an image with one or more hotspots • A hotspot is a clickable area on an image that serves as a link • A map of China could have hotspots for each province linked to pages about each corresponding province • You create hotspots by selecting an image and using hotspot tools in the PI to define different shapes • Rectangular, Oval, Polygon • Each hotspot should have alternate text • Too many hotspots on a page adds code and makes the page download more slowly

29. Lesson 5: Create an Image Map (2) • Create an image map • Open activities.html in the striped_umbrella root folder • Select the banner and click the RectangularHotspottool in the PI (blue rectangle in lower left corner) • Drag the pointer over the entire umbrella in the banner, click OK in the dialog box • Click the Pointer Hotspot tool in the PI to adjust the size of a hotspot by dragging the hotspot handles • Click the Point to File icon to the right of the Linktextbox in the PI and drag to index.html in the Files panel

30. Lesson 5: Create an Image Map (3) • Create an image map (continued) • Type home in the Map text box in the PI to name the map • Click the Target list arrow in the PI, click _top (page opens in same window) • Type Link to home page in the Alt text box in the PI, press [Enter] • Save your work and preview in a browser • Close the browser and close all open pages

31. Lesson 6: Manage Web Site Links • Managing Web Site Links • Links to Web pages may fail because Web sites change locations or may go down • Broken links indicate poor maintenance • External links must be checked manually on a regular basis • The Check Links Sitewide feature checks internal links • The Link Checker panel also displays orphaned files, files that are not linked to any pages in the site

32. Lesson 6: Manage Web Site Links (2) • Manage Web site links • Click Site on the menu bar, point to Advanced, click Re-create Site Cache • Click Site on the menu bar, click Check Links Sitewide • Click the Show list arrow in the Link Checker panel, click External Links to display all external links • Click the Show list arrow, click Orphaned Files • Click the Options button in the Results panel group (upper right corner), click Close panel group • Display the Assets panel, click the URLs button

33. Lesson 6: Manage Web Site Links (3) • Update a page • Open dw4_2.html from your Data Files, save it as fishing.html in the striped_umbrella root folder (overwrite the existing page, don’t update links) • Click the broken link image placeholder, click the Browse for File icon next to the Src text box in the PI, browser to your Data Files and double-click the file heron_small.jpg • Deselect the image placeholder • Save and close the page

34. Lesson 6: Manage Web Site Links (4) • Update a page (continued) • Open dw4_3.html from your Data Files, save it as cruises.html in the striped_umbrella root folder (overwrite the existing page, don’t update links) • Click the broken link image placeholder, click the Browse for File icon next to the Src text box in the PI, browser to your Data Files and double-click the file boats.jpg • Deselect the image placeholder • Save and close the page