Adobe Dreamweaver CS3 Unleashed- P4 docx

You'll also notice in Figure 2.65 that the Snippets panel is organized into two halves. The top half includes a preview of the code snippet selected within the categorized list of snippets in the bottom half. HTML snippets are usually shown in a design view (showing what the HTML looks like in the browser), whereas JavaScript and other code snippets are shown in Code view so that you can see the actual code. Inserting a snippet is merely a matter of selecting the appropriate snippet and either dragging it into the code environment or choosing the snippet and clicking the Insert button located in the bottom left of the Snippets panel. Creating your own snippet is just as easy but slightly more involved. To create your own snippet, follow these steps: 1. Create a new folder for your snippet by right-clicking (Control+click) in the Snippets window and choosing New Folder. Give the snippet folder a descriptive name, remembering that other developers might want to use your snippets, too. If the folder is created in the "wrong" place, you can drag it to the level you want. I'll call my new folder Table Row Rollover. 2. Right-click (Control+click) the folder and choose New Snippet from the context menu. Alternatively, you may have already written the snippet code in the page—if so, highlight the code you want to use as the snippet and right-click (Control+click) to choose Create New Snippet from the pop-up menu. 3. You will then be presented with the Snippet dialog box. Fill in the snippet name and description. If you have highlighted existing code, the code box will already be filled in. I'll add the following HTML code to the Insert code text box: Code View: <table> <tr onmouseover="this.style.backgroundColor='#cccccc';" onmouseout="this.style.backgroundColor='#ffffff';"> <td align="center" width="125"><a href="#">Home</a></td> </tr> <tr onmouseover="this.style.backgroundColor='#cccccc';" onmouseout="this.style.backgroundColor='#ffffff';"> <td align="center" width="125"><a href="#">HelpDesk</a></td> </tr> <tr onmouseover="this.style.backgroundColor='#cccccc';" onmouseout="this.style.backgroundColor='#ffffff';"> <td align="center" width="125"><a href="#">Company Directory</a></td> </tr> <tr onmouseover="this.style.backgroundColor='#cccccc';" onmouseout="this.style.backgroundColor='#ffffff';"> <td align="center" width="125"><a href="#">Employee Store</a></td> </tr> <tr onmouseover="this.style.backgroundColor='#cccccc';" onmouseout="this.style.backgroundColor='#ffffff';"> <td align="center" width="125"><a href="#">Admin</a></td> </tr> </table> This code will effectively create a new table complete with rows, that, when the user's mouse rolls over them, changes the background color to a gray color. If you don't feel like typing all this code in yourself, you can open the SampleSnippetCode.html file that I've included for you within the Assets folder of the chapter downloads. 4. If you want the code to flow around a selected object, such as an image or table cell, select the Wrap Selection option, specifying which part of the code goes before the object and which after the object. If the code is a standalone block, choose the Insert Block option. I'll choose Insert Block. The completed Snippet dialog box should resemble Figure 2.66. Figure 2.66. Create the new snippet within the Snippet dialog box. [View full size image] 5. When you've finished editing the Snippet dialog, click OK. The new snippet will appear within its folder and the Preview pane will display the HTML. To use the snippet, drag the snippet into the code environment and choose Preview in Browser or press F12 (Option+F12) to test the results. Editing, moving, and deleting snippets are also a snap. To edit a snippet, right-click (Control+click) the snippet and choose Edit from the context menu. The Snippet dialog appears, and you can edit the code or change the description. To move snippets into other folders, drag them to the folder you want. To delete a snippet or its respective folder, right-click (Control+click) the snippet (or folder) and choose Delete. Summary As you have seen, building web pages in Dreamweaver is extremely intuitive and quick to pick up. Flanked by key panels and inspectors, building web pages in Dreamweaver is merely a matter of dragging and dropping objects onto the development environment and formatting attributes using the Property inspector, the Tag Inspector, and so on. This introductory chapter opened a new world to some important features within Dreamweaver and should serve as a foundation for future development. In the next few chapters, we'll step away from development for a bit and discuss one of the most important topics as it relates to Dreamweaver—site management. Chapter 3. Dreamweaver Site Management IN THIS CHAPTER The Importance of Defining Sites in Dreamweaver Defining a New Site in Dreamweaver Managing a Website in Dreamweaver Advanced Site Management Options In the previous chapter, you learned how to build a simple web page within Dreamweaver. Some of the more notable concepts that you learned were page formatting, handling images, and linking. Although it seems obvious that Dreamweaver's sole purpose is to create web pages, any web page editor can provide a developer with this functionality. What makes Dreamweaver truly unique and powerful at the same time are features and functionality built in to its framework for managing your web pages, and more importantly, your websites. Site management, you ask? Arguably the most important aspect of Dreamweaver, regardless of version, is site management—the process of administering websites within the framework of Dreamweaver. Site management affords developers many benefits, including, but not limited to, the capability to Change website links across an entire site. Check for and fix broken links across an entire website. Establish a connection and upload files to a remote web hosting provider. Work with site maps. As you will see throughout this chapter, by simply establishing a reference (defining a site) between Dreamweaver and the files on your computer, Dreamweaver greatly expands its feature set to include functionality to help you manage your web pages and websites. 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 3 in an easy-to-find location. I'll place mine in C:\VectaCorp\Chapter03\. For this chapter, six files (index.html, aboutus.html, companydirectory.html, solutions.html, support.html, and contactus.html) have been included for you. The Importance of Defining Sites in Dreamweaver As I briefly highlighted in the introductory paragraph of this chapter, site management—beginning with defining a site—presents numerous benefits to a developer. But you still may be asking yourself, "Why do I need to manage a site within Dreamweaver? I can manage my site within the file browser included with my operating system." To a certain extent this is true. However, the significance and importance of managing a site within Dreamweaver's framework goes far beyond simple drag and drop to include the following beneficial features: A clean method of organizing content and assets— Managing a site within Dreamweaver begins with defining a site (discussed in the next section). After you've defined a site, Dreamweaver cleanly organizes your files within the Files panel. As you can see, from the predefined sample site in Figure 3.1, the Files panel can organize assets, images, and at the root of the directory, web pages. Additionally, your defined site might include media files, scripts, Dreamweaver templates, and more. Figure 3.1. The Files panel cleanly organizes files. Note It's important to mention that a certain level of effort is required by you in terms of document structuring. Although Dreamweaver will automatically create some folders for you (_notes, Templates, and Library), you're responsible for creating the rest. In the previous chapter, we didn't define a site. Instead, we had to navigate the entire directory structure to work with our files. By defining a site, Dreamweaver conveniently isolates the folder referenced when the site was defined. A site cache, which guarantees link integrity— After you've defined a site, a reference is established between Dreamweaver and the files on your computer. Dreamweaver then takes a snapshot of those files and caches them. The cache acts as a digital memory of sorts for the files that Dreamweaver needs to work with. Because Dreamweaver now remembers the organizational, link, and path makeup of your files, if changes are made that break that structure, Dreamweaver automatically detects the changes, alerts you of them, and then fixes them, if you so choose. A built-in FTP client— One of the most common questions asked by beginning developers is "Once I've finished developing my web pages in Dreamweaver, how do I upload them to my web hosting provider so that everyone can see them?" The answer to this question is simple. Dreamweaver provides a built in File Transfer Protocol (FTP) client that you can use to easily drag and drop files from your local computer (the computer that you do your work on) to the remote computer (the computer that everyone can access to see your web pages). A quick method for "getting" and "putting" files— Even easier than dragging and dropping your files from the local computer to the remote computer is the concept of Get and Put. After you've established a connection to your remote computer using the built-in FTP client, retrieving files from the remote computer is as easy as clicking the Get button. Alternatively, you can easily send files to the remote computer by clicking the Put button. A centralized client for managing files within teams— As we'll explore in Part III, "Team Collaboration and Task Automation," Dreamweaver's support for working within teams is unparalleled. Facilitated by a defined site, collaborative teams can manage sites in Dreamweaver through a variety of channels, including Check In/Check Out, Design Notes, site reports, source control programs such as Microsoft's Visual SourceSafe, WebDAV, and Adobe Contribute. The ability to build site maps— One of the most underappreciated features built in to Dreamweaver is the capability to build and maintain visual site maps. In fact, the benefit to creating site maps in Dreamweaver goes far beyond the simplicities of a static visual diagram by allowing you to manage links and filenames directly from the site map layout and even print out the final layout for future reference. The capability to generate site reports— From an organizational management perspective, defining a site within Dreamweaver provides the capability to generate site reports. Workflow statistics in terms of files that are checked out and recently modified can be generated. Additionally, you can create HTML reports that include analysis of various accessibility and usability flaws within your web pages or website. A site synchronization utility— Quite possibly my favorite feature, site synchronization is the process of synchronizing multiple local copies of your site with one remote copy. As Figure 3.2 illustrates, you can sync files between your local home computer and your remote server. Then, when you go to work, you can synchronize your server with your local work computer. This ensures that you're consistently working on the most up-to-date files and prevents file overlaps. Figure 3.2. Use the site synchronization features built in to Dreamweaver to synchronize your files between multiple computers running Dreamweaver and the version of your site on your remote server. The capability to work with templates and library items— Covered in more depth in Chapter 14, "Working with Templates," and Chapter 15, "Working with Library Items," templates and library items are managed, added, and edited via a defined site. Without a defined site, these added features are unusable. As you can see from the list I've provided, there are numerous benefits to site management in Dreamweaver. Although these benefits won't appear obvious at first glance, they will become apparent as you gain experience working with Dreamweaver site management throughout this chapter and the remainder of the book. Chapter 3. Dreamweaver Site Management IN THIS CHAPTER The Importance of Defining Sites in Dreamweaver Defining a New Site in Dreamweaver Managing a Website in Dreamweaver Advanced Site Management Options In the previous chapter, you learned how to build a simple web page within Dreamweaver. Some of the more notable concepts that you learned were page formatting, handling images, and linking. Although it seems obvious that Dreamweaver's sole purpose is to create web pages, any web page editor can provide a developer with this functionality. What makes Dreamweaver truly unique and powerful at the same time are features and functionality built in to its framework for managing your web pages, and more importantly, your websites. Site management, you ask? Arguably the most important aspect of Dreamweaver, regardless of version, is site management—the process of administering websites within the framework of Dreamweaver. Site management affords developers many benefits, including, but not limited to, the capability to Change website links across an entire site. Check for and fix broken links across an entire website. Establish a connection and upload files to a remote web hosting provider. Work with site maps. As you will see throughout this chapter, by simply establishing a reference (defining a site) between Dreamweaver and the files on your computer, Dreamweaver greatly expands its feature set to include functionality to help you manage your web pages and websites. 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 3 in an easy-to-find location. I'll place mine in C:\VectaCorp\Chapter03\. For this chapter, six files (index.html, aboutus.html, companydirectory.html, solutions.html, support.html, and contactus.html) have been included for you. The Importance of Defining Sites in Dreamweaver As I briefly highlighted in the introductory paragraph of this chapter, site management—beginning with defining a site—presents numerous benefits to a developer. But you still may be asking yourself, "Why do I need to manage a site within Dreamweaver? I can manage my site within the file browser included with my operating system." To a certain extent this is true. However, the significance and importance of managing a site within Dreamweaver's framework goes far beyond simple drag and drop to include the following beneficial features: A clean method of organizing content and assets— Managing a site within Dreamweaver begins with defining a site (discussed in the next section). After you've defined a site, Dreamweaver cleanly organizes your files within the Files panel. As you can see, from the predefined sample site in Figure 3.1, the Files panel can organize assets, images, and at the root of the directory, web pages. Additionally, your defined site might include media files, scripts, Dreamweaver templates, and more. Figure 3.1. The Files panel cleanly organizes files. Note It's important to mention that a certain level of effort is required by you in terms of document structuring. Although Dreamweaver will automatically create some folders for you (_notes, Templates, and Library), you're responsible for creating the rest. In the previous chapter, we didn't define a site. Instead, we had to navigate the entire directory structure to work with our files. By defining a site, Dreamweaver conveniently isolates the folder referenced when the site was defined. A site cache, which guarantees link integrity— After you've defined a site, a reference is established between Dreamweaver and the files on your computer. Dreamweaver then takes a snapshot of those files and caches them. The cache acts as a digital memory of sorts for the files that Dreamweaver needs to work with. Because Dreamweaver now remembers the organizational, link, and [...]... benefits to site management in Dreamweaver Although these benefits won't appear obvious at first glance, they will become apparent as you gain experience working with Dreamweaver site management throughout this chapter and the remainder of the book Defining a New Site in Dreamweaver Site management in Dreamweaver begins with defining a site When you define a site in Dreamweaver, you're essentially... linked document Previous to Dreamweaver 8, Dreamweaver did not update links to files that resided in the Templates folder For example, if you had a file called styles.css in the Templates folder and had written href="styles.css" as a link in the template file, Dreamweaver would not update this link when creating a template-based page Some users took advantage of the way Dreamweaver treated links to... pages In Dreamweaver 8, however, this behavior was changed so that all document-relative links are updated when creating template-based pages, regardless of the apparent location of the linked files This update in Dreamweaver 8 broke links in pages created by those designers who had taken advantage of Dreamweaver' s former practice of not updating links to files in the Templates folder With the Dreamweaver. .. the Done button Managing a Website in Dreamweaver Defining a site is the first step to managing a website within the framework of Dreamweaver Now that you've learned about the site definition features built in to both the Basic and Advanced screens, let's take a look at the features built in to Dreamweaver to help you manage your website Managing a site within Dreamweaver begins with the Files panel... Remove— Permanently deletes a site from Dreamweaver It's important to note that choosing this option removes only the reference to files on the computer, not the files themselves Export— Use this option when migrating sites to another computer with a fresh installation of Dreamweaver This option creates an STE file that can be backed up and later imported on the new Dreamweaver installation using the Import... selected, and at least one synchronization is performed, Dreamweaver creates a hidden file (dwsync.xml) and places that file within a _notes folder in your site root This information is merely a file used by Dreamweaver to improve performance when synchronizing files Automatically upload files to server on save— A dangerous option, checking this box gives Dreamweaver free rein to upload files to your remote... Another reason to define a site within Dreamweaver is to take advantage of the Site Map feature The Dreamweaver site map, discussed in more detail later in this chapter, is a visual representation of files and links within your defined site Shown in Figure 3.15, the Site Map Layout category facilitates configuration of the site map feature Figure 3.15 Configure Dreamweaver' s site map feature from the... III, "Team Collaboration and Task Automation," Dreamweaver' s support for working within teams is unparalleled Facilitated by a defined site, collaborative teams can manage sites in Dreamweaver through a variety of channels, including Check In/Check Out, Design Notes, site reports, source control programs such as Microsoft's Visual SourceSafe, WebDAV, and Adobe Contribute The ability to build site maps—... that structure, Dreamweaver automatically detects the changes, alerts you of them, and then fixes them, if you so choose A built-in FTP client— One of the most common questions asked by beginning developers is "Once I've finished developing my web pages in Dreamweaver, how do I upload them to my web hosting provider so that everyone can see them?" The answer to this question is simple Dreamweaver provides... Dreamweaver begins with defining a site When you define a site in Dreamweaver, you're essentially establishing a reference between Dreamweaver and the files on your computer Dreamweaver then takes a digital snapshot of the files in your project folder and caches them By caching the files, Dreamweaver can automatically detect if changes are made to image paths, links, and so on and can automatically fix them . as it relates to Dreamweaver site management. Chapter 3. Dreamweaver Site Management IN THIS CHAPTER The Importance of Defining Sites in Dreamweaver Defining a New Site in Dreamweaver Managing. book. Chapter 3. Dreamweaver Site Management IN THIS CHAPTER The Importance of Defining Sites in Dreamweaver Defining a New Site in Dreamweaver Managing a Website in Dreamweaver Advanced. New Site in Dreamweaver Site management in Dreamweaver begins with defining a site. When you define a site in Dreamweaver, you're essentially establishing a reference between Dreamweaver