How Do I Edit an Existing Site with Dreamweaver/Nvu/KompoZer

Guides to migrating a site from another web editor or site builder


How Do I Edit an Existing Site with Dreamweaver, Nvu or KompoZer

by Christopher Heng, thesitewizard.com

If you have a website that was created using some other web editor, perhaps an online web editor, or if you have a site created by someone else on your behalf, how do you use a web editor like Dreamweaver, Nvu or KompoZer to update it?

This was a question asked of me by a few of thesitewizard.com's visitors. They usually ask this question when they realise that my Dreamweaver, Nvu and KompoZer tutorials are primarily directed at people creating a website from scratch, and they already have a pre-existing website that they want to edit using one of these software.

Things to Note Before You Begin

If your site was previously created using an online web site builder provided by your web host, and you want to migrate the site to Dreamweaver, Nvu or KompoZer because you are moving your site to a new host, you should scrutinize the site builder's terms of service agreement you had with your previous web host carefully.

As mentioned in my article comparing online site builders with normal web editors, many, if not all, web hosts do not allow you to use the design and graphics of a site created by an online site builder on another web host.

In other words, you are either locked into your old web host, or if you want to be freed from their shackles, you will have to redesign your website from scratch.

This does not mean that you cannot salvage your content. Your content -- your own words, photos and the pictures you drew yourself -- are your own property, which you can use wherever you like. What you cannot carry over are the overall site design and the graphics that came with it. After redesigning a new appearance for your site in the new editor, you can simply plug in your existing content.

Even if you are remaining with your existing web host, and are merely moving from your host's online site builder to Dreamweaver, Nvu or KompoZer, you should seriously consider redesigning your site with your new editor, rather than preserving the site builder's design and graphics. That way, when you find you want to move web hosts, you will not have to do yet another redesign. Since you're already changing editors at this time, you might as well do all the redesigning and relearning at this stage, to save yourself time in the future.

Steps to Moving a Site to a Different Web Editor

The first thing you will need to do is to download a copy of your entire webite onto a folder on your own hard disk. Although Dreamweaver is able to work with files directly on your website without your taking this step, having a copy of your site on your hard disk is useful for a couple of reasons:

How to Download Your Web Site to Your Own Computer

The best way to download a copy of your website is to get a program known as an FTP client. There are numerous free ones available at thefreecountry.com's Free FTP Clients page. For the purpose of this guide, I shall use FileZilla, a free FTP program listed on that page.

If you are not familiar with using FTP clients, please see my tutorial on How to Upload a File Using FileZilla to learn how to install and configure FileZilla. I will not repeat the information here. You can however skip the part about actually uploading (publishing) a file. You won't need to do that - in fact, what you need to do is the opposite.

In the "Local Site" pane of FileZilla, which shows the files and folders on your computer, navigate till you are in the folder where you want to place your website files. (If you don't know where the "Local Site" pane is, go back to the FileZilla tutorial again.) Make sure it is a new folder rather than your desktop, otherwise you will end up cluttering your desktop with all the files you're downloading from your site. If you haven't created a new folder yet, just create one the usual way you normally create folders on your computer, then go to that subdirectory in FileZilla.

In the Remote Site pane of FileZilla, which displays the files and folders on your web server, navigate till you are in the folder where your website's files are kept. This is usually a folder called "www", "public_html" or even "htdocs". If there is no such folder when you log in, and you see files like "index.html" instead, it is possible that you are already in your web directory.

Select all the files and folders in the web directory in the Remote Site pane and drag them into your Local Site pane. Make sure that you select all the files and folders so that you preserve the directory structure of your website. Otherwise, if you change things around or only selectively download files, you may find that you have a lot of broken links and broken images when you edit and publish your website in the new editor.

Once you've finished downloading your site, skip to the relevant section for your web editor. That is, if you use Dreamweaver, go to the Dreamweaver section of this tutorial. If you use Nvu or KompoZer, go to the Nvu/KompoZer section instead.

For Dreamweaver Users Only

Nvu or KompoZer users can skip this section.

Although you can immediately edit your website with Dreamweaver, it's much better to define your site in Dreamweaver's Site Manager. After all, when you bought the editor, you paid for the sophisticated facilities available in it, so you might as well use it to the full. Using the Site Manager gives you the additional site management features available in the editor.

After starting Dreamweaver, follow the steps in chapter 1 of my Dreamweaver Tutorial to define a new site. When you get to the "Editing Files, Part 3" part of the wizard, you will be asked "Where on your computer do you want to store your files?"

Do not accept the default folder given. Instead, click the folder icon to the right of the box, and look for the folder where you downloaded your website's files, and select that instead.

Apart from this step, the rest are the same as those described in the Dreamweaver tutorial.

For Nvu and KompoZer Users Only

Dreamweaver users can skip this section.

To edit an existing site with either Nvu or KompoZer, just start the editor, and click the "File" menu and the "Open" item on the menu that drops down. From the dialog box that appears, navigate to the place where you saved your website's files earlier. Choose the file you wish to edit and click the "Open" button. Your page will then appear in the editor.

Note: Nvu and KompoZer have bugs in the way they handle sites using CSS (which is a technology used by webmasters and web editors to specify what a website is to look like). Since your site was originally designed using a different editor, which may have better CSS-handling support, it is entirely possible that your page will not render correctly in Nvu and KompoZer. This is normal. That is, it is probably not your mistake that caused it.

There is no real workaround for this. If you're willing to work blind, you can simply make your changes in the editor, and check the same file using a real browser to make sure it appears correct. That is, while working in Nvu or KompoZer, your site may look ghastly, but if it looks fine in a variety of real web browsers on your computer, it will probably appear the same way in those browsers when it is uploaded to your site.

Conclusion

That's it. With the above steps, you have imported your website for use with either Dreamweaver, Nvu or KompoZer. At this stage, you can make modifications to your site as well as use any of the tips and tricks given in any of my Dreamweaver, Nvu or KompoZer tutorial series.

Copyright © 2008-2013 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How Do I Edit an Existing Site with Dreamweaver, Nvu or KompoZer





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.