Dreamweaver Tutorial
Making a template page with an editable region
Tidy up your html page first.
Note: To make this work properly, the web page needs to have the css styles placed in an external style sheet. That way the template procedure won't "lockout" the styling for your web page. You can review the Basics CSS Rules on the class home page under the CSS Tab
The link for this web pages CSS Rules file "classpages.css" looks like this:
<link href="../styles/classpages.css" rel="stylesheet" type="text/css" />
the href="../styles/classpages.css" is the path to the style sheet "classpages.css" in the folder "styes."
Here's How:
- Save the .html file as a template.
Menu: File > Save As Template... - Name the file so that you can easily identify it as a site template with an editable region like "Editableregion"
Dreamweaver automatically adds the extension .dwt to the file. If you don't have a Templates folder Dreamweaver will automatically make the folder and insert your template file "Editableregion.dwt" inside the folder.
In Dreamweaver you will now be working in the file Editableregion.dwt (check the file tabs to confirm this.)
Making the Editable Region
We are doing this so that Only the Content Area of the page is changeable well editable...
- Highlight the content area
- Goto Menu:
Insert > Template Objects > Editable Region - Name it "Main Content"
You should see the Turquoise Main Content tab at the top of the content area
Now save page as Editablergion.dwt with Menu: File > "save"
Now go to Menu: > File New
and load a new page based on the termplate you just saved.
It will look exactly the same, except now the "Do Not Touch" cursor Circle With a Slash will appear when you pace your cursor over the non-editable regions...
Save the page as an .html
I'm naming this page "Editableregion.html"
Next
How to make a website with a repeatable editable region template.