Dreamweaver Tutorial
Making a template page with a Repeatable Editable Region
October 28, 2010
Here's How:
Save the page as a template let's call it "site" Dreamweaver will add .dwt to the file...
You should be working on a page called site.dwt
Select the area of the page that you want to be repeatable, and make it an EDITABLE REGION
Let's name it "
Main Content"
Now do a save Contol S (PC)
Comamnd S (mac)
We will now make it into a nested repeatable template. This kind of a can be used as a web page that has up-dateable sections, like new News Releases, new tutorials, etc...
Create a new page fromm the site.dwt template File > New...
Immediately save it as a template, I'm calling it Tutorial.dwt
Select the SAME area as The existing Editable Region
And
make A repeatable area.
Insert > Template Objects > Repeating Region
Name it "New Tutorials" or the latest news
If you want a place holder for a picture Insert a picture in this repeatble region...
We will Now add Editable regions inside the repeatable region
Select the just the text area, and name it Content text,
Insert > Template Objects > Editable Region or
Ctrl+Alt+V (Windows)
Command+Option+V (Mac).
Name it "Content Text".
Select just the image and repeat
Insert > Template Objects > Editable Region or
Ctrl+Alt+V (Windows)
Command+Option+V (Mac).
Name it! "Picture"
Select the Date
Insert > Template Objects > Editable Region or
Ctrl+Alt+V (Windows)
Command+Option+V (Mac).
Name it! "Date"
Select the Title
Insert > Template Objects > Editable Region or
Ctrl+Alt+V (Windows)
Command+Option+V (Mac).
Name it! New Tutorial Title
Save the page as Tutorial.dwt
Go to File > New
Open the saved Tutorial.dwt file as a new page from template
Save the new page as Tutorials.html
You should see the following in Dreamweaver
+ creates a new region that allows you to add new content
- deletes the latest entry
The arrows move the location of the story up and down the page
Making a template page with an Editable Region
October 28, 2010
Here's How:
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."
Now Here's the Rest of the Story
- 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.