Dreamweaver Article

Migrating from Adobe GoLive CS2 to Adobe Dreamweaver CS3

If you use Adobe® GoLive® CS2 or have inherited a website created with GoLive, you can still get work on the site with Adobe® Dreamweaver® CS3. This article is designed to help you make the transition to Dreamweaver.

For a video tutorial about Dreamweaver for GoLive users, see www.adobe.com/go/vid0143.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver CS3

• Try
• Buy

About migrating GoLive sites to Dreamweaver

Sites created with GoLive can be migrated to Dreamweaver. This section gives a brief overview of the migration process. For detailed instructions, see the sections that follow.

A GoLive-generated site consists of one project folder with three predefined subfolders: web-content, web-data, and web-settings. A Dreamweaver site does not share this folder structure: it consists of a single root folder, which is the equivalent of the web-content folder in GoLive. You create as many subfolders as you want for your site assets in the root folder.

You can re-use your GoLive templates and components in Dreamweaver. You can also transfer your snippets to Dreamweaver. Dreamweaver and GoLive share the same template syntax, so migrating template files only requires moving them to a new location and changing their file extension. The editable and locked regions of a template should work in Dreamweaver as they did in GoLive.

GoLive CSS objects are CSS objects in Dreamweaver. GoLive layers are known as AP elements in Dreamweaver.

Here is the basic migration workflow:

1. In Dreamweaver, define a Dreamweaver site pointing to your GoLive site’s web-content folder as the new site’s root folder.
2. In GoLive, move any templates or snippets to new folders in the web-content folder.

When you define a site in Dreamweaver, you define the location of your site root folder on your hard disk as well as the corresponding root folder on your remote web server. You also specify the transfer method for moving files and folders between your local and remote sites. In GoLive, this is the equivalent of specifying a Publish Server.

Using the GoLive migration extension

You can use a free GoLive extension to migrate your sites to Dreamweaver. You can copy the extension from the Goodies folder on the Dreamweaver installation disk (Goodies/Migrating from GoLive/GL2DW).

For instructions on installing and using the extension, see www.adobe.com/go/GL2DW. Note that you install and use the extension in GoLive, not Dreamweaver.

Migrate a GoLive site manually

To migrate a GoLive site, simply define a new Dreamweaver site and specify the web-content folder of your GoLive site as the local root folder.

1. In Dreamweaver, select Site > New Site, and then click the Advanced tab.

2. In the Local Info panel, name your site and specify the web-content folder of your GoLive site as the local root folder.

   Note: If you're using an earlier version of GoLive that created folders called sitename, sitename.data, and sitename.settings, you need to specify the sitename folder rather than the web-content folder as the site's local root folder.

3. Set other local and remote site options as desired. Click the Help button for more information.
4. When you're done, display your site files by selecting your new site from the left popup menu in the Files panel (Windows > Files).

To migrate other site assets, see the following topics:

• Migrate GoLive templates
• Migrate GoLive snippets
• Migrate GoLive actions

First look at the Dreamweaver workspace

The Dreamweaver workspace consists of four basic elements: the Insert Bar, the Document window, the Property inspector, and the panel groups. Some of these elements will be familiar to GoLive users.

A. Insert bar B. Document toolbar C. Document window D. Panel groups E. Tag selector F. Property inspector G. Files panel

Figure 1. The Dreamweaver workspace

(+) View Larger

The Insert bar (A) corresponds to the GoLive Objects toolbox. The Insert bar has buttons for inserting various types of objects into your page, including images, tables, and form objects.

The Document toolbar (B) lets you view the source code, upload the document to your publish server, preview the document in browsers, and validate the document, among other things. Dreamweaver does not have a Preview tab like GoLive. Instead, you use the Preview in Browser feature to periodically check your work in targetted browsers. To use it, click the Preview/Debug in Browser button on the toolbar, or press F12 (Windows) or Option+F12 (Macintosh). The page opens in the browser of your choice.

The Document window (C) is the main page editor. Like GoLive, you can edit a page visually in a layout view, or you can edit its code in a source view. In Dreamweaver, these views are called Design view and Code view. You can change views by clicking the Design, Code, or Split button in the Document toolbar.

The Tag selector (E) in the status bar at the bottom of the window lists all tags applied to the currently selected element. This feature corresponds to the markup tree bar in GoLive. Click a tag to select the element in the page.

The Property inspector (F) corresponds to the Inspector palette in GoLive. The Property inspector lets you view and edit the properties of text or of selected elements on the page.

The panel groups (D) provide the tools you need to build any kind of web page you want, including database-powered web pages. The panels also give you tools to manage every aspect of your site, including file transfer and source control. The panels correspond to palettes in GoLive. For example, the CSS panel is similar to the CSS palette in GoLive.

The Files panel (G) corresponds to the Files tab in the GoLive site window. To open the Files panel, select Window > Files, or press F8.

First steps in Dreamweaver

Dreamweaver normally provides several ways to perform the same task. You can use the following techniques or learn alternative ones in Help.

To view the site files on your hard disk:

• Select your site from the left popup menu in the Files panel (Windows > Files), and then make sure Local View is selected from the right popup menu.

To view the site files on your publish server:

• Select Remote View from the right popup menu in the Files panel.

To view the site files on both your hard disk and your publish server:

• Click the Expand icon on the right side of the Files panel's toolbar. Click it again to display only one set of files.

To open a page:

• Double-click the file in the Files panel.

To format text:

• Select the text and then use the Property inspector to set its format properties.

Dreamweaver creates a CSS style based on the choices you make in the Property inspector. You can rename the style by opening the Style pop-up menu on the Property inspector and selecting Rename. You can apply your new style to any text selection in the page by selecting the text and then selecting the style in the Style pop-up menu. You don’t need to set the format properties again in the Property inspector.

To define a new CSS style:

1. In the CSS Styles panel (Window > CSS Styles), click the New CSS Rule (+) button located in the lower-right side of the panel.
2. In the New CSS Rule dialog box, specify the type of CSS style you want to create as well as the location where the style will be defined.

3. In the CSS Rule Definition dialog box, set the options you want for the new CSS rule.

   

   Figure 2. The CSS Rule definition dialog for .mystyle

   (+) View Larger

To apply a CSS style:

• Select the text to format in your page and then select the style from the Style pop-up menu in the Property inspector.

To edit a CSS style:

1. Select the style in the CSS Styles panel to display its properties in the lower half of the panel.

2. Click a property's value to edit it.

   

   Figure 3. Editing a property’s value in the CSS Style panel

   Alternatively, you can click the Edit Style button (pencil icon) in the lower-right side of the panel and make your changes in the CSS Rule Definition dialog box.

To edit the source code:

• Click the Code or Split button on the Document window toolbar.

Insert an image:

• Drag the image from the Files panel.

Create a link to an external website:

• Select the link text on the page and then enter the website's URL in the Link text box in the Property inspector.

Create a link to another page in your site:

• Select the link text and then drag the Point-to-File icon (the target icon next to the Link text box) from the Property inspector to the target file in the Files panel.

Migrate GoLive templates

After defining a Dreamweaver site for your GoLive site (see Migrating a GoLive site manually), you can migrate your templates.

1. In the GoLive site window, create a new folder called Templates in the web-content folder.
2. Drag the template files from the Templates folder in the Extras tab to the Templates folder you created in the web-content folder.

3. Click OK in the Move Files dialog box to allow GoLive to update all links.

   Note: For technical reasons, you may need to make a change on the page and update the page again for the links to update. Any change will work, even typing a space and deleting it again.

4. Switch to Dreamweaver, select your site in the Files panel, and then open the Templates folder to view your files.
5. For each template in the Templates folder, select it, press F2, and change the extension of each template file from .html to .dwt. Click the next template and let Dreamweaver update any links.

Migrate GoLive snippets

After defining a Dreamweaver site for your GoLive site (see Migrating a GoLive site manually), you can migrate your snippets.

1. In GoLive, create a blank HTML page, switch to Source view, and delete all the HTML code.

2. Open the Snippets panel by selecting Window > Site > Library and then clicking the Snippets button on the palette toolbar.

   

   Figure 4. Accessing the Snippets library

3. Drag each snippet that you want to keep into the HTML file. You can put all of your snippets into a single HTML file.
4. Save the HTML file in the web-content folder as snippets.html.
5. In Dreamweaver, open the HTML page and select the code of the first snippet.
6. In the Dreamweaver Snippets panel (Window > Snippets), click the New Snippet icon (the file icon with a plus sign) at the bottom of the panel.

7. In the Snippet dialog box that appears, name the snippet and set any other options. For more information, click the Help button.

   

   Figure 5. The Snippets dialog box

   (+) View Larger

8. If you like, organize your snippets by dragging them into existing folders, or create folders of your own.

Migrate GoLive actions

GoLive actions are called JavaScript behaviors in Dreamweaver. Like GoLive actions, behaviors are pre-written JavaScript scripts that you can add to your pages visually. Dreamweaver writes these scripts in the page itself; GoLive writes them in an external script library file, CSScriptLib.js, which is stored in the GeneratedItems folder inside the web-content site folder. Each page that uses actions references the same file.

If you migrated your site as described in Migrating a GoLive site manually, you don't have to do anything. Your actions should work as before. However, you will no longer be able to edit the actions visually, though you can still edit them manually by opening the CSScriptLib.js file in Dreamweaver and editing the JavaScript code.

Any new actions, or behaviors, you add with Dreamweaver will be added directly to pages, not the CSScriptLib.js file.

Note: If the CSScriptLib.js file includes relative links to external URLs and you move that file in Dreamweaver, the URLs will not be updated. Dreamweaver does not track relative external links in JavaScript files.

Unsupported GoLive features

Some GoLive features are not supported in Dreamweaver, but alternative solutions exist.

• There is no Dreamweaver equivalent for stationery pages, though you can place stationery pages in a subfolder in your Dreamweaver site root folder and then use them as a starter pages for other pages. Make sure you don't overwrite the original files.
• Contribute users cannot edit pages designed for Adobe Co-Author. The pages must be based on Dreamweaver templates. Contribute users can modify editable regions in the pages.
• There is no Dreamweaver equivalent to the GoLive QuickTime or RealPlayer editors. You can still use your movies in web pages, but if you want to edit them, you need to choose a stand-alone editor such as Adobe Premiere Pro or Adobe Premiere Elements.
• There is no Dreamweaver equivalent to GoLive Smart Objects. However, you can still import and update Photoshop PSD-derived images in your Dreamweaver web pages. For a video workshop, see www.adobe.com/go/vid0200.

Where to go from here

This article briefly touched on some basic editing tools in Dreamweaver. Many more tools are at your disposal. To find out more, see the following topics in Dreamweaver Help.

• Lay out your web pages with tables or with CSS. For more information, see "Laying out pages with CSS" or "Presenting content with tables."
• Add multimedia files and objects, such as Adobe Flash files, QuickTime movies, and audio files, to your pages. For more information, see "Adding Content to Pages."
• Create richer web pages by adding Spry widgets such as accordions and menu bars, as well as visual effects. For more information, see "Building Spry Pages Visually."
• Reuse page designs and update them instantly with Dreamweaver templates. For more information, see "Creating and Managing Templates."
• Quickly develop PHP, ColdFusion, or ASP web applications. For more information, see "Making Pages Dynamic" and "Building Applications Visually."

About the author