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.
Opening your website 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.
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.
Editing your Website in Adobe Dreamweaver
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.
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.
Adding Hyperlinks to Text
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.
Saving Your Files
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
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.