Introducing Site Management - Dreamweaver CS5: The Missing Manual

by David Sawyer McFarland

Chapter 16. Introducing Site Management

As the dull-sounding name site management implies, organizing and tracking your website's files is one of the least glamorous, most time-consuming, error-prone aspects of being a web designer. On the Web, your site may look beautiful, run smoothly, and appear as a gloriously unified whole, but behind the scenes, it's nothing more than a collection of various files—HTML pages, images, Cascading Style Sheets, JavaScript code, Flash movies, and so on—that must all work together. The more files you have to keep track of, the more apt you are to misplace one. A single broken link or missing graphic can interfere with the operation of your entire site, causing personal—even professional—embarrassment.

Fortunately, computers excel at tedious organizational tasks. Dreamweaver's site management features take care of the complexities of dealing with a website's many files, freeing you to concentrate on the creative aspects of the site. In fact, even if you're a hand-coding HTML junkie and you turn your nose up at all visual web page editors, you may find Dreamweaver worth its weight in gold just for the features described in this and the next two chapters.

Where the first three parts of this book describe how to create, lay out, and embellish your site, this part offers a bird's-eye view of the production process as you see your site through to completion and, ultimately, upload it to the Internet.

To get the most out of Dreamweaver's site management features, you need to be familiar with some basic principles for organizing web files, as discussed in the next section.

Dreamweaver CS5: The Missing Manual book cover

This excerpt is from Dreamweaver CS5: The Missing Manual.

This Missing Manual helps you quickly and painlessly master the latest version of this industry-standard web design and management program. Perfect for beginners who need step-by-step guidance and for longtime Dreamweaver masters who need a handy reference, the 7th edition of this bestselling Missing Manual offers jargon-free language and clear descriptions for designing, organizing, building, and deploying websites. It's the ultimate atlas for Dreamweaver CS5.

buy button

The Structure of a Website

When you build a website, you probably spend hours providing visitors with carefully planned links, helpful labels, and clear, informative navigation tools. You want your site architecture—the structure of your site—to make it easy for visitors to understand where they are, where they can go, and how to return to where they came from (see Figure 16.1), “A good site has an easy-to-understand structure. It divides content into logical sections, and includes a prominent navigation bar—the row of buttons below the Chia-Vet logo in this image—to give visitors quick access to that content. When you building a site, the site's "architecture" provides a useful model for naming and creating the behind-the-scenes folders that hold the site's files.”. Behind the scenes, it's equally important to organize your site's files with just as much clarity and care, so you can find your way around when you update or modify the site later. And, just as on your computer, a website's main organizational tool is the humble folder.

Figure 16.1. A good site has an easy-to-understand structure. It divides content into logical sections, and includes a prominent navigation bar—the row of buttons below the Chia-Vet logo in this image—to give visitors quick access to that content. When you building a site, the site's "architecture" provides a useful model for naming and creating the behind-the-scenes folders that hold the site's files.

A good site has an easy-to-understand structure. It divides content into logical sections, and includes a prominent navigation bar—the row of buttons below the Chia-Vet logo in this image—to give visitors quick access to that content. When you building a site, the site's "architecture" provides a useful model for naming and creating the behind-the-scenes folders that hold the site's files.

You probably organize files on your computer every day, creating, say, a folder called Personal, within which are folders called Financial Planning and Vacation Pictures. Inside the Vacation Pictures folder, you might have separate folders for memories of Maui, Yosemite, and the Mall of America.

The same principle applies to the folders that make up a website: All websites have one primary folder—the root folder—that holds all of the site's web pages, graphics, and other files. The root folder usually contains additional folders where you further subdivide and organize your site's files.

A sensible site structure (see Figure 16.2, “Here's a sample structure for a website. The root (main) folder, htdocs, holds all the site's pages. The home page, index.html, is in the root folder, while other pages reside within subfolders—one folder for each section of the site. The home page uses lots of graphics that don't appear anywhere else on the site; a folder named Home inside the Images folder helps keep those in order. In addition, since many pages share the same logo and other graphics, the site includes a folder called Global. Finally, to keep all the graphics used to display navigational buttons and links orderly, the site includes a folder called Nav. Also notice that the Services folder (like the folder for each section of the site) has its own default page, here called index.html, which can contain additional subfolders (see the box on page 640).”) makes it easy for you to maintain your site because it's logically organized—it gives you quick access to whatever graphic, style sheet, or Flash movie you're looking for. But don't fall into the trap of becoming so obsessed with bins that you put every graphic or web page you create in its own folder; adding structure to your site should make your job easier, not harder.

Figure 16.2. Here's a sample structure for a website. The root (main) folder, htdocs, holds all the site's pages. The home page, index.html, is in the root folder, while other pages reside within subfolders—one folder for each section of the site. The home page uses lots of graphics that don't appear anywhere else on the site; a folder named Home inside the Images folder helps keep those in order. In addition, since many pages share the same logo and other graphics, the site includes a folder called Global. Finally, to keep all the graphics used to display navigational buttons and links orderly, the site includes a folder called Nav. Also notice that the Services folder (like the folder for each section of the site) has its own default page, here called index.html, which can contain additional subfolders (see the box on page 640).

Here's a sample structure for a website. The root (main) folder, htdocs, holds all the site's pages. The home page, index.html, is in the root folder, while other pages reside within subfolders—one folder for each section of the site. The home page uses lots of graphics that don't appear anywhere else on the site; a folder named Home inside the Images folder helps keep those in order. In addition, since many pages share the same logo and other graphics, the site includes a folder called Global. Finally, to keep all the graphics used to display navigational buttons and links orderly, the site includes a folder called Nav. Also notice that the Services folder (like the folder for each section of the site) has its own default page, here called index.html, which can contain additional subfolders (see the box on page 640).

Tip

If you already have a website that suffers from lack of organization, it's not too late. Dreamweaver can help you reorganize your files quickly and accurately. Take the following rules to heart and then turn to the section called “Organizing Site Files” on page 648 to learn how Dreamweaver can whip your current site into shape.

Here, then, are some guidelines for effective site organization:

  • Plan for future growth. Like ever-spreading grapevines, websites grow. Today you may have only enough words and pictures for 10 web pages, but tomorrow you'll put the finishing touches on your new 1,000-page online catalog. It may seem like overkill to create a lot of folders for a small site, but better to start with a solid structure today than find yourself knee-deep in files tomorrow.

    For instance, it's useful to create separate folders for graphics files that appear within each section of the site. If a section of your site is dedicated to promoting your company's products, for example, create a folder called products for your product web pages. Create an additional folder called images to store the pictures of those products. Then, when you add more products or images, you know right where to put them.

    Note

    While you can start with no organization plan and later use Dreamweaver to bring it all into shape (see the section called “Organizing Site Files”), you may run into unforeseen problems if your site is already on the Internet. If your site's been up and running for a while, search engines may have indexed your site, and other websites may have linked to your pages. If you suddenly rearrange your site, those cherished links from the outside world may no longer work, and people who try to access your site from a search engine may be foiled. If that's the case, you're better off leaving the site as it is, and begin the organization process with new files only.

  • Follow the site's architecture. Take advantage of the work you've already done in organizing the content on your site. For instance, the Chia Vet site content is divided into five main sections: Meet the Vets, Services, About Us, Directions, and Chia Tips, as shown in Figure 16.1, “A good site has an easy-to-understand structure. It divides content into logical sections, and includes a prominent navigation bar—the row of buttons below the Chia-Vet logo in this image—to give visitors quick access to that content. When you building a site, the site's "architecture" provides a useful model for naming and creating the behind-the-scenes folders that hold the site's files.”. Following this structure, it makes sense to create folders—vets, services, about, and so on—in the site's root folder for each section's respective web pages. If one section is particularly large, add subfolders.

  • Organize files by type. After you create folders for each section of your site, you'll probably need to add folders to store other types of files, like graphics, Cascading Style Sheets, external JavaScript files, and PDF files. Most sites, for instance, make extensive use of graphics, with several graphics on each page. If that's the case for you, file those images neatly and efficiently.

    One way to organize your graphics is to create a folder for images that appear on your home page and another for images that appear elsewhere in the site. Often, the home page is visually distinct from other pages on the site and contains graphics that are not only unique to it, but which might change frequently. You can create a folder—such as images_home—in the root folder for images that appear on your home page only. Create another folder—images_global, for example—to store graphics that appear on all or most of the other pages, images like the company logo, navigation buttons, and other frequently used icons. When you add these images to other pages of your site, you'll know to look for them in this folder. Alternatively, you could create an images folder in the root of your site and add subfolders such as home, global, and nav (see Figure 16.2, “Here's a sample structure for a website. The root (main) folder, htdocs, holds all the site's pages. The home page, index.html, is in the root folder, while other pages reside within subfolders—one folder for each section of the site. The home page uses lots of graphics that don't appear anywhere else on the site; a folder named Home inside the Images folder helps keep those in order. In addition, since many pages share the same logo and other graphics, the site includes a folder called Global. Finally, to keep all the graphics used to display navigational buttons and links orderly, the site includes a folder called Nav. Also notice that the Services folder (like the folder for each section of the site) has its own default page, here called index.html, which can contain additional subfolders (see the box on page 640).”). The choice of an organizational system is yours; just make sure you have one.

  • Use understandable names. While file names like 1a.gif, zDS.html, and f.css are compact, they aren't very explanatory. Make sure file names mean something. Clear, descriptive names like site_logo.gif or directions.html make it a lot easier to locate files and update pages.

    This principle is especially important if you work as part of a team. If you're constantly explaining to coworkers that 345g.gif is the banner for the home page, changing the file name to home_banner.gif could save you some aggravation. There's a tradeoff here, however, as long file names can waste precious bytes. For instance, a site full of file names like this_is_the_image_that_goes_in_the_upper_right_corner_of_the_home_page.gif is probably not a good idea.

    Note

    Dreamweaver employs the industry-standard.html extension for web pages—as in index.html. Another common extension is .htm (a holdover from the days when Windows could only use three-letter extensions). It doesn't really matter which you use, and if you're used to .htm, you can easily change the extension Dreamweaver uses. Just choose Edit→Preferences (Dreamweaver→Preferences on a Mac) to open the Preferences window, select the New Document category, and then type.htm in the default extension box.

    It's also helpful to add a prefix to related files. For example, use nav_ at the beginning of a graphic name to indicate that it's a navigation button. This way, you can quickly identify nav_projects.png, nav_quiz.png, and nav_horoscopes.png as graphics used in a page's navigation bar, or bg_body.png and bg_column.png for graphics used as backgrounds. As a bonus, when you view the files on your computer or in Dreamweaver's Files panel (see Figure 16.6, “The Files panel, logically enough, lists files in the currently active website. A list of all the websites you defined in Dreamweaver appears in the Sites pop-up menu. To work on a different site, select its name (but be aware that you can also select files in your local file system, potentially tripping up Dreamweaver's Site Management tools—see the box on page 658). You can use the Files panel to connect to a web server and transfer files back and forth between your local and remote sites, as described on page 702. You can tell whether you're looking at the files on your computer, the web server, the testing server, or a Subversion repository by looking at the name that appears at the top of the file column. In this figure, for example, you're looking at files on your computer since the file view pane lists "Local view" (circled).”), they appear neatly sorted by name; in other words, all the nav_ files cluster together in the file list. Likewise, if you have rollover versions of your navigation graphics, give them names like nav_projects_over.gif or nav_ horoscopes_high.gif to indicate that they're the highlighted (or rollover) state of the navigation button. (If you use Fireworks, its button-creation tools automatically use names like nav_projects_f1.gif and nav_projects_f2.gif to indicate two different versions of the same button.)

  • Be consistent. Once you come up with an organization that works for you, follow it. Always. If you name one folder images, for instance, don't name another graphics and a third pretty_pictures. And certainly don't put web pages in a folder named images or Flash movies in a folder named style_sheets.

    In fact, if you work on more than one website, you may want to use a single naming convention and folder structure for all your sites, so that switching among them goes more smoothly. If you name all your graphics folders images, then no matter what site you're working on, you know where to look for GIFs and JPEGs.

Note

It's usually best to put only files that go on your website in the root folder and its subfolders. Keep your source files—the original Photoshop, Fireworks, Flash, or Word documents—stored elsewhere on your computer. This way, you're much less likely to accidentally transfer a 14.5 MB Photoshop file to your web server (a move that would not gain you friends in the IT department). That said, if you do like keeping all your files together, check out Dreamweaver's cloaking feature (described on the section called “Cloaking Files”). Using it, you can prevent Dreamweaver from transferring certain file types to your web server when you use its FTP feature.

Setting Up a Site

Organizing and maintaining a website—creating new folders and web pages; moving, renaming, and deleting files and folders; and transferring pages to a web server—can require going back and forth between a couple of different programs. With Dreamweaver's site management features, however, you can do it all from within one program. But to take advantage of these features, you must first make Dreamweaver aware of the site; in other words, you need to give Dreamweaver some basic information about it.

Setting up a site in Dreamweaver involves showing the program which folder contains your website files (the root folder) and setting a few other options. You already know the very basics of setting up a site using Dreamweaver's Site Setup window (the section called “Setting Up a Site”). Here, you'll get a more detailed explanation of the options available in Site Setup.

Start by choosing Site→New Site. This opens the Site Setup window (see Figure 16.3, “Dreamweaver CS5 introduces a new site setup process that replaces the old "Site Definition Window" with a simpler (but sometimes more confusing) Site Setup window.”). It includes four categories of options where you specify the details of your site—Dreamweaver labels them Site, Servers, and Version Control, and a drop-down menu of Advanced Settings.

You've encountered the Site category several times already (the section called “Setting Up a Site”): it's where you tell Dreamweaver where on your computer it can find your website files. The Servers and Version Control settings help Dreamweaver work with your remote server; you'll learn about these settings in Chapter 18, Moving Your Site to the Internet (see pages the section called “Adding a Remote Server” and the section called “Checking Out Files”).

You'll find the Advanced Settings options useful for different situations, described below. You'll learn about the Local Info options next, the Cloaking options on the section called “Communicating with Design Notes”, the Design Notes category on the section called “Cloaking Files”, the File View Columns options on the section called “Creating a Web Page”, the Contribute option on the section called “Creating a Web Page”, the Templates option in Chapter 20, Templates, and the Spry option on the section called “Changing the Look of the Navigation Menu”. They're called "Advanced" for a reason and you may not ever feel a need to visit or change these settings.

Figure 16.3. Dreamweaver CS5 introduces a new site setup process that replaces the old "Site Definition Window" with a simpler (but sometimes more confusing) Site Setup window.

Dreamweaver CS5 introduces a new site setup process that replaces the old "Site Definition Window" with a simpler (but sometimes more confusing) Site Setup window.

The most important category in the Site Setup window is the first: Site (top image in Figure 16.3, “Dreamweaver CS5 introduces a new site setup process that replaces the old "Site Definition Window" with a simpler (but sometimes more confusing) Site Setup window.”). Filling out the following two options are all you need to get started using Dreamweaver effectively.

Site name

In the "Site name" field, type a name that briefly identifies the site for you—and Dreamweaver. This is the name that appears, among other places, on the Site pop-up menu on the Files panel (skip ahead to Figure 16.6, “The Files panel, logically enough, lists files in the currently active website. A list of all the websites you defined in Dreamweaver appears in the Sites pop-up menu. To work on a different site, select its name (but be aware that you can also select files in your local file system, potentially tripping up Dreamweaver's Site Management tools—see the box on page 658). You can use the Files panel to connect to a web server and transfer files back and forth between your local and remote sites, as described on page 702. You can tell whether you're looking at the files on your computer, the web server, the testing server, or a Subversion repository by looking at the name that appears at the top of the file column. In this figure, for example, you're looking at files on your computer since the file view pane lists "Local view" (circled).” for a glimpse of that), so that you can tell what site you're working on. It's just for identifying your site while you work in Dreamweaver—it doesn't appear on the actual pages of your site.

Local site folder

Identify your site's local site folder—the folder on your computer that contains all the files belonging to your site. (This is also known as a local "root" folder.) Click the folder icon to the right of the "Local site folder" box to find the folder. See the box on Local vs. Live Site Folders for more information on local site folders.

Tip

If you're confused about which folder should be the local site folder, just ask yourself this question: "Which folder on my computer contains (or will contain) my site's home page?" That's the local site folder. All your site's other files and folders should go inside this one, main folder.

The Dreamweaver tools that manage your sites' files rely on the local site folder. Once you set up a site, you see all its files listed in the Files panel. Under Advanced Settings, the Local Info tells Dreamweaver how to work with the web page files on your computer.

Default images folder

When you want to display a graphic in a web page, you tell the page where to find the image by pointing to its file location. That location has to be in the local root folder or one of its subfolders. In other words, if you link to a graphic that's sitting on your computer's hard drive outside of the root folder, the web browser will never find it.

Dreamweaver offers a feature that puts images in the right place even if you forget to. When you add a stray graphics file to a page on your site, Dreamweaver automatically copies the file into your default images folder. In fact, even if you drag a graphic from your desktop onto a web page-in-progress, Dreamweaver copies the file to the default images folder without missing a beat.

You identify the default images folder the same way you select the local site folder. Click the folder icon and locate the folder on your local drive. If you haven't set up the folder yet, click the "New Folder" button to create it on the spot. (For example, you might name the folder named images or images_global in your local root folder.)

Links relative to

As discussed on the section called “Understanding Links”, you can set up links in your web pages in a variety of ways. When you link to another page in your site, Dreamweaver lets you create document-relative or root-relative links. As explained on the section called “Absolute Links”, document-relative links are often the easiest way to go, but Dreamweaver offers you the flexibility to choose. Click either the Document or Site Root radio button. Then, whenever you embed a link in your pages, Dreamweaver creates the link using that setting.

Tip

You can override this setting and use whichever type of link you wish—site root-relative or document-relative—when you create the link, as described in step 4 on the section called “Browsing for a File”.

HTTP address

This option serves two functions: first, if you use absolute URLs to link to pages within your site (see the section called “Absolute Links”), you must fill out the the section called “HTTP address” field for Dreamweaver's link-management features to work properly. Type in your site's full URL, beginning with http://. Dreamweaver uses this address to check for broken links within your site and to correctly rewrite links if you move pages around. For example, maybe your webmaster told you to link a form to http://www.yourdomain.com/cgi/formscript.php instead of using a document-relative link. In this case, you'd type http://www.yourdomain.com in the the section called “HTTP address” box. Now, if you move or rename the formscript.php page from within Dreamweaver, the program is smart enough to update the absolute link in the form.

This setting is also incredibly valuable for one particular situation: if you use site root-relative links, but the site you're working on isn't actually located in the site root on the web server. For example, say you run the marketing department at International ToolCo. You manage just the web pages for the marketing department, and they're located in a folder called marketing on the web server. In essence, you manage a sub-site, which acts as an independent site within the larger International ToolCo site. Maybe your webmaster demands that you use site root-relative links—man, is that guy bossy.

This is a potentially tricky situation. Here's why: site root-relative links always begin with a /, indicating the root folder on the web server (for a refresher on this concept, see the section called “Root-Relative Links”). Normally, if you add a root-relative link, say, to the main page in a folder named personnel located inside the local root folder, Dreamweaver would write the link like this: /personnel/index.html. But in this case, that wouldn't work. The personnel folder is actually located (on the web server) inside the marketing folder. So the link should be /marketing/personnel/index.html. In other words, Dreamweaver normally thinks that the local root folder maps exactly to the web server's root folder.

You can solve this dilemma by adding a URL that points to the "sub-site" in the Site Definition window's the section called “HTTP address” box. In this example, you'd type http://www.intltoolco.com/marketing/ in the box. Then, whenever you add a root–relative link, Dreamweaver begins it with /marketing/ and then adds the rest of the path to the URL. In summary, if you use site root-relative links and you're working solely on pages located inside a subdirectory on the actual server, then fill out the absolute URL to that subdirectory. Finally, add this whole rigmarole to the list of reasons why document-relative links are easier to manage in Dreamweaver.

Note

Strangely, the first use of the HTTP address box mentioned above—that is, managing absolute URLs pointing to files in your site—doesn't work with the second option—sub-sites. For example, if you specify a subdirectory like www.intltoolco.com/marketing/ in the HTTP address box, Dreamweaver isn't able to keep track of absolute links within this site. So if you had to use the URL www.intltoolco.com/marketing/cgi/form.php to point to a form page within your site, and then you move that form page, Dreamweaver won't update the page using that absolute link.

Case-sensitive links

Some web servers (namely, those of the Unix and Linux variety) are sensitive to the case you use in file names. For example, both OSes consider INDEX.html and index.html different files. If your server uses either OS, turn on the "Use case-sensitive link checking" box to make sure Dreamweaver doesn't mistake one file for another when it checks links. Say you link to a file named INDEX.html, but change the name of another file named index.html to contact.html. Without this option turned on, Dreamweaver may mistakenly update links to INDEX.html because it considers the file the same as index.html.

In real-world use, you probably won't need this option. First, it's not possible to have two files with the same name but different combinations of upper- and lowercase letters in the same folder on a Windows or Mac machine. So if your local root folder is on a Windows or Mac computer, you'll never be able to get into this situation. In addition, it's confusing (and just plain weird) to use the same name but different cases for your files. Revisit the rules of file naming (see the section called “The Structure of a Website”) if you find yourself tempted to do this.

Cache

The cache is a small database of information about the files in your site. It helps Dreamweaver's site management features work more efficiently; leave this checkbox turned on.

In almost all cases, you'll want to keep this checkbox turned on. However, if you have a really large site, composed of tens of thousands of web pages, Dreamweaver might act pretty sluggishly when you perform basic tasks like moving files around within the site, or checking for broken links.

Once you provide the local information for your site, click Save to close the Site Definition window and begin working.

Editing or Removing Sites

Sometimes you need to edit the information associated with a site. Perhaps you want to rename the site, or you reorganized your hard drive and moved the local root folder, so you want to let Dreamweaver know the new location.

To edit a site, open the Manage Sites dialog box (choose Site→Manage Sites or, in the Files panel, choose Manage Sites from the bottom of the Site pop-up menu) and double-click the name of the site you want to edit. The Site Definition window opens (Figure 16.3, “Dreamweaver CS5 introduces a new site setup process that replaces the old "Site Definition Window" with a simpler (but sometimes more confusing) Site Setup window.”). Now you can type a new name in the Site Name box, choose a new local root folder, or make any other changes. Click OK to close the dialog box when you're done.

Note

If you want to edit the current site's information, there's a shortcut. In the Files panel (Figure 16.6, “The Files panel, logically enough, lists files in the currently active website. A list of all the websites you defined in Dreamweaver appears in the Sites pop-up menu. To work on a different site, select its name (but be aware that you can also select files in your local file system, potentially tripping up Dreamweaver's Site Management tools—see the box on page 658). You can use the Files panel to connect to a web server and transfer files back and forth between your local and remote sites, as described on page 702. You can tell whether you're looking at the files on your computer, the web server, the testing server, or a Subversion repository by looking at the name that appears at the top of the file column. In this figure, for example, you're looking at files on your computer since the file view pane lists "Local view" (circled).”), just double-click the name of the site in the Sites menu. (Mac owners need to click once to select the name in the menu, and then click again to open the Site Definition window.)

Once you finish designing a site, you may want to remove it from Dreamweaver's list of sites. Open the Manage Sites dialog box as described above, click to select the site you wish to delete, and then click Remove.

A warning appears telling you that you can't undo this action. Don't worry; deleting the site here doesn't actually delete the site's web pages, images, or other files from your computer. It merely removes the site from Dreamweaver's list of sites. (You can always go back and set up the site again, by following the steps on the section called “Setting Up a Site”.) Click Done to close the Manage Sites window.

Note

If you do, in fact, want to delete the actual web pages, graphics, and other site components, you can either switch to the desktop (Windows Explorer or the Finder, for example) and delete them manually, or delete them from within Dreamweaver's Files panel, described on the section called “Deleting files and folders”.

Exporting and Importing Sites

When you define a site, Dreamweaver stores that site's information in its own private files. If you want to work on your site using a different computer, therefore, you must re-set up the site for that copy of Dreamweaver. In a design firm where several people work on many different sites, that's a lot of extra set-up. In fact, even if there's just one of you working on two computers, duplicating your efforts takes extra work.

Dreamweaver lets you import and export site setups so you can put your time to better use. For example, you can back up your site set-up files in case you have to reinstall Dreamweaver, and you can export a site definition for others to use.

Note

Exporting a site in Dreamweaver doesn't actually export your site files—all of the web pages, folders, and other files—just the setup options you used when you set up the site. In other words, you just export and import the information that lets Dreamweaver work with your site's files.

To export a site setup:

  1. Choose Site→Manage Sites.

    The Manage Sites window appears, listing all the sites you've defined (Figure 16.4, “The Manage Sites window is the control center for managing your sites. Add new sites, edit old ones, duplicate a site definition, and even export site definitions for use on another computer, or as a precautionary backup.”).

    Figure 16.4. The Manage Sites window is the control center for managing your sites. Add new sites, edit old ones, duplicate a site definition, and even export site definitions for use on another computer, or as a precautionary backup.

    The Manage Sites window is the control center for managing your sites. Add new sites, edit old ones, duplicate a site definition, and even export site definitions for use on another computer, or as a precautionary backup.

  2. Select a site from the list, and then click Export.

    If the site setup includes server information (so you can have Dreamweaver connect to your server to move files onto it as described on the section called “Transferring Files”), you'll see a dialog box called "Exporting site" (Figure 16.5, “This dialog box lets you back up your settings or share them (minus your login information) with other people.”). If you simply want to make a backup of your site definition because you need to reinstall Dreamweaver, select the "Back up my settings" radio button. (The other option, "Share settings," is useful when, for example, your local site folder is on the C: drive, but the site folder is on the E: drive on someone else's computer, so your setup information doesn't apply to them. It's also handy when you don't want to give someone your user name and password to the web server.)

    Figure 16.5. This dialog box lets you back up your settings or share them (minus your login information) with other people.

    This dialog box lets you back up your settings or share them (minus your login information) with other people.

  3. Click OK.

    The Export Site panel appears.

    Tip

    You can export multiple sites in a single step. Just select all the sites you want to export (Ctrl-click [⌘-click] the names of the sites), and then click the Export button.

  4. In the Export Site panel, specify where you want to save the file and give it a name.

    If you're making a backup, save the file outside the local root folder (for example, with the Photoshop, Fireworks, and Word source files for your site). Because the export file can potentially contain the username and password you use to move files to your remote site, you don't want to keep the file anywhere in your local root folder—you might mistakenly upload it to the web server, where someone might find it and wreak havoc with your site.

    Dreamweaver uses the extension .ste for site definition files.

    Once you create a site set-up file, you can import it into Dreamweaver as follows:

  5. Choose Site→Manage Sites.

    The Manage Sites panel appears.

  6. Click Import.

    The Import Site panel appears. Navigate to the set-up file—look for a file ending in .ste. Select it, and then click OK.

If you import the site set-up to a computer other than the one you used to export it, you may need to perform a few more steps. If Dreamweaver can't find the location of the local site folder in the site set-up file, it asks you to select a local site folder on the new computer, as well as a new default images folder.

Organizing Site Files

Once you set up your local site, you can use the Files panel as your command center for organizing your files, creating folders, and adding new web pages to your site. To open the Files panel, choose Window→Files, or just press F8 (Shift-⌘-F).

In its most basic incarnation, the Files panel lists the files in the current site's local root folder (see Figure 16.6, “The Files panel, logically enough, lists files in the currently active website. A list of all the websites you defined in Dreamweaver appears in the Sites pop-up menu. To work on a different site, select its name (but be aware that you can also select files in your local file system, potentially tripping up Dreamweaver's Site Management tools—see the box on page 658). You can use the Files panel to connect to a web server and transfer files back and forth between your local and remote sites, as described on page 702. You can tell whether you're looking at the files on your computer, the web server, the testing server, or a Subversion repository by looking at the name that appears at the top of the file column. In this figure, for example, you're looking at files on your computer since the file view pane lists "Local view" (circled).”). This list looks and acts very much like Windows Explorer or the Mac's Finder; you see names, file sizes, and folders. You can view the files inside a folder by clicking the + symbol (triangle on Macs) next to the folder (or simply by double-clicking the folder name). Double-click a web page to open it in Dreamweaver. You can also see the size of a file, the type of file it is, and the last time you modified it. That's a lot of information to fit in that space, so if you find this new view a little too crammed with information, you can hide any columns you don't like—see the section called “Modifying the Files Panel View”.

Note

You can open certain types of files in an outside program of your choice by defining an external editor for that file type. For example, you can tell Dreamweaver to open GIF files in Fireworks, Photoshop, or another image editor. See the section called “Setting Up an External Editor” for more on this feature.

You can view your site's files four ways, using the View pop-up menu (shown in Figure 16.6, “The Files panel, logically enough, lists files in the currently active website. A list of all the websites you defined in Dreamweaver appears in the Sites pop-up menu. To work on a different site, select its name (but be aware that you can also select files in your local file system, potentially tripping up Dreamweaver's Site Management tools—see the box on page 658). You can use the Files panel to connect to a web server and transfer files back and forth between your local and remote sites, as described on page 702. You can tell whether you're looking at the files on your computer, the web server, the testing server, or a Subversion repository by looking at the name that appears at the top of the file column. In this figure, for example, you're looking at files on your computer since the file view pane lists "Local view" (circled).”):

  • Local view lists the files in your local root folder. Dreamweaver displays folders in this view as green.

  • Remote server displays the list of files in your remote site folder, which itself mirrors the list of files on your web server (see the section called “Exporting and Importing Sites”). Of course, before you post your site to the Web, this list is empty. Dreamweaver adds files to this folder only after you set up a connection to a remote server (see the section called “Adding a Remote Server”). Dreamweaver displays folders in this view yellow on Windows and blue on Macs.

  • Testing server view is useful when you create the dynamic, database-driven sites discussed in Part Six, “Dynamic Dreamweaver” of this book. No files appear in this view until you set up a testing server (see the section called “Setting Up a Testing Server”) and connect Dreamweaver to it. Dreamweaver displays folders in this view in red.

  • Repository view gives you a peek inside a file versioning system called Subversion. You'll learn about this advanced file-management tool on the section called “Checking Out Files”.

Note

If you've got a small monitor, the Files panel (and other panel groups) might take up too much space to let you comfortably work on a web page. You can hide (and show) all panels, including the Property inspector and the Insert bar, by pressing F4.

Figure 16.6. The Files panel, logically enough, lists files in the currently active website. A list of all the websites you defined in Dreamweaver appears in the Sites pop-up menu. To work on a different site, select its name (but be aware that you can also select files in your local file system, potentially tripping up Dreamweaver's Site Management tools—see the box on page 658). You can use the Files panel to connect to a web server and transfer files back and forth between your local and remote sites, as described on page 702. You can tell whether you're looking at the files on your computer, the web server, the testing server, or a Subversion repository by looking at the name that appears at the top of the file column. In this figure, for example, you're looking at files on your computer since the file view pane lists "Local view" (circled).

The Files panel, logically enough, lists files in the currently active website. A list of all the websites you defined in Dreamweaver appears in the Sites pop-up menu. To work on a different site, select its name (but be aware that you can also select files in your local file system, potentially tripping up Dreamweaver's Site Management tools—see the box on page 658). You can use the Files panel to connect to a web server and transfer files back and forth between your local and remote sites, as described on page 702. You can tell whether you're looking at the files on your computer, the web server, the testing server, or a Subversion repository by looking at the name that appears at the top of the file column. In this figure, for example, you're looking at files on your computer since the file view pane lists "Local view" (circled).

Modifying the Files Panel View

Dreamweaver stocks the Files panel with loads of information: the file name, the size of the file, the type of file (web page, graphic, and so on), and the date you last modified it. This is all useful to know, but if you have a relatively small monitor, you may not be able display everything without having to scroll left and right. What's worse, the filenames themselves often get clipped by other columns of information.

There are a couple of things you can do to fix this. First, you can resize the width of each column by dragging one of the dividers that separates each column name (see Figure 16.6, “The Files panel, logically enough, lists files in the currently active website. A list of all the websites you defined in Dreamweaver appears in the Sites pop-up menu. To work on a different site, select its name (but be aware that you can also select files in your local file system, potentially tripping up Dreamweaver's Site Management tools—see the box on page 658). You can use the Files panel to connect to a web server and transfer files back and forth between your local and remote sites, as described on page 702. You can tell whether you're looking at the files on your computer, the web server, the testing server, or a Subversion repository by looking at the name that appears at the top of the file column. In this figure, for example, you're looking at files on your computer since the file view pane lists "Local view" (circled).”). Using this technique, you can at least display the full name of each file.

If you don't like the number of columns Dreamweaver displays, you can hide any or all of them. After all, how useful is listing the type of each file? The folder icon clearly indicates when you're looking at a folder; a file name ending in .html is a web page; and a JPEG file's extension, .jpg, is clearly visible as part of the file's name. For most folks, that's enough.

Unfortunately, there's no program-wide setting to control which columns appear. You have to define the visible columns on a site-by-site basis:

  1. Choose Site→Manage sites, and double-click the name of the site whose files panel you want to modify.

    This opens the Site Setup window (see Figure 16.3, “Dreamweaver CS5 introduces a new site setup process that replaces the old "Site Definition Window" with a simpler (but sometimes more confusing) Site Setup window.”).

  2. Click the Advanced Settings category to expand the list of advanced options, and select the File View Columns option (see top image in Figure 16.7, “Use the File View Columns category to show or hide columns of information in the Files panel. You can rearrange the columns by selecting one and clicking the up or down arrow (pictured in top image). The up arrow moves the column to the left in the Files panel, while the down arrow scoots it over to the right. You can also use the Files View Columns category to work with Dreamweaver's collaborative note-sharing feature called Design Notes. Instructions on using Design Notes start on page 721.”).

    Dreamweaver lists all the columns available for the Files panel, and indicates which it displays ("Show") or hides ("Hide"). Under the Type heading, all the files initially say "Built In" to indicate columns that are preprogrammed in Dreamweaver. As you'll read on the section called “Communicating with Design Notes”, you can add your own customized columns to this list.

  3. Double-click the column you want to change.

    For example, double-clicking the Type column displays the options you see in Figure 16.7, “Use the File View Columns category to show or hide columns of information in the Files panel. You can rearrange the columns by selecting one and clicking the up or down arrow (pictured in top image). The up arrow moves the column to the left in the Files panel, while the down arrow scoots it over to the right. You can also use the Files View Columns category to work with Dreamweaver's collaborative note-sharing feature called Design Notes. Instructions on using Design Notes start on page 721.” (bottom): Column Name, "Associate with Design Notes", and "Share with all users". In this case, most of the options are dimmed out because they only apply to custom columns, described on the section called “Organizing the Columns in the Files Panel”.

  4. Change the alignment of the column (Left, Right, or Center) from the Align menu, and select or uncheck the Show checkbox to show or hide a column.

    For example, to hide a column, uncheck the Show box.

  5. Click the Save button to close that column's settings.

    Repeat steps 3–5 for any other columns you wish to edit, and when you're done click the Save button on the Site Setup window.

You can change the order of the columns, too—perhaps the Modified date information is more important to you than the file size. Select a column and click the up or down arrow. The up arrow moves the column to the left in the Files panel, while the down arrow scoots a column over to the right.

Figure 16.7. Use the File View Columns category to show or hide columns of information in the Files panel. You can rearrange the columns by selecting one and clicking the up or down arrow (pictured in top image). The up arrow moves the column to the left in the Files panel, while the down arrow scoots it over to the right. You can also use the Files View Columns category to work with Dreamweaver's collaborative note-sharing feature called Design Notes. Instructions on using Design Notes start on page 721.

Use the File View Columns category to show or hide columns of information in the Files panel. You can rearrange the columns by selecting one and clicking the up or down arrow (pictured in top image). The up arrow moves the column to the left in the Files panel, while the down arrow scoots it over to the right. You can also use the Files View Columns category to work with Dreamweaver's collaborative note-sharing feature called Design Notes. Instructions on using Design Notes start on page 721.

Adding New Folders and Files

The Files panel provides a fast way to add blank web pages to your site. With one click, you can create a new page in any folder, saving you several steps compared to using the File menu.

Adding files

To create a new, blank web page, open the Files panel using one of the methods described on the section called “The Files Panel”, click on a file or folder to select it, and then right-click (Control-click) on the selected file or folder. In the shortcut menu that appears, choose New File. Dreamweaver creates a new, empty page in the folder where the selected page resides or, if you selected a folder, Dreamweaver adds a new page to it. (Actually, the page Dreamweaver creates doesn't have to be empty; you can edit the file Dreamweaver uses as its default new page, as described in the box below.)

Note

The type of file Dreamweaver creates depends on the type of site you're creating. For a plain HTML site, Dreamweaver creates a blank HTML page. If you're building a dynamic, database-driven site, however (like those described in Part Six, “Dynamic Dreamweaver”), Dreamweaver creates a blank page based on the type of server model you selected. For example, if you're building a site using PHP and MySQL, the page is a blank PHP page (named untitled.php).

The new file appears in the Files panel with a highlighted naming rectangle next to it; type a name for the page here. Don't forget to add the appropriate HTML extension (.htm or .html) to the end of the name—if you do forget, Dreamweaver creates a completely empty file, no starter HTML included (and changing the name by adding the .html extension won't fix the problem). If this happens, delete the file and create a new one. (If you're creating a PHP file, as described in the note above, make sure the file name ends in .php.)

Figure 16.8. Click the Expand/Collapse button shown back in Figure 16-6 to maximize the Files panel and display two views simultaneously. This way, you can view both your remote server and local site at the same time. Local files normally appear on the right, but might be on the left, depending on the preference you set under the Site category of the Preferences window. (If you want to change this, press Ctrl+U [⌘-U] to open Preferences and then click the Site category.) The view that appears opposite the local files view—Remote Server, Testing, or Repository—depends on which view you selected before clicking the Expand button. To change views, click a different view button.

Click the Expand/Collapse button shown back in Figure 16-6 to maximize the Files panel and display two views simultaneously. This way, you can view both your remote server and local site at the same time. Local files normally appear on the right, but might be on the left, depending on the preference you set under the Site category of the Preferences window. (If you want to change this, press Ctrl+U [⌘-U] to open Preferences and then click the Site category.) The view that appears opposite the local files view—Remote Server, Testing, or Repository—depends on which view you selected before clicking the Expand button. To change views, click a different view button.

Tip

If, immediately after creating a new file in the Files panel, you rename that file and add a new extension, the contents of the file update to reflect the new file type. For example, changing untitled.html to global.css erases all the HTML code in the file and turns it into an empty CSS file.

Adding folders

You can add folders to your site directly in Dreamweaver using the Files panel. Just click to select a file or folder, and then right-click (Control-click) on that file or folder. From the shortcut menu, choose New Folder. If you click a file, Dreamweaver creates the new folder in the same folder as that file; if you click a folder, you get a new folder inside it.

If you crave variety, you can add a folder another way. Select a file or folder in the Files panel and then click the contextual menu button (at the top right of the Files panel) and select File→New Folder. Finally, in the naming rectangle that appears in the Files panel, type a name for the new folder.

Moving files and folders

Because the Dreamweaver Files panel looks and acts so much like Windows Explorer and the Macintosh Finder, you may think it does nothing more than let you move and rename files and folders on your computer. You may even be tempted to work with your site files directly on the your Windows or Mac desktop, thinking that you're saving time. Think again. When it comes to moving files and folders in your site, Dreamweaver does more than your computer's desktop ever could.

In your Web travels, you've probably encountered the dreaded "404: File Not Found" error. This "broken link" message doesn't necessarily mean that the page doesn't exist; it means that your web browser didn't find the page at the location (URL) specified by the link you just clicked. In short, someone working on the website probably moved or renamed a file without updating the link. Because website files are interrelated in such complex ways—pages link to other pages, which include paths to graphics, which in turn appear on other pages—an action as simple as moving one file can wreak havoc on an entire site. That's why you shouldn't drag website files around on your desktop or rename them in Windows Explorer or the Macintosh Finder.

In fact, moving and reorganizing website files is so headache-ridden and error-prone that some web designers avoid it altogether, leaving their sites straining under the weight of thousands of poorly organized files. But you don't have to be one of them: Dreamweaver makes reorganizing a site easy and error-free. When you use the Files panel to move files, Dreamweaver looks for actions that could break your site's links and automatically rewrites the paths of links, images, and other media (see the cautionary box on the section called “Site Assets”).

Note

Note to JavaScript programmers: If your custom JavaScript programs include paths to web pages, images, or other files in your site, Dreamweaver can't help you. When you reorganize your site with the Files panel, the program updates links it created, but not paths in your JavaScript programs.

Just be sure to do your moving from within Dreamweaver, like this: In the Files panel, drag the file or folder into its new folder (see Figure 16.9, “You can move files and folders within the Files panel just as you would in Windows Explorer or the Macintosh Finder. Simply drag the file into (or out of) a folder. But unlike your computer's file system, Dreamweaver constantly monitors the links between web pages, graphics, and other files. If you move a file using Windows Explorer or the Finder, you'll most likely end up breaking links to that file or, if it's a web page, breaking links within that file. By contrast, Dreamweaver is smart enough to know when moving files will cause problems. The Update Files dialog box lets you update links to and from the files you move so your site keeps working properly.”). To move multiple files, Ctrl-click (⌘-click) each and then drag them as a group; to deselect a file, Ctrl-click or ⌘-click it again. You can also select one file or folder and Shift-click another to select all files and folders in between the two.

Note

Close all your web documents before you reorganize your files this way. Dreamweaver has been known to not always correctly update links in open files. But if you do end up with malfunctioning links, you can always use Dreamweaver's Find Broken Links tool (see the section called “Capturing JavaScript interactivity”) to ferret out and fix any broken links.

When you release the mouse button, the Update Files dialog box appears (Figure 16.9, “You can move files and folders within the Files panel just as you would in Windows Explorer or the Macintosh Finder. Simply drag the file into (or out of) a folder. But unlike your computer's file system, Dreamweaver constantly monitors the links between web pages, graphics, and other files. If you move a file using Windows Explorer or the Finder, you'll most likely end up breaking links to that file or, if it's a web page, breaking links within that file. By contrast, Dreamweaver is smart enough to know when moving files will cause problems. The Update Files dialog box lets you update links to and from the files you move so your site keeps working properly.”); just click Update. Dreamweaver updates all the links for you.

Tip

If you accidentally drag a file or folder to the wrong location, click Don't Update. Then drag the file back to its original location and, if Dreamweaver asks, click Don't Update once again.

Renaming files and folders

Renaming files and folders poses the same problems as moving them. Because links include file and folder names, altering a file or folder name can break a link just as easily as moving or deleting a file or folder.

For example, say you create a new site with a home page named home.html. You cheerfully continue building the other pages of your site, linking them to home.html as you go along. But after reading this chapter and checking the default file name your web server requires (see the section called “Setting Up a Site”), you find you need to rename your home page index.html. If you were to rename the file index.html using Windows Explorer or the Macintosh Finder, every link to home.html would result in a "File not found" error!

Figure 16.9. You can move files and folders within the Files panel just as you would in Windows Explorer or the Macintosh Finder. Simply drag the file into (or out of) a folder. But unlike your computer's file system, Dreamweaver constantly monitors the links between web pages, graphics, and other files. If you move a file using Windows Explorer or the Finder, you'll most likely end up breaking links to that file or, if it's a web page, breaking links within that file. By contrast, Dreamweaver is smart enough to know when moving files will cause problems. The Update Files dialog box lets you update links to and from the files you move so your site keeps working properly.

You can move files and folders within the Files panel just as you would in Windows Explorer or the Macintosh Finder. Simply drag the file into (or out of) a folder. But unlike your computer's file system, Dreamweaver constantly monitors the links between web pages, graphics, and other files. If you move a file using Windows Explorer or the Finder, you'll most likely end up breaking links to that file or, if it's a web page, breaking links within that file. By contrast, Dreamweaver is smart enough to know when moving files will cause problems. The Update Files dialog box lets you update links to and from the files you move so your site keeps working properly.

Dreamweaver, on the other hand, handles this potential disaster effortlessly, as long as you rename the file in the Files panel. To do so, click the file or folder name in the panel. Pause a moment, and click the name of the file or folder. (The pause ensures that Dreamweaver won't think you just double-clicked the file to edit it.)

A renaming rectangle appears; type the new name. Be sure to include the proper extension for the type of file you're renaming. For example, GIFs end with .gif and Cascading Style Sheets end with .css. Although Dreamweaver lets you name files without using an extension, extension-less files won't work when you move them to a web server.

Finally, in the Update Files dialog box (Figure 16.9, “You can move files and folders within the Files panel just as you would in Windows Explorer or the Macintosh Finder. Simply drag the file into (or out of) a folder. But unlike your computer's file system, Dreamweaver constantly monitors the links between web pages, graphics, and other files. If you move a file using Windows Explorer or the Finder, you'll most likely end up breaking links to that file or, if it's a web page, breaking links within that file. By contrast, Dreamweaver is smart enough to know when moving files will cause problems. The Update Files dialog box lets you update links to and from the files you move so your site keeps working properly.”), click Update. Dreamweaver updates all the links to the file or folder to reflect the new name.

Warning

It bears repeating: never rename or move files and folders outside of Dreamweaver. If you use Windows Explorer or the Macintosh Finder to reorganize your site's files, links will break, images will disappear, and the earth will open underneath your feet. (Well, that last thing won't happen, but it can feel that way when your boss comes in and says, "What happened to our website? Nothing works!")

If you move files outside of Dreamweaver by accident, see the section called “Capturing JavaScript interactivity” to learn how to find and fix broken links.

Deleting files and folders

It's a good idea to clean up your site from time to time by deleting old and unused files. Just as with moving and renaming files, you delete them from the Files panel.

To delete a file or folder, click to select it in the Files panel and press Backspace or Delete. (To select multiple files or folders, Ctrl-click [⌘-click] them.) If no other page references the doomed file or folder, a simple "Are you sure you want to delete this file?" warning appears; click Yes.

However, if other files link to the file or to files within the folder you want to delete, Dreamweaver displays a warning dialog box (Figure 16.10, “When you delete files in the Files panel, Dreamweaver tells you if other pages reference (link to) the file. If they do, you'll need to repair the links. Dreamweaver makes it easy to do so via the Change Links Sitewide command (see "Changing a Link Throughout a Site" on page 678)—and it reminds you of the feature in this dialog box.”) informing you that you're about to break links on one or more pages in your site.

Figure 16.10. When you delete files in the Files panel, Dreamweaver tells you if other pages reference (link to) the file. If they do, you'll need to repair the links. Dreamweaver makes it easy to do so via the Change Links Sitewide command (see "Changing a Link Throughout a Site" on page 678)—and it reminds you of the feature in this dialog box.

When you delete files in the Files panel, Dreamweaver tells you if other pages reference (link to) the file. If they do, you'll need to repair the links. Dreamweaver makes it easy to do so via the Change Links Sitewide command (see "Changing a Link Throughout a Site" on page 678)—and it reminds you of the feature in this dialog box.

The message even lists the first few pages that use the file. If you made a mistake, click No to leave your site untouched.

If you're sure you want to delete the file or folder, click Yes. And yes, this move does break links in all the pages listed. Repairing those links, which usually means linking them to a new page, requires a separate step: using the Site→Change Links Sitewide command, as described on the section called “Capturing JavaScript interactivity”.

Note

If you have moved files into your site folder using Windows Explorer, or the Mac Finder, Dreamweaver might not be aware of those files, or links between those files and others in your site. If that's the case, when you move or delete files, Dreamweaver may not correctly update links or warn you of broken links caused by deleting necessary file. To make Dreamweaver aware of the new files you've added, choose Site→Advanced→Recreate Site Cache—Dreamweaver will scan all the files in the local site folder and update the cache (its database of files and links in the site).

Site Assets

Web pages integrate lots of different elements: PNGs, GIFs, JPEGs, links, colors, JavaScript files, and Flash movies, to name just a few. In a large site with lots of files, it's a challenge to locate a particular image or remember an exact color.

To simplify the process, Dreamweaver provides the Assets panel. For want of a better generic term, Dreamweaver defines the term asset to mean any element you use on a web page, such as a GIF, a link, or even an individual color.

Viewing the Assets Panel

Dreamweaver lists your site's assets on the nine category "pages" of the Assets panel (Figure 16.11, “Most of the commands in the Assets panel's contextual menu are duplicated in the panel itself, but three options appear only on this menu. "Recreate Site List" comes in handy if you add or delete files without Dreamweaver's help using Windows Explorer or the Mac Finder. It rebuilds the site cache and updates the list of assets. "Copy to Site" copies the selected asset to another site. "Locate in Site" switches to the Files panel and selects the file. You can also open the contextual menu by right-clicking (Control-clicking) any asset in the list.”). To open the panel, choose Window→Assets.

Select an asset by clicking its name; Dreamweaver displays a miniature preview of the asset above the Assets list. To preview a movie, click the green arrow that appears in the preview window.

Dreamweaver divides your site's assets into nine categories, represented by icons on the left of the Assets panel. To view the assets in a particular category, click its icon:

  • The Images category lists all the GIF, JPEG, and PNG files in your site. Dreamweaver lists the dimensions of each image next to its name, so you can quickly identify whether logo1.gif or logo2.gif is your 728 x 90 pixel banner logo. You can also see the images' sizes, types, and locations in the list (you may need to scroll to the right to see all this).

  • The Colors category shows you all the colors specified in your site's pages and style sheets. These include link colors, background colors, and text colors.

  • The Links category lists all external links—and not just standard http:// links, but also email links, FTP addresses, and JavaScript links.

  • The three multimedia categories—SWF (meaning Flash movies), Shockwave, and Movies (meaning Flash or QuickTime movies)—are roughly equivalent. They each display movie files with their corresponding extensions: .swf (Flash), .dcr (Shockwave), .flv (Flash video), and .mov or .mpg (QuickTime and MPEG).

  • The Scripts category lists JavaScript files. This category only includes external script files your web pages link to. You won't see scripts embedded in a web page—like those that Dreamweaver behaviors create.

  • The last two categories—Templates and Library—are advanced assets that streamline website production. They're discussed in Chapters 19, Snippets and Libraries and 20, Templates.

You can switch between two views for each asset category—Site and Favorites—by clicking the radio buttons near the top of the Assets panel. The Site option lists all the assets in your site for the chosen category. Favorites lets you create a select list of your most important and frequently used assets (see the section called “Favorite Assets”).

If you add additional assets as you work on a site—for example, if you create a new GIF image in Fireworks and import it into your site—you need to update the Assets panel. To do so, click the Refresh Site List button (see Figure 16.11, “Most of the commands in the Assets panel's contextual menu are duplicated in the panel itself, but three options appear only on this menu. "Recreate Site List" comes in handy if you add or delete files without Dreamweaver's help using Windows Explorer or the Mac Finder. It rebuilds the site cache and updates the list of assets. "Copy to Site" copies the selected asset to another site. "Locate in Site" switches to the Files panel and selects the file. You can also open the contextual menu by right-clicking (Control-clicking) any asset in the list.”).

Inserting Assets

The Assets panel's prime mission is to make it easy for you to add assets to your site by dragging the asset from the panel into your document window. For example, you can add graphics, colors, and links to your pages with a simple drag-and-drop operation. Note that most of the categories on the panel refer to external files you commonly find on web pages: images, Flash, Shockwave, movies, and scripts.

You can drop an asset anywhere on a page you'd normally insert an object—in a table cell, a <div> tag, at the beginning or end of a page, or within a paragraph. You can add script assets to the head of a page (see Figure 16.12, “Although you'll insert most assets into the body of a web page, you can (and usually should) place script files in the head of the page. To do this, choose View→Show Head Content. Then drag the script from the Assets panel into the head pane, as shown here. (Adding a script asset doesn't copy the JavaScript code into the web page. Instead, just as with external style sheets, Dreamweaver links to the script file so that when a web browser loads the page, it looks for and then loads the JavaScript file from the website.)”).

(If you're billing by the hour, you may prefer the long way: click in the document window to plant the insertion point, click the asset's name, and then click Insert at the bottom of the Assets panel.)

Figure 16.11. Most of the commands in the Assets panel's contextual menu are duplicated in the panel itself, but three options appear only on this menu. "Recreate Site List" comes in handy if you add or delete files without Dreamweaver's help using Windows Explorer or the Mac Finder. It rebuilds the site cache and updates the list of assets. "Copy to Site" copies the selected asset to another site. "Locate in Site" switches to the Files panel and selects the file. You can also open the contextual menu by right-clicking (Control-clicking) any asset in the list.

Most of the commands in the Assets panel's contextual menu are duplicated in the panel itself, but three options appear only on this menu. "Recreate Site List" comes in handy if you add or delete files without Dreamweaver's help using Windows Explorer or the Mac Finder. It rebuilds the site cache and updates the list of assets. "Copy to Site" copies the selected asset to another site. "Locate in Site" switches to the Files panel and selects the file. You can also open the contextual menu by right-clicking (Control-clicking) any asset in the list.

Figure 16.12. Although you'll insert most assets into the body of a web page, you can (and usually should) place script files in the head of the page. To do this, choose View→Show Head Content. Then drag the script from the Assets panel into the head pane, as shown here. (Adding a script asset doesn't copy the JavaScript code into the web page. Instead, just as with external style sheets, Dreamweaver links to the script file so that when a web browser loads the page, it looks for and then loads the JavaScript file from the website.)

Although you'll insert most assets into the body of a web page, you can (and usually should) place script files in the head of the page. To do this, choose View→Show Head Content. Then drag the script from the Assets panel into the head pane, as shown here. (Adding a script asset doesn't copy the JavaScript code into the web page. Instead, just as with external style sheets, Dreamweaver links to the script file so that when a web browser loads the page, it looks for and then loads the JavaScript file from the website.)

Adding color and link assets

Color and link assets work a bit differently than other asset files. Instead of standing on their own, they add color or a link to text or images you select in the document window. (You can add colors to any text selection, or add links to images and text.) This makes it easy to quickly add a frequently used link—the URL to download the Flash player or Adobe Reader, for example.

To do so, start by highlighting the text (to change its color or turn it into a link) or image (to turn it into a link). In the Assets panel, click the appropriate category button—Colors or Links. Click the color or link you want, and then click Apply. Alternatively, you can drag the color or link asset from the panel to the selected text or image.

In the case of a link, Dreamweaver simply adds an <a> tag to the selection, with the proper external link. For color, Dreamweaver pops-up the New CSS Rule window (Figure 4.2, “In the New CSS Rule dialog box, you choose a type of style, give it a name, and decide whether to put the style in an internal or external style sheet. You use the two dimmed buttons, labeled Less Specific and More Specific, when you type a special type of CSS selector called a descendent selector (see page 298).”) and asks you to create a new CSS style—you then need to go through the whole rigmarole described on the section called “Creating Styles” to do so. Unfortunately, Dreamweaver's not smart enough to update the text color of any style that's currently applied to the selected text. In other words, applying colors with the Assets panel is more trouble than it's worth.

However, there is one way to use the color assets effectively, sort of. As you'll recall from the section called “Phase 4: Adding Images and Text”, the Dreamweaver color-picker lets you sample a color of the screen. So if you want to use a color from the Assets panel, make sure you have the Assets panel open and the color assets visible; then, when you want to select a color (for example, to add a color to text in the CSS Rule Definition window), click the color box (the cursor changes to an eye dropper), and then click a color in the Assets panel.

Favorite Assets

On a large site, you may have thousands of images, movies, colors, and external links. Because scrolling through long lists of assets is a chore, Dreamweaver lets you create a compact list of your favorite, frequently used assets.

For example, you might come up with five main colors that define your site's color scheme, which you'll use much more often than the other miscellaneous colors on the Assets list. Add them to your list of favorite colors. Likewise, adding graphics you use over and over—logos, for example—to a list of favorites makes it easy to locate and insert those files into your pages. (Don't forget that you can also use Dreamweaver's Library and template features for this function. They're similar but more powerful tools to keep frequently used items at the ready. Turn to Chapter 19, Snippets and Libraries for the details.)

Identifying your Favorites

If the color, graphic, or other element you want to add to your Favorites list already appears on your Assets panel, highlight it in the list and then click the "Add to Favorites" button (see Figure 16.11, “Most of the commands in the Assets panel's contextual menu are duplicated in the panel itself, but three options appear only on this menu. "Recreate Site List" comes in handy if you add or delete files without Dreamweaver's help using Windows Explorer or the Mac Finder. It rebuilds the site cache and updates the list of assets. "Copy to Site" copies the selected asset to another site. "Locate in Site" switches to the Files panel and selects the file. You can also open the contextual menu by right-clicking (Control-clicking) any asset in the list.”).

Even quicker, you can add Favorites as you go, snagging them right from your web page. If you're working on your site's home page and you insert a company logo, for example, that's a perfect time to make the logo a favorite asset.

Simply right-click (Control-click) the image. From the shortcut menu, choose "Add Image to Favorites"; Dreamweaver instantly adds the graphic to your list of favorites within that asset category—meaning that you'll see the file when you're in the Favorites view and you have the Image category selected. You can use the same shortcut for Flash, Shockwave, and QuickTime files, and for links. (Unfortunately, it doesn't work for colors and script files.)

When it comes to colors and links, you can turn them into Favorites another way. In the Assets panel, select the Color or URLs category, click the Favorites radio button, and then click the New Asset button (see Figure 16.13, “In addition to using folders to organize your Favorites, you can give a Favorite asset an easily identifiable nickname. Instead of listing a favorite image using its file name—148593.gif, for instance—use an easily understood name like New Product. Naming favorite colors is particularly helpful; a nickname like Page Background is more descriptive than #FF6633. To name a Favorite asset, click to select it; pause a moment, and then click again to edit its name. (These nicknames only apply in the Assets panel; they don't rename or retitle your files.)”). Then:

  • If you're adding a favorite color, the Dreamweaver color box appears. Select a color using the eyedropper (see the section called “Phase 4: Adding Images and Text”).

  • If you're adding a favorite link, the Add URL window opens. Type either an absolute URL in the first field (a web address starting with http://) or an email link (for instance, mailto:). Next, type a name for the link—such as Acrobat Download or Subscription Email—in the Nickname field and then click OK.

Your new color or link appears in the Favorites list.

Using your Favorites

You insert assets from the Favorites list into your web pages just as you would any other assets; see the section called “Inserting Assets”.

Removing Favorites

Removing an asset from the Favorites list is just as straightforward as adding one: select it in the Favorites list of your Assets panel and then press Delete. The "Remove from Favorites" button (see Figure 16.13, “In addition to using folders to organize your Favorites, you can give a Favorite asset an easily identifiable nickname. Instead of listing a favorite image using its file name—148593.gif, for instance—use an easily understood name like New Product. Naming favorite colors is particularly helpful; a nickname like Page Background is more descriptive than #FF6633. To name a Favorite asset, click to select it; pause a moment, and then click again to edit its name. (These nicknames only apply in the Assets panel; they don't rename or retitle your files.)”) on the Assets panel does the same thing. Yet another approach is to use the contextual menu (Figure 16.11, “Most of the commands in the Assets panel's contextual menu are duplicated in the panel itself, but three options appear only on this menu. "Recreate Site List" comes in handy if you add or delete files without Dreamweaver's help using Windows Explorer or the Mac Finder. It rebuilds the site cache and updates the list of assets. "Copy to Site" copies the selected asset to another site. "Locate in Site" switches to the Files panel and selects the file. You can also open the contextual menu by right-clicking (Control-clicking) any asset in the list.”).

Don't worry; removing an asset from your Favorites list doesn't delete that asset from the Assets panel (or your site). You can still find it listed by clicking the Site radio button.

Figure 16.13. In addition to using folders to organize your Favorites, you can give a Favorite asset an easily identifiable nickname. Instead of listing a favorite image using its file name—148593.gif, for instance—use an easily understood name like New Product. Naming favorite colors is particularly helpful; a nickname like Page Background is more descriptive than #FF6633. To name a Favorite asset, click to select it; pause a moment, and then click again to edit its name. (These nicknames only apply in the Assets panel; they don't rename or retitle your files.)

In addition to using folders to organize your Favorites, you can give a Favorite asset an easily identifiable nickname. Instead of listing a favorite image using its file name—148593.gif, for instance—use an easily understood name like New Product. Naming favorite colors is particularly helpful; a nickname like Page Background is more descriptive than #FF6633. To name a Favorite asset, click to select it; pause a moment, and then click again to edit its name. (These nicknames only apply in the Assets panel; they don't rename or retitle your files.)

Organizing Favorite assets

On a large site with lots of important assets, even a Favorites list can get unwieldy. That's why you can set up folders within the asset categories of the Favorites panel to organize your assets. For example, if you use lots of ads on a site, create a folder in the Image assets category of your Favorites list called Ads or, for even greater precision, create multiple folders for different types of ads: Banner Ads, Half Banner Ads, and so on.

You can then drag assets into the appropriate folders, and expand or contract the folder to show or hide the assets inside (see Figure 16.13, “In addition to using folders to organize your Favorites, you can give a Favorite asset an easily identifiable nickname. Instead of listing a favorite image using its file name—148593.gif, for instance—use an easily understood name like New Product. Naming favorite colors is particularly helpful; a nickname like Page Background is more descriptive than #FF6633. To name a Favorite asset, click to select it; pause a moment, and then click again to edit its name. (These nicknames only apply in the Assets panel; they don't rename or retitle your files.)”). These folders simply help you organize your Assets panel; they don't actually appear anywhere within the structure of your site. Moving a Favorite asset into a folder doesn't change the location of files within your site.

To create a Favorites folder, click the appropriate asset category button at the left edge of the Assets panel (any except the bottom two, since, alas, you can't create folders for templates and Library items). Click Favorites at the top of the Assets panel (you can't create folders in Site view). Finally, click the New Favorites Folder button (see Figure 16.13, “In addition to using folders to organize your Favorites, you can give a Favorite asset an easily identifiable nickname. Instead of listing a favorite image using its file name—148593.gif, for instance—use an easily understood name like New Product. Naming favorite colors is particularly helpful; a nickname like Page Background is more descriptive than #FF6633. To name a Favorite asset, click to select it; pause a moment, and then click again to edit its name. (These nicknames only apply in the Assets panel; they don't rename or retitle your files.)”) at the bottom of the Assets panel. When Dreamweaver displays the new folder with its naming rectangle highlighted, type a new name for the folder and then press Enter (but don't use the same name for more than one folder).

To put an asset into a folder, just drag it there from the list. And if you're really obsessive, you can even create subfolders by dragging one folder onto another.

If you enjoyed this excerpt, buy a copy of Dreamweaver CS5: The Missing Manual.