Software

12 tips for Dreamweaver 4.0

Pick up 12 tips for using Dreamweaver 4.0, including stretching your site, creating a pop-up navigation system, animating GIFs, and more.

By Kim Wimpsett
(2/16/01)

Dreamweaver has emerged as the tool of choice for professional Web builders who want to construct complex sites in a visual environment. According to Macromedia, Dreamweaver has more than 700,000 users, giving it the largest share of the Web authoring market and putting it ahead of competitors such as Adobe GoLive and NetObjects Fusion. And the audience for Dreamweaver is expected to get much larger: the total number of pages on the Web is expected to grow from 1.7 billion in 1999 to more than 8 billion in 2002, according to data from IDC.

With this kind of popularity, it's no surprise that Dreamweaver's fourth iteration adds functionality that helps Web professionals design faster, code more easily, and collaborate better. We'll show you how best to use some of the new features of Dreamweaver 4.0.

Whether you like to work in the new code editor or use the standard view to visually design your pages, these tips will help you build your site.

1. Stretch your site
Some developers call it liquid; here at CNET we call it stretchy. It's the quality that lets your Web page change as a user resizes the browser window, so that there's no white space when the window is large or scrollbars when it's small. Most simple pages are stretchy by nature, but creating stretchy pages is difficult when you have multiple columns and tables. You'll typically want to use a mixture of fixed-width columns and spacer GIFs to create a design that will work in both Internet Explorer and Netscape Navigator. Dreamweaver 4.0 makes designing stretchy pages easy.

Open your page and switch to Layout view by using the button on the Object palette. You'll see the column width and a tiny drop-down arrow at the top of each column. Click the arrow on the column you want to make stretchy and choose Make Column Autostretch. (Only one column can be set to autostretch.) Instead of the number showing the width, you'll now see a wavy line at the top of the column. Dreamweaver automatically creates the spacer GIFs, which are denoted by the double bar on top of the column and are necessary to make this layout work. (If it's the first time that you're adding a spacer GIF to a site, a dialog box will ask if you want to use an existing spacer GIF, let Dreamweaver create one, or not use spacer GIFs at all.)

Layout view

2. Create a personal color caddy
The new Assets panel in Dreamweaver 4.0 is a way to organize your files according to type—graphics, templates, and so on—within your site. Once you define your site (Site · New Site), all of these types of elements are automatically added to the proper tabs in the Assets panel. The panel also has a Color tab where it stores all of the colors in your site, including colors for text, backgrounds, and links. It's a site-specific color palette just for you. To see the palette, open the Assets panel (Window · Assets) and click the tiny color wheel on the left. You'll see a list of all the colors within your site. You can drag those colors to selected text. Better yet, when you highlight a particular color, its hexadecimal value and its RGB number appear. And if you want to narrow your site's color palette further, you can do so by adding only certain colors to the Favorites section of the Assets panel. Just highlight the color and click the bottom, rightmost button (called Add to Favorites) in the window.

Assets panel

3. Create a pop-up navigation system
Creating a pop-up menu navigation system can take a lot of JavaScript coding. But if you have the Dreamweaver/Fireworks Studio, you can make quick work of it. Start within Fireworks and select a hot spot or slice within your image. Then choose Insert · Pop-Up Menu; in the Set Pop-Up Menu dialog box, you can add items to your menu by entering the item name and clicking the Plus button. You can set the menu's text and links as well as create submenus and rearrange items. When you're finished, click Next to set the preferences such as color, font, and so on. You can choose to show the menu system in HTML or as images. Click Finish and you'll see an outline of the menu system when you mouse over the original hot spot or slice. When you export the file, Fireworks creates all the HTML, JavaScript, and images needed for the file to work in Dreamweaver. There are even more ways that Dreamweaver can integrate with other products.

Set Pop-Up Menu dialog box

Integrate with other products
One of the coolest aspects of Dreamweaver is its integration with other Macromedia products. The program offers full-featured, round-trip graphics editing with Fireworks, and now you can create Flash text and Flash buttons within Dreamweaver, too.

4. Animate GIFs
If you have the Dreamweaver/Fireworks Studio, you'll have an unprecedented level of integration between the two products. Even if you're not a graphics designer, you'll probably want to animate a GIF occasionally. To animate a graphic that's already in a page, select the graphic while in the standard window and click the Edit button in the Property Inspector. The graphic will automatically be loaded into Fireworks, which is your default graphics editor if you have the Studio bundle. (If you look closely, you'll notice the Editing From Dreamweaver text and images that signal you initiated the editing from Dreamweaver.) Now working in Fireworks, select the graphic and choose Modify · Animate · Animate Selection. Next, complete the preferences in the Animate dialog box, choosing how many frames the animation will have, the direction in which it will move, and so on. You can use the Frames panel to set the speed of the animation and the Object panel to change the properties. To export the file, use the Optimize panel to select Animated GIF as the file type. Click Done, and Fireworks automatically exports the image with the optimization settings, updates the GIF file, and displays the updated file in Dreamweaver. Click File · Preview in Browser to check out your nifty animation.

Animate dialog box

5. Add a flashy button
Dreamweaver lets you create and add Flash button objects—without even owning Flash. Version 4.0 ships with a number of premade Flash button objects that make up different styles of buttons. Select Insert · Interactive Images · Flash Button to see the different styles. Within this dialog box, you can even mouse over the sample of each style and see how it will animate within a browser. Highlight the style you want to use and fill in any other parameters that you'd like, such as the button text, font, color, or customized file name. Click OK. The SWF file will be created and inserted into your page. If you click it, you'll see that the Property Inspector displays the file's properties. And if you expand the Property Inspector, you can click the Play button to preview the button's action without going to a browser.

Insert Flash Button dialog box

6. Make moving text
Adding Flash text objects is just as easy as adding Flash buttons to your pages. Again, with Dreamweaver 4.0's new capabilities, you don't even have to own Flash. HTML coders who have no interactive media experience can create small Flash-based text animations. As Flash can be viewed by 97 percent of Web surfers (according to Macromedia), this adds interactivity to your pages without creating compatibility problems. To begin, choose Insert · Interactive Images · Flash Text. Fill in all the preferences, such as the text to animate; the font, color, and size; and so on.

Insert Flash Text dialog box

Customize the interface
You can customize Dreamweaver to your heart's content. These three tips will help you set up the app to suit yourself.

7. Change keyboard shortcuts
Dreamweaver has been customizable and extensible for quite some time. For instance, you can change menus just by programming or adding your own objects. But you don't have to be a master developer to change the keyboard shortcuts, because Dreamweaver ships with a graphical interface called the Keyboard Shortcut Editor. Select Edit · Keyboard Shortcuts and wait for the dialog box to load with the sets of shortcuts that you can tweak. To alter a shortcut, use the Current Set and Commands drop-down lists to find the existing command that you want to change. Highlight the current shortcut, and it appears in the Shortcuts field. To add a shortcut, click the Plus button and enter the new keystrokes that you want to use, which will be entered in the Press Key field. Click Change. You can also remove a shortcut by highlighting it and clicking the Minus button. Keyboard Shortcut Editor

8. Reconfigure the Site window's columns
By choosing View · File View Columns from within the Site window, you can customize what and how columns appear in the Site view. Highlight a column name and use the up or down arrows to rearrange where it appears, or deselect the Show field to hide that column altogether. You can even create new columns by clicking the Plus button and giving your new column a name. You can also associate your column with a Design Note by choosing an existing Note in the drop-down list.

Site view

9. Actually read the Code Reference
When you launch the O'Reilly Code Reference (Window · Reference) to check on, say, attributes or browser compatibility, the default window displays the reference in tiny text. But if you click the tiny right-arrow button at the upper right corner of the window (just below the Close button), you'll see a drop-down list where you can choose from Small Font (the default), Medium Font, or Large Font. Choosing a larger font makes the code reference that much more helpful: now you don't need a magnifying glass to read it!

O'Reilly Code Reference

Extend Dreamweaver
The Macromedia Exchange for Dreamweaver has seen more than 1 million downloads since its debut in April 2000. Extensions, developed and exchanged by Dreamweaver users, let you add functionality to the program, and they're usually offered for free. All you have to do is register with the site to download them. We've picked three of our favorite extensions.

10. Add fiery buttons
Tip 5 showed you how to add Flash buttons to Dreamweaver, which ships with 20 premade button styles. You can also add Fireworks buttons, and an extension will help you do it quickly. Go to the Exchange for Dreamweaver, search for "InstaGraphics Extensions for Dreamweaver," and download the 577K file for your system. To install it, switch to Dreamweaver and select Commands · Manage Extensions, then choose File · Install Extension. Once you restart Dreamweaver, you can add Fireworks buttons with six funky styles, from Surfboard to Bulletbar, by using the Insert · Interactive Images · Fireworks Button command. You can also use Commands · Convert Bullets To Images and Commands · Convert Text To Images, both of which will automatically run Fireworks for you.

Create Fireworks Button dialog box

11. You're my favorite!
You'll find the Add To Favorites extension by searching the Exchange. The tiny 3K file downloads quickly, and you use the same steps to reach the Extension Manager (Commands · Manage Extensions, then File · Install Extension). Once you restart Dreamweaver, this extension adds a behavior to the program. If you add this behavior to a page, it lets users easily add your page to their browser's Favorites menu. You can also specify how the shortcut will appear in the user's browser. If you set an exact title, an icon will appear if you use the shortcut icon object. (This extension works for users of Internet Explorer 4.0 and later.) To use the extension, just choose the Behaviors palette from the Window menu and look under the Internet Explorer drop-drown menu.

Add To Favorites

12. Prefab forms
Why spend time coding forms when someone has already done the work for you? Download the Form Builder extension at the Exchange and you can instantly populate form fields for country codes, gender, marital status, age group, and other categories. Download the 11K file from the Exchange, then install it through the Extension Manager (Commands · Manage Extensions, then File · Install Extension). Once you restart Dreamweaver, you'll find the extension at Insert · FormBuilder. A dialog box will show all of your ready-made options for creating your form.

Form Builder

Kim Wimpsett is a frequent contributor to CNET Builder.com.

Editor's Picks