The hardest part of making a law firm Web site isn’t learning Hypertext Markup Language (HTML), JavaScript, eXtensible Markup Language (XML) or writing a Common Gateway Interface (CGI) script in Perl. All of these things (particularly HTML tagging) are relatively simple and can be done in DOS or Windows Notepad.

On the contrary, you can learn all of these skills and still create an ineffective or unsightly Web site. By far the hardest task is deciding on the content and presentation of the message or image you want to convey with your Web site.

Program Information

Dreamweaver 4.0
Macromedia Inc.
(415) 252-2000
www.macromedia.com
$299; $399 with Fireworks

GoLive 5.0         «
Adobe Systems Inc.
(888) 724-4508
www.adobe.com
$284; $999 for Web Collection (includes Photoshop, Illustrator and LiveMotion)

« Shootout Winner

So if creating a Web site is so easy, why should you use one of these programs? Because learning HTML is time-consuming and difficult in the beginning. Although it will also take time to learn Dreamweaver and GoLive, you can accomplish more visually and technically using these programs than you would be able to do by hand coding in HTML. Both programs also greatly facilitate maintaining the site after it’s uploaded to a server, making the maintenance of your site easier.

The advantage of using a visual development tool such as Dreamweaver or GoLive is both programs allow you to concentrate on the content and presentation of your site instead of the technical procedure. Rather than changing the HTML and then evaluating how it looks in a browser, you can (at least for the most part) drag the elements of the Web page where you want them, and the programs adjust the HTML to represent the current position of the design element.

For this shootout, I compared the features of Dreamweaver and GoLive. It’s important to note, both manufacturers might use the same names to describe different features or different names to describe the same features. And while either program will usually get you to the same spot at the end of the day, they get there by different routes.

Getting Started
Dreamweaver is sold separately, bundled with Macromedia’s image editing software, Fireworks, or in an enhanced version called UltraDev 4, which is used to create database-driven sites with the same visual design concept as Dreamweaver.

Dreamweaver has a production-oriented feel, like it was designed by programmers for artists. The software manual is excellent, and there is a guided tour and several tutorials included on the CD for learning various aspects of Web site creation. While the written tutorial is meant primarily to give an idea of what you can do, you can probably learn everything you need to know about assembling a simple Web site by going through the guided tour and the written tutorial.

Adobe GoLive can be purchased separately or as part of Adobe’s Web Collection, which includes Photoshop (image editing software), Illustrator (vector graphics program) and Live
Motion (video creation and editing software). Of course, you can purchase GoLive and Photoshop separately or even buy another image editing software program to work with GoLive.

GoLive has an artsy feel, like it was designed by artists for computers. Because you can move design elements around the workspace by dragging them with the mouse, the process is more like under painting an oil painting. If you change your mind, you can just paint over it.

The GoLive manual is good, but it can be a tedious process to learn the program from only this manual. The supplement book “Adobe GoLive Classroom in a Book” is easier to learn from, but I would rather have a short tutorial without having to shell out the extra cost (just under $50). However, the first chapter of “Classroom in a Book” contains a tutorial covering the basics of the program and is worth reading before getting started.

Workspace
The Dreamweaver workspace consists of an assembly space with small, undocked windows superimposed on top of the workspace that contain the tools and information you need to assemble your site. The workspace has three views selectable by clicking the button for that space. The “Code” view shows you only the HTML tags (and whatever code – XML, JavaScript, etc. – you have). The tags are color-coded and indented for easy reading. If you know HTML (or any other Web language), you can tag or code directly in this view. If you don’t know HTML, Dreamweaver comes with HomeSite 4.5, an excellent program for learning and writing HTML by hand. There is also a “Layout” view in which you see only the visual design. You also can see the “Code” and “Layout” views together in a split window. In the split window, you can still tag in the “Code” view of the window, and the section of the design you are working will be highlighted in the “Layout” window. With one click, you can view your site in the browser of your choice. You can view the physical and the link structure of your page in the “Site” window next to the file directory. Highlight a file in the structure pane, and it’s highlighted in the file pane.

Much like Dreamweaver, the GoLive workspace consists of an assembly space with small, undocked windows superimposed on top of the workspace containing the tools and information you need to assemble your site. The workspace has five tabs, the “Layout” editor, “Frame” editor, “HTML Source” editor, “HTML Outline” editor and “Preview” tab. In the “Layout” editor, you can visually create Web pages entirely with the mouse by dragging, dropping, pointing and clicking. This makes creating a Web site extraordinarily easy and quick.

The “Frame” editor is for viewing and manually changing frames. The “HTML Source” editor allows you to type HTML (or any other Web language) directly into the program. The changes are instantly visible in the “Layout” editor or the “Preview” window. The tags are color-coded and indented for easy reading. Elements selected in the “Layout” editor are highlighted in the “HTML Source” editor, so it’s easy to see what the program is doing at all times. The “HTML Outline” editor shows the tag structure of your page in graphical form. If you are writing your own XML, JavaScript or HTML, this is a good way to see the structure of your work. If you are working visually, you might never need to look at this tab. The “Preview” tab shows you what your page will look like in a generic browser with your links active. With one click, you also can preview your site in an actual browser.

Creating Web Pages
When beginning in Dreamweaver, a Web site is first defined locally, a page is created and named, and the layout of the page is sketched. The sketch can be analogized to a watercolor painter drawing the outline of the painting before applying the color. Let Dreamweaver scan your root folder, which adds your design elements to the “Asset” panel from which you can drag-and-drop elements onto your workspace.

You can design in “Code” or “Layout” view. In “Layout” view, you can visually create your site almost entirely by dragging, dropping and pointing from the “Assets” panel to your workspace. The tutorial shows you how to design in “Layout” view switching to “Code” view when necessary to make adjustments.

In “Layout” view, you can draw tables and cells directly on the workspace. If you are in the split view, you can see Dreamweaver creating code for the table and cell structure. In the production process you would normally create the part of the structure — the part that will be the same on each page — and add content (or space) to the cells later. You can, of course, add content whenever you want.

Adding content to the structure is easy, and can be accomplished in a number of different ways. Place the curser in the cell designed for the content, click the button representing the kind of content you want — photograph, graphic, Flash text or movie, Shockwave movie, sound, etc. — and select the file containing that content.

One thing to remember in Dreamweaver is when an element is bigger than the cell you put it into, you either have to shrink the cell to the size of the element, or you have to alter the cell padding in the “Standard” view to position the element within the cell. In GoLive, the size of the cell defaults to the size of the element. Likewise, in Dreamweaver, you can’t move an element directly, you must first select the cell that element is in and move the cell. This is a two-step process. In GoLive, the table cell moves with the element in one step.

Links to other pages or other Web sites created in Dreamweaver are not active until you preview the site in an external browser; however it only takes one click to view the site on an external browser. In GoLive, you can test your links in the “Preview” tab without starting another program, therefore reducing the process by one step.

To create a Web site in GoLive, first let the program scan your root folder to add your design elements to the site window, which allows you to drag-and-drop these elements onto your workspace. When starting your home page, drag-and-drop a “Layout Grid” from the “Basic Objects” panel onto the workspace. Drag its corners to size it. In the “HTML Source” tab you can see the tags created by the program. Now add your design elements by dragging and dropping the appropriate icons onto the workspace from the “Objects” panel. There are numerous objects grouped by their function, with the most common icons grouped on the “Basic” tab of the “Object” panel.

If you want to add text, drag-and-drop the “Text” icon onto the workspace where you want it. Drag a corner or side to size it and type your text. Format the text like you would in a word processor. If you decide you want it somewhere else, just move it there.

Although you can do it in other ways, you should add pages only in the site window. This makes it easier for GoLive to keep track of the pages on your site without rescanning the root folder. Better yet, add pages visually by dragging and dropping the new page icon into the “Navigation” tab of the “Site” window. This shows you (and lets you create) the structure of your site graphically. But make sure GoLive adds the files to the subfolder you want them in because the program has a tendency to add new files created this way to a subfolder named “NewFiles.”

When dragging an image icon onto the GoLive workspace, the “Image” inspector appears. On it is a “Point and Shoot” button, which allows you to point and shoot the image asset in the site window. You automatically can move through folders and scroll in the site window without letting go of the mouse, making it a one-click operation. The “Point and Shoot” buttons on the various “Inspectors” allow you to add elements very quickly. To move the element, drag-and-drop it where you want it.

Another way to design a page in GoLive is with the “Site Design” feature, which allows you to create the structure graphically (including links) by dragging and dropping new page icons into the “Design” window. You can add content if you want and print it out to show to your partners. Make the necessary changes, add the rest of the content and converted it into a Web site.

Graphic Elements
Dreamweaver links with Fireworks, and GoLive links with Photoshop. In each program there is a time advantage to creating graphic content using the linking graphic programs. For example, if you were in Dreamweaver and wanted to increase the size of a picture of one of your partners that you created in Adobe Photoshop, you would have to open the original scanned image (which will be bigger and at a higher resolution than the JPEG on your Web site) in Photoshop, perform a bicubic resampling to the size you want, and then re-optimize the image into a JPEG giving it the same name as the image to be replaced.

This works fine, but is time-consuming. If you stretch the borders of the image in Dreamweaver, you are displaying the same number of pixels in a greater area thereby dramatically decreasing the resolution of the image. If you used Fireworks to import and optimize a photograph, you can link the cell designated to hold that element with the original scanned photograph. When you resize the photograph in Dreamweaver, it automatically rescales and resamples it in Fireworks, and automatically re-optimizes the image, saving original and newly exported image files as it goes. This saves a ton of time.

In GoLive, you can add direct links to Photoshop images with the icon called “Smart Photoshop.” This function enables you resize photos in GoLive without losing resolution, much like Fireworks does with Dreamweaver. GoLive has similar integration with Illustrator and LiveMotion, making a strong case for purchasing Adobe’s Web Collection if you foresee the need for any type of video on your site.

Though both Fireworks and Photoshop are superb image-editing programs for the Web, Photoshop is also the premiere image-editing program for print and transparency applications. If you use Photoshop for print or transparency media, you should consider getting GoLive.

Browser Compatibility
When designing pages in Dreamweaver, it’s important to keep in mind that the program defaults to a higher version of Internet Explorer or Netscape compatibility than Version 3.0, which is the default for GoLive. This could cause problems for users who access your Web page from older browsers, but can be fixed if you use the “Convert to Version 3 Browser Compatibility” feature. GoLive prevents compatibility problems by allowing you to assemble your page elements entirely with nested tables, which means it can be displayed correctly in any Version 3.0 or later browser.

Since Dreamweaver’s primary focus is to offer the maximum benefit of the new technologies, the tradeoff is your site may not display correctly in some older browsers unless you make sure to change the default when you first start designing your site. In other words, this isn’t much of a tradeoff.
GoLive starts at the other end ensuring compatibility at the expense of the latest high-tech sparkles. Of course, you can create cascading style sheets (dynamic HTML), JavaScript, XML, and so forth in GoLive like you can in Dreamweaver. So again, it’s not much of a tradeoff.

Flash
Formatting text in Dreamweaver is easier, and there are more fonts to choose from. Dreamweaver also comes with a healthy collection of Flash buttons and the ability to create Flash text without having to purchase the entire program. If you use Fireworks to create rollovers (when the image or text changes as the mouse pointer rolls over it), the HTML code created in Fireworks is imported into Dreamweaver.

What makes Flash specialized and particularly suited to the Web (more than Adobe Illustrator) is its method of delivery. Flash content is delivered in the background. As a result, it appears to load almost instantaneously.

Although you can add Flash content to GoLive (and achieve the same effect), you can’t create it in GoLive. This is a significant advantage of Dreamweaver over GoLive. If you want to use Flash, you should consider getting Dreamweaver.

Price
There is also the price difference. You can find Dreamweaver for $299, or Dreamweaver and Fireworks for $399. GoLive costs $284 by itself. Photoshop is $609 by itself. The Adobe Web collection costs $999. In price comparison, Dreamweaver is an amazing deal.

By the descriptions above, you can see the programs are similar, and both are first rate. They have much in common including sophisticated collaboration, management and workflow tools. Both programs also will transfer your Web site to a server and help you maintain it. But underlying it all they have a slightly different philosophy.

Neither program is intuitive right out of the box. The first chapter of the Dreamweaver manual, which is 43 pages long, will help, as will the first chapter of Adobe’s supplemental book “Classroom in a Book.”

And the Winner Is…
Adobe GoLive 5.0. My reasoning is simple, I could create the kind of law firm sites I see on the Web quicker and easier with GoLive than with Dreamweaver.

If I were building high-tech Web applications for use only on Version 6 browsers, I might come to a different conclusion.

In either case, it’s a close call because Dreamweaver is also an excellent development environment.

ABOUT THE AUTHOR

Steven Schmidt is a shareholder, director and president of Business & Technology Law in Albuquerque, N.M.

  | Home  | 

|  Issue Archive  |  Resources  |  About Us  |  Contact Us  |  Subscribe  |

|  Subscribers  |  Advertisers  |

Updated 02/12/02
© Law Office Computing Magazine
www.lawofficecomputing.com
(800) 394-2626