Linking It Together - Dreamweaver CC - Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Book VI

Dreamweaver CC

Chapter 6: Linking It Together

In This Chapter

image Creating hyperlinks

image Discovering how to use ID attributes

image Linking to external documents, e-mail messages, and PDF files

image Making sure that your links work

Links are a major and necessary mechanism of any website. You must incorporate links on your website; this way, viewers can easily navigate between pages and areas of your site to find the information they’re seeking. In this chapter, we show you how to add links easily and effectively in Dreamweaver.

The Basics of Linking

Links, or hyperlinks, are navigational aids; viewers click links to visit other web pages, to download a file, to open an e-mail address, or jump to a specific spot on a web page (known more accurately as an ID attribute). As you create the first link from one of your web pages to another, you’ve essentially created a website — it may be a small site, but it’s a start. While you’re still in the small site stage, here are a couple recommendations to keep in mind as you add more pages and create more links, making your site even bigger:

check Two kinds of links exist:

• Internal links connect viewers to other parts of your website.

• External links connect viewers to other pages or content outside your site.

We show you how to create both kinds of links in this chapter. A link almost always points to a URL (Uniform Resource Locator), which represents a page or file on your site or on a completely different site altogether.

check Before you start working with any pages to be linked, make sure that you’ve created a Dreamweaver site (see Chapter 3 of this minibook for details); the site helps you locate local files to link to, and later you can check and validate links between pages in your site.

Creating Internal Links

Internal links, an essential part of any user-friendly site, help viewers easily and quickly navigate to other pages on your website.

imageIf you need to change page and filenames after they’ve been linked somewhere, do so only within the Files panel in Dreamweaver. Otherwise, you end up with broken links. Take a look at the Resolving Link Errors section, later in this chapter, to find out how to change the names of linked files without breaking the links.

You can create a link from text or an image (such as a button graphic). The following sections outline several methods you can use for creating links.

Using the Hyperlink dialog box to create a link

To create a hyperlink with text as the link, you can use the Hyperlink command:

image 1. Select some text on the page and make sure that the Common category of the Insert panel is forward. Click the Hyperlink button.

You can also choose Insert⇒Hyperlink. The Hyperlink dialog box appears with your selected text already entered in the Text field, as shown in Figure 6-1.

image

Figure 6-1: Create a link from selected text with the Hyperlink button.

2. You can either enter a URL manually (such as the location of a page or file) or click the Browse folder icon to the right of the Link drop-down list and browse to the file you want to link to within your site’s root folder.

You can also enter an external link here; see how to link to external locations a little later, in the Linking to Pages and Files Outside Your Website section.

3. Choose how the page will appear when the user clicks the link:

• If you want the page to appear in the same Document window, essentially replacing the existing page, leave the Target drop-down list blank or choose _self. (This is the recommended behavior.)

• If you want to force the link to create its own new browser window, choose _blank.

4. Click OK to create your link.

The selected text should appear with an underline or another visual indicator to let you know it’s now a hyperlink.

Using the Property inspector to create a link

You can also link text and images from the HTML Property inspector. Follow these steps:

1. Select text or an image on your page that you want to link up.

2. Click the HTML button on the left side of the Property inspector to switch to HTML view and then type the link location into the Link text box.

3. To locate the destination file, click the folder icon (Browse) to the right of the Point to File button.

The Select File dialog box opens.

4. Navigate to the folder containing the file you want to link to, select it, and click OK (Windows) or Open (Mac).

Creating hyperlinks with Point to File

If you’re in a hurry and want a more visual way of linking up your pages, you’ll love this quick method for creating hyperlinks:

1. Select the text you want to use as a link on your page.

image 2. In the Property inspector, find the Point to File icon next to the Link field; click and drag the icon and pull it toward the Files panel — an arrow follows your movement.

3. Move the arrow pointer over the file in the Files panel that you want to link to and release the mouse button. (See Figure 6-2.)

Voilà! The connection is made, the filename appears in the Hyperlink text box, and the selection is now hyperlinked to your selected file.

image

Figure 6-2: Creating a hyperlink from the Property inspector using Point to File.

Creating ID Attributes

An ID attribute is a link to a specific section of a page, on either the same page as the link or another page entirely. These attributes are especially handy for long pages that have a lot of text. You’ve probably seen and used IDs, for example, when clicking a Back to Top button or when navigating within a long page using a table of contents. IDs are extremely helpful to viewers and should be implemented when possible to enhance usability.

To create an ID attribute in Dreamweaver, follow these steps:

1. Highlight some text on the page where you want the page to jump to.

2. Open the HTML Property inspector and locate the ID text box.

3. Type a short name that’s relevant to the content or location on the page into the ID text field (for example, top or headline). (See Figure 6-3.)

The text top was entered because this ID returns the viewer to the top of the page. IDs are case sensitive, so keep this in mind when deciding on a name.

The new ID is entered into your code, which you can then target with links.

image

Figure 6-3: Create the identifier name in the ID field.

You’ve created the ID attribute but have no links directed to it yet. You can link to the attribute manually, as described next.

Here’s one reason why a short, appropriate name is useful for ID attributes: You may end up having to type it! By manually linking to an ID, you can link within the page you’re working on or direct the link to an ID on a completely different page.

You can manually define an ID as a link by following these steps:

1. If the Property inspector isn’t open, choose WindowProperties.

2. Select the text that you want to link to your new named ID and type the ID name into the Link text field preceded with a hashtag (#). (See Figure 6-4.)

If your ID attribute was top, type #top. The hyperlink is then inserted into your code.

image

Figure 6-4: Type the name of your ID attribute in the Link text box.

You can also link to a page and add an ID reference to it from the Property inspector. For example, if you want to link to this spot from another page, you select an element on that page and, in the Link text box (in HTML view), type the name of the page, a pound sign (#), and the name of the anchor — for example, birds.html#canary. This action directs the browser to the birds page and then to the canary anchor within that page.

Frequently, you see anchors separated by the pipe sign (|). You can create this type character by pressing Shift+\. The backslash key is directly above the Enter (Windows) or Return (Mac) key.

Linking to Pages and Files Outside Your Website

You can link to pages anywhere, in your site or out. An internal link (sometimes referred to as a relative URL) is one within your site. The link to another page in your site may appear as contact.html in the Link text box in the Property inspector. But if you're directing people to a contact page posted on another site, you have a link that looks more like this: http://www.aquent.com/contact. By typing the http:// and the address of the external link (sometimes referred to as an absolute URL) in the Property inspector, you're essentially directing the browser to a site and page on the Internet that's not part of your site.

imageYou must include the http:// prefix in front of a web address. Omitting this prefix results in a Page Not Found error in your browser because it may interpret www.dummies.com, for example, as a local filename rather than as an outside web address.

Linking to E-Mail

Linking to an e-mail address opens the viewer’s default mail program (for example, Outlook for Mac Mail) with a new mail message that’s pre-addressed to the e-mail you specify in the link (as long as the viewer has set up an e-mail program on the machine, of course).

Linking to an e-mail address is easy and extremely helpful if you want to give users an easy way to contact you through your website. To create an e-mail link, follow these steps:

1. Select the element that will be the link to an e-mail.

The element can be either text or an image.

2. In the Property inspector, locate the Link text box, type mailto:<address>, and then press Enter or Return.

For example, type mailto:info@agitraining.com and press the Enter or Return key. The mailto: directive tells the browser that the link is to an e-mail address so that the default e-mail application on the user's computer opens with a new, preaddressed message.

Linking to a PDF File

To link to a PDF file instead of a web page, you link to the name and location of the PDF file. If you link to a PDF file and the Acrobat PDF plug-in is loaded in the viewer's browser, the PDF is opened in the browser window. If the viewer doesn't have the Acrobat plug-in (free fromwww.adobe.com), the browser prompts the viewer to save the file to the computer. You then can view this file later on using Adobe Acrobat Reader or another compatible program, if available.

Resolving Link Errors

Page names can change, and pages can be deleted (intentionally or not), so you should periodically check for broken links. You can ensure that links are working correctly in several ways. The most cumbersome, to preview a page and click every link, would take a long time and wouldn’t be much fun. To check local links more efficiently and quickly, follow these steps:

1. Choose SiteCheck Links Sitewide.

The Results panel appears, with the Link Checker tab active.

Any broken links appear, including page, scripts, and images, as shown in Figure 6-5.

image

Figure 6-5: Use the Check Links Sitewide menu option to make sure that no links are broken, and correct them if necessary.

2. Use the Show drop-down list in the top-left corner to sort the link results by broken link, external link, or orphaned file.

To focus only on broken links, leave Broken Links selected.

If you don’t have broken links — congratulations! If you do, you can fix them directly in the Results panel. The page that has the broken link is listed in the Files column on the left. The broken link appears under the Broken Links column on the right.

3. Click the name of the broken link and correct the filename, if it’s a problem, or click the Browse folder icon to locate the correct location or file.

4. Click OK (Windows) or Choose (Mac).

The broken link is repaired.

imageOrphaned files are pages or images that are not in use or linked to from any place within your site. Although having orphaned files isn’t necessarily a problem, to ensure that you don’t have important files that are orphaned, choose Orphaned Files from the Show menu under the Link Checker section of the Results panel.