• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Adding Design Notes

Design notes enable you to attach notes visible only in Dreamweaver to individual files. You can also share the notes with your team members. These notes are useful for tracking the file’s version, signaling bug fixes, and cataloging reference information. For example, attaching a design note to an image file listing the original Photoshop or Fireworks file is extremely useful when you need to find that original and make changes.

Design notes are visible only in Dreamweaver and are not visible to those who view your Web site. Dreamweaver creates a special _notes directory to hold all the design notes in your Web site. The _notes directory is not visible while you are in Dreamweaver, but you might see it if you browse through your site files outside Dreamweaver. Each design note is named for the file it’s associated with and ends with the .mno extension.

Attaching Design Notes to Files

There are a couple of ways to attach a design note to a file. Attach a design note by right-clicking (Command+click on the Mac) on a file in the Site panel or Site window to bring up the context menu, as shown in Figure 4.17, and then choose the Design Notes command to open the Design Notes dialog box. You also can add a design note by using the Design Notes command on the File menu.

Figure 4.17. The context menu in Dreamweaver’s Site panel or Site window has many commands, including a command to add a design note.

Creating a Basic Design Note

With the Design Notes dialog box open, as shown in Figure 4.18, add a simple design note to any file in your site. With the Basic Info tab selected (the default), drop down the Status list box and select Needs Attention in the list. Click the small calendar icon to add today’s date to the Notes text box, and then type a note next to the date. Select the Show When File Is Opened check box at the bottom of the dialog box. Click the OK button when you are finished, to save the note. This design note will automatically open for the next person who opens the file. Double-click the file and try it!

Figure 4.18. Set up a design note by selecting Status and adding a note. You can also select the Show When File Is Opened check box.

When a design note is attached to a file, you’ll see a little yellow design note icon appear next to the filename in the Site window; the design note icon is not visible in the Site panel. Double-click the design note icon to open up the note to view, edit, or add additional information.

Power User Tip

When you import Fireworks files into Dreamweaver, Fireworks automatically adds design notes to the files. These design notes do not show up with design note icons next to the files, however. You can see these design notes if you peek at the folder or when you open up design notes on a file and see that notes already exist. These notes help Dreamweaver exchange information with Fireworks about the Fireworks source files, so it’s a good idea to leave them.

The Design Notes category in the Site Definition dialog box enables you to turn on design notes and share them with the rest of your team. To modify the way design notes are handled within your site, you edit your site definition, select the Advanced tab, and select the Design Notes category. In this category of the Site Definition dialog box, shown in Figure 4.19, you can choose to turn design notes on or off (the Maintain Design Notes check box) and choose to share design notes with others (the Upload Design Notes for Sharing check box). The Clean Up button deletes design notes that are attached to files that no longer exist in your site.

Figure 4.19. Select both of the check boxes in the Design Notes category to enable design notes and share them with others.

Creating a Custom Design Note

You just created a basic design note using one of the preloaded status notes available in the Basic Info tab. The All Info tab enables you to create your own custom design notes categories. Add a design note to the same file by opening the design note. This time, select the All Info tab in the Design Notes dialog box to add a custom design note. Note that there is already some data entered into the dialog box from the prior note you created.

When you created a basic design note, Dreamweaver automatically created a name and a value for your design note. Name is like a variable and value is the value that the variable holds. The name and value pairs are listed in the All Info tab. You can create a custom name and place a value into it.

Click the + button to create a new design note entry. Place your cursor in the Name text box and enter Developer. Move to the Value text box and enter your name. Click the plus button to add more notes or the minus button to remove notes. Your new design note appears in the Info text box, as shown in Figure 4.20.

Figure 4.20. The All Info tab in the Design Notes dialog box enables you to create custom design notes.

Viewing Design Notes in the Site Window

Now you’ll add a new column to the Site window displaying the value of the Developer design note you just created. To edit the columns, either edit your site and select the File View Columns category or select the File View Columns command (View, File View Columns).

Follow these steps to add a new column to the Site window:

You’ll see a list of built-in columns that come with Dreamweaver. You can change the text alignment on all the columns by selecting a column and modifying its attributes in the dialog box. You also can hide all the columns except the Name column by deselecting the Show check box.

To add a new column, click the plus button above the column list. A new untitled column is created.

Enter Developer in the Column Name text box.

Enter Developer in the Associate with Design Note text box, as shown in Figure 4.21. You enter Developer because that’s the name of the custom design note you created. You must type the entry into the text box instead of selecting one of the basic entries from the drop-down menu.

Figure 4.21. You can display a custom design note in a column in the Site window by creating a new column and linking it to the custom design note. New column

Select an alignment setting from the Align drop-down menu: left, right, or center.

Move your custom column by using the arrow buttons.

Select the Enable Column Sharing check box at the top of the dialog box. The dwSiteColumnsME.xml file in the _notes directory contains the custom column’s definition. This file will be shared with others on your team so that you all have the same custom column definitions.

Power User Tip

A quick way to edit the site you currently have open in the Site window is to double-click the site name in the Site window drop-down menu.

After you’ve saved your changes, note that a new column appears in the Site window. This column displays the contents of the Developer design note. Also, observe that the design note icon containing the Developer note is no longer visible beside the file. The design note icon doesn’t appear if the note is already displayed in a column. However, if additional notes are attached to the file, the design note icon will appear.

Practice adding design notes to the files in your site. Add design notes using the various preloaded status notes in the Basic Info tab and more custom Developer notes in the All Info tab. Be sure your custom notes named Developer appear in the custom column you just created.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint