Using the template

When the HTML file that I have created by saving it in Photoshop, by opening it in Dreamweaver, it will automatically put the sliced images in order as how it supposed to be. Just like the layout I have made in Photoshop.

The next thing to do is just inserting the editable region in the places where 'the content' will change. So for example, in my case, I wanted the red bar that is just below the banner to show the title of the currently viewed page, so I will put an editable region in that 'red bar' area. And also I put an editable region in the content area, because the content will change accordingly to the page.

After putting the editable region and save it as a template, I can then make new pages from that template. The purpose is to save me the time of making another layout for every page I was going to have, and also with only the editable region, I could not mess around with the other elements of the page (i.e: the buttons, the banner).

Then after getting the editable region done with, you can start typing inside the region. Although, I was having a bit of problem with the image background of the editable regions. It kept on getting itself deleted every time I tried to type in something on it. So, the way to solve it is by selecting the image in the editable region and deleted it. Then, go to the CSS style properties of that area, and in the background category, manually insert the image of it to the 'background-image". So for example, my red bar image name is "redx20bar", I deleted the image and then go to the CSS rules table and find its name, then I go to its properties and manually insert the red bar image back from the images folder when it prompted me to do so.

That way, anything that I typed inside that editable region will go on top of that background image without having the image disappear.