Adobe Dreamweaver CS3 Unleashed- P5 doc

Broken Links— Broken links are hyperlinks that are not referenced properly. They generally will be linked to a file that does not exist in a particular directory or that in most cases is misreferenced. External Links— This report is a list of external path references within your site. Because Dreamweaver has no way of checking for external links, it will, at the very least, list them out so you can check them manually in one short concise list. Orphaned Files— Orphaned files are files that exist within folders in your site but that are not directly referenced by your web pages. Assets, for instance, will always appear within this list even when cloaked. Dreamweaver is providing a list so that later you can go into your site and perform a manual clean up of unused files. Before we demonstrate the process of checking links, let's actually create a broken link within our new sample.html page. You can do this by opening sample.html, placing your cursor on the page, and choosing Insert, Hyperlink. When the Hyperlink dialog appears, enter the value "Fake Link" within the Text text box and then enter a broken path in the Link field, perhaps homepage.html. Remember, homepage.html doesn't actually exist. We're purposely creating a broken reference here to test the functionality. Click OK and save the page. Now we're ready to check for bad links. Checking links within your site can be accomplished using one of two methods. First, you can check the links for an individual file; and second, you can check links for an entire defined site. Because the process for both is similar, I'll demonstrate the Check Links Sitewide feature for an entire site here. You can do this by following these steps: 1. Within the Files panel, select the defined site, right-click (Control+click) to access the context menu, and choose Check Links, Entire Local Site. The Results panel will appear with the Link Checker tab highlighted, similar to Figure 3.34. Figure 3.34. Open the Link Checker by choosing Check Links, Entire Local Site. [View full size image] As you saw, the Check Links submenu also features the Selected Files/Folders option. If you didn't need to check the links for the entire site, you could highlight the files and/or folders and choose this option. Also, the path we took to open the Link Checker is merely one method. Like every other feature in Dreamweaver, the Check Links feature can be accessed using numerous methods: the Link Checker can also be accessed directly from the Site menu by choosing Check Links Sitewide. Alternatively, you can choose the Check Links Sitewide option from the Site submenu located within the Files panel Options menu. 2. With the Link Checker tab open, you'll notice a few options. First and foremost, in the top-left corner is the Show drop-down menu that offers the three available options for link checking reports (Broken Links, External Links, and Orphaned Files). Also, you'll notice that the Link Checker tab is divided into two columns; the left side is where problematic files will be listed, and on the right is the link that is causing the problem. 3. To fix the broken link, double-click the document on the left side of the pane within the Files column. This opens the document and highlights the problematic link. Within the Property inspector, change the link in the Link text field to something that you know is valid, such as index.html. Alternatively, you could click the troubled link on the right side of the dialog box within the Broken Links column. Here you can either type in the link manually or click the folder icon to search for the appropriate file. After the file is found, the correct path is added and the reference to the broken link disappears within the Link Checker menu. You can also check the external links within your site by choosing the External Link option from the Show menu. As you can see from Figure 3.35, the Link Checker pane lists all the external link references, including the link to the public website as well as the mail link that we created in the previous chapter. Figure 3.35. Check the external link references within your site by choosing the External Links option from the Show menu. [View full size image] You can change the link references within this list, but they won't ever be removed. Dreamweaver will always list all external links regardless of whether you know they're correct or not. Finally, you can view orphaned files, files that are in your site but that aren't linked to any pages, by choosing the Orphaned Files option from the Show menu. As you can see from Figure 3.36, all files not directly referenced from an HTML file are shown as orphaned. Figure 3.36. Orphaned files are listed after you select the Orphaned Files option from the Show menu. [View full size image] If you've determined that a file is no longer needed, you can select it within the list and click the Delete key on your keyboard. Doing this permanently deletes the file. Additional options provided by the Link Checker include the following: Play button— Although the Play button exists as a way to rerun the Link Checker, holding down the icon displays options for checking links for the current document, the entire site, or selected files and folders within the site. Stop button— As your site grows in size, so will the search time. If the search becomes excessively long, click this button to stop the link checker's search. Save button— Click this button to save a text-based report of broken links, external links, and orphaned files for later reference. Status bar— Click the status bar, located at the bottom of the Results panel, to see a total count of files scanned as well as a breakdown of total broken, external, orphaned files, and so on. When you're satisfied with results, close the panel or choose Close Panel Group from the Results panel Options menu. Changing Links Sitewide One of the simplest and most time-efficient methods of managing links within your site is the Change Links Sitewide feature. This feature, available by choosing Site, Change Links Sitewide, allows you to quickly change the name of all instances of a specific link referenced within your site. To demonstrate this feature, let's assume that Mike in Marketing decided he no longer wants the navigation item Company Directory but instead wanted it to read Employee Directory. Aside from changing the link on every page, you would also have to rename the file, essentially breaking all references to that file. A quick way to fix this, without launching the Link Checker, is to use the Change Link Sitewide feature, shown in Figure 3.37, to change all link references from companydirectory.html to employeedirectory.html. Figure 3.37. Use the Change Link Sitewide feature to quickly change references of a link. When you click OK, Dreamweaver scans and fixes all instances of the file. Creating Site Reports One of the basic premises behind site management is having the capability to check your work against various factors before considering your site done. Are you sure every page has a title? Did you add alternate text to all your images for accessibility's sake? Is your HTML clean enough to be considered valid? These questions and more can be answered by running site reports on your site. Available by selecting Site, Reports, the Reports dialog box (shown in Figure 3.28) features numerous options for customizing Dreamweaver's reporting capabilities. As you can see from Figure 3.38, the dialog box is split into two parts. The first part, the Report On list allows you to choose whether to run site reports on the current document, the entire current local site, selected files within the site, or a specific folder. The second part of the dialog is the Select Reports pane. Within this pane, you'll choose the options for reporting. These options include the following: Checked Out By— When Checked Out By is selected, the Report Settings button in the bottom-left corner of the dialog box becomes active. Click the button to search for an individual who may have files checked out. It's important to know that this value is case sensitive; however, you don't need to type in someone's entire name. For example, if you were looking for Zak Ruvalcaba, you could simply type in Zak, zak, or even Ruvalcaba. Design Notes— When this option is selected, the Report Settings button also becomes active. Click it to bring up the Design Notes dialog box in which you can enter the design note to search for and how to search for it. When searching for a design note, you must enter in a condition, such as contains, does not contain, is, is not, and so on, for the search to meet. Recently Modified— Again, choosing this option makes the Report Settings button active. Click the button to launch the Recently Modified dialog, which allows you to customize time ranges, modified by, and server location filters for recently modified files. Combinable Nested Font Tags— Use this option to perform searches for unnecessary uses of multiple Font tags. If for some reason there is more than one Font tag around a particular area of text, most likely it's because each Font tag has a different attribute. For example, the following Font tags <font size="3"><font face="Arial"></font></font> could be combined to read <font face="Arial" size="3"></font>. This option would alert you of this. Accessibility— As you'll see in Appendix A, "Accessibility," this option reports on glaring accessibility issues. Checking this option also makes the Report Settings button available, which, when selected, allows you to configure various potential accessibility issues to report on. Missing Alt Text— This option searches all <img> tags within your document to find missing Alt attributes. Redundant Nested Tags— This option checks to see if tags are nested inside themselves and removes them as necessary. For instance, <em>Visit Vecta Corp's website<em>today!</em></em> could be combined to read <em>Visit Vecta Corp's website today!</em>. This option would alert you of this. Removable Empty Tags— Use this option to report on any tags within your web pages that do not contain anything. An example of an empty tag looks like this: <font></font>. Because the tag doesn't contain anything, it's not needed and should be removed. Untitled Documents— Use this handy option to run reports on duplicate titled documents, nontitled documents, and documents titled as the Dreamweaver default of Untitled Document. Figure 3.38. Use the Reports feature to run checks on HTML and workflow processes. To run a site report, follow these steps: 1. Choose Site, Reports to open the Reports dialog box. 2. In the Report On list, you can choose the current document (if a document is open), the entire current local site, any file you may have selected in the Files panel, or a selected folder. For this example, I'll choose the Entire Current Local Site option. 3. Now that you've selected what you're going to report on, the next thing to choose is what report you want to build. You can choose from any one of the options discussed in the preceding bullet points. I'll choose all the HTML reports except for Accessibility. 4. Click the Run button to generate the report. 5. Dreamweaver scans the documents and presents the site report as a list in the Site Reports tab of the Results panel similar to Figure 3.39. As you can see, Dreamweaver displays an icon symbolizing the severity of the error (question mark means minor or the user may need to provide more info, a yellow warning means slightly higher than minor and that the page may fail in certain aspects when validation is performed, and the red x means a critical error or that the page will fail if validation is performed). The results also display the filename in which the error appears, the line number of the code in which the error appears, and a description of the actual error. Figure 3.39. Site report results are displayed within the Site Reports tab in the Results panel. [View full size image] 6. Similar to the functionality within the Link Checker, you can double-click the error within the Results panel. Dreamweaver will automatically open the document (in Code view) and have your cursor focused on the exact line that contains the error. 7. You can also save the report for later use. To do this, choose the Save button (floppy disc icon). Dreamweaver will save the file in XML format, allowing you to later format the report into a web page, a spreadsheet, or a database. After you've fixed the errors, you can run the report again by selecting the Play button to reopen the Reports dialog. Using Advanced Site Management Options Although it seems we've run the gamut in terms of site management functionality, Dreamweaver includes a few more features that can only be categorized as advanced site-management options. Available from the Advanced submenu of the main Dreamweaver Site menu at the top of the screen, these advanced features include the following: FTP Log— While transferring files using the built-in FTP client, Dreamweaver records all activity. If an error occurs when you are transferring a file using FTP, the FTP log can help you determine the problem. Select this option to present the text-based log within the FTP Log tab in the Results panel. Recreate Site Cache— You may remember from the beginning of the chapter that we discussed the cache. I mentioned that Dreamweaver takes a snapshot of your folder and file structure and caches it. In most cases, this cache is automatically generated, and in some cases, when changes are made within Dreamweaver, regenerated. If for some reason you make changes to the folder and file structure outside of Dreamweaver (not recommended), run this handy utility to re-create Dreamweaver's cache for the site. Remove Connection Scripts— When connecting to databases, Dreamweaver relies on a connection script built in to a file and placed within a Connections folder on your site. If you've begun working with databases, this file is automatically created for you. Unfortunately, Dreamweaver doesn't know when you're no longer working with databases. You can minimize the security risk of someone tampering with your databases (if they found this file and were able to decipher the connection string information) by removing these connection scripts manually. Because your system can be compromised only while the scripts are actually present on the server, removing the connection scripts will remove the risk of database access in the future. Deploy Supporting Files— When working with dynamic web applications, Dreamweaver relies on prebuilt files and scripts (like connection scripts) to create the functionality that you'll ultimately interact with. In most cases, Dreamweaver will automatically create a folder within your site for these files. If for some reason the folder isn't created, you can select this option to force Dreamweaver to do so. This option will be covered in more detail in Part V, "Dynamic Web Page Development." Summary As you've seen in this chapter, Dreamweaver includes numerous options for managing a site. By defining a site first, you can take advantage of various features outlined within Dreamweaver's framework, including caching, link verification, file transfer using FTP, site maps, and so on. Now that you have a foundation in terms of Dreamweaver's user interface, building a web page, and managing a website, let's look at customizing your preferences so that you can configure Dreamweaver to best suit your workflow. Chapter 4. Defining Preferences IN THIS CHAPTER Using the Preferences Dialog Setting Keyboard Shortcuts Working with Tag Libraries As you become more involved with the development of your web pages, defining preferences will become increasingly important and, at times, essential. Let's face it, no one likes to develop in a rigid environment where you're forced to work with a predetermined interface that stifles adaptation to your workflow process. After all, everyone is different; everyone develops differently, and most importantly, everyone uses certain tools within Dreamweaver more than others. To this end, Dreamweaver is unusual in the sense that just about everything can be customized. From workflow processes, to keyboard shortcuts, code hints for tags, favorite objects, commands, dialog interfaces, the menu bar, and so on—all can be customized to suit the way you like to work, and not necessarily the way someone at Adobe thinks that you should work. So far you've learned about the various tools, panels, and windows that Dreamweaver provides as aids in your site development endeavors. You built a simple web page using these tools within Dreamweaver, and then you saw how defining a site is beneficial in terms of managing the pages and ultimately the sites that you work with. Before we continue with more advanced development topics such as tables, CSS, forms, and the like, let's look at the various preferences you can set to further enhance your website development experience. Specifically, we'll explore the following: The Preferences dialog and categories for defining preferences Keyboard shortcuts Tag libraries Although this particular chapter won't examine every customizable feature Dreamweaver provides, don't worry—most features briefly covered here will be covered in great detail as their usage becomes required throughout the book. For instance, in Appendix B, "Extending Dreamweaver," we'll discuss how simple modifications to the menus.xml file can customize the way you interact with the menu bar. Furthermore, we'll examine how you can build your own objects, behaviors, and server behaviors, and how you can package and distribute these items to the Dreamweaver community through the Dreamweaver Exchange. For now, we're merely concerned with customizing the workflow process through simple editable preferences, keyboard shortcuts, and tag libraries. Let's begin. Using the Preferences Dialog Dreamweaver offers numerous methods for workflow customization, but in reality, everything begins with the Preferences dialog (see Figure 4.1). Available by choosing Edit, Preferences (Dreamweaver, Preferences on a Mac), the Preferences dialog includes numerous categories for fine-tuned workflow customization. Figure 4.1. The Preferences dialog includes numerous categories for fine-tuned workflow [...]... follows: Open documents in tabs— This Macintosh-only preference tells Dreamweaver whether to open documents in tabs or to open each document in its own window that you can freely position on the screen Always show tabs— This preference, which is also Macintosh only, tells Dreamweaver whether to always show the Tab bar in the Document window or to only show it when there's more than one document open... mentioned previously By enabling this option, Dreamweaver converts the case of code in any document opened within Dreamweaver to lowercase/uppercase This is a great way to enforce the rules that you set previously, even for documents you open within Dreamweaver that weren't created in Dreamweaver No break after TD— Choose this option if you don't want Dreamweaver to add a line break after the ... not supported in Dreamweaver, you can set the program to be used as the external editor by browsing to it from here Reload modified files— Use this option to specify what you want Dreamweaver to do when it detects that changes have been made externally to a document that is open in Dreamweaver Save on launch— Use this option to specify whether Dreamweaver should always save the current document before... ready to begin using TWDiff Setting Dreamweaver to Use the File Compare Program After you've installed your file comparison utility, you're ready to set the File Compare preferences within Dreamweaver Doing this will allow Dreamweaver to automatically open the external program when you want to compare two files within Dreamweaver To set up your file compare program within Dreamweaver' s preferences, follow... category of the Preferences dialog Reopen documents on startup— Enable this option if you want Dreamweaver to automatically open the last file(s) you had open when you closed Dreamweaver If you disable this option, Dreamweaver either opens the Welcome screen, if you have that option selected, or a blank screen Warn when opening read-only files— Checking this option forces Dreamweaver to alert you when opening... customizable functionality follows: Document type— This list includes all the document libraries that are supported and can be customized within Dreamweaver After you've found the tag library whose colors you'd like to customize, select it, and click the Edit Coloring Scheme button (discussed next) Edit Coloring Scheme— After you've selected a tag library from the Document type list box, and you've... Integration— When checked, this Mac-only preference tells Dreamweaver to beef up its collaborative efforts when BBEdit is set as the External Code Editor This causes Dreamweaver to track what goes on in BBEdit and notify you if you try to return to Dreamweaver with a more recently modified version of your file than what is currently loaded in Dreamweaver External code editor— Assuming that you're using... Element when it's first inserted into the Document window Height— Sets the height in pixels of the AP Element when it's first inserted into the Document window Background color— Sets the background color of the AP Element when it's first inserted into the Document window Background image— Sets the background image of the AP Element when it's first inserted into the Document window If a background image... purposes The Fonts Category You can use the Fonts category, shown in Figure 4.14, to change the fonts that Dreamweaver uses within the Document window, Code view, and within certain tags Figure 4.14 Use the Fonts category to change the fonts Dreamweaver uses for display [View full size image] Remember, Dreamweaver uses the fonts listed here for display purposes only Ultimately, these settings have no effect... formatting, and in general, the interaction of Dreamweaver and code within Code view The Code Rewriting category, shown in Figure 4.9 is no different It is within this category that you will customize how Dreamweaver rewrites code of a certain type, encodes special characters, encodes URLs, and so on Figure 4.9 Use the Code Rewriting category to customize how Dreamweaver should handle the rewriting of . removed. Untitled Documents— Use this handy option to run reports on duplicate titled documents, nontitled documents, and documents titled as the Dreamweaver default of Untitled Document. Figure. customizable functionality follows: Open documents in tabs— This Macintosh-only preference tells Dreamweaver whether to open documents in tabs or to open each document in its own window that you can. dialog. Reopen documents on startup— Enable this option if you want Dreamweaver to automatically open the last file(s) you had open when you closed Dreamweaver. If you disable this option, Dreamweaver either