Dreamweaver | Dreamweaver Classes | Dreamweaver FAQ

Macromedia Dreamweaver

Dreamweaver

Dreamweaver is the professional visual design solution for creating groundbreaking Web sites. Dreamweaver's powerful features allow users to automate production and enhance team efficiency. Dreamweaver facilitates workflow through integration with other Web applications, Microsoft Office, and leading e-commerce and application servers. Moreover, Dreamweaver can be customized using HTML, JavaScript, and XML for advanced Web site development. Dreamweaver builds better Web sites faster.

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.

Design your Pages

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 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.)
2. Create a personal color caddy The new Assets panel in Dreamweaver 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.
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.




Home | Technical Schedule | Application Classes | Class Outlines | MCSE, MCDBA, MCSD Training | Microsoft .NET Programming | Cisco Classes | Linux, Unix, AIX | CompTIA Certification | Webmaster Training | Pricing | Locations | Financing | E-mail Us