Panels

Dreamweaver contains many panels, bars, inspectors, and menus to aid in the development of your web pages. Although we've talked about a select few options centralized within and around the Document window, this section focuses on the myriad of other panels that are also at your disposal.

Interacting with Panels

Dreamweaver includes a library of panels, all orgranized in panel groups and readily available from the Window menu. Opening a panel and its associated panel group is simply a matter of choosing the panel you want from the Window menu. For instance, because we'll be talking about the CSS Styles panel shortly, I'll select it from the Window menu (see Figure 2.33). The CSS Styles panel, along with the Layers panel, opens as the CSS panel group, docked above the Files panel group.

Figure 2.33. The CSS Styles panel can be opened by selecting CSS Styles from the Window menu.

You can also undock panels simply by dragging them out of their docked state. For instance, if I wanted to make the Design panel group a free-floating panel, I would simply click, hold, and drag from the icon just to the left of the text in the blue menu bar (see Figure 2.34).

Figure 2.34. Panels can be docked and undocked freely.

Of course, the reverse is also possible: by simply dragging the panel group back into the list of panels on the right side of the development area, you can dock a free-floating panel group. You can also minimize and open panels by selecting the name from the blue menu bar or choosing the small arrow icon next to the name.

Every panel supports its own unique functionality. This is made obvious by the small icons located on the bottom-right of the panel. Advanced options for every panel are also available from the panel's Options menu, easily accessed by clicking the icon on the far right of the blue menu bar and shown selected in Figure 2.35.

Figure 2.35. Every panel features a panel Options menu, which includes advanced features related to the specific panel.

At the bottom of the panel Options menu, you'll notice six distinct options consistent in every panel Options menu and also available from the context menu (right-clicking the blue menu bar) of the panel:

Help: Opens the Dreamweaver Help index with the selected panel as the selected topic.
Group <Panel Name> with: Choose this option if you want to associate a specific panel with a different group. You can also select the New Panel Group option if you want to disassociate a panel with its group and make it free standing.
Close <Panel Name>: Choose this option when you want to close a specific panel. You can always re-open it within its panel group by selecting the specific option from the Window menu.
Rename Panel Group: Opens the Rename Panel Group dialog. Choosing this option allows you to customize the name of the panel group.
Maximize Panel Group: Expands the panel group so that it consumes the entire vertical area of the panel menu on the right side of the development area. Doing this while docked causes any panels to automatically minimize.
Close Panel Group: Closes the panel group. Once a panel group has been closed, it must be re-opened from the Window menu.

The CSS Styles Panel

Part of the Design panel group, the CSS Styles panel allows you to create and work with cascading styles and style sheets. You can make the CSS Styles panel visible and hidden by selecting CSS Styles from the Window menu or by pressing the Shift+F11 shortcut key. The CSS Styles panel is covered in greater depth in Chapter 7, "Advanced Page Formatting Using Style Sheets."

The Layers Panel

Also part of the Design panel group, the Layers panel allows you to name and change the stacking order and visbility of layers in the Document window after they've been added. You can make the Layers panel visible and hidden by selecting Layers from the Window menu or by pressing the F2 shortcut key. The Layers panel is covered in greater depth in Chapter 11, "Layers in Dreamweaver."

The Behaviors Panel

Part of the Tag Inspector panel group, the Behaviors panel allows you to work with a myriad of pre-built JavaScript behaviors. With a single click of the Add (+) icon, a list of behaviors are immediately available to your web pages. You can make the Behaviors panel visible and hidden by selecting Behaviors from the Window menu or by pressing the Shift+F4 shortcut key. The Behaviors panel is covered in greater depth in Chapter 10, "Using Dreamweaver Behaviors."

The Application Panel Group

As you begin to build dynamic applications in the second half of the book, the Application panel group will become your best friend. The Application panel group, which includes the Databases, Bindings, Server Behaviors, and Components panels, is covered extensively in the second half of the book.

The Files Panel

Part of the Files panel group and covered in more detail in Chapter 3, "Building a Web Page," the Files panel is a centralized repository for managing sites and files within sites. At its most basic level, the Files panel acts similar to Windows Explorer in that it allows you to browse your computer, network, and desktop. It also lists FTP and RDS servers, again, covered in more detail in Chapter 3. You can make the Files panel visible and hidden by selecting Files from the Window menu or by pressing the F8 shortcut key.

The Assets Panel

Also part of the Files panel group, the Assets panel is an integrated image, color, URL, Flash, Shockwave, movie, script, template, and library item management window. From this panel, you have various options for managing and working with these features as well as adding and customizing favorites you use most often. You can make the Assets panel visible and hidden by selecting Assets from the Window menu or by pressing the F11 shortcut key.

The Snippets Panel

The last panel available in the Files panel group is the Snippets panel. The Snippets panel allows you to create and store scripts, markup, and notes that you use and reuse most often. Dreamweaver ships with a set of snippets that include text, navigation, meta, JavaScript, header, form, footer, content table, comment, and accessibility snippets. You can make the Snippets panel visible and hidden by selecting Snippets from the Window menu or by pressing the Shift+F9 shortcut key.

There are numerous snippets you can add to your documents. So many, in fact, that I won't attempt to cover them all here. Instead, I'll show you how to easily add a snippet to your page and then show you how to create your own snippets from code. Adding snippets to your page is as easy as finding a snippet that you like and that relates to the functionality you need, and adding it to the page. To add a snippet to your page, follow these steps:

1.	Find the Close Window Button snippet located in the Form Elements snippet category.
2.	After you've selected the snippet, you should see the snippet code at the top of the panel in the preview window (see Figure 2.36). Figure 2.36. The snippet's code appears in the Snippet panel's preview window.
3.	Drag the snippet onto the Document window. You can also select the snippet and click the Insert button in the bottom-left corner of the Snippets panel. Furthermore, you can also double-click the snippet to insert it wherever your cursor is positioned.
4.	To preview the functionality, select the Preview In Browser option from the Preview/Debug In Browser submenu in the Document toolbar (or press F12).

As you can see from Figure 2.37, clicking the button in the browser causes the browser window to attempt to close itself.

Figure 2.37. The Close Window Button snippet is a piece of code that causes the browser window to close.

Of course this is a small example of using the Snippets panel but it clearly demonstrates the possibilities. I encourage you to explore the different snippets because they can greatly improve your development efficiency.

You might want to add your own snippets to the Snippets panel if you write lengthy code that you don't want to replicate every time you need to use it. Instead, you can add it as a snippet for easier reference and use. To create a new snippet, follow these steps:

1.	As an example, I'll write a simple snippet that causes a table row to change color when the user's mouse rolls over the row: <table width="125" border="0" cellspacing="0" cellpadding="0"> <tr onMouseOver="javascript:this.style.backgroundColor='Silver';" onMouseOut="javascript:this.style.backgroundColor='White';"> <td align="center"><a href="#">Hello World</a></td> </tr> </table> The code added to the page resembles what is shown in Figure 2.38. Figure 2.38. Add some code to the page in Code view that we can later turn into a snippet.
2.	Highlight the code, right-click to access the context menu, and choose Create New Snippet.
3.	The Create New Snippet dialog appears, allowing you to give your snippet a name, description, type, and more. Fill in the blanks so that your dialog resembles the one shown in Figure 2.39. Figure 2.39. Give your new snippet a name, description, and associative type.
4.	Click OK. The new snippet is added to the Snippets panel automatically.

NOTE

Snippets are added to the Snippets panel and are placed into the folder where your cursor was last positioned. You can reposition your snippet simply by dragging it into a new folder or creating a new folder altogether by selecting the New Snippet Folder icon located in the bottom-right corner of the Snippets panel.

Of course, you can use your new snippet by selecting it and dragging it to the Document window as often as you want. To view it in the browser, choose Preview In Browser or press F12.

The Tag Inspector Panel Group

The Tag Inspector panel group, which includes the Attributes and Behaviors panels, is a handy panel to use for setting various attributes of selected HTML tags and styles. Although the true benefits of this panel group become more obvious as the book unfolds, you can see the power of the Attributes panel immediately by placing your cursor in the code of your page and then expanding the nodes in the Attributes panel. As Figure 2.40 illustrates, various attributes and their values associated with a selected tag are outlined in the panel.

Figure 2.40. The Attributes panel outlines attributes and their values for a selected tag.

You can begin to see that the Attributes panel mirrors functionality in the Properties Inspector. The obvious difference however is that the Attributes panel is a more simplistic and less visual approach to the attributes of a specific tag. You can also switch between a categorized and list view by clicking the appropriate button located just under the tab itself. You can make the Tag Inspector panel group visible and hidden by selecting the Tag Inspector option from the Window menu or by pressing the F9 shortcut key.

The Results Window

As mentioned earlier, the Results window is a centralized location for performing searches, page validation, browser compatibility checks, checking links, and creating site reports. You can interact with the Results window in one of two ways: You can make the Results window visible and hidden by selecting Results from the Window menu or by pressing the F7 shortcut key. The Results window automatically appears when using functionality it exposes such as the FTP log, Find and Replace, and more. The true power of this window becomes evident as the book unfolds.

The Reference Panel

Also part of the Code panel set, the Reference panel is a handy set of reference books built directly into a panel. References ranging from ColdFusion Function, ColdFusion Markup, ASP, ASP.NET, CSS, HTML, JavaScript, JSP, PHP, SQL, XML, XSLT, and Accessibility are all included. You can make the Reference panel visible and hidden by selecting Reference from the Window menu or by pressing the Shift+F1 shortcut key.

The History Panel

At its most basic, the History panel provides a visual, historical list of steps performed to the point where you're at. The panel features a slider you can use to scroll through steps in the history. As opposed to selecting Edit, Undo or pressing Ctrl+Z, the History panel also allows you to select a specific point in time to return to. Other features include the ability to create commands simply by highlighting a set of steps, right-clicking, and choosing Save As Command. Commands are covered in more detail in Chapter 14, "Workflow Enhancement." You can make the History panel visible and hidden by selecting History from the Window menu or by pressing the Shift+F10 shortcut key.

The Frames Panel

You can use the Frames panel when working with frames and framesets, as explained in Chapter 8, "Working with Frames and Framesets." You can make the Frames panel visible and hidden by selecting Frames from the Window menu or by pressing the Shift+F2 shortcut key.

The Code Inspector

As you can see from Figure 2.41, the Code Inspector is a detached code window. The only real difference between the Code Inspector and Code view is that the Code Inspector lets you continue working in Design view at the same time, offering a detached, floating coding environment. You can make the Code Inspector visible and hidden by selecting Code Inspector from the Window menu or by presisng the F10 shortcut key.

Figure 2.41. The Code Inspector is a detached code window that mirrors the functionality and look of Code view.

The Timelines Panel

As you will see in Chapter 17, "DHTML and the Timeline," the Timelines panel is a frame-based window that facilitates animation and interactivity with objects in the Document window. You can make the Timelines panel visible and hidden by selecting Timelines from the Window menu or by pressing the Alt+F9 shortcut key.

Workspace Layouts

While previous versions of Dreamweaver allowed you to select from two predefined workspace layouts (coder and designer), one of the newest features included with Dreamweaver 8 is the ability to choose from other, more specific window layoutsand also the ability to create your own. Available by choosing one of the four options from the Workspace Layout submenu, you can easily choose from a pre-configured layout style. Options include Coder, Designer, Dual Screen Left, and Dual Screen Right (for working in dual monitor setups). Choosing one of these options configures the panels and windows according the pre-defined layout.

Optionally, you can create your own workspace layout. To create your own workspace layout, follow these steps:

Organize windows and panels in Dreamweaver according to how you think you want to work.

Choose the Window, Workspace Layout, Save Current. The Save Workspace Layout dialog appears (see Figure 2.42).

Figure 2.42. Create your own workspace layout to customize Dreamweaver's window and panel arrangements based on the way you like to work.

Enter a name for your new layout and click OK. The new layout appears in the Workspace Layout submenu.

If you want to delete a workspace layout, choose the Manage option available just underneath the Save Current option in the Workspace Layout submenu.