Active Articles: 2038
Total Categories: 16
Sub Categories:616
Dreamweaver Tip: Build Better Websites Faster with Templates |
|
| Date Added: April 07, 2008 12:00:00 AM | |
| Author: Samuel Mela | |
| Category: Tips and Tutorials: Dreamweaver Tips and Tutorials | |
Dreamweaver templates relieve you of much of the tedious job of editing individual web pages, because you create the template one time then apply it to initial pages in your site. If you want to make changes alter, you can make them to the template and they are automatically applied to all of the pages that are based on your template. Using Templates is a two step process: 1. Create the template. 2. Instantiate the template into one or more actual web documents. So when should you use a template? How do you create it? How do you apply it? How do you make changes to a template and update the pages it applies to? The following sections will answer these questions. When to Use a Template Use a template whenever you have a group of pages that share a basic common group of layout features, and well defined areas that need to be customized. For example, you might use a template to define a group of pages with a three column layout, a common background color, and common menu bar at the top of the page, possibly common links on both sides of the page, and only the center column of the page left available for customization. How to Create a Template Dreamweaver gives you two methods to create a template, but this article discusses only the second method. The methods are: Create a template from an existing page. Create a template from a new page. Here are the steps to create a Dreamweaver template from a new page: 1. Click the File menu, then click New. 2. A ""New Document"" dialog box will pop up. In the left column (the Category column) of the dialog box select Template page and in the right column (the Template column) select ""HTML template"". Click the Create button in the lower right corner of the dialog box. The template is created. Now save the template as follows: 1. Click the File menu, then click Save. 2. You may get a Dreamweaver message complaining that the template has no editable regions. Ignore it, and click OK. 3. Now a ""Save as Template"" box will pop up. Type the name you want for the template in the bottom entry field, which is labeled ""Save as"". Dreamweaver will automatically create a Templates folder and save the template into it. The template will have a "".dwt"" file extension. Populate the Template To populate a simple Dreamweaver template, follow these steps: 1. Add content 2. Mark content as editable where applicable A detailed description of these two steps follows: Adding content to a Dreamweaver template is the same as adding content to any other page -- except . . . you should think carefully about the fact your content will be replicated on all instance pages based on your template. As an example, you might do a table based three column layout, where the first row of the table is just one cell containing a graphic, and the second row of the table contains three cells -- links on the left, links on the right, and an editable region in the center. You create the table, and then add the top graphic and the links as you normally would. This leaves only the center cell of the second row of the table to be marked as editable. Do this as follows: 1. Select the center cell of the second row of the table. 2. On the ""Common"" Bar, click the Templates popup menu, then click the Editable Region command. 3. A ""New Editable Region"" dialog window should pop up. Type a name (for example ""Content1"") into the ""name"" text box, then click OK. Now the template has an editable region. Save it. Create a Page Based on the Template This is where you get a return on the work you did creating your template. The following steps describe how to create a page based on a template. 1. Click the File menu, then click New. 2. A ""New Document"" dialog box will pop up. Select the ""Templates"" tab at the top of the dialog box. 3. Now there should be two columns at the top of the ""Templates"" tab in the dialog box. The first column is labeled ""Templates for:"" and the second column is labeled ""Site [site name]"". In the first column, select your site; then in the second column, select your template. 4. Select ""Update page when template changes"" in the lower right corner of the tab. 5. Now click Create in the lower right corner of the tab. 6. A new untitled page should now have been created. Save the page, giving it the name you want. Now you can make changes in any of the editable regions of the new page. At this point, making changes is very simple, because Dreamweaver will only allow you to edit regions of the page that were defined as editable in the original template. If you try to edit anywhere else, the editing cursor will turn into a little circle with a slash through it and you cannot edit or delete anything. When you are done customizing the page, save it. If you make any changes to the template in the future, they will be automatically added to the page you just created. Conclusion If you would like to know more of the under-the-hood mechanics of how Dreamweaver implements templates, see my article ""How Dreamweaver Templates Work"". Sam Mela does web design and runs a math tutoring business in Springfield Virginia. His web site is http://www.WeekendSuccess.com RELATED ARTICLES & TUTORIALS
Before you can publish in Dreamweaver, you must set up a ""home base"" folder where your website will live on the local hard drive of your computer. Once this is in place, you can use Dreamweaver's FTP feature to ""get"" and ""put"" the HTML files from your loc Dreamweaver Tip: Add Some Meta Tags to Your Web Page Meta tags are invisible tags that can be added inside the head tag of a web page. By ""invisible"", I mean they do not show up in a browser when the web page is viewed. Cool Rollover Buttons & Pop-Up Menus In Dreamweaver Adding a rollover button to a webpage with Dreamweaver is a really simple task...if you have the button images ready to go. Macromedia Dreamweaver MX Snippet: Create It and Use It! The Macromedia Dreamweaver MX have these powerful new addition to its toolset – introducing, Snippets! Do you often use blocks of code? Well, snippets make it easy to save it or put it over the same conversion on a block already written on your page. It a Dreamweaver Templates -- How To Save 1000 Of Hours Using Them! Now you may think “OK, you are going to talk about fancy web templates out there which may save my initial designing effortsâ€. No, I am going to talk about “how to make whatever template you choose a BIG-Time-Saverâ€. |
|
|
|
|
|
The views and opinions of authors expressed on Zeronese Webmaster Article Directory web sites do not necessarily state or reflect those of the Zeronese.net . |
|
