Intranet Journal
The online resource for intranet professionals

Dreamweaver Tips from the Developers Who Dreamt Them Up

10/31/03

The release of a new version of Dreamweaver is like a holiday for intranet and Internet authors, and the latest version includes much to celebrate. Last month we highlighted the new features that will tempt you to upgrade. This month we interviewed the actual Macromedia developers who created Dreamweaver and asked them for their favorite hidden tips. If you regularly use Dreamweaver; you're bound to find a time-saver or two.

Keep Your Code Handy
When they need to edit code, most Dreamweaver users simply click the Code button in the document panel at the top of a document. Of course if you want, you can also use the Split View to show both Code and Design at the same time. The Split View is useful, but has the drawback of taking away some of the workspace that you might want for the Design View.

The Code Inspector is a new option that allows you to view the Code while staying in Design View. However, the Code Inspector (Window/Code Inspector or F10) must be docked above or below the document window. Users normally cannot dock the Code Inspector to the right or left of the Document window, but there is a secret way.

To outsmart Dreamweaver, use the Options menu to select Group Code Inspector with "Title" — where "Title" is another panel group that is already on the left or right of the workspace. The developer we spoke to uses the Frames panel, since by default it is not grouped with other panels. To get the Code inspector all by itself, select the other panel in the group and then choose Group Frames with New Panel Group from the Options menu. The Frames panel will break free and float, leaving the Code Inspector where it was.

With the Code Inspector docked on the left or right, you may find that you don't need to enter Code View as often.

Copy and Paste from Excel or Word
Users of Dreamweaver have always been able to copy text from other applications directly into their HTML pages. However, there was always a trade-off as Dreamweaver lost the text formatting. Even something as simple as a bold text was lost.

With Dreamweaver MX 2004, you can maintain the formatting of copied text by first copying from the original document and then, in Dreamweaver, using Edit/Paste Formatted. Dreamweaver will insert the text and even make Cascading Style Sheet (CSS) styles on the fly. If the pasted text is coming from Excel, Dreamweaver will build and format an HTML table with the appropriate styles.

Wrap with a DIV
When building a page entirely with CSS styles, Dreamweaver can help you mark up the page quickly using the Insert DIV object from the Insert/Layout panel. Simply select the blocks of text and graphics that you want to combine into one DIV and then select the Insert DIV object. In the dialog, you'll have the option of assigning your existing styles either as classes or IDs, or if you haven't built the style yet, simply type the name of the style that you'll later create into one of the fields. To finish, insure that the Wrap Around Selection option is chosen and click OK.

Copy and Paste a Row or Column
After you've gone to all the trouble of formatting an HTML table, it can be a pain to realize that you need the content in one column or row placed somewhere else. Dreamweaver allows you to simply place your cursor along the left or top border of the given row or column, then click to select the entire row or column. Put the cursor where you'd like the content to appear (for example, if you want to place it as the first row of a table, place the cursor in the beginning of the first row), then choose Edit/Paste to insert the row. To add a column at the end of the table, place your cursor after the last piece of content in the last cell of the column and then click Paste.

Point to File Even Easier
Dreamweaver users often get excited when they discover that they can create a link simply by highlighting text on the page and then using the little "target" icon next to the link field in the Property Inspector. From here you can click and drag to the Files panel and "point" at the file that you want to link to. Many users don't know, however, that they could have saved themselves the trip to the Property Inspector and still accomplished the same thing.

With text selected on the page, place your pointer back over the selected text. Now hold down the Shift key and begin to drag with the mouse. As you head for the Files panel, you'll notice the same line that you saw when using the Point to File target. Release the mouse while pointing at the desired file and you've made a link.

Bossing Dreamweaver Around
If you find yourself doing something over and over again, Dreamweaver can help you simplify the process. Open the History panel (Window/History), then design your page as usual. You'll notice that the History panel records your actions. Select the repeated steps in the History panel using the Shift key to click select them. Now click the small icon that looks like a diskette. This will save the selected steps as a command, allowing you to name it. The next time you want to perform that task, simply choose your new command from the Commands menu. Note that the History panel is only active in Design View.

Snippet Shortcuts
Since the release of Dreamweaver MX, users have pleaded with Macromedia to add support for keyboard shortcuts for snippets, and in this latest release the company has done so. Select Edit/Keyboard Shortcuts and then choose Snippets in the Commands drop-down list. Click on the categories to expand them until you find the snippet you want. Once you've located the snippet, click to select it.

Now you can assign a shortcut the same way you normally would, by pressing the key combination you'd like to use. It may be challenging finding a combo that isn't already in use, but Ctrl+Shift+Alt (Command+Shift+Option) combined with almost any single character usually works.

Coming up in November: Macromedia developers share some of their favorite tips for Firewoks and Flash.