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.
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, KompoZer or Nvu, 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.
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:
The copy on your hard disk functions as a backup of your website. Should your web server's hard disk crash and your host finds that they cannot restore your site from their backup, you will not need to worry. You will have your own up-to-date local copy. Or, if your web host unexpectedly closes, you can simply get a new account at another web host and upload all your files without even skipping a beat.
If you directly edit your site online, all your mistakes are instantly "live" on the Internet when you save. Working on your files offline allows you to make tentative changes, view them in your browser to check it out and fix your errors, without affecting your public site. You can then publish only when you are satisfied with your modifications.
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.
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.
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.
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, KompoZer or Nvu tutorial series.
Copyright © 2008-2017 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
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 https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How Do I Edit an Existing Site with Dreamweaver, Nvu or KompoZer
