Working in the Site Panel

[ LiB ]

When you have a site defined, the Dreamweaver Site panel is your interface for performing any and all site- related tasks (see Figure 17.3). It's your window on the world of your site. It's a good idea to always leave it open while you work. Use this window to see your site's files and hierarchical structure at a glance, to perform file-management tasks, and more.

Figure 17.3. The Site panel (shown in expanded and contracted modes).

Expanding and Contracting the Site Panel

The Site panel with all of its information showing can take up a lot of screen real estate, which can be a problem unless you have a very large monitor or a dual monitor set up at your workstation. To alleviate this problem, the panel can be shown in full or abbreviated form. Switch between these two modes by clicking the Expand/Collapse button in the Site panel toolbar (see Figure 17.3). Like other panels, it can also be docked in with the rest of the Dreamweaver panels, or undocked and used as a free-standing panel. (This feature is new for Dreamweaver/Mac users.) When docked , it's always in abbreviated form.

The details of the Site panel vary slightly on Mac and Windows.

• Windows users When the Site panel is docked, expanding it causes it to temporarily undock and take over the entire Dreamweaver application window. When it is used as a free-standing window, it expands without taking over the entire application window. In its expanded form, the panel includes a special Site panel menu bar, with File, Edit, View, and Site menus . In its abbreviated form, this menu disappears, but the panel options menu (accessed by clicking the Options icon in the panel's upper-right corner) includes them as submenus. Throughout this chapter, this is referred to as the Site panel menu bar.

• Mac users When the Site panel is docked, expanding it causes it to temporarily undock and become a free-standing window. It doesn't take over the entire screen like its Windows counterpart , and it doesn't provide a Site panel menu bar. But the panel options menu (accessed by clicking the icon in the upper-right corner of the panel) includes File, Edit, View, and Site submenus. Throughout this chapter, this is referred to as the Site panel menu bar.

For both Windows and Mac, the Site panel cannot be reinserted into the dock while in an expanded state.

Site Files View

In the expanded Site panel, the right column shows the Site Files list. In the abbreviated panel, the Site Files list shows by default. It can also be shown by choosing Local View from the view drop-down menu (see Figure 17.3). The Site Files list shows all of the contents of your local root folder, arranged hierarchically as if you were viewing it in Windows Explorer or the Macintosh Finder's List view. Just like the lists of files in your operating system, every folder shows with a plus/minus (+/-) sign (Windows) or triangle (Mac) to show or hide its contents. Most of the powerful file-management features in Dreamweaver center on the Site Files view.

Working with the File View Columns

When the Site panel is expanded, the Site Files list becomes more than just a list of names . It includes columns of information about each file: name , size, type, modified date, and more. If your Site panel is wide enough, you can learn a lot about your files by just looking at their column information. Just as you can with Windows Explorer or the Macintosh Finder List view, you can also choose to view your files organized by any column, by clicking on that column.

If the Site panel is not organized optimally for your work habits, you can change it. Dreamweaver allows you to customize how you view your Site panel with the File View Columns category in the Site Definition dialog box (see Figure 17.4). In addition to the methods already mentioned for accessing this dialog box, you can open the dialog box and go directly to the File View Columns category by choosing View > File View Columns from the Site panel menu bar.

Figure 17.4. The Site Definition dialog box showing the File View Columns category.

In this window, you can see all the names of the columns visible in the Site panel, whether the columns are built-in by Macromedia or created by you. You can also see whether the columns are visible.

If you want to add your own custom column, click the plus (+) button. You can then name the new column, specify whether you want to assign a Design Note to it, specify how the information in the column is to be aligned, and specify whether the column is visible or not. When you create your own column, its type is Personal. To delete a column you have created, click the (Delete) button.

Read Chapter 19, "Workplace Collaboration," to learn how to use file view columns with Design Notes.

To understand where the new column you create appears in the Site panel, you need to use your imagination . Visualize the Site panel. Recall that the first column in the window contains the names of files located in your local site. The next column holds Design Notes. The third column indicates the size of the files, and the fourth column tells you the types of files. Here, you see the names of the columns (which appear horizontally in the Site panel) vertically. Dreamweaver places the new column at the bottom of the list by default, which means that the new column is placed on the far right of the Site panel. If you want to change the location of your new column, use the up and down arrows located in the upper-right portion of the Site Definition window. By clicking the up arrow, you are moving your column to the left in the Site panel. Click the down arrow if you want to move your column to the right of the Site panel. You can also move the built-in columns, except for the Name column; that always must remain at the top of this list.

You cannot delete a Dreamweaver default column. If you don't want to see it, however, you can deselect the Show option. This hides the column from your view, giving the appearance that it has been deleted.

Site Map View

So far, you have looked at the elements of your site as a list. However, this list doesn't tell you how the files relate to each other. Which file is the first one viewed when someone goes to your site? How many pages link to your first page? Dreamweaver gives you an easy way to answer all these questions: Site Map view.

Designating a Home Page

Before you can use Site Map view, you need to tell Dreamweaver what your "home" page is. This is the page that is first visible when someone goes to your site. Just because it's called the home page doesn't mean that the document itself needs to be named home.html. In fact, the home page is typically named index.htm, index.html, default.htm, or default.html. This is because web servers are usually configured to recognize one or more of these names automatically so that visitors don't need to specify the page name when entering a site's URL in the browser's address fields. (Before choosing the home page filename for your site, check with your web server administrator or your ISP's tech support staff to see which default names its servers are configured to recognize.)

To define a home page for your site, open the Site Definition dialog box and go to the Site Map Layout category (see Figure 17.5). You can also go directly to that category by choosing View > Layout from the Site panel menu bar. In the dialog box, click the folder icon to browse for your home page, or type its name in the home page field.

Figure 17.5. The Site Definition dialog box, ready to define a home page.

If you have chosen one of the standard default filenames for your home page, you don't need to explicitly define it as a home page in Dreamweaver. Like a web server, Dreamweaver recognizes these names and assumes that a file with a default name is the home page.

Default filenames won't be recognized by Dreamweaver or a web server if too many of them exist. Don't put index.htm and index.html files in the site.

Viewing a Site with the Site Map

After you have selected your home page, you can view the site map. With the Site panel expanded, press the Site Map button (refer to Figure 17.3) and, from the drop-down menu, choose Map Only or Map and Files. Figure 17.6 shows the Site panel displaying Map Only.

Figure 17.6. The Site panel showing the site map for a simple site.

As Figure 17.6 shows, the Site Map view displays your site as a hierarchy of linked files, with the topmost file being your home page. Below the home page are files linked directly from the home page. Included as well are email links, external links, and links to any sort of media embedded in the page.

Options for how the site map displays are set in the Site Map Layout category of the Site Definition dialog box. Some options can also be set using commands in the View menu in the Site panel menu bar.

Icons, Names, and File Types

The site map uses small icons to give visual clues to a file or link's status. When you get used to the visual language being used, a glance will tell you a world of information about your site:

• Icons Each kind of item in the site map has its own icon to represent it. Dreamweaver file icons with black labels represent files. A globe icon with a blue label represents absolute URLs and other special links. Broken links are represented by a broken chain icon with a red label.

• Labels If you'd rather label your icons with page titles instead of filenames, choose Page Titles in the Site Definition dialog box, or choose View > Show Page Titles from the Site panel menu bar. To turn filenames back on, choose Filenames from the Site Definition dialog box, or choose View > Show Filenames from the Site panel menu bar.

What Shows and What Doesn't

By default, dependent files (such as linked media, and linked script and CSS files) don't display in the site map. To see these files, choose Display Dependent Files in the Site Definition dialog box, or choose View > Show Dependent Files from the Site panel menu bar. To hide them again, use the same commands.

Showing the Hierarchy

If your site is complex, the site map might be difficult to read because of all the icons and links shown. But you can simplify the view by hiding and showing links.

To hide all the links coming from a particular file, click the minus (-) button next to the file icon. To show the links again, click the plus (+) button. (The button changes state depending on whether links are shown or hidden.)

To view only a portion of the site at a time (for instance, to show only the Menswear section of a clothing catalog website), right-click the file at the top of the hierarchy that you want to view and choose View as Root from the contextual menu. The site map shifts so that the selected file appears as the new home page at the top of the hierarchy, with all of its child links showing. No other parts of the website are visible. At the top of the site map window, a special icon shows the relationship of the current view to the home page (see Figure 17.7).

Figure 17.7. Viewing a page as the root of the hierarchy and returning to view the entire hierarchy.

To return to viewing the entire website after you've switched to this temporary view, click the home page icon at the top of the site map window (see Figure 17.7).

Modifying the Site Map Home Page

Dreamweaver lets you change the existing home page to either an existing page or a completely new one, including non-HTML files such as an image or a SWF file. Select Site > New Home Page from the Site panel menu bar. This brings up the New Home Page dialog box. You can enter the filename and page title of your new home page here. After creating this new page, you can re-create your links using the Link to Existing File command as well as the Point-to-File icon. This process was discussed in the previous sections of this chapter.

To set an existing page as the new home page in the site map, select that file from the local Site panel (you must be in Map and Files View mode to do this). Then select Site > Set as Home Page from the Site panel menu bar. This re-creates the site map with the newly defined home page and its links. You can also right-click a file in the Site panel and choose Set as Home Page from the contextual menu.

Customizing Site Map Layout

You can customize your current site's site map in the Site Definition dialog box's Site Map Layout category. From this window, you can select the number of columns and the column width for your site map display. This number specifies the number of pages to display on each row; the default is 200. You will typically not need to adjust this value because you will rarely have more than 200 pages linked to from your main page.

Next you can select whether the site map should represent documents by their filenames or their page titles. If you have been diligent in creating effective page titles, using the page titles in the Site Map view might be a good way to display your site. Displaying your site files by their page titles also gives you an idea of whether the titles are easy to understand. You might be surprised how confusing some page titles can be when you're not looking at the page itself.

Finally, you can choose options that you want to include in your site map. The first option enables you to specify whether the site map should show files marked as hidden. When this is checked, hidden files will be shown. The other option, Display Dependent Files, displays all dependent files (such as images and other files linked in the HTML) in the site map. These files are listed in the order in which they are located in the HTML code.

Creating an Image from the Site Map

How handy would it be if you could save your site map as an image that you could then email to or print out for your client? Dreamweaver makes this task incredibly easy!

To save the site map, choose File > Save Site Map. In the Save Site Map dialog box, name your image and choose the location in which to save it. For Windows users, in the File Type drop-down menu, choosing .bmp saves the file as a bitmap, and choosing .png saves it as a PNG file. For Mac users, the file automatically is saved as a JPEG.

[ LiB ]