15.4 Find and Fix Broken Links
Broken links are inevitable. If you delete a file from your site, move a page or graphic
outside of Dreamweaver, or simply type an incorrect path to a file, broken links and
missing graphics may result. In the B.D. era (Before Dreamweaver), the only way
to fix such problems was to methodically examine every link on every page in your
site. Fortunately, Dreamweaver's link-checking features can automate the process of
tracking down broken-link problems.
In this context, a link doesn't only mean a hyperlink connecting one page to another. Dreamweaver
also uses the term to include the paths that identify external files incorporated in your Web page, such as
GIFs, JPEGs, external CSS style sheets, and Flash movies. For example, if a graphic is missing or isn't in the
place specified by the Web page, Dreamweaver will report a broken link.
15.4.1 Finding Broken Links
The Check Links Sitewide command scans an entire site's worth of files and reports all
links and paths that don't lead to a file. (It's one of Dreamweaver's site management
features, meaning that you have to define a local site before using this command; see
Section 14.1.1). Note that Dreamweaver only checks links and paths within the local site
folder; it doesn't check links that lead to other people's Web sites.
If your local site contains a lot of pages, you may not want to check links in one or more folders whose
pages you know have no broken links. You can exclude files from the Check Links Sitewide operation using the Cloaking feature described in Section 16.2.3. Doing so also makes the link-checking operation go faster.
220.127.116.11 Checking just one page
To check links on an open page, save it in your local site folder. Then choose File
Check PageCheck Links (or press Shift-F8). Dreamweaver scans the page and opens
the Link Checker window, which lists files containing broken links (see Figure 15-3). If Dreamweaver doesn't find any broken links梱ou HTML god, you梩he window
comes up empty.
Although Dreamweaver can't check links to the outside world, a free tool from the W3C can. You can
find its link checker at
. This tool checks both internal links (between pages
on the same site) and external links (to other sites). The only possible downside: the pages you wish to
check must already be up on the Web.
18.104.22.168 Checking specific pages
You can also check links just on specific pages of your site from the Link Checker panel:
Choose WindowResults to open the Results panel and click the Link checker
The Link Checker panel opens.
Use the Files panel to select the site you wish to check (see Section 14.1.5).
If you're already working on the site you want to check, you can skip this step.
In the Files panel, select the files you'd like to check.
For techniques on selecting files and folders in the Files panel, see the box in
Selecting a folder will make Dreamweaver scan all files in that folder.
Click the green arrow icon in the Link Checker panel. From the menu that appears,
choose Check Links for Selected Files/Folders in Site.
Alternatively, you can right-click (Control-click) the selected files, and then choose
Check LinksSelected Files/Folders from the contextual menu.
Either way, Dreamweaver scans the pages and opens the Link Checker panel
22.214.171.124 Checking the entire Web site
You can check all the links on all pages of your Web site in any of three ways:
Open the Web site you want to check (press F8 to open the Files Panel and use the
panel's menu to select the site), and then choose SiteCheck Links Sitewide. Or
use the keyboard shortcut, Ctrl+F8 (-F8).
Open the Files panel and right-click (Control-click) any file. Choose Check Links
Entire Current Site from the contextual menu.
Open the Link Checker panel (WindowResults to open the Results panel then
click the Link Checker tab), click the green arrow icon and, from its menu, choose
Check Links for Entire Site.
Once again, Dreamweaver scans your site and opens the Link Checker panel, which
lists files containing broken links (Figure 15-6).
The Check Links
generates a list of all
external links and
orphaned files (files
with no links to them).
If you wish, click the
Save (floppy disk)
button to save all of
this information into a
tab-delimited text file.
You'll often want to use the tools in the Results panel on
more than one page in your Web site. Fortunately, most of
these tools can work on multiple pages in the Files Panel.
You probably can figure out that you should click a file to
select it. But you can also select several files that are listed
consecutively: Click the first one, scroll if necessary, and then, while pressing Shift, click
the last one. Dreamweaver
highlights all the files between
your first and final clicks.
If you want to select several
files that aren't consecutive
in the list, the trick is to click
each one while pressing the
Ctrl () key.
Once you've selected one or more files, you can deselect
one by Ctrl-clicking (-clicking) it once again.
Dreamweaver MX 2004 also includes a snazzy new command
for selecting recently modified files in the Files panel.
Suppose you want to select all the files you created or
changed today (to see if the links work, or to upload them
to your Web server as described in Section 16.2). To use this
command, click the Files panel's contextual menu button
in the upper-right corner of the panel. From the menu that appears, select EditSelect
The Select Recently Modified
window appears. You can
either specify a range of dates
(for example, files you created
or changed between January 1,
2002 and January 7, 2003) or
a number of days (to specify
all modified files in, say, the last 30 days). (The last option桵odified By梬orks only
with Macromedia's Contribute program.) Set the options,
click OK, and Dreamweaver selects the appropriate files in
the Files panel.
15.4.2 Fixing Broken Links
Of course, simply finding broken links is only half the battle. You also need to fix them.
The Link Checker panel provides a quick and easy way to do this:
In the Link Checker panel, click a path in the Broken Links column (see Figure 15-6).
The path is highlighted, and a tiny folder icon appears to the right.
The Link Checker panel shows you which pages contain broken links, but doesn't show you the text or images of the broken links themselves, which can make it difficult to figure out how you're supposed to fix
them ("Was that a button that links to the home page?"). In such a case, double-click the file name in the Link
Checker panel. Dreamweaver opens the Web page, and, even better, highlights the link on the page.
Once you've determined where the link should lead ("Oh yeah. That's the button to the haggis buffet menu"),
you can fix the link on the page (see Section 4.5.2) or go back to the Link Checker panel and make the change
as described in the next step.
Click the tiny folder icon.
The Select File dialog box opens. From here, you can navigate to and (in the next
step) select the correct page, the one that should have been opened by that link.
If you prefer, you can type a path directly in the Link Checker panel. Doing so
usually isn't a good idea, however, since it's difficult to understand the path from
one page to another by just looking at the Link Checker panel. Searching for the
proper page using the Select File dialog box is a much more accurate and troublefree
Double-click a Web page.
The dialog box disappears, and Dreamweaver fixes the link.
If your Web site contains other links pointing to the same missing file, Dreamweaver
asks if you'd like to update those pages, too梐n amazing time saver that
can quickly repair broken links on dozens of pages.
Dreamweaver's behavior is a bit odd in this regard, however. Once you fix one link, it remains selected
in the Link Checker panel. You must click another broken link, or one of the buttons in the window, before
Dreamweaver asks if you'd like to fix that same broken link on other pages.
Continue to fix broken links, following steps 1 through 3.
When you've repaired all the broken links, click the close button.
15.4.3 Listing External Links
Although Dreamweaver doesn't verify links to other Web sites on your pages, it does
show you a list of such external links when you run the link checker. To see this list,
choose External Links from the Show menu of the Link Checker panel (see Figure 15-7). The list includes absolute URLs leading to other sites (like
well as email links (like mailto:Webmaster@cosmofarmer.com).
This window can be especially useful if, for example, you've created a link to a certain
external Web site several times throughout your Web site:
Although Dreamweaver can't
check external links, you can
use this window to change
the URL of an external link.
Choose SiteCheck Links Sitewide (or press Ctrl+F8 [-F8]).
Dreamweaver scans your site and opens the Link Checker panel.
From the Show pop-up menu, choose External Links.
The window lists links you've created to sites outside your own.
Click the external link you want to change.
Dreamweaver highlights the link, indicating that you can now edit it.
Type the new URL; press Enter.
If other pages contain the old URL, Dreamweaver asks if you would like to update
them as well. If so, click Update; the deed is done.
15.4.4 Orphaned Files
The Link Checker panel also provides a list of files that aren't used by any Web page
in the site?span class="docEmphasis">orphaned files, as they're called. You wind up with an orphaned graphic
file when, for example, you save a GIF into your site folder, but then never use it on a
Web page. Or suppose you eliminate the only link to an old page that you don't need
any more, making it an orphaned file. Unless you think you might link to it in the
future, you can delete it to clean up unnecessary clutter in your site.
In fact, that's the primary purpose of this feature: to locate old and unused files and
delete them. Here's how it works:
Choose SiteCheck Links Sitewide, or press Ctrl+F8 (-F8).
Dreamweaver opens the Link Checker panel.
From the Show menu, choose Orphaned Files.
The list of orphaned files appears (see Figure 15-8).
Select the files you want to delete.
You can use any of the selection methods described in Section 126.96.36.199.
Dreamweaver asks if you really want to delete the files. Click OK if you do, Cancel
if you suddenly get cold feet.
Click the close button when you're finished.
Identify (and delete) unused files using Dreamweaver's
Link Checker. This panel lists external links and
orphaned files as well as broken links; use the Show
menu to isolate the different types of link.
Before you get spring-cleaning fever and delete all orphaned files in your site, however,
keep a few pointers in mind:
Just because a file isn't currently in use doesn't mean you won't need it again later.
For example, say you have an employee of the month page. In March, you included
a photo of Robin Albert, your best salesperson. In April, someone else got the award,
so you removed Robin's photo. You're not using that photo now梤endering it an
orphaned file梑ut next month you may need it again, when Robin develops a
spurt of motivation. Make sure a file is really useless before deleting it.
More important, Dreamweaver may flag as "orphaned," files your site actually
needs. For example, some sites include what's called a splash page: an introductory
page that first appears when someone comes to the site. It might be a page with
a bold graphic and the text "Click here to enter the site." Or it might be a fancy
Flash movie intended to make a big impact on your visitors. Usually, this page
is nothing more than a welcome mat that leads to the real home page. Since it's
simply an introductory page, no other page in the site links to it. Unfortunately,
that's precisely what Dreamweaver considers an orphaned file.
pages. Dreamweaver doesn't keep track of these references, and will identify those
files as orphans (unless they're inserted or linked to elsewhere in the page or
On the other hand, Dreamweaver is somewhat smarter when it comes to Behaviors.
graphic files you use in a rollover effect梐nd doesn't list them as orphaned files.
The bottom line is that while this report is useful, use it cautiously when deleting
15.4.5 Changing a Link Throughout a Site
Suppose you've created a page on your site to teach your visitors about the basics of
the HTML language. You think this would be really, really helpful to your visitors,
so you create links to it from every page on your site. After a while, you realize you
just don't have the time to keep this page up to date, but you still want to help your
visitors get this information. Why not change the link so it points to a more current
and informative source? Using Dreamweaver's Change Link Sitewide command, you
can do just that.
Choose SiteChange Link Sitewide.
The Change Link Sitewide dialog box opens (see Figure 15-9).
This dialog box offers two different fields: Change All Links To and Into Links To.
Understanding what you're supposed to do at this point is easier if you imagine
that the first label is actually "Change All Links That Currently Point To." In other
words, first you'll indicate where those links point now; then you'll indicate where
you'd like them to go instead.
At this point, you can type the new Web address into the Change All Links To field.
For example, if your aim is to round up every link that now points to Yahoo and
redirect them to Google, you could start by typing http://www.yahoo.com here.
If the links you're trying to change refer to a page in your own site, however,
proceed like this:
Dreamweaver uses a root-relative link to
specify the page, as indicated by the slash
(/). Don't worry: this doesn't mean Dreamweaver
will make the link root-relative.
It's just how Dreamweaver identifies the
location of the page in the site. See Section 4.1.3
for more on root-relative links.
Click the folder icon to the right of the Change All Links To field.
The Select Link to Change dialog box opens. You're about to specify the file that
the links point to now.
Select a file in the local site folder; click OK (Windows) or Choose (Mac).
In the following steps, Dreamweaver will change every link that leads to this file,
whether it's a graphic, cascading style sheet file, or any other external file that can
be part of a Web page.
As a shortcut to following steps 1, 2, and 3, you can select a file in the Files panel, then choose SiteChange Link Sitewide. Dreamweaver automatically adds the selected file's path to the Change All Links To
Now it's time to substitute the new URL or file梩he one to which all of those links
will be redirected. If you're reassigning them to a different Web site, you can type
its URL directly into the Change All Links To field. For example, in the previous
example, you can type http://www.google.com.
For a quicker way to change one external link into another, see Figure 15-7.
If you'd like the changed links to point to a file on your own Web site instead,
proceed like this:
Click the folder icon to the right of the Into Links To field.
The Select Link to Change dialog box opens.
Select a file in the local site, and then click OK (Windows) or Choose (Mac).
You've just selected the new file you wish to link to. In other words, every link that
once led to the file you selected in step 3 will now link to this file. You can select
graphics, cascading style sheet files, and any other external files you can include
in a Web page.
You'll get unpredictable results, however, if you change a link that points to a graphic
file into, say, a link that points to a Web page, or vice versa. Make sure the "before"
and "after" links share the same file type: Web page, style sheet, or graphic.
Click OK to make the change.
The same Update Files dialog box you encountered in the last chapter appears,
listing every page that will be affected.
Click Update to update the pages.
Dreamweaver scans your site and updates the pages.