Dreamweaver
2.0
"An
Impressive Web Design Program"
|
Click
on a thumbnail to enlarge it. Use your browser's "BACK" button
to return to this review when done.
|
|
Dreamweaver 2.0, an upgrade by Macromedia, is a visual editor for creating
and managing Web sites. You can use it to design your home pages or
to start your own e-business. It includes all the HTML text editing,
page layout and Dynamic HTML capabilities in one program, and it is
available for both the PC and Macintosh so you can create cross-platform,
cross-browser pages. You can create tables, edit frames, and switch
easily from page view to HTML view. With Macromedia's Roundtrip HTML
technology, you can import HTML documents without reformatting the code.
Dreamweaver fully supports Cascading Style Sheets (CSS-1), and you can
use JavaScript behaviors or Dynamic HTML features such as animated layers
without writing a line of code. Dreamweaver 2 includes a full copy of
either Bare Bones BBEdit 5.0 for Macintosh users or Allaire HomeSite
4.0 for Windows users. Price: $299 for Windows or Macintosh; Upgrade:
$129. Macromedia has an excellent site to visit, with all sorts of information,
freebies, and tutorials. You can also download the program directly
from the Macromedia site for a reduced price: $269, Upgrade: $99: http://www.macromedia.com
|
|
|
Advanced Beginners, Intermediate and Advanced computer
and Web designers. I would suggest you have some experience with computers
and Web design before you use this program. It is well-suited for intermediate
and advanced Web designers who want to have access to HTML code, while
still having WYSIWYG features. A designer can have control over object
placement, behaviors and layering for an entire site of files. The program
offers extensibility features that make it a programmer's tool as well. |
|
|
Page
Design and Layout |
- Page color schemes: Create great looking sites quickly.
- Tracing layer: Quickly match your page design to a graphic
comp.
- Tabbed palettes: Get quick access to your favorite palettes.
- Rountrip layers-to-tables: Absolute positioning without clunky,
uneditable code.
- Multi-layer selection: Group together content for easy layout
modifications.
- Color eyedropper: Select colors from anywhere and snap to
the nearest Web-safe color.
- Rollover object: Add rollover effects in one simple step.
|
|
Table
Editing |
- Table control: Select, sort, and format cells, rows, columns,
and discontinuous cells.
- Enhanced context menus: One click to select and edit table
and cell properties.
- Table formats: Choose from professionally designed options
for quick table formatting.
|
|
Deluxe
Site Management Tools |
- Visual site map: Quickly create, move, rename, and link pages.
- Automatic link management: Move, rename, and reorganize your
site while Dreamweaver tracks your changes.
- Drag and drop link selection: Select and add links in seconds.
- Advanced search and replace: Text, HTML-aware and tag-sensitive
operations.
- Regular expressions: Execute complex search-and-replace operations
without scripting.
|
|
Dream
Templates |
- Template design: Separate content from design using templates.
- Design control: Create templates with editable content but
fixed design.
- Team collaboration: Team members can edit content without
"breaking" the page or design.
|
|
Roundtrip
HTML and XML |
- Advanced HTML editing: Enjoy the integration with HomeSite
4.0 or BBEdit 5.0.
- Custom tag database: Define 3rd party tags in Dreamweaver.
- Cleanup HTML command: Remove empty tags, nested font tags,
and comments in one step.
- Apply your source formatting: Apply your tag format style
to any HTML document with just one click.
- XML parser: Open XML documents within Dreamweaver.
- Roundtrip XML: Import and export template content as XML.
|
|
Extensibility |
- Customizable commands: Extend Dreamweaver using HTML and
JavaScript.
- Configurable UI: Insert commands anywhere in the pull down
menus.
- Custom property inspectors: Add or customize property inspectors
for improved control.
- Extensible character profiles: Add more international character
sets to Dreamweaver 2.
|
|
Visual
Authoring for Dynamic Publishing |
- Server Side Include (SSI) support: Visually preview your
server-side content in Dreamweaver.
- iCat e-commerce support: Use pre-coded objects and commands
to create iCat stores in minutes.
- What You See Is What You Serve: Get a visual rendering of
dynamic content while you design.
- 3rd party integration: Improved support for ASP, Cold Fusion,
Tango, and other 3rd party tools.
|
|
|
Installation,
Manuals, and Help |
Installation is easy. There is a competent but rather dry
User's Guide, approximately 313 pages, with a tutorial chapter that covers
most of the basics of the program and helps you get started. There is
also a guided tour and Show Me movies in the Dreamweaver Help Pages. |
|
Interface |
The various components that comprise Dreamweaver are called
windows, palettes, and inspectors. A window in Dreamweaver is a stand-alone
window that will show up on the Windows 95 status bar. The Document window
is one example of a window, and the Sites window is another. The miniature,
floating windows that are used to adjust particular sets of properties
are called either inspectors or palettes. An inspector changes appearance
based on the current selection, whereas a palette controls elements such
as styles or library items that are available to the entire current site.
The image to the right shows the Document window with the Objects palette,
Properties inspector, and Launcher open. When you open a document in Dreamweaver,
the components you will use constantly are:
- Document Window--The Document window displays the current
document approximately as it will appear in a Web browser.
- Launcher--The Launcher has buttons for opening and closing
the most frequently used inspectors and palettes. The icons on the
Launcher are repeated on the Mini-Launcher at the bottom of the Document
window for easy access when the Launcher is closed.
- Object Palette--The Object palette contains buttons for creating
various types objects such as images, tables, layers, and so on.
- Property Inspector--The Property inspector displays properties
for the selected object.
- Shortcut Menus--When you right click with the mouse you get
the shortcut menus that let you quickly access useful commands pertaining
to the current selection or area.
- Dockable Floating Palettes--You combine floating windows,
inspectors, and palettes into one or more tabbed windows.
One of the features I liked about the interface is that you have the
ability to simultaneously view and edit a visual view and the HTML source
of a Web page. The smoothness of the program's WYSIWYG to
HTML source code round-trip is extremely efficient. Dreamweaver also
works well with any external HTML or text editor. It's integrated with
BBEdit 5 for Macintosh and HomeSite 4 for Windows. If you have BBEdit
or HomeSite installed, you just click the External Editor button at
the top of the HTML inspector to open the editor. You don't need to
save the file when leaving one editor for another, and both HomeSite
and BBEdit have special Dreamweaver buttons for fast toggling between
applications. I have only one minor suggestion for the HTML window.
There is no maximize/minimize button on it to toggle between different
sizes. I like to have a small HTML window open at all times when I am
working in the document window. When I want to edit the code, I like
a much larger window, and you have to resize it manually. The image
to the left shows the Document window and HTML window at the same time.
With Dreamweaver 2, you get improved color tools in the interface.
You simply use the eyedropper to pick up a color from the elements on
your page, and Dreamweaver converts it to the nearest Web-safe color.
Dreamweaver's interface is not as intuitive as it could be, and it
takes some time to get used to. Although there have been improvements
from the earlier version, you still have floating palettes all over
your screen. I constantly used the F4 key to turn them on and off. Streamlining
the JavaScript Behaviors window and most of the Properties Inspectors,
creating dockable palettes that can be grouped together into a single
tabbed window, and rolling two or three separate steps into one in Version
2 has helped somewhat.
|
|
HTML
Code |
One of the problems with WYSIWYG editors has been that they have a
tendency to change the HTML code of your files while inserting their
own proprietary tags. Dreamweaver preserves your markup. The program
can be set to clean up your markup, but it is an option that can be
disabled easily. And unlike other editors, it doesn't insert editor-specific
or proprietary tags. The program won't change tags it doesn't recognize,
instead it highlights unknown tags in yellow.
And Dreamweaver's advanced tagging options allow you to incorporate
Cold Fusion, ASP, XML, and nearly any proprietary code you can teach
it.
|
|
Tables |
Dreamweaver's table-building abilities are very good. It preserves
table and cell width requirements, allows you to select and edit numerous
cells at once, and lets you plop in cell or entire table background
browser safe colors with the ease of a dropper. You can now apply text
and other formatting to rows, columns, or an entire table and select
and format noncontiguous cells. Splitting
and merging table cells is easy. Dreamweaver has plenty of advanced
table options. You can add font tags to each cell in the table (so you
can change the font attributes of the text in each cell all at once)
or sort the table alphabetically or numerically. The image to the right
is the dialog box for sorting in tables. And creating nested tables
is a snap.
You can insert a table from the Document Window menu bar, selecting
Insert>Table, or by clicking on the Object palette. The image to
the left shows the Table dialog box that opens from either the menu
bar or the Objects palette. The Table dialog box is straightforward.
To modify a table after it is inserted, you can use the Document window
menu bar, selecting Modify<Table, right-click with the mouse to get
a dialog box, or by using the Properties inspector after the entire
table is selected. The Properties inspector--image show to the right--provides
you with a variety of options to modify your table, such as: select
a table name; clear row heights or clear column widths; set vertical
or horizontal space around the table; set rows and columns; set width
and height in percentage and pixels; set cell padding, cell spacing,
cell border and alignment; select a background image or color; select
border colors; merge and split cells; and select border color highlight
and shadow.
A new feature in Dreamweaver 2 is the Format Table dialog box, which
allows you to choose from predetermined background color schemes. It
is found under Commands>Format Table from the Document window menu
bar. The image to the left shows the different color schemes and options.
|
|
Layers |
The layer features in Dreamweaver works much like layers in traditional
design programs, so working with layers is easy and there is not a sharp
learning curve. You have grids and rulers and snap to features. There
is a Layers inspector that lists all the layers on the current page.
You can use it for the following functions: rename a layer; nest or
overlap layers; change layer visibility; and change
stacking order of layers. And the Properties inspector has various other
options for layers. You can rename them here also; select an HTML tag;
select the X and Y (left and top) coordinates in the L and T text boxes;
type new dimensions for the layer in the Width and Height boxes; define
the clipping area; and select a content overflow setting; choose a background
color and/or image. The image to the right shows the Layers inspector
on top with the the Properties inspector on the bottom.
You can lay out pages using layers and then convert the layers to backward-compatible
tables with a single menu command. This new layers-to-table conversion
feature is great. You simply place the various parts
of your page, such as images and text blocks, into separate layers--which
normally work only on browsers that support Cascading Style Sheets (CSS),
and then select Modify>Layout>Convert Layers To Table from the
main menu. Your layout will now work in any 3.0 browser. There are limitations
though. Dreamweaver can't convert overlapped layers, so you have to
make sure the Prevent Layer Overlaps switch is on. For some reason,
the option is not in the Modify menu along with the Convert Layers To
Table command, but under the View menu. Hopefully, with the next version,
it will be moved. The image to the left shows the Convert Layers to
Table dialog box.
Another new feature in Dreamweaver 2 is the Tracing Image. Some designers
like to create page mockups in Photoshop or other image editors before
production starts on the HTML page itself. With Dreamweaver 2 you can
display your mockup image in the degree of transparency you prefer and
then position layers on top of the image so that they line up exactly
where the designer intended.
|
|
Style
Sheets |
Dreamweaver has excellent style sheet support. There is
a Styles palette where you can create, edit, duplicate, remove, and link
styles. There are four kinds of styles that you can use, and Dreamweaver
supports all of them. They are: redefining an HTML tag; defining a class;
creating a linked style; and creating an imported style. The dialog boxes
for the
style options are very clear, easy to follow, and well laid out. The image
to the right shows the Styles palette and the Edit Style Sheet dialog
box. The image to the left shows the Style definition dialog box where
you choose the attributes of your style. After playing with the style
sheet features in Dreamweaver, you are itching to style with style sheets
in all your pages. But style sheets only work in 4.x or later browsers
such as Navigator 4 or 4.5 and MSIE 4. Now, we are all waiting for the
browsers such as Navigator and Microsoft to catch up with the software. |
|
Templates |
Macromedia calls the templates feature in Dreamweaver 2 "Dream
Templates," because they have some terrific features. And they
really do! Once you've created a page, you can save it as a reusable
template with both editable and locked regions. Combined with check-in
and check-out page control (which tells users when a particular page
is being changed), Dreamweaver's templates give designers the comfort
of knowing that writers and editors can change content without inadvertently
mangling the page's design. You can quickly create entire sites using
the template feature. The tool you use to work with templates is the
Templates inspector. The top half displays a list of all the templates
available to your local site, and the bottom half displays a preview
of the template's content. You can hide the lower half to conserve screen
space. Templates can be created from an existing file or created from
scratch.
|
|
Behavior
Modification |
Dreamweaver's Behavior tools let you apply common JavaScript actions
without having to write any JavaScript. Adding a Behavior to a page
in this program is incredibly simple. By using the Rollover option
in the Objects palette you can create a JavaScript action that lets
you swap the source of one image with another image file, so that when
you mouse over an image, another image will appear. In Dreamweaver 1.0,
you needed to create three JavaScript Behaviors in order to make a successful
image rollover. In Dreamweaver 2, you use just a single dialog box as
shown on the left.
There is also a Behavior inspector--image shown on right--to help you
along with more complicated image rollovers. You can use Behaviors to
have user events other than mouseovers (such as clicks or keypresses)
make the images change source; you can have an event for one image trigger
a source change for a different image; you can make it so that mousing
out doesn't require the source to swap back; or you can have the mouseout
cause an entirely different image to appear. You choose the browser
or set of browsers you want the Behavior to work in. Then you click
on an object that you want the Behavior to act on; click on the Add
Action button to pop up a menu of actions that are available for that
particular browser-object combination; choose your action from the menu;
fill out the dialog box; and click OK to see the name of the action
in the Actions list box; then click on the arrow to the left of the
Action name to drop down a list of available user events. Again the
available events will depend on the object+browser+action combination
you choose. Choose your event from the menu. And you have your JavaScript.
Dreamweaver really is excellent for letting you add advanced features
to your pages without being an advanced programmer. Adding HTML-based
tricks to your page is made simple by using Dreamweaver's automated
scripting, where you can drag and drop effects right onto your page.
|
|
Timelines |
Timelines are a way to add animation to a Web page using
JavaScript. You don't need to write any code and Timelines use no ActiveX,
Java, or plug-ins. Timelines use JavaScript to control layers. A layer
can move, resize, appear, or disappear--and what happens when is controlled
by a sequence of frames. These are animation frames and each frame can
be slightly different from the last, which creates the illusion of movement
over time on a 2-D surface. In this case, the 2-D surface is a Web page
projected on a computer screen. The Timeline inspector--image shown on
the left--is used to create and modify Timelines. This is a nice feature
for users who want more sophisticated Web pages without using Java or
plug-ins. |
|
Libraries
and Custom Objects |
One of the unique features of Dreamweaver 2 is its automation
features. You can create your own automated HTML widgets that you can
plunk onto pages whenever you like. You can create custom objects to add
to the Objects panel or even create a custom Objects panel. |
|
Site
Management |
Dreamweaver's Sites window is a is a combination file management
tool and a full-fledged FTP client that lets you upload and download files,
move stuff from directory to directory, and view files in
the Document window or in a browser with a click or two. In the Sites
window, you designate a directory on your computer or local network as
a local site. This folder becomes the site root folder, and Dreamweaver
uses its location to code site-root relative links. Dreamweaver offers
visual site maps for use in viewing the relationships
of files--shown in image to the right. You can adjust the site map layout
with the Site Definition dialog box--shown in image to the left. Its site
management capabilities let you rename, move, troubleshoot, and link pages,
plus site search and replace. |
|
|
I must admit, I had to use the program and get a feel for
it before it grew on me. There is always a resistance when you go from
using a program that you are familiar with to another that is entirely
new. I had used Visual Page, Top Page, NetObjects Fusion, HomeSite, and
even plain Notepad for designing Web pages. I am used to having all my
options in menu bars at the top of the window, available for view all
the time. If you don't know what you are doing with these programs, you
can always poke around until you find the right button. But with Dreamweaver
everything is in specific palettes or inspectors and does not become available
until you have an object selected. Once you get familiar with the program,
it does seem efficient. You can toggle the palettes on and off. This review
does not by any means cover all of the features in Dreamweaver 2.0, but
I did try to touch on most of the new features. Dreamweaver does so much
that it was difficult to know what to review and when to stop. I was determined
to write the review in the program as I thought that would be a good place
to start, and I have now decided to use it for all the reviews in PC Cafe.
It is a powerful program that gives you the advantages of a WYSIWYG program
and the editing features of an HTML editor. It is not for the faint of
heart as it does take time to learn but it is worth the effort. So if
you want Cascading Style Sheets, DHTML, automated scripting, site management,
clean HTML, simultaneous visual and source editing, and precise table
editing, all in one package, Dreamweaver is the one. |
|
|
Processor: Pentium 90+ MHz
Operating System: Windows 95, 98, or NT 4
Memory: 32 MB
Hard Disk Space: 20 MB
Hardware: 256 color monitor capable of 800x600 resolution
|
|
Graphics:
Adobe Illustrator & Adobe Photoshop
Web
Page Editor: Macromedia
Dreamweaver 2.0
Scanner:
Hewlett
Packard ScanJet 6250C Professional Series
|
|
|
|