ptg Linking Web Pages Introduction Static Web pages are composed of three basic elements: text, images, and links. Dynamic Web pages incorporate additional elements such as: video, animation, and/or audio. Of all of these elements, links are the primary building blocks of any Web page. If there were no links there would be no way for a visitor to control their journey through the maze of pages and sites that make up the World Wide Web. However, links are not just for moving a visitor from page to page, or site to site; in addition, links are used for transmitting emails, trans- ferring data via FTP (file transfer protocol), and providing the ability to download data. This chapter is devoted to creating links, modifying links, and attaching links to various outputs and URLs. Links are all about how you begin the process of making a Web page come alive. Links come in all sizes and shapes; for example, a link can be as simple as an underlined section of text; for example, click here to go there, or it can be incorporated into a simple graphic, or even into a sophisticated JavaScript rollover. If your links are created using Flash, they can even include ani- mation and sound. The creation of a link is fairly straightforward… making that link intuitive to your visitor is the key to Web success. You don't want your visitors looking at a link and wondering if it is a link, or wondering what will happen if they click it. 7 7 What You’ll Do Understand Link Types Understand Paths Set the Relative Path Add a Link Add an E-mail Link Link within a Web Page Create Image Map Hotspots Modify Image Map Hotspots Create a Null or Script Link Modify a Link Remove a Link Update Links Test a Link Change Links Sitewide 163 From the Library of Wow! eBook ptg 164 Chapter 7 Links come in all sizes and shapes; however, what they link to is more important than what they look like. Link types refer to the function of the link; for example, the most popular (and common) link is the standard http or HyperText Transfer Protocol. With this link you can access Web pages, images, animations, just about anything that a wandering Web vis- itor would like to see and experience. However, there is more to the World Wide Web then a simple jump from page to page. The following list illustrates the more com- mon types of Web links and their usage. telnet:// The telnet link allows a user to log onto a remote computer (called the host), and take over control. For example, computer troubleshooters, could take over control of your computer from a remote location, and fix the problem using the telnet link. mailto: The mailto link allows a user to click and send email from a Web page. Basically, the mailto link opens a specified email appli- cation and automatically adds in the proper recipient’s address. news:// The news link connects the user to a specific newsgroup. Newsgroups are basically electronic bulletin boards; on various sub- jects… a newsgroup can be found for virtually any subject under the sun, and then some. http:// The http, or HyperText Transfer Protocol, is the most common link type and allows the user to connect to any page on the Internet. ftp:// The ftp, or File Transfer Protocol is used primarily for uploading or downloading large amounts of data. This is performed typically using an FTP server, and requires the user to have the correct username and password. Understanding Link Types Use the Hyperlink dialog box to create a link. From the Library of Wow! eBook ptg Chapter 7 Linking Web Pages 165 When you create a link from one document to another, you need to specify the file path, or link path, to the linked document to make sure it works properly. There are three different ways to specify a link path: absolute, docu- ment-relative, and site root-relative. An absolute path provides a complete URL (Uniform Resource Locator) to the linked doc- ument, including the protocol. For example, http://www.perspection.com/books/ od_books.htm. An absolute path is best used for linking to a document on another server. Think of an absolute path as a fixed location that doesn’t change. A document-relative path provides a partial path (the part not the same in URLs) to the linked document within the Web site. If you want to link to a document in the same folder, you only need to provide the file name of the linked document. You omit the part of the absolute path for both documents that are the same. For example, if you want to create a link from http://www.perspection.com/books/ od_books.htm to http://www.perspection.com/ books/dwcs5.htm , you can use the document- relative path dwcs5.htm . If you want to create a link from the file od_books.htm to http://www.perspection.com/ books/download/download_dwcs5.htm , you can use the document-relative path down- load/download_dwcs5.htm. Each slash (/ ) indicates that you move down one folder level. If you want to create a link from the file od_books.htm to http://www.perspection.com/ index.htm , you can use the document-relative path /index.htm. Each slash ( /) indicates that you move up one folder level. A document-relative path is best used for linking to a document in the same folder or one relatively close and you don’t plan on moving the documents. A site root-relative path provides a path from the site’s root folder to a document. A site root-relative folder starts with a forward slash (/), which indicates the root folder. For example, if you want to link to od_books.htm , you can use the site root-relative path /books/od_books.htm. A site root-relative path is best used for linking to a document on a large Web site that uses several servers or one server that hosts several sites, where the local root folder is equivalent to another remote root folder. Understanding Paths From the Library of Wow! eBook ptg 166 Chapter 7 Setting the Relative Path Set the Relative Path for New Links Click the Site menu, and then click Manage Sites. Click the site you want to change, and then click Edit. Click the Advanced Settings category. Click the Local Info category. Click the Document or Site Root option. For site root-relative paths, enter the Web site URL in the HTTP Address box with the equivalent root address on a remote server. ◆ To ch an ge the Web UR L, cli ck the Change the Remote server’s Web URL link. Dreamweaver uses this address to make sure links work on a remote server. Click Save. Click Done. 8 7 6 5 4 3 2 1 When you create a new link, you can specify the default relative path setting you want to use, either document or site root. If you already have links, setting this option doesn’t convert existing links, it only applies to new links. By default, Dreamweaver sets links to use docu- ment-relative paths, which sets the path of a link relative to the current document. A site root-relative path sets links to use the complete HTTP address. If you select the Site Root option, you need to also specify the complete URL in the HTTP Address box to the site root folder on the remote site. For example, if the local root location is C:\Web Site\ and the site root location is http://www.website.com/Pub_Docs/, then the local root folder Web site is set to be equivalent to the remote root folder Pub_Docs. Content linked with a site root-relative path doesn’t display when you preview pages in a browser unless you specify a testing server, or use the Preview Using Temporary File option in Preferences. 8 2 4 5 3 7 6 From the Library of Wow! eBook ptg Chapter 7 Linking Web Pages 167 Set Preview in Browser to Use a Temporary File Click the Dreamweaver (Mac) or Edit (Win) menu, and then click Preferences. Click the Preview In Browser category. Select the Preview Using Temporary File check box. Click OK. 4 3 2 1 3 42 From the Library of Wow! eBook . appli- cation and automatically adds in the proper recipient’s address. news:// The news link connects the user to a specific newsgroup. Newsgroups are basically electronic bulletin boards; on various. books/dwcs5.htm , you can use the document- relative path dwcs5.htm . If you want to create a link from the file od_books.htm to http://www.perspection.com/ books/download/download_dwcs5.htm ,. indicates that you move up one folder level. A document-relative path is best used for linking to a document in the same folder or one relatively close and you don’t plan on moving the documents. A