File and Link Management Within a Site

[ LiB ]

The biggest ongoing chore of website development is site managementkeeping track of all the files in the site and making sure the folder structure is logical, that the filenames make sense, that the links all work, and that everything is where you can find it quickly for editing and uploading. After you've defined your Dreamweaver site, all the formidable power of its local site-management tools is at your disposal. Working from your "central command window"in other words, the Site panelyou can keep your finger on the pulse of your site and control your files like a general marshalling her troops.

Managing Files and Folders

Think of the Site panel as a substitute for Windows Explorer or the Macintosh Finder. Leave it open all the time as you work on your site. Use it to perform all basic file operations across your site. Site Files view is your key to managing the file structure of your site; Site Map view is your key to managing its links.

Opening Files

As always, there's more than one way to open files in Dreamweaver. The first and perhaps most popular method is to select File > Open from the menu. You can then use the Open dialog box to navigate to the file that you want and click Open. A faster method is through the Site panel. You can double-click a file in the Site panel (Site Files or Site Map view), and it will open. It's as simple as that! Now that you know this snazzy new way to open a document in one step, will you ever use the old way again?

Creating Files and Folders

To create a new file or folder from Site Files view, click the folder that you want to contain the new item and Choose File > New File or File > New Folder from the Site panel menu bar. Or, you can right-click on the folder that you want to contain the new item and, from the contextual menu, choose New File or New Folder.

A new, untitled file or folder will appear in the Site Files list. (For new files, Dreamweaver creates files of the default document type for this site.)

Always close all documents before performing any file-management operations on them. Dreamweaver can't properly update links, change filenames, and so on if the files are open.

Renaming and Rearranging Files and Folders

Regular humans who aren't super-organizers rarely get the best possible organization system going until they're at least a little way into a site-development project. They might also come across the perfect naming scheme after already creating a half dozen files with useless names that must be changed. The nightmare of this scenario is that, after you've started building a websitecomplete with links to graphics and links between filesany little change in the location or name of a file means having to update every single relative link that points to or comes from that page.

If you use the Dreamweaver Site Files view to perform any of these naming or organizing tasks , Dreamweaver automatically updates all links as needed.

To move a file or folder from one location in the file structure to another, just drag the item to its new location in the Site Files view.

To rename a file or folder, click twice on its name in Site Files view or Site Map view, or select the file and choose File > Rename from the Site panel menu bar. Then type in a new name. Note that if you change the filename of the home page, the site map won't display properly until you refresh it by choosing Site > Re-create Site Cache from the Site panel menu bar.

If your change will require any links to be updated, Dreamweaver presents you with the Update Links dialog box showing you all the files that will need to be updated as a result of your action (see Figure 17.8). From here, simply click Update, and Dreamweaver changes all links in the listed files, so none of your links is broken.

Figure 17.8. Automatic link updating in the Site panel.

Dreamweaver's link updates work only on relative links encoded in anchor (a) tags. Absolute links and those coded as part of JavaScript commands need to be updated manually.

Why would you ever not want to update links? Imagine a scenario in which you have two alternate home pagesmaybe one for when the company is having a sale, and one for other timeswith identical links coming from them but different content. You might leave both home pages in the local root folder, one called index.html and the other called index-sale.html. The next time there's a sale going on, you can easily switch home pages by renaming them index-nosale.html and index.html. When you change the name of index.html to index-nosale.html, Dreamweaver will offer to update your links for you. Don't do it! You still want all links in the site pointing to index.html. When you change the name of index-sale.html to index.html, all links in the site will now point to the alternate home page.

Managing Links

You've already seen some pretty wonderful link management in the way Dreamweaver updates links when you update your file structure. But that's only the first step in a comprehensive link-management system. By utilizing the site map, various Site menu commands, and Site Reports , you can truly be in command of your site's link structure without moving from your command chair .

Creating Links with Point to File

Do you like dragging and dropping? Is it your dream to create a site-wide navigation system quickly and easily, possibly without even opening a single file? You're going to love point to file.

Point to File from Within a File

If you have a document open and the Site panel at least partially visible on your computer screen, you can create a link from within that file to another file in your site using point to file. Do it this way:

1. Open the file that you want to contain the link. Make sure your Site panel is open and visible.
   
   
3. Select the text or image that will become the link.
   
   
4. In the Property Inspector, find the Link field, but instead of clicking the Browse button or typing a name in the input field, find the Point to File button.
   
   
5. Press down on this button and drag over to the Site panel. (If the Site panel is free-standing, just drag so you're over some portion of it, and it will pop to the front so you can see the whole window.) Keep dragging until you're on top of the file to which you want to link. This file becomes highlighted when you're in the right position.
   
   
6. Let go of the mouse button. If your hand-eye coordination was working right, your open document now contains a link to the item you pointed to. It's point-and-shoot! (See Figure 17.9.)
   
   

   Figure 17.9. Using point to file to create a link.

   

   
   

Point to File from the Site Map

If you're in a hurry to create some navigation controls in your site, and you don't even want to open the files to do it, you'll love the capability to point to file from the site map. Just do this:

1. Close all documents. (Always do this before performing filemanagement tasks that might require files to update their contents.)
   
   
2. Open Site Map view in the Site panel.
   
   
3. In the site map, select the file you want to link from. A little point to file icon appears beside the file.
   
   
4. Press down on that icon and drag to the file to which you want to link. You can drag to another file in the site map or to a file in the Site Files list. When you're on top of the desired file and it highlights, let go. Your link is created! (See Figure 17.10.)
   
   

   Figure 17.10. Using point to file to link two files in the site map.

   

   
   

The site map changes to show that a link has been added between the two files. But what kind of link is it? Open the file you linked from and scroll down to the bottom of the page. You'll see that Dreamweaver has added a text link to the other file, with its text derived from the other file's filename. If you continue adding links from this same file, Dreamweaver eventually creates a whole text-based navigation bar along the bottom of the page. It's not fancy, but it's accessible and it works. And you didn't have to open a single file to do it. (You just opened the file to see the results.)

Creating Links with Menu Commands and the Site Map

If pointing-and-shooting isn't your cup of tea, you can still quickly add links from one file to another without opening either file by using menu commands. You must be in Site Map view to do this, but there's no dragging and dropping involved.

Linking to an Existing File with the Site Map View Menu

To link one file to another existing file without opening either file or using point to file, do this:

1. In Site Map view, select the file you want to link from and choose Site > Link to Existing File from the Site panel menu bar. Or, right-click on the file you want to link from and, from the contextual menu, choose Link to Existing File.
   
   
2. When the Select HTML File dialog box appears, browse to the file you want your file to link to. Click Choose to close the dialog box.
   
   

That's it! Your link is in place and shows up as an additional link in the site map. To see how the link was created in the originating file, open that file and scroll to the bottom of the page. You'll see that, as with the point to file links just described, Dreamweaver has added a text link to the other file, with its text derived from the other file's filename.

Linking to a New (Nonexistent) File with the Site Map View Menu

This little feature is the unsung hero of Dreamweaver site management. From the site map, you can determine what files your site will need and which should be linked to which, and essentially build the entire site without opening a single file. To create a new file and link to it all in one process, do this (see Figure 17.11):

Figure 17.11. Linking to a new file in the site map.

1. In Site Map view, select the file you want to link from and choose Site > Link to New File from the Site panel menu bar; or, right-click on the file you want to link from and, from the contextual menu, choose Link to New File.
   
   
2. When the Link to New File dialog box appears, fill in the following information:
   
   

   • Filename Dreamweaver is about to create a new file for you. What would you like it to be called?

   • Title What would you like the page title (contents of the title tag) of the new file to be?

   • Text of Link After the new file is created, Dreamweaver creates a text link in the original file pointing to the new file. What would you like it to say?

3. When you've got all the information entered, click OK to close the dialog box. There's your link! And there's your new file! Open the original file, and you'll see that the link has been added as a simple text link after all other page content. If you keep repeating this process, you can build an entire website starting from one lowly home pageand all without ever leaving the Site Map view.
   
   

Changing Links

You've created your site, and you've linked several pages to the gallery.html page. But then you have a brainstorm and decide that those pages should link to the slideshow.html page instead. Are you in for an afternoon of opening files and changing link field information? No! With Dreamweaver, you can modify what links point to either individually or all at once across the siteagain, all without opening a single file.

The Change Link Command

To change all links in a site that point to one page, and to make them point to another page instead, follow these steps:

1. Select the linked page that you want to modify. The linked page is the page you navigate to , not from. (In the example cited previously, this would be the gallery.html page.)
   
   
2. Choose Site > Change Link from the Site panel menu bar. This brings up the Select HTML File dialog box.
   
   
3. Select the new file that you want your site's links to point to. (In the previous example, this would be the slideshow.html page.) When you're done, click Select.
   
   
4. The Update Files dialog box appears, displaying a list of all the files in the site that should be updated. To change all links and close the dialog box, click Update.
   
   

The Change Links Sitewide Command

The Change Links Sitewide command operates in much the same fashion as the Change Links command, but with a few crucial differences. As with the preceding command, its purpose is to change all links within a site that point to one file so that they point to another file instead. To use this command, do the following:

1. (Optional) Select the linked page that you want to modify. The linked page is the page you navigate to , not from (the gallery.html page, in the previous example).
   
   
2. Choose Site > Change Links Sitewide.
   
   
3. When the Change Links Sitewide dialog box appears (see Figure 17.12), enter the following information:
   
   

   Figure 17.12. The Change Links Sitewide dialog box.

   

   
   

   • Change All Links To If you selected a file before choosing the command, this information will be filled in for you. Otherwise, enter the link here.

   • Into Links To Enter the new link that you want to replace the old link with (in the previous example, the slideshow.html page).

4. Click OK to close the dialog box.
   
   
5. The Update Files dialog box appears, displaying a list of all the files in the site that should be updated. To change all links and close the dialog box, click Update.
   
   

How is the Change Links Sitewide command different from the Change Links command? The purpose of Change Links is to recalculate the document-relative links between two documents in your site, and that's all the command does. Change Links Sitewide is more of a straight Find and Replace command, simply replacing the href attribute for certain links from one value to another. This has the following ramifications :

• Change Links Sitewide can be used only with absolute or root-relative links, not document-relative links. If you browse to choose a link for the Change Links Sitewide dialog box, Dreamweaver calculates that link's root-relative URL. If you type in a document-relative link, you get an error message. If you want to change all references to a document within your site and you're not using root-relative paths, use Change Links.

  

  For more on root-relative versus document-relative links, see the section "How Links Work in the Browser" in Chapter 6, "Links and Navigation."

  
  

• Change Links can be used to change only links that point to documents. Change Links Sitewide can be used to change any href attribute into any other href attribute. For instance, you can update mailto: links when your email address changes, or change all null links from # to the safer javascript:; with Change Links Sitewide. Any time you're changing links that are not document-relative links within your site, use Change Links Sitewide.

Checking and Repairing Links

In the next few sections, you will learn how to check all of your links with Dreamweaver. Then you'll see how to fix any errors it finds.

Checking Links

You can check links one file at a time, check several files or folders at a time, or check the entire site in one massive sweep. The Dreamweaver Check Links function reports three types of possible problems:

• Broken links These are files that have links located internally that don't contain the proper path for the link to work correctly. This means that Dreamweaver could not find internal links referenced on pages of your site.

• External links External links are perhaps the most notorious for creating broken images and the dreaded "Error 404: File not found" message. These are files that are located outside your site (and look like http://www.somesite.com). External links are displayed so that you are aware of the possible problems associated with them. Note that a link on the external links list does not mean that the link is broken; it simply means that it's beyond the scope of Dreamweaver's link-management system to check these links.

• Orphaned files These are files that have no incoming links pointing to them. In other words, these are files in which there is no navigation to get to them. Typically these files are older versions and aren't in use anymore. However, you can't just assume that all orphaned files are not used. Be careful to make sure that orphaned files aren't necessary before deleting them.

Whether you check all of your site's files simultaneously or check only one or two files as needed, the procedure is basically the same.

To check your site's links all at once, do this:

1. Save all open documents.
   
   
2. Choose Site > Check Links Sitewide, or right-click any file or folder in the Site Files list and choose Check Links > Entire Site from the contextual menu.
   
   

To check links for only a few files in the site, do this:

1. Save and close all open documents.
   
   
2. In the Site Files list or site map, select the file(s) that you want to check. Shift-click or Ctrl/Cmd-click to select multiple files.
   
   
3. Right-click any selected file and, from the contextual menu, choose Check Links > Selected Files/Folders.
   
   

To check links for only one document, do this:

1. Open the document you want to check, and save it, if needed.
   
   
2. Choose File > Check Page > Check Links.
   
   

Whichever method you choose, Dreamweaver checks your links and then shows you the results by opening the Results window with the Link Checker tab displayed (see Figure 17.13). Using the drop-down menu at the top of this window, you can view any of the three types of links reported (broken links, external links, or orphaned files). On the left side of the window, the file that has the problematic link is displayed. To the right is the specific link with which Dreamweaver is having a problem. The Orphaned Files section doesn't have a second column because no link is associated with it.

Figure 17.13. The Results window showing the results of checking links across a site.

From here, you can either close the Results/Link Checker window or save the list as a tab-delimited text file. This saves all three link types as one file. You can then import the list into a page by using the Tabular Data object (from the Layout Insert bar), or import the text file into a word processor to be printed for reference.

Fixing Links

Two methods exist for fixing broken and external links (if they actually need fixing). Both are accessed via the Results/Link Checker window.

The first method is to double-click the filename of the file with the broken or external link. This opens the file in a Document window and highlights the suspect link. If your Property Inspector is open, the link also is highlighted in the Link or Src sections of this Inspector. You can then manually type the correct reference, or use the folder icon or Point-to-File icon to select the correct file that you want to link to.

The second method is probably quicker and easier, if you know your site well. From the Link Checker window, click once on the link in question in the right column. This makes the link manually editable (see Figure 17.14). If you're currently troubleshooting the broken links section, a folder icon appears that enables you to easily browse to the correct link. If there are other broken links with the same reference, Dreamweaver asks you if it should update them as well. Now, could that be any easier?

Figure 17.14. Fixing a broken link with the Results window.

If you are using the file Check In/Check Out system on your site, Dreamweaver attempts to check out the file so that it can change the link. If it cannot do so, Dreamweaver displays a warning message and leaves the link as broken. For more on Check In/Check Out, read Chapter 19, "Workplace Collaboration."

Exercise 17.1. Manage Files and Links in a Dreamweaver Site

In this exercise, you'll define a local site and use the Site panel to manage its files. You'll rearrange your file structure, allowing Dreamweaver to update links for you. You'll create new files and folders. And you'll see how to use the Site panel to add links, correct links, and change links.

Before you start, download the chapter_17 folder from the book's website at www.peachpit.com to your hard drive.

1. Start by defining a Dreamweaver site. Choose Site > Manage Sites and click the New button in the Manage Sites dialog box. When the Site Definition dialog box appears, bring the Advanced tab to the front. Make sure the Local Information category is selected. Name the site eBooks Site. (Note that the site name contains a space, which is perfectly legal for this purpose.) For the local root folder, browse to the chapter_17 folder on your hard drive. Figure 17.15 shows the Site Definition dialog box with settings in place. Click OK to close the dialog box and create the site.
   
   

   Figure 17.15. The Site Definition window for setting up the eBooks site.

   
   The Site panel now shows the site files list for the eBooks site (see Figure 17.16). Have you noticed that the organization of files within the eBooks site is not too good? This is what's called a flat structure all the files are loose in the main folder. That's not too easy for finding things. You want to create an images folder in the local root folder and put all of your images in there. But you don't want to break the links when you do so.
   
   

   Figure 17.16. The Site panel for the eBooks site.

   
   
2. In the Site Files pane of the Site panel, select the folder icon that represents your local root folder (it's the one at the top of the list). Right-click on this folder to access the contextual menu, and choose New Folder.
   
   
3. A new untitled folder appears in your site list, with its name selected and ready to change. Rename the folder as images .
   
   
4. Now it's time to move all of your image files into that folder. To make this job as easy as possible, expand the Site panel and, from the column names at the top of the panel click, the Type column. This arranges your files by type. Now all of your images (type: GIF) are displayed together in the list.
   
   
5. Select the top image in the list. Then Shift-click to select the bottom image in the list. Release the Shift key and drag the selected images into the images folder. Dreamweaver asks if you want to update your files. Click Update. After a few seconds, your images are moved. (See Figure 17.17.)
   
   

   Figure 17.17. The eBooks site with all images moved to a special images folder.

   

   
   
6. To test this, double-click the index.htm file to open it. When the home page opens, all the images still display. Select any image and examine the Src field of the Image Property Inspector. The src attribute includes the images folder as part of the relative path, indicating that the image is in an images subfolder.
   
   
7. Now it's time for some link management. Open index.htm, if it's not already open, and choose Preview in Browser. Notice that, in the browser, you can navigate to any of the three subpages, but after you're there, you can't navigate back home. That's a definite limitation.
   
   
8. Back in Dreamweaver, close all open files. (Never perform file-management chores that will alter file contents when files are open!) Expand the Site panel so that both left and right sides are visible, and press the Site Map button to view the map in the pane that doesn't show the Site Files List (see Figure 17.18). This will probably be the left pane.
   
   

   Figure 17.18. The expanded Site panel, showing the site map for eBooks.

   

   
   
9. In the site map, select about.htm . Note that when the file is selected, the point to file icon appears next to it. Press down on that icon and drag back up to index.htm. When you let go of the mouse (if you were on top of index.htm when you let go), a new link appears under about.htm.
   
   
10. Repeat this same procedure to add links from titles.htm, order.htm , and authors.htm back to the home page. Then add links from each of the three subpages to each other. This creates a complete site-navigation system. When you're finished, your site map will look like the one shown in Figure 17.19.
    
    

    Figure 17.19. The eBooks site map showing links added.

    
    You'll also notice that it looks like you suddenly have a lot of pages in your site. If you expand all the plus (+) icons to view the entire hierarchy, your site looks immense! But you still only have four files in there. This is because the site map has no way to represent reciprocal links (such as two pages that link to each other).
    
    
11. After you've done all this, open about.htm and examine the new text links that have been added at the bottom of the page. There they areserviceable, but not too pretty (see Figure 17.20). You're going to fix that.
    
    

    Figure 17.20. The automatically added links in about.htm.

    
    
12. Choose Edit > Find and Replace. In the dialog box that appears, set your options to match those shown in Figure 17.21. You'll be searching all the text in the current site for index and replacing it with Home .
    
    

    Figure 17.21. Finding and replacing the index links with Home.

    

    
    
13. Click the Replace All button. Dreamweaver warns you that this is dangerous because it's going to search all the files of the site, and you won't be able to undo its changes. For the current exercise, be brave and allow it to do so. When you're working in the real world, you might want to be more circumspect and click the Replace button instead, to change one instance at a time. Replace All is much faster but more dangerous.
    
    
14. Repeat this process four more times, changing titles to Available Titles, order to Check an Order, authors to Meet the Authors , and about to About EBooks .
    
    
15. When you've finished all this finding and replacing, open one of your pages and choose Preview in Browser (F12). How does your navigation system look and work?
    
    

[ LiB ]