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 Amazon.com.
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.
Installation
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.com, 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 Acrobat.com
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 Amazon.com.
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
URL adobe.com
800-833-6687
