Adobe Dreamweaver CS3 Unleashed- P15 docx

Figure 13.13. Drag asset favorites into their new folder. Creating New URL and Color Assets You can create new color and URL assets right within the Assets panel. To create new assets for either of these categories, make sure you're within the Favorites section. To create a new color, click the New Color button located toward the bottom of the Assets panel. You can also access that option by choosing the New Color option from the panel's Options menu located in the top-right corner of the panel. When you choose the new color command, a swatch displays allowing you to choose a color, as shown in Figure 13.14. Figure 13.14. You can easily create a new color asset from within the Assets panel. [View full size image] Finally, after choosing a color, you can highlight it in the Assets panel and give it a nickname. Creating a new link is just as easy: Select the URL category and be sure to view the Favorites section. Toward the bottom of the panel, click the New URL button, which launches the Add URL dialog. Here you can define the nickname and the URL you want the asset to link to. Using Find and Replace One of the most useful Dreamweaver features is the Find and Replace dialog. Unlike most Find and Replace options included with word processing programs and the like, the Dreamweaver Find and Replace dialog allows you to search and then replace elements within an entire site, a current document, selected text, open documents, a specific folder, and even selected files within a site. Even better, you can use the Find and Replace dialog as a way to search for elements within source code, text within the Design or Code views, text within specific tags, or specific tags in general. Furthermore, the Find and Replace dialog doesn't require you to have a page open to run it; rather, you can open the dialog at any time while Dreamweaver is open. To open the dialog, choose Edit, Find and Replace. The Find and Replace dialog will open similar to Figure 13.15. Figure 13.15. Use the Find and Replace dialog as a way to search for various types of elements. [View full size image] As you can see from Figure 13.15, the basic Find and Replace dialog displays the following functionality: Find in— Choose an option from this menu to set the location of the search. Options include searching selected text, a current document, open documents, a folder, selected files within a site, or the entire current local site. Search— Choose an option from this menu to set the type of element you want to search for. Options include source code, text, advanced text (text and code combined), and a specific tag. When you select the Text (Advanced) or Specific Tag option, the Find and Replace interface changes to support selections of element types and element values similar to Figure 13.16. Figure 13.16. Selecting the Text (Advanced) and Specific Tag options causes the interface of the dialog to change in support of the selection of element types and element values. [View full size image] Save/Load Query— After you perform a search (otherwise known as a query) that you're happy with, you can easily save it by clicking the Save Query icon. This action launches the Save Query dialog, which allows you to save the query anywhere on your computer as a DWR file. Alternatively, you can load a saved query by clicking the Load Query icon. Doing this launches the Load Query dialog, which allows you to open an existing DWR file. Find— Enter the element that you want to search for in this text box. In most cases, the element you enter here will be plain text. Replace— Enter the element that you want to replace the element you are searching for in this text box. Options— Use the check boxes in this group as a way to refine your search so that the element to be searched matches the case of what you type into the Find text box. Other options include matching the whole word to be searched for, ignoring whitespace, or using regular expressions, if you know how to write them. Find Next/Find All— Use the Find Next button as a way to step through the occurrences of the elements you are searching for on a page-by-page basis. Each page is opened individually. Alternatively, you can choose the Find All button. Doing this displays all the results in a list within the Search tab of the Results panel. Replace/Replace All— Use the Replace button as a way to replace the searched value with the value entered in the Replace text box. Alternatively you can choose the Replace All button. Doing this replaces all instances listed within the Results tab of the Results panel with the value entered into the Replace text box. To demonstrate the Find and Replace dialog's functionality, let's perform a couple of searches: one basic and one advanced. To perform the basic search, follow these steps: 1. With the Find and Replace dialog open, select the Entire Current Local Site option from the Find In menu. 2. Choose the Text option from the Search menu. 3. Enter the text Vecta Corp into the Find text box. 4. Disable the Match Case check box. 5. Click the Find All button. As you can see from Figure 13.17, the results of the search are displayed within the Search tab of the Results panel. Figure 13.17. The results of the search are displayed within the Search tab of the Results panel. [View full size image] As you can see from Figure 13.17, the Matched Text column displays a short string of text complete with the searched value underlined in red. Remember, we searched for text in the local site. The companydirectory.html page is the only page in our site that has the text Vecta Corp within the design. If you wanted to search for the text Vecta Corp in source code, you would get much broader results. To make an edit to that page, you could double-click the row within the Result window. Doing this opens the page and highlights the matched text within the page. You could also use the Replace and Replace All features to replace this string of text with something different. Because we just want to demonstrate the search functionality, we'll avoid the Replace and Replace All buttons. Now let's do a more advanced search. In this next example, we'll search for text that is contained within a specific tag using the Text (Advanced) option. To do this, follow these steps: 1. Reopen the Find and Replace dialog by choosing Edit, Find and Replace, pressing Ctrl+F ( +F), or by choosing the small Play icon in the Results window. Either method reopens the Find and Replace dialog. 2. Make sure the Entire Current Local Site option is selected from the Find In menu. 3. Choose the Text (Advanced) option from the Search menu. The dialog's interface will change to accommodate entering text as well as selecting tag searching values. 4. Enter the text Vecta Corp into the Find text box. 5. In our scenario, we'll want to search for all instances of the Vecta Corp text value that are contained in the <title> tag. Knowing this, select the Inside Tag option from the first menu and select the Title option from the second menu. After you've made your selections, the dialog will resemble Figure 13.18. Figure 13.18. Customize the search so that you're searching for the text Vecta Corp within the <title> tag. [View full size image] 6. Now click the Find All button. Because we have only six pages and those six pages contain titles with the text Welcome to the Vecta Corporation, the Search tab within the Results window displays six results. As you can see, the Find and Replace dialog is powerful. It becomes extremely powerful when searching for specific tags. Assume for a moment that you have a site that contains 1,000 pages. Also assume that each page used different style sheets, which were created by a different department. What if you were asked to replace all style sheet references on every page to match a single style sheet reference called styles.css? You'd be working for hours, opening every page, and changing the style reference to point to styles.css. Using the Specific Tag option in the Find and Replace dialog, this effort would be minimal. Figure 13.19 shows what the Find and Replace dialog might look like to accomplish this task. Figure 13.19. Using the Specific Tag option, you could easily search for specific tags and attributes and then replace that tag or attribute with a custom value. [View full size image] As you can see from Figure 13.19, our search would involve locating the <link> tag with the attribute href with the attribute value set to anything. The query might look like this: <link href="<anyvalue>"> That value would be set to styles.css or <link href="styles.css"> The possibilities are endless. You'll quickly notice that dozens, if not hundreds, of possibilities exist using the many options that are available within the menus. Using the History Panel You can use Dreamweaver's History panel as a way to undo multiple steps at once. Although the Undo option within the Edit menu is still the ideal option for going back in time a step at a time, the History panel allows you to visually see numerous steps and even go back in time any number of steps at once. To open the History panel, choose Window, History. The History panel appears similar to Figure 13.20. Figure 13.20. The History panel allows you to go back in time by any number of steps at once. As you can see from Figure 13.20, the History panel features a slider that can be dragged up and down to undo or redo multiple steps at once (limited only by the number you specify within the Maximum Number of History Steps text box in the General category of the Preferences dialog). Tip Out of the box, Dreamweaver supports 50 history steps. Beyond that, old steps are removed to make room for newer steps. Depending on how much memory your computer has, you may want to increase this number. To do this, select Edit, Preferences. When the Preferences dialog appears, select the General category and increase the Maximum Number of History Steps value accordingly. Perhaps the most valuable feature outlined in the History panel is the capability to replay steps and record commands. We'll cover this next. Working with Commands At the heart of task automation and workflow enhancement lie commands. Commands, located within the Commands menu, are prebuilt pieces of functionality that, when executed, perform various actions on your web pages, such as cleaning up your HTML/XHTML code, applying Dreamweaver's source formatting to your HTML code, creating an automated web photo album, and more. We've already covered a couple commands in previous chapters (such as the Sort Table command), and others will be covered in future chapters, but three commands stand out as workflow enhancement features and will be covered in this chapter. These commands are Record commands Apply Source Formatting Clean Up (X)HTML and Clean Up Word HTML Recording New Commands One of the benefits to working with commands in Dreamweaver is that they're not static, meaning that what you get out-of-the-box is not all you have to work with. Instead, Dreamweaver allows you to download free commands from the Dreamweaver Exchange (covered in Appendix B, "Extending Dreamweaver") or even create your own commands by recording the steps you take within Dreamweaver and then playing them back. Furthermore, you can even highlight a number of steps within the History panel and save the steps as a command for use later in your web pages. Throughout this section we'll explore the different options for working with self-made commands using the recording features in the Commands menu as well as the Save Selected Steps as a Command option from within the History panel. Let's begin by exploring the recording features. To record a new command, follow these steps: 1. Create a new blank HTML page by choosing File, New. Choose Blank Page, HTML, <none>, and click Create. 2. With the blank page now open, choose Commands, Start Recording. 3. Type the text Welcome to the Vecta Corp site! 4. Press the Enter (Return) key. 5. Choose Commands, Stop Recording. 6. To play the newly recorded command, choose Commands, Play Recorded Command. Alternatively, and quite possibly a quicker way of replaying a command, you can click the Replay button in the History panel while the Run Command step is highlighted in the History list. Doing this allows you to continuously replay the recorded command without having to access the Commands menu each time. Although the process of recording a command and replaying it numerous times seems like a beneficial alternative to retyping the text each and every time, it does have its limitations. For instance, closing Dreamweaver or flushing the Clipboard will delete the recorded command. What if you wanted to save the command so you could use it within any site, at any time, even after you've closed and reopened Dreamweaver? To do this, you have to create and save a command. You can do this by following these steps: 1. To save a command, let's first backtrack out of what we've done by moving the slider in the History panel back up to the top of the list. Alternatively, you could choose the Clear History option from within the History panel options menu. Again (without choosing the Start Recording option), enter the text Welcome to the Vecta Corp Site! and then click Enter. 2. Now highlight both entries in the History panel and choose the Save As Command button as shown in Figure 13.21. The Save As Command dialog appears. Figure 13.21. Highlight the two entries within the History panel and click the Save As Command button. 3. Within the Save As Command dialog, enter the text Vecta Corp Welcome and click OK. 4. You can now access the command at any time by choosing the name from the Commands menu similar to Figure 13.22. Figure 13.22. The new command appears in the Commands menu. [View full size image] [...]... because you'll use these most of the time Click OK 5 As you'll notice, Dreamweaver shows a log, detailing the numerous errors that were found and fixed Now switch to the Code view and see the result As you might have noticed, Dreamweaver compacted the code down to 30 or so lines! Summary As you have seen throughout the chapter, Dreamweaver includes numerous options for enhancing your workflow processes... www.dreamweaverunleashed.com You'll want to save the files for Chapter 14 in an easy-to-find location I'll place mine in C:\VectaCorp\Chapter14 Also, don't forget to update your site reference to point to this newly created folder Understanding Dreamweaver Templates Although the concept of templates can seem like a broad term, thinking analogously can aid in understanding the framework behind Dreamweaver. .. normally would when creating pages for a site When you have the design exactly the way you want it, choose File, Save As Template Dreamweaver converts the document into a DWT (Dreamweaver Template) file and places it in a Templates folder (created automatically for you by Dreamweaver) in your site To get you started, go ahead and open the template.html file included with the files for this project Note... attributes that Dreamweaver allows you to mark as editable include text, numbers, URLs, colors, and even Boolean values such as the readonly and multiple attributes for form elements Even better, Dreamweaver makes it easy to customize these attributes by outlining a centralized Editable Tag Attributes dialog that makes the attributes of the selected element available from a drop-down menu Furthermore, Dreamweaver. .. case, Dreamweaver specifies the bgcolor attribute as editable by setting its value to a dynamic parameter (specified by the opening @@ and closing @@ symbols) named BgColorAttribute Inspecting the tag reveals that that parameter is actually listed in a Dreamweaver comment as follows: This TemplateParam tag is used by Dreamweaver. .. www.dreamweaverunleashed.com You'll want to save the files for Chapter 14 in an easy-to-find location I'll place mine in C:\VectaCorp\Chapter14 Also, don't forget to update your site reference to point to this newly created folder Understanding Dreamweaver Templates Although the concept of templates can seem like a broad term, thinking analogously can aid in understanding the framework behind Dreamweaver. .. normally would when creating pages for a site When you have the design exactly the way you want it, choose File, Save As Template Dreamweaver converts the document into a DWT (Dreamweaver Template) file and places it in a Templates folder (created automatically for you by Dreamweaver) in your site To get you started, go ahead and open the template.html file included with the files for this project Note... As it stands, Dreamweaver supports four types of regions within a template: Editable regions— The simplest way of allowing users to make additions to a template-derived page is to add editable regions Editable regions allow users of a template-derived page to make changes to all parts of the region, including tags and tag attributes within the region Editable attributes— By default, Dreamweaver locks... existing formatting from the HTML code [View full size image] 4 To reapply Dreamweaver' s default formatting, choose the Apply Source Formatting command from the Commands menu As you can see from Figure 13.25, indentations, tabs, and so on are reapplied, resulting in much cleaner and easier-to-decipher code Figure 13.25 Reapply Dreamweaver' s formatting by choosing Commands, Apply Source Formatting [View... name the file template Later, you'll notice the file has been saved as template.dwt To create the new template, click the Save button Notice that Dreamweaver launches an Update Links dialog Because newly created templates reside in the Templates folder, Dreamweaver must update any links in the page to coincide with the change For instance, our navigation menu lists five links that point to index.html, . in Dreamweaver is that they're not static, meaning that what you get out-of-the-box is not all you have to work with. Instead, Dreamweaver allows you to download free commands from the Dreamweaver. File, Save As Template. Dreamweaver converts the document into a DWT (Dreamweaver Template) file and places it in a Templates folder (created automatically for you by Dreamweaver) in your site. To. Dreamweaver Exchange (covered in Appendix B, "Extending Dreamweaver& quot;) or even create your own commands by recording the steps you take within Dreamweaver and then playing them back. Furthermore,