This is a continuation of the MagicEdit Dreamweaver tutorial series. The other tutorials in the series are:
In this tutorial you will learn how to create a 'template' HTML page and use MagicRepeat to create new pages from that template. It's easier than you think!
Let's continue on from Part II and create web pages for each of the employees in our client's company. Just as before, our client wants to be able to add, remove, and edit the employees, so we'll use both MagicEdit and MagicRepeat in this exercise. First, create a new HTML document and call it "Employees.html". Then, make a simple list that will serve as a navigation menu (our menu will be left nav for ease of viewing, but you can put it anywhere you want):
<h3>Employees</h3> <ul> <li> <a href="Employees.html"> Employee Name </a> </li> </ul>
To make the Magic work on the navigation, we'll wrap the
magicrepeat tags and the Employee Name placeholder text in
magicedit tags. (Make sure you include
me_name; we'll explain what that is in a bit.)
<h3>Employees</h3> <ul> <magicrepeat> <li><a href="Employees.html"> <magicedit me_plain me_name="employee">Employee Name</magicedit> </a></li> </magicrepeat> </ul>
You may have noticed that the navigation item we created points to its own page (Employees.html). MagicEdit will automatically create a new instance of the Employees.html page based on the existence of an
<a> tag in a MagicRepeat. All we have left to do now is create an editable template for the Employees.html page and we're all set.
Let's assume the client wants each employee's page to include their name, a photo, and a short biography. In Dreamweaver's split view, it will look something like this:
This is all you need for the template page. We called MagicEdit three times in this example. The first time it is used as an attribute in the
img tag. We used a square placeholder image, but you can specify any size you want. When the client replaces the image with one of their own, it will be resized (and cropped, if necessary) by MagicEdit to fit this exact size specification.
The other two instance of MagicEdit are text regions and both have the
me_name attribute we mentioned before. Inside the
h2 region, you'll notice the attribute
me_name="employee", which is the same as the
me_name we used in the sidebar. This feature enables the client to change both the
h2 region and the nav menu item by editing only one of the two items. Since they share the same name and are tied to the same repeat, they will be replaced with the same value.
In general, it's a good idea to use
me_name on every MagicEdit region, especially MagicRepeat regions. For more information on the
me_name attribute, see the documentation on MagicEdit Tags and MagicRepeats.
Push your changes up to the server. Now your client can log in and add/edit/delete employees to his heart's content.
Next up: MagicEdit forms