TechNote (Archived)

How to convert an existing site into a Dreamweaver site

Entire sites constructed in other web page creation programs can be edited with Dreamweaver. This migration can happen all at once or file by file over a period of time. The following guidelines should make it an easy transition:

Migrating from FrontPage to Dreamweaver
Migrating from Other Programs to Dreamweaver

Migrating from FrontPage to Dreamweaver

Many FrontPage users are switching over to Dreamweaver, either because their design needs have grown more sophisticated or because their IT departments are requiring them to do so. In response to this trend, we have released several extensions specifically to help customers migrate from FrontPage to Dreamweaver.

Note: These extensions are housed on the Adobe Exchange for Dreamweaver. Users may need to login with their e-mail address and Adobe membership password to download any extensions. Adobe membership is free.

Dreamweaver MX 2004
- Import Front Page Site Wizard for Dreamweaver MX 2004: Use the step-by-step Wizard to import existing FrontPage webs and setup remote publish information in just minutes, using settings familiar to FrontPage users.
- Cleanup FrontPage HTML Sitewide for Dreamweaver MX 2004: Remove extraneous code - such as WebBots, navigation-related comments and META tags - which are all added by FrontPage.
- Publish Web Command for Dreamweaver MX 2004: This extension replicates the publishing capabilities of FrontPage. It allows you to directly connect to any FrontPage Server using the Dreamweaver site window and publish files using HTTP instead of FTP.
Dreamweaver MX
- Cleanup FrontPage HTML Sitewide for Dreamweaver MX: Remove extraneous code - such as WebBots, navigation-related comments and META tags - which are all added by FrontPage.
- Import FrontPage Site Wizard for Dreamweaver MX: Use the step-by-step Wizard to import existing FrontPage webs and setup remote publish information in just minutes, using settings familiar to FrontPage users.
- Publish Web Command for Dreamweaver MX: This extension replicates the publishing capabilities of FrontPage. It allows you to directly connect to any FrontPage Server using the Dreamweaver site window and publish files using HTTP instead of FTP.
- FrontPage Migration Kit Site Summary Reports for Dreamweaver MX: Create powerful site reports such as File Type, Filter Files by Download Time, Filter by Creation Date, Filter by Modification Date, Hyperlinks, Broken Links, Unlinked Files and Link Distance.

Migrating from other programs to Dreamweaver

Using site files created in another program

In order to work with an existing site in Dreamweaver, all of the site files must be stored in one folder. That folder must exist on the hard drive of the computer system which will be used to edit the site. Defining a Site is the process by which you tell Dreamweaver where the folder containing the site files is.Dreamweaver calls that folder a local root folder.

Defining a site: When defining a site in Dreamweaver, you essentially tell Dreamweaver where to find this main folder (known as the "local root folder") that holds all the site's files. To define your site, follow the step-by-step tutorial in How to define a site in Dreamweaver (TechNote 14028).

Redefining or transferring files: Which method you use to make your preexisting site a Dreamweaver site will depend on where the preexisting site's HTML files are stored, as follows:

The site files are on your computer system's hard drive
If the preexisting site's files are already located within a single folder on your computer system's hard drive, then define the site by designating the main folder as the local root folder.
Note: If the files are stored in one folder on a removable disc or on another computer in a network, copy or transfer the main folder to your computer system's hard drive and then define the site using that main folder as the local root folder.
The site files are on a web server
There may be situations when you need to get the site files directly from the web server. This may be because you don't have them locally, but know where to find them on the server.
1. Create a new folder on your computer system's hard drive.
2. Define the empty folder as the local root folder.
3. Connect to an FTP server. (For FTP issues, see Setting up Dreamweaver's FTP Connection (TechNote 14787).
4. Download (you can use "Get" in the Site window) the folder that holds all of your web site's files from the web server.
5. Define the site by using that main folder as the local root folder.

Opening non-Dreamweaver HTML documents

Because Dreamweaver's native file format is HTML, it will open any valid HTML document. To open an HTML file in Dreamweaver, just choose File > Open and navigate to find the file.

Round Trip HTML: When opening an HTML file (whatever its source) Dreamweaver tends to leave valid HTML alone. This unique feature, known as Round Trip HTML, lets Dreamweaver open documents generated from text-based HTML editors with little or no effect on the document's original HTML source code.

Note that not all web page creation programs function in the same way. Some "import" HTML into a non-HTML format and then "publish" an HTML document to create the web page. Dreamweaver does not "import" an HTML document;Dreamweaver opens it.

As you edit your now-opened HTML document, Dreamweaver will write out new HTML code for new elements. Areas that you change will receive new HTML code. The new HTML code may may differ in appearance from the way the old HTML looks, but otherwise Dreamweaver will not change the rest of the valid and unchanged HTML.

Special considerations for non-HTML components

Viewing your HTML code in the previously existing documents should give you some idea whether the pages contains functionality which relies on external components. Dreamweaver writes only standard HTML files with behaviors written in standard JavaScript. Other HTML editors may work differently. Below are some suggestions for dealing with some of these non-HTML components:

Third party tags
Even when Dreamweaver is able to open an HTML document created by another program, it may not be able to parse (or "interpret") non-HTML tags placed there by that program. Some non-HTML tags can make an entire page difficult for Dreamweaver to understand. Dreamweaver is already configured to recognize and respect some third party tags. The Dreamweaver preferences can be set to recognize other third party tags, as described in further detail in the Customizing Dreamweaver chapter in the manual, Using Dreamweaver.
Behaviors and JavaScript
If your non-Dreamweaver web pages include JavaScript behaviors, these probably will not be editable as Dreamweaver behaviors. If you made rollover buttons in another application, for example, Dreamweaver will leave these alone; however, you would not be able to edit them further in Dreamweaver except by hand in the code.
You may choose to leave this non-Dreamweaver JavaScript in your HTML code if it works well for you. If you want to change the actions of the scripts, you may consider replacing the old JavaScript with Dreamweaver's behaviors. This can also help in reducing the file size since Dreamweaver's behaviors tend to be small and flexible.
Repeating elements
If the existing site uses elements that repeat across the site, such as "components" from Adobe GoLive, then this HTML code is part of the page itself and will be respected by Dreamweaver. You would no longer be able to change these repeating elements and have them automatically update, but the elements will still appear in the page.
If you find that you need to update repeating elements across the site, then you might consider replacing these with Dreamweaver Library items. If you select one of the instances of the repeating element or HTML code and create a Library item from it, then you can use Dreamweaver's Find and Replace feature to find other instances of that repeating element. After finding the repeating element, replace it with the new Dreamweaver Library item. Once all the repeating elements have been replaced with the Library item, then you can instantly update all instances of the Library item across the site.

Migration Strategies

Sudden shift versus easy migration: Should a site move over entirely to Dreamweaver all at once or is it better to transfer piecemeal over time? Different situations and work groups can use different approaches successfully, but most migrations seem to work better when approached slowly.

Consider a site that was created in FrontPage and then slowly converted to Dreamweaver. If members of the web team found that a Bot setting needed to be changed, they could more easily accomplish the change in FrontPage. If they no longer had access to FrontPage, the entire page might need to be redesigned.

One potential danger with a slow migration, however, is that other visual editors will re-parse and rewrite the HTML code when making a small change anywhere in the document. This usually is not destructive, but it is safer to work on a backup copy of the HTML document if opening it in another visual editor.

Reformatting the non-Dreamweaver documents

In all of these cases, you may find that the web pages become larger than they need to be. Most visual editors insert proprietary tags which are used only in their program ("naturalSizeFlag" or "cool tables", for instance). If the pages are rarely changed, thenDreamweaver can be used to make spot edits. However, if you will be frequently working on these files in Dreamweaver, you may find it profitable to invest time reworking them. Below you'll find some strategies for changing or cleaning up the non-Dreamweaver HTML code:

Starting over: stripping out every tag
This method will instantly remove all tags (including the<p> tag in some versions). All that will remain is the original text, with no formatting. Using CSS and HTML styles will allow you to easily reformat the text. Images and other elements, however, will have to be reinserted. To remove all tags:
1. In Dreamweaver, open the non-Dreamweaver document. Choose Edit> Select All.
2. Choose Edit > Copy.
3. Open a new document in Dreamweaver.
4. In Design view, choose Edit > Paste Text (Dreamweaver MX, Dreamweaver MX 2004) or Paste HTML (Dreamweaver 4).
Using the Clean Up HTML command
For less extensive renovation, the "Clean Up HTML" command can help with some types of commenting and tag duplication.
Using the Clean Up Word HTML command
For HTML documents created in Microsoft Word, the "Clean Up Word HTML" command can help tremendously.
Reconfiguring complicated tables
If a page was created with layout grids in another editor, then you may want to redo the table(s), as follows:
1. In Dreamweaver, open the non-Dreamweaver document. Select the table to be reconfigured.
2. Choose Modify > Convert > Tables to Layers.
3. Move the elements of the table into regular rows and columns. Using Dreamweaver's Layout View mode for tables (View > Table Mode > Layout Mode) may also help you reorganize content.
4. To convert the reorganized layers back to a table, choose Modify > Convert > Layers to Table.
Deleting old JavaScript and adding Dreamweaver JavaScript
Although it is possible to keep foreign JavaScript in an existing document, it's often easier and cleaner to copy the web page's content into a new document and apply the compact Dreamweaver behaviors in the new file.

Dreamweaver Online Forums

To find out more information about converting an existing site into a Dreamweaver site, post questions to the Dreamweaver discussion group. The contributors consist of fellow developers who may have direct experience with the types of files you are using or the program you used to create your original site. They can offer tips or suggestions to specific questions.

To access the newsgroups, please see Dreamweaver Online Forums (TechNote 12606).

Note: It is helpful to include the software products, versions, operating system and hardware information when posting a question to discussion groups.