[ 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.
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.
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?
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. |
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.
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. |
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 .
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.
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:
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:
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.)
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.
To link one file to another existing file without opening either file or using point to file, do this:
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.
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):
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?
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.
To change all links in a site that point to one page, and to make them point to another page instead, follow these steps:
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:
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).
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.
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.
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:
To check links for only a few files in the site, do this:
To check links for only one document, do this:
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.
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.
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?
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." |
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.
[ LiB ] |