Pin Me

Editing an Existing Site with Dreamweaver

written by: Amber Neely•edited by: Michele McDonough•updated: 4/22/2012

Editing an existing website with Adobe Dreamweaver can be a little tricky, especially if you're not used to editing website code. In this article, you'll get a quick and basic walkthrough of how to open your website with Adobe Dreamweaver CS5 and make your needed edits with the design feature.

  • slide 1 of 8

    Getting Started

    Here's a basic web-template that has not been edited yet. Here's an example web template that is very pretty, but it's also very bland. No personal information and no images in the main content. Using Adobe Dreamweaver's "Design" feature, we can quickly make this into a great personal website. Very little experience with HTML is needed to do this, but this will provide you with a very basic website. You can use this to edit templates you download, or create your very own basic templates and update them with just a few clicks of your mouse.

  • slide 2 of 8

    Opening your website in Adobe Dreamweaver

    A screen shot showing available files to open in Adobe Dreamweaver Make sure to save your website in a folder on your hard drive. You should include a copy of the image folder as well. I've saved the folder to the desktop for easy access. Open your existing website in Dreamweaver. This could be your index page or any of your secondary pages. I'm going to open my index.htm file.

  • slide 3 of 8

    A screenshot of Adobe Dreamweaver's Here you can see that Dreamweaver has opened the file in the split configuration. This allows you to view both your website code in the code screen, as well as what your website will look in real time in the design screen. With Dreamweaver, you have the ability to edit in either one of these screens. If you're a beginner or if you just need to make quick edits, the design screen is a great option. If you need to insert special code or you have a little more experience working with website coding, the code screen is perfect for your needs. In this article, we will be using the design half of the split feature.

  • slide 4 of 8

    Editing your Website in Adobe Dreamweaver

    Here is a screenshot showing the process of editing the text content of an existing site. As you can see, the website seems pretty dull. There is no personal information to make it look like someone's website. Changing the filler text is easy. All you have to do is click on the text you would like to edit in the design window. Here I will change it to something that looks a little more personal. Fill in any personal information, news snippets, and favorite links you would like to add.

  • slide 5 of 8

    Inserting Images

    A Screen shot showing available images to insert into a website If you would like to insert an image into the main content, it's as easy as placing your cursor where you would like the image to be inserted, and then clicking on insert in the file toolbar and select image. It will bring a window up that will allow you to select the image you would like to insert. These should be GIF, PNG, or JPEG files. You can learn more about different filetypes and which are best to use on the Image File Format Comparison article.

  • slide 6 of 8

    Adding Hyperlinks to Text

    A screen shot showing the properteis box in Adobe Dreamweaver CS5 To change a bit of text to a hyperlink, simply click and drag to select the portion of text and in the properties tool bar at the bottom where it says link, type in the URL you would like it to point to.

  • slide 7 of 8

    Saving Your Files

    A screen shot of Adobe Dreamweaver's Save function When you have finished making all the changes you need to, save the file and upload it to the same spot in your host directory as the old, existing file. Make sure you overwrite the file to see your changes.Here the file is saved with the file name index.htm

  • slide 8 of 8

    The completed web page. And there you have it! A fast, quick, and easy way to edit an existing website in Adobe Dreamweaver CS5 using the design function. The image to the right shows the edited web template.