The GoLive to Dreamweaver Conversion Kit

Ten is a nice round number; just ask David Letterman, whose Top Ten list has been a comedy standard for years. It’s also the number often employed in magazines such as this one—”Top Ten Best Tips of the Century” or “Top Ten Commands That Will Crash Your Computer.” But the main reason the number ten is so applicable here is because it was ten years ago that I began using GoLive CyberStudio.

CyberStudio was at version 2 then and I fell in love with it. A few years later, two things happened that changed my life in countless ways. First, Adobe Systems, Inc. bought GoLive Systems, Inc., and CyberStudio became Adobe GoLive. Second, Adobe hired me. Cut to 2005 when the next big thing happened: Adobe bought Macromedia, and I was faced with yet another unexpected change—as an Adobe Solutions Engineer I would be required to learn Dreamweaver.

So here we are today. Now I know Dreamweaver, but I sure wish I’d had a guide to help me over the rough spots. There are things not covered in any user guide that I wish I’d known, and the differences between GoLive and Dreamweaver are profound enough to (at times) make me feel like a complete novice to Web design. So when Layers asked me to write this article, I said yes. I’d love to share my experiences with fellow “GoLivers” about to embark upon the Adobe Dreamweaver CS3 train.

In this article I’ll cover the “Ten Things That Make It Worth the Switch” and “Ten Things You’ll Need to Remember” to safely traverse to the new platform. Let’s start with what makes it worth the switch.

Ten Things That Make It Worth the Switch
Human nature dictates that when a person leaves his comfort zone, the departure will be accompanied by a measure of trepidation and hostility. That is true for people who, for whatever reason, find themselves using a software application that isn’t the one they’re used to, and it was true for me when faced with the task of learning Dreamweaver. Still, given the fact that millions of people use and love it, I figured it was time to see what all the fuss was about.

Amazing start pages
Ever heard of Cascading Style Sheets (CSS)? Sure, everybody has. But while many have mastered using basic CSS for styling text, there are plenty who aren’t using it to define the layout of their pages. Why? Because it’s hard. But this is an area in which Dreamweaver CS3 shines. When you choose File>New, you’ll be offered an array of more than 30 premade CSS-based start pages. I can’t express how much I appreciate these pages. They offer a huge head start to creating modern pages that load fast and devolve gracefully in older browsers.

Tip: If you have GoLive CS2 or GoLive 9 around, you can use the premade external style sheets included there, too. Those external style sheets have many element selectors predefined and come in color themes. Create the new style sheet in GoLive by choosing File>New>Web>CSS, then save it directly into your Dreamweaver site to use in conjunction with your CSS-based start pages.

Great learning tools built in (code references)
If CSS is hard, what’s the best way to learn it? You need to play: play with selectors; play with positioning of divs. And if you’re not sure what those things are, you’re only a click away from an explanation. Included in Dreamweaver is the full text of the O’Reilly reference guides for HTML, CSS, and more. If you want to know more about a tag, select it in the tag selector at the bottom of each page and open the Reference panel from the Window menu to read its definition.

Browser Compatibility Check/CSS Advisor
As you begin to use CSS more, you’ll quickly realize that there are countless techniques required for layouts to display properly in multiple Web browsers. The process of testing pages in a gazillion browsers on several operating systems is generally a task that occurs at certain points in the development cycle. If you had to check a page against all those variables every time you made a change, you’d never get anything done. Dreamweaver CS3 includes a timesaving new feature called the Browser Compatibility Check that will alert you when CSS in your layout is problematic.

It’s simple to use: Click the Check Page button at the upper right of your document window and choose Check Browser Compatibility. If an error is found it will be listed in the Browser Compatibility Check panel. Double-click an error in the list and Dreamweaver will take you to it in Design or Code view. Select an error and click the View Solutions link in the panel’s lower-right portion and your browser will open and load the CSS Advisor website where you’ll be offered both an explanation and a fix for the issue.

Flash video integration
Flash video is all over the place these days. ABC started the trend when they put their hottest shows online for viewers to watch the day after airing them on network TV. As siblings in the former Macromedia lineup, Flash and Dreamweaver have a natural symbiosis. In Dreamweaver CS3, using Flash video on your webpages is incredibly simple. Dreamweaver sniffs out info, such as video dimensions; generates all the necessary code for the page; and even creates a player skin so your visitors can turn the thing on and off. It very kindly creates all the supplementary files in like, two seconds, and all you need to do is upload them to the Web server. I really like that.

Tabbed documents; Undo in any mode
Okay, this is really two tips, but the magic number is 10, not 11. Two things I really, really like about Dreamweaver are its tabbed documents, much like tabs in Firefox or Safari, and the ability to choose Undo even when switching from Design view to Split or Code view. I’ve longed for both of those in GoLive, so two points for Dreamweaver.

New technologies: Spry/AJAX
No, not the AJAX your mom uses to scrub the sink. This AJAX, or Asynchronous JavaScript and XML, is a way to add interesting visual effects and interactivity to webpages without forcing the browser to take a trip to the Web server to refresh the page. Previously the domain of coders, Dreamweaver supports AJAX via Adobe’s Spry framework. What does that really mean? It means that Adobe created a framework, a method for making AJAX easier for Web developers to use, and then went a step further by including a set of Spry widgets for use in Dreamweaver CS3.

The Spry widgets are gems. They’re truly simple to use, yet allow you to get more complex if you so desire. Click on a Spry widget, such as the Spry Menu Bar, in the Spry tab of Dreamweaver’s Insert panel and use the Property inspector to set its attributes. Or add Spry Effects from the Behaviors panel to create lush effects such as fading images or text in and out. To learn more about Spry, visit the Adobe Labs at http://labs.adobe.com or the Dreamweaver tutorials section at www.layersmagazine.com.

Dynamic content and ColdFusion integration
GoLive 6 included a set of features called Dynamic Content that allowed you to pull live content onto a webpage from a database, but when GoLive CS was released, that useful set of features was removed. At the same time that GoLive lost this crucial functionality, Dreamweaver added it to its arsenal of server-side tools, upgrading support for ASP, PHP, and JSP.

Today, GoLive CS, CS2, and 9 include no visual dynamic content tools, and while you can certainly use any of those languages in any of those versions of GoLive, you’ll need to code it yourself. For noncoders, the easiest of all server-side languages to use in Dreamweaver is ColdFusion. Dreamweaver CS3 and ColdFusion 8 comprise a formidable toolset that enables the creation of pages that interact with a database. Using the Databases panel, you drag-and-drop placeholders onto a page and that placeholder content is replaced with live data when viewed via a Web browser. This makes the creation of calendars, event lists, catalogs, and so on a straightforward process.

CSS visual aids
I’m a real fan of the CSS editor in GoLive and the manner in which it lets you create CSS rules in a very visual way, but I’ve got to admit that the version of visual CSS in Dreamweaver is pretty slick. To get an idea of what I’m referring to, you’ll need to use a page that employs a CSS-based design. If you don’t have one, use one of the start pages I mentioned earlier. Turn off Hide All Visual Aids by clicking the Eye icon on the Document toolbar. Then turn on the CSS Layout Box Model option in the same menu. Hover your cursor over the edge of a div and when it highlights, click on it. What you’ll see as a result of that click are shaded areas delineating the CSS box model, including margin, padding, and border.

CSS style rendering
Next, turn on the Style Rendering toolbar by Control-clicking (PC: Right-clicking) in the Document toolbar and selecting it from the contextual menu. The Style Rendering toolbar allows you to see how your page will look when rendered with style sheets of various media types, so you can see, for example, how your screen style sheet will render in a browser, and also what your print style sheet will send to the printer. Even better, you can edit in Design view regardless of which version of the CSS is currently showing. And to see your page rendered with no style sheet, Dreamweaver includes a button to Toggle Displaying of CSS Styles in the Style Rendering toolbar.

Accessibility support
Anyone that needs to create sites that adhere to Section 508 accessibility requirements will love the fact that Dreamweaver includes features to help enforce those rules. In its Preferences, you’ll find a number of options in the Accessibility category that are enabled by default. When inserting an object such as an image, Dreamweaver will prompt you to include the necessary attributes to ensure the object meets accessibility requirements.

Ten Things You’ll Need to Remember
The ten items listed in the previous section clearly illustrate the power of Dreamweaver. But there are fundamental differences in the way GoLive and Dreamweaver operate, and a few things that are actually very simple took me forever to figure out since I was thinking the GoLive way and not the Dreamweaver way. In this section, we’ll uncover those potholes so you won’t trip in the same places I did.

Adding files to your site
How basic is that? You have a file on your hard drive, maybe a picture or movie, and you want to add it to your site. In GoLive, you can choose File>Import>File to Site, choose the files to import, and import into the folder of your choice. Or you could drag-and-drop from a folder on your hard drive to a folder in your Site window. In Dreamweaver, there is no Import, nor can you drag-and-drop into the Files panel. I scratched my head over this for the longest time until it dawned on me that in Dreamweaver, you just put the files into the folders via the Finder (PC: Windows Explorer). Yes, I felt like an idiot. Don’t tell anyone about it, please.

Defining a site
There’s a core difference in how Dreamweaver and GoLive handle site structure. GoLive creates a bunch of folders for you, including the site’s root folder (web-content) and folders for housing the bits and pieces you need while building the site, but don’t need to upload to the server (web-data).

Dreamweaver creates no folders; you define all structure yourself. The benefit of doing so is that you’re not beholden to a specific file structure. (On the other hand, sites are not as portable as they are with GoLive). To define a site in Dreamweaver, choose Site>New Site, click the Advanced button at the top, select the Local Info category on the left, and fill in the top two fields: Site Name and Local Root Folder (browse to your root folder by clicking the little folder icon). No additional info is required to begin working on a site and you can always go back and add FTP info and other settings at a later time. [For more on defining a site in Dreamweaver, visit www.layersmagazine.com/defining-a-site-in-dreamweaver.html.—Ed.]

Creating a default images folder
Here’s one that really caught me off guard. The first site I created in Dreamweaver was built for learning the application. As such, I was taking assets from all over my drive and putting them on pages just to play around. But here’s the thing: When I defined the site, I created a default images folder in the Local Info category of the Site Definition dialog. With a default images folder defined, Dreamweaver copies any image used on a page into the site without asking. A lot of people like this behavior, but if I’m messing around I might try five or ten images, and I don’t want them all in the images folder. So, it’s your choice. If you’re like me, leave that field blank. The result will be that Dreamweaver asks you if you want the file copied into the site. Very polite.

Opening multiple sites
You switch between defined sites in Dreamweaver by selecting a site’s name from the pop-up list at the upper left of the Files panel. This is quite nice as all defined sites are at your fingertips every time you open Dreamweaver, whereas GoLive creates a Site file for each site that you have to open individually. The tradeoff is that it’s possible to have multiple GoLive sites open at once, but not in Dreamweaver. However, you can have pages from various sites open at the same time, but be careful about where you’re saving things.

Local files on the left, please
The Dreamweaver Files panel works sort of like the GoLive Site window, but not exactly. For one thing, when you decide to open the FTP portion of the Files panel by clicking on the Expand icon near the top of the panel on the far right, the local files will be on the right and the server files on the left. That’s the opposite of how GoLive (and every other FTP client in the world) does it. The simple fix is to change the default behavior in the Dreamweaver Preferences. Choose Dreamweaver (PC: Edit)>Preferences, then click the Site category on the left. From the Always Show pop-up, select Local Files on the Left.

Expanding the Files panel
Now that you’ve expanded your Files panel and set your preferences to show the local files on the left and the remote files on the right, take a look at the Remote Site section. If you haven’t yet input your server info, the Files panel will display a link to the Remote Info section of the Site Definition dialog so that you can do so. After entering the FTP information, click the Connects to Remote Host icon in the Files panel and then use the Get or Put icons to download and upload files, respectively. When you’re done, don’t close the window, because the Files panel needs to stay opened. Instead, click the Collapse icon (formerly the Expand icon) on the far right to collapse the panel back to its collapsed or docked state.

Checking for errors
The site window in GoLive gives constant feedback on links in your site via its status column. Broken links are flagged immediately with a bright red bug. In Dreamweaver you’ll need to check your links manually, but it’s easy to do. From the Site menu choose Check Links Sitewide. Errors will open in the Link Checker panel. If errors are found, you can double-click them to open the pages containing the error.

GoLive actions/Dreamweaver behaviors
GoLive and Dreamweaver both come stocked with a number of prewritten JavaScripts that offer an easy way to add interactivity to your webpages. While your GoLive actions will still function in a browser, once you bring your GoLive site into Dreamweaver you’ll no longer have a visual way to edit the actions. It’s also important to note that while GoLive creates an external JavaScript library to hold the code for its actions, the behavior code in Dreamweaver is written into each page.

Too many dialogs
I like to drag-and-drop. So when I began using Dreamweaver, I was put off by its tendency to pop open a modal dialog every time I tried to insert an object from the Insert bar. Though the Insert bar looked similar to the Objects panel in GoLive, it behaved differently. Then I found the preference to switch off the modal dialogs and became a happy camper. You’ll find the setting in the General Preferences. Look for the item called Show Dialog when Inserting Objects, and switch it off.

Working with divs
It took me a while to understand the process of developing a page design in Dreamweaver. I now employ a different workflow that you might want to try. Start with one of the aforementioned start pages. To insert additional divs into the design, first define the div by clicking the New CSS Rule icon in the CSS Styles panel. In the New CSS Rule dialog, choose Advanced (IDs), give it a name, and set its attributes. Next, click the Insert Div Tag object from the Layout tab of the Insert bar and assign it the name of the previously defined ID via the Property inspector.

Take It Slow
If you’re considering moving from GoLive to Dreamweaver, there are a number of resources that you may find helpful (see “Resources,” p. xx). Remember, your copy of GoLive won’t stop working when you begin to use Dreamweaver. You can use both, even for the same site, without any problem. If there are things you prefer to do in GoLive, that’s okay. Take it slow, learn at a comfortable pace, and check back at Layers for additional help and an occasional shoulder rub. Good luck!

Resources
Here are some additional resources to help you with a smoother transition than I had:

GoLive Conversion Plug-in
A conversion plug-in for GoLive can be found in the Goodies folder on the installation CD for Adobe Creative Suite 3 Design Premium, Web Premium, Web Standard, or Adobe Dreamweaver CS3. The plug-in also comes with Adobe GoLive 9, which is available via download only. Install the plug-in into GoLive, then export your sites for use in Dreamweaver. For instructions on using the extension, visit www.adobe.com/go/GL2DW and click on the Resources tab.

Migrating from Adobe GoLive CS2 to Adobe Dreamweaver CS3:
www.adobe.com/devnet/dreamweaver/articles/migrate_golive_dreamweaver.html

GoLive to Dreamweaver migration training video from lynda.com:
www.adobe.com/designcenter/dreamweaver/articles/drwcs3_golivemigration.html

From GoLive to Dreamweaver CS3, by totaltraining.com:
www.totaltraining.com/prod/adobe/dreamweavercs3_gtd.asp

BIO:
As a Solutions Engineer with Adobe Systems, Lynn Grillo’s work centers around Adobe’s products for creative professionals. Based in the New York metro area, Lynn is an Adobe Certified Expert in numerous Adobe applications including Photoshop, Illustrator, InDesign, Acrobat, GoLive, and InCopy. To date, she has co-authored and tech edited a number of books on Adobe software, and has recorded training for Total Training, Lynda.com, and Terry White’s Creative Suite Podcast.