Adobe Dreamweaver CS3 Unleashed- P15

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

57
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P15: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P15

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 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 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 tag with the attribute href with the attribute value set to anything. The query might look like this: That value would be set to styles.css or 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, , 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]
You'll now be able to access this command at any time even if you close and reopen Dreamweaver. If you find that you're no longer using a command, you can remove it from the list by choosing Commands, Edit Command List. The Edit Command List dialog will appear similar to Figure 13.23. Figure 13.23. The Edit Command List allows you to delete commands from Dreamweaver.
As Figure 13.23 indicates, you can rename and remove a command from the list. To remove a command from the list, choose the command and click the Delete button. Dreamweaver will prompt you with a message asking if you're sure you want to delete the command. Click Yes. The command will be permanently deleted. Apply Source Formatting You can use the Apply Source Formatting command as a way to reapply Dreamweaver's default tabs, indents, and so on to the HTML code of your web pages. Alternatively, you can use the Apply Source Formatting to Selection command to reapply Dreamweaver default formatting to a specific selection of code while in Code view. As an example of how the Apply Source Formatting feature works, follow these steps: 1. Open a Vecta Corp page from the Files panel and immediately switch to Code view. 2. Highlight all the code by choosing Edit, Select All or by pressing Ctrl+A ( +A). 3. Now select the Outdent Code icon located third from the bottom within the Code toolbar until all your code is lined up with the left edge of the Document window. The code will resemble Figure 13.24. Figure 13.24. Remove the 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 full size image] As you saw in Chapter 2, "Building a Web Page," you can also use the Format Source Code icon, located last in the Code toolbar while in Code view. Selecting this button displays a submenu of options that include the Apply Source Formatting and Apply Source Formatting to Selection commands. Clean Up (X)HTML and Clean Up Word HTML One of the last actions that I perform before I call a web page complete (aside from using the Apply Source Formatting command) is the Clean Up (X)HTML command. Let's face it, although Dreamweaver writes excellent HTML in the background, there will be many times where you'll add code, remove code, add some more code, remove some more code, and so on. Throughout the development life of the page, the code can become unsightly and, thus, will need a little attention. You can use the Clean Up (X)HTML command as a way of cleaning up or fixing problems with your code. For instance, you can use this command to search for and repair empty tags, redundant nested tags, non-Dreamweaver HTML comments, and special markup that Dreamweaver may add, or even specific tags that you want to specify. Furthermore, you can have the Clean Up HTML command combine nested tags when possible and even show the results within a log when it's finished. Note Depending on the document type definition of your document, this command will change to either a Clean Up HTML or Clean Up XHTML option. Although the functionality outlined by the two options are similar, they warrant mention.
To demonstrate the Clean Up XHTML command's use, follow these steps: 1. Begin by opening the page cleanuphtml.html located in the Assets folder. As you'll see, the page is basic, but contains numerous errors (most of which I purposely included) that we'll need to fix. 2. Choose the Clean Up HTML option from the Commands menu. The Clean Up HTML / XHTML dialog will appear, as shown in Figure 13.26. Figure 13.26. Run the Clean Up (X)HTML command. 3. You can leave the default options selected because you'll use these most of the time. Click OK. 4. As you'll notice, Dreamweaver shows a log detailing the errors that were found and fixed. Alternatively, you could also use the Clean Up Word HTML option to fix the code mess for which Microsoft Word's HTML editor is infamous. To demonstrate the use of this command, follow these steps:
1. Open the page cleanupwordhtml.html located within the Assets folder. 2. Switch to the Code view to see the 270 or so lines of code that we'll need to clean up. 3. Choose the Clean Up Word HTML option from the Commands menu. The Clean Up Word HTML dialog will appear, as shown in Figure 13.27. Figure 13.27. Run the Clean Up Word HTML command. 4. Again, we'll leave the default options selected 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. Throughout the chapter we explored the Assets panel, the History panel, the Find and Replace dialog, and three commands including the Record New Command, Apply Source Formatting, and Clean Up (X)HTML/Clean Up Word HTML. In the next few chapters, we'll take workflow enhancement to a new level by introducing templates and library items.
Chapter 14. Working with Templates IN THIS CHAPTER Working with Dreamweaver Templates Creating Editable Regions Adding Content to Templates Setting Editable Attributes Working with Repeating Regions Defining Optional Regions Nested Templates Templates and the Assets Panel Updating Templates Changing the Default Document Chances are, if you're reading this book from cover to cover, your interests lie in building large-scale websites that employ intricate navigation structures and contain large amounts of information you want to present in a clean and easy-to-find manner. Furthermore, you're probably looking to build a site that doesn't require a lot of setup time and is easy to maintain after it has been built. This is where Dreamweaver templates come in. Using templates can be an incredible timesaver for both the setup and maintenance phases of your site. If your goal is to build a site that consists of 100 or more pages, it would be beneficial to design one page and then derive every document within the site from that one master page, or template. Templates provide added benefits from a maintenance perspective. Because the design for every page of your site is prebuilt and contained within a master template, making changes to all 100 or more pages of your site is simply a matter of making the change to the one master template, in which case changes are instantly propagated down to all derived pages (pages in the site based off of the template). As you'll learn in this chapter, Dreamweaver outlines numerous features for working with templates. Whether you're building them from scratch, building a template from an existing design, or basing a web page off of a prebuilt template, this chapter unleashes the power that Dreamweaver templates offer. As you have done for the rest of the chapters in this book, you can work with the examples in this chapter by downloading the files from 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 templates. Think of professions in the real world as examples. For instance, furniture makers use templates to duplicate furniture based on a master design. To add uniqueness to each furniture piece, they may use different dyes or leather colors. Clothing manufacturers create one pattern and base future clothing pieces from the master pattern. Welders create jigs as a way of precisely duplicating curves when welding medal. The list goes on and on. Templates are a way for individuals to create a master design or pattern and then derive future designs from that master, effectively ensuring consistency and uniformity across future versions of that design. The profession of web development is no different. Using the Vecta Corp organization as an example, assume that our organization has numerous departments. Also assume that each department wants to create their own web presence within a Vecta Corp intranet site. Although the overall framework of the site must remain the same, each department is welcome to customize the content that appears on their particular page. This is where templates become useful. As the webmaster, your task is to create one master template file. When that master template file is done, we can base other pages off of that master. For instance, we could create the main page, the about us page, the solutions page, the support page, and the contact us page. Even better, we could allow the web developers from each department to derive their own pages off of our template for each of their own department sites. The obvious benefit is that this will ensure a consistent look and feel between the corporate internet and intranet sites. The major benefit goes beyond consistency and uniformity and includes maintainability. Now assume that we need to add a link to the navigational structure of the site. Traditional methods would have us opening every page in our site and manually adding the new link to the navigation menu. Even worse, we would have to ask all web developers in each department to also make the change in their individual websites. Because every developer works a bit differently, this could result in errors within the structure of the navigation menu. Because we've decided to use a template, however, we simply have to make the change in the master template file, update the site, and instantly all pages derived from the template file are edited appropriately. Figure 14.1 illustrates this point. You can begin to see the benefits that templates provide. Figure 14.1. Numerous pages are based on a master template, including corporate web pages and interdepartment pages residing on the company's intranet. [View full size image] Dreamweaver templates give you far more flexibility than just creating a design that acts as a master for other future designs. By default, when a new page is derived from a template file, the regions within the page become locked. Locked portions of the page cannot be edited or changed in the derived page. The idea is to create editable regions in the template file so that when new pages are derived from the master template file, developers can make changes only to the editable regions, effectively preserving the overall design and structure of the site from accidental modifications. 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 all tags not within editable regions. You could optionally set editable attributes as a way of allowing users to make changes to specific attributes within a locked tag. For instance, you may want to allow users to change the border size of a table while still maintaining the default cell padding and cell spacing. Optional regions— As a template designer, you could easily add an optional region to a template. This allows users of a template-derived page to add or not add content to that region. If content is not added to that optional region, the area doesn't consume space when viewed in the browser. Repeating regions— As a template designer, you may want to add a repeating region to elements such as tables. This allows users of template-derived pages to add content to tables that vary depending on length. In our case, we'll create a company events table within the intranet-based department web pages. These company events tables will actually be tables that include repeating regions. Figure 14.2 shows how these regions might be applied to our Vecta Corp interdepartmental pages to create an organizationwide intranet template. Figure 14.2. Editable, optional, and repeating regions can be added to a template for numerous design options. [View full size image] Now that you have a visual idea as to how our template might look, let's actually build it! Creating a New Template
Creating a new template in Dreamweaver is simple. For the most part, it's a matter of creating a new blank document and choosing File, Save As Template. Unfortunately, this method won't do us any good because it doesn't contain any graphics that represent the overall design of our Vecta Corp site. In fact, the best method for establishing a template is to create a skeleton design as you 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 I'll assume that you're familiar with creating the structure of the Vecta Corp design. Because of space constraints, rather than walking you through the process of rebuilding the design, I've included it as a prebuilt page called template.html. To review the process of creating the page, refer to Chapter 2, "Building a Web Page" or Chapter 5, "Web Page Structuring Using Tables." As you can see in Figure 14.3, the design acts as a shell for the content that will eventually appear on the page. Figure 14.3. The complete design of the Vecta Corp site before saving it as a template. [View full size image] This page will serve as the overall template for the site. Because this is the case, you don't want to add any content yet. Anything added to the page before it's converted to a template will be locked into any