Maintaining Design Notes

One of the most under-used features available in Dreamweaver is that of associating Design Notes with web pages. As an individual web developer, you can create Design Notes to keep tabs on progress and to write general notes to yourself about a particular file. When you go to open the file, you can have the Design Note automatically open and remind you of what needs to get done. From a team collaborative standpoint, you can associate Design Notes with your web pages as a way to alert other developers in your team about changes made, changes to be made, or specific items in the file that require attention.

Enabling Design Notes

Enabling Design Notes for your web pages is as simple as opening the site definition for the particular site you're working with and clicking a check box. In our scenario, we'll want to enable Design Notes for the Dorknozzle site. To do this, follow these steps:

1.	Choose the Manage Sites option from the Site menu. The Manage Sites dialog appears.
2.	Select the Dorknozzle site and click the Edit button. The Site Definition for Dorknozzle dialog appears.
3.	Select the Design Notes category. The Design Notes screen appears.
4.	In the Design Notes screen, you can do three things: The first check box enables Design Notes. Make sure to check this box to enable Design Notes for the Dorknozzle site. The Clean Up button deletes all existing Design Notes from the site. The third and final option at the bottom of the screen ensures that Design Notes, located in a _notes folder in the defined site, are automatically uploaded to the remote server when you check in a file or upload it manually to the remote. Make sure that this option is enabled so that others in your collaborative team can see the Design Notes you create and vice versa. When you finish making the changes, your screen should resemble Figure 12.7. Figure 12.7. Enable Design Notes and make them available for other members of your team by enabling both check boxes. TIP It's important to note that Dreamweaver uses Design Notes for launching and editing features when integrating with Flash and Fireworks. Furthermore, Design Notes are also used to store settings when working with Design-Time style sheets and the Live Data view. For this reason, it's generally a good idea to leave these options enabled even if you don't plan on working with Design Notes.
5.	Click OK to close the Site Definition dialog.
6.	Click Done to close the Manage Sites dialog.

Design Notes have now been enabled for your site.

Setting the Status of Files with Design Notes

After you've enabled Design Notes, you're ready to start working with them. Again, Design Notes are great for writing notes to yourself about a particular file. With that said, it's important to realize that Design Notes are associated with particular files in a site, not with the site as a whole. To associate a Design Note with a file, you can do one of two things. First, you can choose the Design Notes option by right-clicking the file (I'll choose index.htm) in the Files panel for which you want to create a Design Note for. Second, you can open the file (index.htm) by double-clicking it in the Files panel. With the file open, choose the Design Notes option from the File menu. Either method you choose opens the Design Notes dialog, similar to Figure 12.8.

Figure 12.8. The Design Notes dialog allows you to associate Design Notes for a particular file.

The Design Notes dialog is separated into two parts represented by the Basic Info and All Info tabs. Although we'll certainly discuss the All Info tab in the next section, for now let's discuss how you can set the status of and write notes about a particular file using the Basic Info tab:

• File: This read-only text label displays the name of the file that the design note will be associated with.

• Location: This read-only text label displays the path to where the file is located on the local computer.

• Status: Choose an option from this menu to set the status of the file. Options include Draft, Revision1, Revision2, Revision3, Alpha, Beta, Final, and Needs Attention. For our example, choose the Needs Attention option.

• Insert date: Clicking this icon inserts a date stamp into the Notes text box. Click this button now to insert a date stamp.

• Notes: Use this multiline text box to enter any notes to yourself or members of your team about the file. Although the text you enter here is completely up to you, you'll generally want to associate the note with the status option you select. For our example, let's add a date stamp by selecting the Insert Date icon. Just to the right of the date stamp in the Notes text box, add the text We still need to add the new company events for this month.

• Show when file is opened: Enabling this check box ensures that the Design Note appears automatically when the file is opened each time. For our example, check this box.

Click OK to create the design note. Initially, you won't notice any additions to the folder or file structure of the site. However, opening the Local folder (C:\Dorknozzle\Local) reveals the new _notes folder that Dreamweaver adds for you. In the _notes folder, you'll see the index.htm.mno file. This XML-based file represents the Design Note for index.htm.

NOTE

By default, Dreamweaver creates one MNO file per web page document. That's not to say that multiple users can't create multiple notes for a single MNO file. When new notes are created, they are merely appended to the MNO file. Furthermore, the MNO file keeps track of which users and at which times the notes in the MNO file are created.

Creating Customized Design Notes

In the previous section, we examined the Basic Info tab of the Design Notes dialog. A large majority of the functionality that you'll need to interact with as it relates to Design Notes can be found on that tab. Other times however, you'll want to create custom Design Notes that relate to specific aspects of your project. For instance, you may want to define various resources (such as graphic designer, project manager, or lead developer) related to a project so that when a user opens the Design Note, they know whom to contact if they have a question. Furthermore, you may want to create a custom note that defines how many man hours have been dedicated to a specific file. As you'll see in the next section, you can then associate specific columns with a particular Design Note. Even better, you can enable column sharing so that everyone in the team can see the custom Design Notes directly from the Site Management window. All this begins with the All Info tab of the Design Notes dialog. To demonstrate the functionality in this screen, reopen the Design Notes dialog by either choosing the Design Notes option from the File menu (assuming the index.htm file is already open) or choose the Design Notes option from the context menu when you right-click the index.htm file in the Files panel. After the Design Notes dialog opens, click the All Info tab. As you can see from Figure 12.9, the All Info tab displays all the information you entered in the Basic Info tab line by line.

Figure 12.9. Initially, the All Info tab displays notes created in the Basic Info tab.

The All Info tab is divided into the following features:

• File: This read-only text label displays the name of the file that the design note will be associated with.

• Location: This read-only text label displays the path to where the file is located on the local computer.

• Info: This list box displays notes defined in the Basic Info tab as well as custom notes you specify in this screen. You can add a new note by clicking the Add (+) icon located just above the Info list box. Do that now.

• Name: Use this text box to enter the custom name of the new note. Enter the text HoursAccrued here.

• Value: Use this text box to enter the value associated with the name of the new note. Let's assume that we have 8 billable hours accrued for index.htm so far. Since that's the case, enter 8 in this text box.

Click OK to apply the new additions. Again, you won't notice too much of a difference. To see the notes, you either have to reopen this screen (which isn't very intuitive), or you can create custom columns in the Site Management window. This process is discussed in the next section.

Viewing Design Notes

Obviously, the easiest way to view Design Notes is to right-click the file in the Files panel and choose the Design Notes option. Doing this opens the Design Notes dialog and displays notes for the specific file. This process is great if you're an individual developer and you remember which files have Design Notes and which don't. If you're working in a team however, this process isn't very intuitive. A better method of viewing Design Notes is by enabling the Notes column in the Site Management window. In Chapter 4, "Dreamweaver Site Management," we turned the Notes column off. To view Design Notes for particular files in the Site Management window, we'll need to turn that column back on. To do that, follow these steps:

1.	Select the Manage Sites option from the Site menu.
2.	When the Manage Sites dialog appears, select the Dorknozzle site and click Edit.
3.	Select the File View Columns category.
4.	In the File View Columns screen, select the Notes column from the list and click the Show check box. The result resembles Figure 12.10. Figure 12.10. Select the Notes option and click the Show check box.
5.	Click OK to close the Site Definition window.
6.	Click Done in the Manage Sites dialog.

To view the Design Notes now, click the Expand/Collapse icon in the Files panel to expand the Site Management window. Files that have note associations display a small yellow note icon.

When you check the file back in, the Design Note goes with it. From a collaborative standpoint, this allows other members of your team to see which files do and don't have notes associated with them. To view the note, simply double-click the icon. The Design Notes dialog appears.

Beyond the simplicities of viewing Design Notes in file view columns lies the ability to view custom Design Notes in a custom file view column. For instance, we may want to share with the team how many hours have been accrued by people working on the particular file, in which case we'd want to create a custom column to display that Design Note (created in the previous section). To do this, follow these steps:

1.	Select the Manage Sites option from the Site menu.
2.	When the Manage Sites dialog appears, select the Dorknozzle site and click Edit.
3.	Select the File View Columns category.
4.	In the File View Columns screen, click the Add (+) icon to create a new, custom file view column. By default, the file view column is initially populated with the name untitled.
5.	With the new column selected in the list, change the column name to HoursAccrued.
6.	Enter the text HoursAccrued in the Associate with Design Note text box. When you've made the additions, the screen resembles Figure 12.11. Figure 12.11. Create a new custom file view column and associate it with our custom HoursAccrued Design Note.
7.	Click OK.
8.	Click Done in the Manage Sites dialog.

To view the new file view column, simply click the Expand/Collapse icon in the Files panel to expand the Site Management window. As you can see from Figure 12.12, the HoursAccrued column appears and displays the number 8 for index.htm.

Figure 12.12. The custom file view column appears with the numeric value 8 for index.htm.

To prove that Dreamweaver uses the _notes folder for more than just Design Notes, open the folder that contains your files and examine the _notes folder. Notice that a new file called dwSiteColumnsAll.xml is created and represents any custom file view columns we create.