Adobe Dreamweaver CS3 Unleashed- P16

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

0
43
lượt xem
8
download

Adobe Dreamweaver CS3 Unleashed- P16

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

Adobe Dreamweaver CS3 Unleashed- P16: 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ủ đề:
Lưu

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

  1. Nested Templates In most cases, templates, combined with the flexibility of editable, optional, and repeating regions, are enough for most web development tasks. In some rare cases, however, single locked regions might be too rigid to be useful. Assume for a moment that Vecta Corp has decided to branch out into three separate companies in support of their three solutions (vProspect, vConvert, and vRetain). Although the Vecta Corp parent company still wholly owns the three subsidiaries, each of the three companies' websites should have a slightly different look and feel than the parent company's. One way of achieving this is to create different templates—one for the parent company site and one for each subsidiary company site that's a slight variation (maybe a different color scheme) of the parent. The downside to this approach is maintainability. If the parent site were to be customized, changes wouldn't trickle down to the four subsidiary sites because they're based on entirely different templates. To fix this problem, we could create a nested template. A nested template works much like the name says: It's a template wrapped within the framework of a second template. In the preceding model, we could easily solve the maintenance issue by creating a template for our parent company and then create nested templates for our subsidiary sites. This way, if customizations are made to the parent template, the changes trickle down to all the descendant pages. Because nested template development in Dreamweaver isn't all that intuitive, follow these steps to see how they work: 1. Create a master template as you would normally. That is, create the structure of your site and then choose the Save As Template option from the File menu. In our case, we would create the header and logo that represents the main Vecta Corp site and save that as a template. 2. Insert editable, optional, and repeating regions wherever you want variable content to appear in the template. Save the template when you're ready. 3. Create a new document based on the template file by choosing File, New. Select Page from Template, Vecta Corp, and then choose the template that you created in steps 1 and 2 and click Create. 4. With the template-derived page open, choose Insert, Template Objects, Make Nested Template. The Save As Template dialog appears. 5. Enter a name for the nested template and click Save. A new nested template is created. 6. In the new nested template, make any changes needed to the editable regions. These changes are locked in any document that's based off of this nested template. 7. Add any new editable, optional, or repeating regions to the nested template. Editable, optional, and repeating regions added to nested templates appear as orange rather than in the default teal color. 8. Save the file to complete the customization of the nested template. When you're ready to create template-derived pages from the new template, choose File, New. Select Page from Template, Vecta Corp, and then choose the nested template, and click Create. You'll now be able to customize areas that were set aside as editable within the nested template, not the original parent.
  2. Templates and the Assets Panel As your site grows, so too will the number of templates it employs. In general, overall management of site templates is handled by the Templates category in the Assets panel, shown in Figure 14.18. Figure 14.18. Use the Templates category in the Assets panel to manage site templates. [View full size image] The Assets panel is separated into the following areas: Template list— Displays a list of DWT files (templates) in a defined site. The list provides the name of the template, its size in kilobytes, and the path (usually in the Templates folder of the defined site). Template preview— Displays a preview image of the template. Apply— Applies a selected template to an existing page in the Document window. This button is covered in more detail later in the chapter. Refresh Site List— Refreshes the template category to reflect changes made within the Files panel. New Template— Creates a new DWT file in the Templates folder of your defined site. When this button is clicked, a new template instance appears in the template list. Edit— Click this button to launch the selected template from the template list in a new Document window for editing.
  3. Delete— Deletes a selected template. Options menu— Displays advanced options for working with and managing templates. These options are outlined in more detail in the following discussion. For the most part, general management of site templates can be handled through the small button bar that appears at the bottom of the Template category in the Assets panel. For more advanced options, however, access options located in the panel's Options menu: Refresh Site List— Refreshes all templates in the template list. Recreate Site List— Reloads the template site list into the site cache. New Template— Select this option to start a new blank template. Edit— Opens the selected template in a new Document window instance for editing. Apply— Select this option to attach a template to a page that isn't derived from a template. Dreamweaver asks you to map template regions to areas on the page. More on this later. Rename— Allows you to rename the selected template. Delete— Deletes a selected template. Update Current Page— Applies any changes made in a template to the current page assuming that page is derived from the modified template. Update Site— Applies any changes made in a template to all derived pages in the site list. Copy to Site— Allows you to copy the selected template to another defined site. Locate in Site— Opens the Site list and highlights the selected template. Managing Templates Using the Assets Panel As described in the previous section, numerous options exist for managing templates in the Assets panel. We've covered topics such as refreshing the site list, re-creating the site cache, updating the current page, updating the site, copying to the site, and locating in the site as they relate to other aspects of development. In this section, I'll introduce you to alternatives for creating new templates, editing templates, opening a new page based on a template, and deleting templates straight from the Assets panel. You can create a new blank template by choosing the New Template option from the Assets panel's Options menu. Doing this allows you to establish a new empty template and then edit it when you're ready. To do this, follow these steps:
  4. 1. Select the New Template option from the Assets panel's Options menu. A new untitled template is created (see Figure 14.19). Figure 14.19. A new untitled blank template is created in the template list. [View full size image] 2. Enter a name for your new template and press Enter to apply the name. 3. With the new template selected in the list, click the Edit icon (located second from the right in the icon bar). You can also press Enter with the template selected to open the template in Edit mode. 4. Insert page elements and editable regions. 5. Save your work. You can delete a template by selecting it from the list and either pressing the Delete key on your keyboard or clicking the trash icon (located first from the right in the button bar). Note that Dreamweaver won't alert you of files that are tied to that template. After you delete a template, ties to that template are broken. Caution When you delete a template, not only are the ties to that template broken, but the DWT files is
  5. permanently deleted from the site. Finally, you can create a template-derived page straight from the Assets panel, effectively saving you from the more tedious approach of choosing File, New, locating the template, and clicking Create. To do this, right-click the template in the template list and choose the New from Template option from the context menu. Selecting this option opens an instance of the template in the Document window. Applying Templates to Existing Pages Dreamweaver makes it easy for you to apply various template designs to an existing document while maintaining your current content. When would this come in handy? Assume you were building various designs for a client in the hopes that the client would choose one and then build the company website based on that design. Rather than designing numerous templates and then numerous template-derived pages for each of the templates, you could easily create one template with a set of editable regions and then a template-derived page that would represent the client-supplied content to add. If the client didn't like the original template, no problem, you can keep the content you already added to the template-derived page. You'd simply create other templates (with the same editable regions as the original) and apply the template to the existing template-derived page. Numerous possibilities for this feature exist. A second example is an existing page updated seasonally. You could create four templates that represent the four seasons of the year. When you're ready to apply the appropriate seasonal template, open the template-derived page and choose the Apply Template feature. Let's describe this process in more detail: 1. Start by opening the engineering.html page. 2. Switch to the Templates category in the Assets panel. 3. Select the template_xmas option from the template list. This is the template that I've included for you in the chapter downloads. 4. Click Apply. As you can see from Figure 14.20, the Vecta Corp Christmas template is applied to the engineering page. Figure 14.20. The Vecta Corp Christmas template is applied to the engineering page. [View full size image]
  6. Because the editable regions in both the template and template_xmas pages coincide with those in the engineering.html page, the transition is seamless. But we can easily switch back to the regular template when we're ready. To demonstrate the switch back, let's use the Apply Template to Page method from the Modify menu: 1. With the engineering.html page still open, choose Modify, Templates, Apply Template to Page. The Select Template dialog appears. 2. Choose the template you want to apply to the engineering.html page from the templates list and click Select. The original template is now reapplied. Mapping Template Regions When Dreamweaver applies a template to a page, it attempts to match the regions on the two pages with one another. If there is a one-to-one correspondence with the regions on the template page and the ones on the normal page, the transition happens smoothly. If the regions do not match, however (maybe you called an editable region in a new template NewHeading but that same region is called MyHeading in the page), Dreamweaver gives you the opportunity to line up the inconsistent region names using the Inconsistent Region Names dialog, shown in Figure 14.21. Figure 14.21. The Inconsistent Region Names dialog allows you to remap inconsistent region names between two pages. [View full size image]
  7. The Inconsistent Region Names dialog appears automatically when Dreamweaver finds regions that don't match between a template and a page for which the template is being applied. Dreamweaver will not let you proceed until all inconsistent regions have been addressed. Note The Inconsistent Region Names dialog is a way for Dreamweaver to map editable regions in a template to specific areas in a page. However, more often than not, Dreamweaver cannot map a specific area to a region, especially when that region doesn't exist. Because this is the case, you have the option of ignoring a region; by choosing the Nowhere option from the Move Content to New Region menu, you can instruct Dreamweaver to disregard the mapping of a particular region. To remap regions using the Inconsistent Region Names dialog, follow these steps: 1. Open the template.dwt file if it's not open already. 2. Select the Events Subheader editable region and delete it. 3. Save the page. Immediately, the Update Template Files dialog appears; click Update. 4. Because the engineering.html page is dependent on that editable region, the Inconsistent Region Names dialog will appear, similar to Figure 14.21. 5. Select Event Subheader option from the Editable Regions list. 6. Select the Nowhere option from the Move Content to New Region menu and click OK to fix inconsistent regions in the engineering.html page.
  8. If there are regions you want to map from one page to the other, those regions appear in the drop-down menu. Rather than choosing the Nowhere option, you could instead select the region name to which you want to remap the inconsistent region.
  9. Removing Template Markup From time to time, you'll find that you've made mistakes when building a template. Maybe template markup was inserted, and now, for some reason, you want to remove it. Fortunately, Dreamweaver makes removing template markup just as easy as it was to insert it. To accomplish this, a couple of methods for removing template markup exist. First, you can open the template page, switch to Code view, and manually remove the template markup code. Second, and by far the easiest, is to use the Modify, Templates, Remove Template Markup option. To remove template markup from a page, follow these steps: 1. Open the template page. 2. Place your cursor near the region whose markup you'd like to remove. 3. Choose Modify, Templates, Remove Template Markup. Notice that the initial text contained in the region remains, but the template markup is completely removed.
  10. Changing the Default Document Whenever you create a new document using Dreamweaver, a new instance of a prebuilt template located in the C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\DocumentTypes\NewDocuments folder is opened for your use. Depending on what type of file you decide to work with, Dreamweaver includes prebuilt HTML so that you don't have to write it from scratch. For instance, the initial markup for a new HTML document resembles the following: Untitled Document In keeping with its philosophy of extensibility, Dreamweaver allows you to open these templates, modify them, and then save them for use later. Why would you want to do this? Assume that you are building a template for a client, and the client wanted to include its own meta information in every page. Rather than manually copying this meta information into every page each time a new page is created, you could easily modify the initial template to include the meta information. This way, each time the user selected the new document option, the template information is automatically included with each page that is created. To modify the initial default document, open the appropriate template file (the type is viewable in the Type view column for your operating system's file explorer) located in the C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\DocumentTypes\NewDocuments folder, make the necessary changes, and click Save. To test your changes, choose the New option from the File menu, select the appropriate default document, and click Create.
  11. Summary As you have seen in this chapter, working with templates in Dreamweaver offers a robust and intuitive method for developing and managing an organization's look and feel. In this chapter, you learned about templates—how to build templates from scratch, how to define editable, repeating, and optional regions, and how to apply templates to existing pages. Reinforced by those basic concepts, you also learned about more advanced features, such as template management using the Assets panel, how to apply templates to existing pages, remapping inconsistent template regions, removing template markup, and changing the default document using Dreamweaver. In the next chapter, we'll learn about a second method for globalizing content: library items.
  12. Chapter 15. Working with Library Items IN THIS CHAPTER Understanding Library Items Using the Assets Panel to Manage Library Items Working with Server-Side Includes One of the challenges facing web developers is that of repeating content on their websites. Navigation menus, company logos, copyright notices, and so on are all pieces of functionality consistently applied across an entire site, yet until now, no central interface existed for globalizing that content to prevent the tedious task of opening every page and making the same change across every page in the site. Enter library items and server-side includes. Library items provide a way to create the functionality once and then share that functionality across multiple pages on your site. When the time comes to make updates, you make the change once in the central library item file, save your work, update your site, and then changes instantly trickle down to the files in your site that use the library item. In this chapter, we'll examine the power and importance of library items in your site. We'll discuss the fundamental differences and similarities between library items and templates and, of course, provide an example as it relates to the Vecta Corp project. In addition, you'll learn to use server-side includes. Server- side includes are another method for globalizing content within your websites and also allow you to display information directly from the server. 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 15 in an easy-to-find location. I'll place mine in C:\VectaCorp\Chapter15. Also, be sure to update your site reference in Dreamweaver so that it points to the newly created folder. Understanding Library Items Library items, like templates, provide a method for creating a centralized piece of functionality that multiple pages in your site can use. The major differences between templates and library items, however, is that templates generally represent the overall design of a site. You create one master template file, define editable regions, and then establish pages based on that template (also known as a template-derived page). If changes need to be made to the design of the website, you'd open the template (DWT) file, make the change, save the file, and Dreamweaver updates all the pages based on the template file. In general, the model shown in Figure 14.1 (in the previous chapter) accurately depicts the template-based model. Library items, on the other hand, aren't meant to control the design of the site as a whole, but are meant to define pieces of functionality—such as navigation menus, copyright notices, and a company logo—that have the potential of changing throughout the context of the site. For instance, assume you have a navigation menu being used by 100 pages on your site. Also assume that the footer of every page contains a copyright notice complete with a smaller navigation menu that is also being shared by 100 pages on your site. Now imagine that your supervisor decides to change a link within the navigation menu and to customize the copyright notice to include the current year. Traditional methods would call for the tedious process of opening all 100 pages and making the changes manually. Library items remedy this problem by allowing you to componentize navigation menus, copyright notices, company logos, and so on into one file and then include that file into every page on your website. Later, if changes need to be made, you open the one library item, make the changes, save the file, update the site—and instantly, all 100 pages that use the library item are updated automatically. Figure 15.1 outlines the library-item-based model.
  13. Figure 15.1. Library items provide a way to componentize smaller pieces of functionality so that they can easily be shared across the entire site and updated centrally. [View full size image] Knowing what you know now of library items and templates, there's nothing that would prevent you from using the two together. In fact, templates and library items have the potential for working harmoniously together. For instance, assume that your organization uses the same template for both its intranet and Internet sites. In this case, you would have two navigation menus: one for the public site and one for the intranet site. Rather than creating two different templates, you could use the same template and just create two different library items that represent the two navigation menus. The model in Figure 15.2 describes this scenario. Figure 15.2. Library items can work with templates in scenarios where you want to use one template in conjunction with multiple navigation menus. [View full size image] Mirroring the process of templates, as soon as you create a new library item, Dreamweaver automatically creates a Library folder within your defined site and places the library item (LBI) file in that folder. Also similar to templates, library items are centrally managed from the Assets panel, discussed next.
  14. Chapter 15. Working with Library Items IN THIS CHAPTER Understanding Library Items Using the Assets Panel to Manage Library Items Working with Server-Side Includes One of the challenges facing web developers is that of repeating content on their websites. Navigation menus, company logos, copyright notices, and so on are all pieces of functionality consistently applied across an entire site, yet until now, no central interface existed for globalizing that content to prevent the tedious task of opening every page and making the same change across every page in the site. Enter library items and server-side includes. Library items provide a way to create the functionality once and then share that functionality across multiple pages on your site. When the time comes to make updates, you make the change once in the central library item file, save your work, update your site, and then changes instantly trickle down to the files in your site that use the library item. In this chapter, we'll examine the power and importance of library items in your site. We'll discuss the fundamental differences and similarities between library items and templates and, of course, provide an example as it relates to the Vecta Corp project. In addition, you'll learn to use server-side includes. Server- side includes are another method for globalizing content within your websites and also allow you to display information directly from the server. 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 15 in an easy-to-find location. I'll place mine in C:\VectaCorp\Chapter15. Also, be sure to update your site reference in Dreamweaver so that it points to the newly created folder. Understanding Library Items Library items, like templates, provide a method for creating a centralized piece of functionality that multiple pages in your site can use. The major differences between templates and library items, however, is that templates generally represent the overall design of a site. You create one master template file, define editable regions, and then establish pages based on that template (also known as a template-derived page). If changes need to be made to the design of the website, you'd open the template (DWT) file, make the change, save the file, and Dreamweaver updates all the pages based on the template file. In general, the model shown in Figure 14.1 (in the previous chapter) accurately depicts the template-based model. Library items, on the other hand, aren't meant to control the design of the site as a whole, but are meant to define pieces of functionality—such as navigation menus, copyright notices, and a company logo—that have the potential of changing throughout the context of the site. For instance, assume you have a navigation menu being used by 100 pages on your site. Also assume that the footer of every page contains a copyright notice complete with a smaller navigation menu that is also being shared by 100 pages on your site. Now imagine that your supervisor decides to change a link within the navigation menu and to customize the copyright notice to include the current year. Traditional methods would call for the tedious process of opening all 100 pages and making the changes manually. Library items remedy this problem by allowing you to componentize navigation menus, copyright notices, company logos, and so on into one file and then include that file into every page on your website. Later, if changes need to be made, you open the one library item, make the changes, save the file, update the site—and instantly, all 100 pages that use the library item are updated automatically. Figure 15.1 outlines the library-item-based model.
  15. Figure 15.1. Library items provide a way to componentize smaller pieces of functionality so that they can easily be shared across the entire site and updated centrally. [View full size image] Knowing what you know now of library items and templates, there's nothing that would prevent you from using the two together. In fact, templates and library items have the potential for working harmoniously together. For instance, assume that your organization uses the same template for both its intranet and Internet sites. In this case, you would have two navigation menus: one for the public site and one for the intranet site. Rather than creating two different templates, you could use the same template and just create two different library items that represent the two navigation menus. The model in Figure 15.2 describes this scenario. Figure 15.2. Library items can work with templates in scenarios where you want to use one template in conjunction with multiple navigation menus. [View full size image] Mirroring the process of templates, as soon as you create a new library item, Dreamweaver automatically creates a Library folder within your defined site and places the library item (LBI) file in that folder. Also similar to templates, library items are centrally managed from the Assets panel, discussed next.
  16. Using the Assets Panel to Manage Library Items Similar to templates, library items can be created, edited, and managed from the Library Items category in the Assets panel (see Figure 15.3). Figure 15.3. Use the Library Items category in the Assets panel to manage library items in your defined site. [View full size image] The Library Items category of the Assets panel is separated into the following areas: Library Item list— Displays a list of LBI files or library items in a defined site. The list provides the name of the library item, its size in kilobytes, and the path (usually within the Library folder of the defined site). Library Item preview— Displays a preview image of the library item. Insert— Inserts the selected library item into the page at your cursor's position within the page. Refresh Site List— Refreshes the library item category to reflect changes made within the Files panel.
  17. New Library Item— Creates a new LBI file in the Library folder of your defined site. When this button is clicked, a new library item instance also appears in the library item list. Edit— Click this button to launch a selected library item from the library item list in a new Document window for editing. Delete— Deletes a selected library item. Options menu— Displays advanced options for working with and managing library items. These options are discussed in more detail next. For the most part, general management of library items can be handled using the small button bar at the bottom of the Library Item category in the Assets panel. For more advanced options, however, access the options in the panel's Options menu. Options in the Library Items panel's Options menu include the following: Refresh Site List— Refreshes all library items in the library item list. Recreate Site List— Reloads Dreamweaver's site cache. New Library Item— Creates a new, blank library item. Edit— Opens the selected library item in editing mode. When the library item has been opened, you can make necessary changes, save the document, and then update the site. Insert— Inserts a library item into an existing page. Rename— Renames the selected library item. Delete— Deletes a selected library item. Update Current Page— Applies any changes made to a library item within its editing mode to the current open page that uses the library item. Update Site— Applies any changes made to a library item to all pages that use the library item in the current open site. Copy to Site— Copies the selected library item to another defined site. Locate in Site— Opens the File panel and highlights the library item in the list. Creating Library Items Two methods exist for creating library items in your site. First, you can create a new blank library item in
Đồng bộ tài khoản