0 Cara Membuat Template sendiri

Tag

Creating a New Template from Scratch

Ever notice that most references (read: books) start out with a basic template already set, but almost none tell you how to get to that initial point? Hopefully this tutorial will help you understand the first part of using templates... Creating a new template from scratch.

A good place to start this tutorial is with a clear statement of the value, the purpose, and the operation of templates:

• The value of templates is that they allow you to control most (all?) of the pages in your small to medium site (~50 pages) by only manipulating several (one?) file(s).
• The purpose of templates is to provide a simple way to make sure that a) all dependent pages (child pages) have the same look and navigation, and b) to facilitate the maintenance of those pages.
• The operation of templates is to propagate all changes made to non-editable regions in the template file into all associated child pages. Thus, a single change in a template will appear in multiple pages automatically, while still allowing those child pages to contain unique (page-specific) content.

What you'll need:

• Dreamweaver MX 6.0 or 6.1 (preferably 6.1 since some template issues have been resolved. For more details, please read the updater release notes here, a synopsis of which, as related to templates, can be found here)
• A defined local site
• 30 minutes of your time

Methods of Creating a New Template

Like many procedures in Dreamweaver MX, there is more than one way to arrive at a desired goal.  Creating a new template page is no different in this respect, as there are several methods to make one. We will do our best to cover them all in detail in the following segments....

TIP: We cover .htm and .html file and template types in this discussion.  The exact same steps would be used if creating a new ASP, PHP, CFML, JSP or ASPX template and/or instance (child) page. There is one small difference with the templates though: dynamic page templates (those containing server-side code) are now saved with the language extension appended after the ".dwt".  For instance, a cfml template would be named "filename.dwt.cfm," or an asp template would be named "filename.dwt.asp." This was done by Macromedia to prevent the template's sensitive connection information from being viewable in the client browser as it was in earlier versions of DW using just the ".dwt" extension.

Method 1

1. File» New... [General Tab] Basic Page: HTML.
   (Also available from the Standard Toolbar | New button)

1. File» Save as Template...
2. Go to The Next Steps section of this document and continue...

Method 2

1. File» New... [General Tab] Basic Page: HTML Template.
   (Also available from the Standard Toolbar | New button)
   See figure in Method 1.
2. File» Save as... (DO NOT USE: File» Save as Template... since you have already specified that this file is to be a template!). Alternatively, you could use File» Save which will also bring up the "Save As" dialog.
3. Go to The Next Steps section of this document and continue...

Method 3

1. File» New... [General Tab] Template Page: HTML Template.
   (Also available from the Standard Toolbar | New button)

1. File» Save as... (DO NOT USE: File» Save as Template...).
2. Go to The Next Steps section of this document and continue...

Method 4

1. Open the Assets panel using F11.
   
2. Select the Templates asset group.
3. Click the Options Menu of the Assets panel and select New Template.
4. Provide a name for the template (file extension not required as it is automatically generated for you when you use the assets panel to generate a new asset), and press enter.
5. Go to The Next Steps section of this document and continue....

Method 5

1. Open the Assets panel using F11.
2. Select the Templates asset group.
3. Right Click (CTRL+Click) in the Templates asset group and select New Template.
4. Provide a name for the template (file extension not required as it is automatically generated for you when you use the assets panel to generate a new asset), and press enter.
5. Go to the Next Steps section of this document and continue....

Method 6

Use this method if you have the 'Show New Document Dialog on Control+N' disabled (unchecked).
Location of Preference setting for this is:

  Edit» Preferences... [New Document Category] Show New Document Dialog on Control+N

• Checked = Enabled;
• Unchecked = Disabled.

1. Press CTRL+N (Command+N).
2. File» Save as Template...
3. Go to The Next Steps section of this document and continue....

The Methods Concluded

As you can see, there are many ways to achieve the same goal. Each method produces exactly the same result. Method 3 or 5 are Brad's methods of choice, while method 1 is how Murray operates. You may, however, opt for one of the other methods that better suits your workflow with Dreamweaver MX.

TIP: After you create your template and save it the first time, each subsequent save should be done using File» Save or you run the risk of accidentally creating a nested template or worse, corrupting your existing template.

CAUTION: Prior to adding any links to url's, images, external css files, external js files or include files, save the template so that the links are managed properly from the outset. See Macromedia Technote 13842 for more information.

The Next Steps...

Q. What do you do with the template file now that you have created it?

A. This segment of the tutorial covers: How to open the template; Edit the content of the template; Make a new page based on the template instance (child); and Edit the content of the template instance (child).

Now what?

1. Open the template file that you just created. You may use any convenient method to do this.
2. Give the template a title ({sitename} Template).
3. Add your non-editable content (Site structural elements, graphics and navigational elements).
4. Add your template region(s).
   TIP: At least one region must be added to the body of the template or Dreamweaver pops up a message stating that the template has no editable regions.
5. Save the template using CTRL+S (Command+S), the toolbar save icon, or File» Save.
6. Close the template using CTRL+W (Command+W) or File» Close.

You have now created a page that contains all the layout, navigation, and 'boilerplate' content that will appear on every page in the site (well, at least all the pages that will be spawned from this template!). You have also created the 'slots' or editable regions into which each page's unique content will be placed.

Editing content in the template:

1. Open the existing template from your site panel or Assets panel.
2. Make changes to areas that are not editable regions.
3. Save the template using CTRL+S (Command+S) or File» Save.
4. Update associated pages - this pops up a dialog that you have to agree to or decline (there are reasons to do either of these). On agreeing, Dreamweaver MX updates the child pages, notifies you that it has done so, and then you must click the Close button when finished processing.
5. Close the Template using CTRL+W (Command+W) or File» Close.

To make new pages based on the created template:

1. File» New... [Templates tab] to create a "New from template" file using the newly created template.
2. Select your site in the Templates for: column.
3. Select your template from the Site "{sitename}": column.
4. Make sure the Update pages when template changes is checked.
5. Click the Create button.

1. Immediately save the page in your site using CTRL+S (Command+S) or File» Save as....

Editing editable region content in the template instance (child):

1. Open the htm/html file you just saved using any convenient method.
2. Change the page title from: {sitename} Template to something appropriate.
3. Edit where able (editable regions).
4. Save the page using CTRL+S (Command+S), the menu bar icon, or File» Save.
5. Close the template instance (child) using CTRL+W (Command+W) or File» Close.
6. Repeat for each page requiring modification.
7. Upload the modified file(s) to the server.

Conclusion

Well, there you have it! We have tried to give you all the information you need to start creating templates on your own. And, we have provided links to other tutorials and resources that will assist you in becoming even more comfortable with Dreamweaver MX Templates.

Artikel Terkait :