Page 2, Adobe Dreamweaver Continued & Fireworks . March 2009 . Vol. 15 No. 3

Cyber News and Reviews is a monthly software reviews column, a free resource since 1995.

June 2009 - -Adobe Contribute CS4, Adobe Soundbooth CS4 & After Effects CS

May 2009 --Adobe Premiere Pro CS4, Adobe OnLocation CS4 and Adobe Encore CS4 plus My Electric Guitar and My Violin from eMedia

April 2009 -- Rosetta Stone Version 3: Spanish (Latin America) Level 1, 2 & 3, Set, Adobe Illustrator CS4 and Adobe Flash CS4 Professional from Adobe Systems Inc.

Adobe Dreamweaver CS4 . Adobe Fireworks CS4 from Adobe Systems Inc.

By Howard Berenbon

Adobe Dreamweaver CS4 continued

click to go back

Designing a Site

Before you begin your business or personal Website, you’ll want to take some time to plan your design and get your ideas in order.  First, make an outline of your site structure with names of navigation buttons to link to the pages in your site, a rough idea of what text and graphics you’ll place on each page, and then start designing.  If you’ve missed a page or two, don’t worry, you can easily add new pages later, or quickly delete the ones you don’t need. You’ll find Website publishing has much more flexibility than any other media, and with Adobe Dreamweaver CS4, it’s easy to update your pages daily, or even hourly.

Here are a few simple steps to help you build that first Website with Dreamweaver.  Start by selecting, Create New HTML Web site, and a blank page will appear in the left half of your screen, called the Stage.  You now have the option of viewing the HTML code, or just design without knowing the code, in Design view.  There’s also a split screen view so you can see both the Design and the HTML code at the same time.  And, new to Dreamweaver CS4 is the Live View button where you can see what your page will look like online.  To the right of the Stage you’ll see the Panel Groups.  You can start building your site from scratch, or get some assistance using one of the several pre-designed page templates included with navigation buttons and a page structure you can use throughout your site.   If you start your design without a template, you’ll have to design and build the page graphics and navigation structure, either using text or graphics.   And you can use Fireworks to build the navigation structure.

Designing a simple site isn’t that difficult, even from scratch.  First, layout your page using CSS Div Tags, or Table Objects to create areas for your text and graphics.  Once you have your design, you can save it as a template and use it throughout your site.  For example, a horizontal Table, or Div Tag Element, across the top of the page will hold your logo and a vertical Table or Div Tag, on the left border can be spot for your navigation buttons.  You can also add a Div Tag Element or Table at the bottom of your page for your footer with name and address, and a second navigation structure.  Add more Tables or Div Tags in between for graphics, text boxes or even Flash animations.  Once you have your navigation structure, with text for your links to the pages within your site, you can start adding pages until your site is complete.  Next, you’ll add content, like text, graphics, forms, tables, charts, databases, Flash video, animation, audio and more.  When you’re ready, you’ll upload your design, graphic by graphic and page by page using the Put command under the File Management menu in Dreamweaver.

To begin your design, you’ll probably want to start with your home page, or index.html and build from there.  Each object, whether text or graphics, or a form, etc., will have its properties available and listed in a box below the Stage (your page work area).   To see each object’s properties, click on the object and all relevant data will appear including its name, size, font and position.  Add your logo and company name to the top of your index.html page, and then build your graphics navigation buttons using Fireworks.  You can even build text navigation buttons within Dreamweaver using CSS and Div Tag Elements. 

Even though you have all the necessary tools to design any type of Web site, Dreamweaver CS4 is not really for the beginner. You may be able to construct a simple site with a navigation structure, text content and your logo on every page, but if you have something more complex in mind, like Flash movies, interactive applications, fancy animation with sound, or a database to collect customer data, then you’ll need an experienced graphics or Website designer to do the job right.  It’s a powerful program, but using the power requires experience.

Adobe Dreamweaver CS4 sells for $359.99 to $390.99 and will run on any multimedia PC, 1 GHz CPU or faster, 512 RAM, 1 GB available disk space with Windows XP/Vista/Enterprise and a DVD-ROM drive. It will also run on a PowerPC G5 or multicore Intel processor, 512 MB RAM and 1.8 GB available disk space, Mac OS X v10.4 or higher and a DVD-ROM drive. For more information, or to order, visit

Dreamweaver CS4 - PC & Mac Versions

Adobe Dreamweaver CD4 IBM - $359.99

Adobe Dreamweaver CS4 Mac - $390.99

Adobe Fireworks CS4

continued click to go back

Adobe Fireworks CS4

Fireworks CS4 is a companion program to Dreamweaver and similar to Photoshop, that helps you easily add graphics and animated objects to your Website design.  It’s available on its own, or bundled within one of Adobe’s Creative Suites. With Fireworks CS4, you can create, optimize and export interactive graphics, from navigation buttons to pop-up menus, and easily animate Web objects for special effects.  It’s a powerful and useful vector and bitmap graphics editing tool that will help you design a professional looking, navigation structure and more, for placement into your Dreamweaver pages. 


The program installs from the included CD (or CDs if part of a suite), and once the main menu appears you’ll notice the similarities in look to the other Adobe programs with the command menus at the top, and the work area below and to the right.  The menus are File, Edit, View, Select, Modify, Text, Commands, Filters, Window and Help.  Below the File and Edit buttons is a vertical bar with your bitmap and vector drawing tools. After you open a new or existing file, three work areas appear on the screen. To the right of the tools is your file area with the Properties Panel below.  And to the far right, starting at the top, are more panels including Optimize, History and Align, Pages, States and Layers, Styles, Color Palette and Swatches, and more.  You’ll also find some Help icons (Getting Started, New Features & Resources), or you can click on the “Take a feature tour” link for an overview of Fireworks.  And, from the Help menu, you can access lot of information online including the Fireworks Support Center at, Adobe Online Forums and Adobe Training.

Building Navigation Buttons

As a quick example of the power of Fireworks, you can easily build a set of professional looking navigation buttons by drawing the desired shapes, say rectangles, using the Vector tool, and then filling each with a selected design from the Styles panel. You’ll find hundreds of pre-designed styles to select including wood, chrome, pastels, paper and plastic in various colors and 3D shapes (the chrome, clear, colored glass styles looked very impressive).  Next, add text to your buttons using the Vector text tool, and go back to the Styles panel and pick some colorful text effects. You should build two buttons for every page they link to, one for “on” mouse and one for “off” for the rollover effect.  Then go back into Dreamweaver to create your navigation structure by opening the Insert menu and clicking on Image Object.

Adobe Fireworks CS4 New Features

Improved performance and stability - includes faster file opening and saving

New user interface – common with other Adobe CS4 Web and design products

CSS- and images- based export

PDF export

Adobe text engine – enhanced typographical capabilities

Style improvements

Symbol enhancements

Workspace improvements with Smart Guides

Adobe Kuler for color review and creation from the web-hosted application and online color community

Adobe ConnectNow, a service of

Adobe AIR authoring
Creative Pro Online Services

Adobe Fireworks CS4 sells for $266.49 and will run on any multimedia PC, 1 GHz CPU or faster, 512 RAM, I GB available disk space with Windows XP/Vista/Enterprise and a DVD-ROM drive. It will also run on a PowerPC G5 or multicore Intel processor, 512 MB RAM and 1 GB available disk space, Mac OS X v10.4 or higher and a DVD-ROM drive. For more information, or to order, visit

Fireworks CS4 - PC & Mac Versions

Adobe Fireworks CS4 PC - $266.99

Adobe Fireworks CS4 Mac -$266.99

Adobe Systems Incorporated
345 Park Ave
San Jose, CA 95110-2704

click to go back