Part I. Instantly Transform Any Static Site Into a CMS

This is the first in a series of MagicEdit Dreamweaver tutorials. The other tutorials in the series are:

Make Text Regions and Images Editable Using MagicEdit and Dreamweaver.

This tutorial covers the most basic (and important) feature of MagicEdit: the magicedit tag/attribute. You will learn how to add MagicEdit to your HTML using Dreamweaver and instantly transform any static website into a CMS site.

Step One: Create Your HTML Document

Let's start with a very basic HTML document. Create a new, blank HTML page in Dreamweaver and create a line of text or paragraph, like so:

   <p>MagicEdit makes it easy to instantly transform any static site into a CMS.</p>

Step Two: Make Some Magic

Now we will make the placeholder paragraph editable. Switch your view to "Split" mode by clicking the Split button at the top of your viewing window.To accomplish this, all we have to do is wrap the paragraph in <magicedit></magicedit> tags:

Push the files up to the server and open your site in a web browser. After logging in, you'll notice a red edit button next to the text you added and, if you click it, you can change the text to whatever you want. Now let's continue with MagicEdit Images.

Step Three: Editable Images

If your client wants the ability to update an image on his or her site (and trust me, your client wants that ability), MagicEdit images are the answer. All you have to do is add the magicedit attribute to your image tag and you're all set! The content manager can click the edit button and upload a replacement image. By default, MagicEdit will resize any new image to fit the space occupied by the original image. And when we say resize, we mean that MagicEdit will actually resize the image on the fly, not just use the browser to squeeze a large image into a small space.

Let's use a placeholder image and set its width to 200px. Don't forget to add the magicedit attribute:

Push the file back up to the server, log in, and click edit to change the image. That's all there is to it!

Wrapping Up

You just learned how to give your clients basic editing capability on text regions and images, and it only took a couple of minutes. Just the simple application of <magicedit> tags around a text region or adding the magicedit attribute to an image tag makes those objects editable to the content manager, right from within their web browser. Visit our MagicEdit tags section for more information about Images and Images.

Next up: A simple use case for adding and deleting regions using MagicRepeat.