Tips on making and applying templates with Dreamweaver

Author：Eve Cole Update Time：2009-06-01 01:03:03

With the popularity of the Internet, many people are no longer satisfied with just surfing the Internet, but want to participate in it in depth. Now, having your own Web site has become a trend. Although it is not difficult to make a simple web page, it is not so easy to make an extraordinary website. Therefore, we have specially prepared a series of tutorials for you on the latest website design software Dreamweaver MX 2004. We hope it will be helpful to you.

Usually there are dozens or even hundreds of pages with basically similar styles in a website. It would be very troublesome to reset the web page structure and the navigation bar and various icons under the same column every time. However, we can use Dreamweaver MX 2004’s template function to simplify operations. In fact, the function of a template is to separate the layout and content of a web page. After the layout is designed, it is stored as a template. In this way, pages with the same layout can be created through the template, which can greatly improve work efficiency.

1. Make a template

Making a template is exactly the same as making an ordinary page, except that you don't need to make all parts of the page. You only need to make the public parts of each page such as the navigation bar and title bar, and fill the middle area with the specific content of the page. .

Step 1: First run the "File→New" command in Dreamweaver MX 2004, then select the "Template page→HTML template" option from the window shown in Figure 1, and click the "Create" button to create a template document.

Step 2: Insert the web page frame, navigation bar, Flash title and other elements common to all pages in the page design view (Figure 2), and then run the "File→Save" command to save the template.

Tip: You can first download a web page you like, then open it in Dreamweaver MX 2004, keep only the frame and other elements, and then save it as a template through the "File→Save as Template" command, which can save a lot of time in making templates. .

In order to avoid changes in elements in the template caused by misoperation during editing, the content in the template is not editable by default. Only after a certain area or a certain text is set to editable can it be changed in the document created by the template. this area. First use the mouse to select a region (that is, the region with different content on each page), then run the "Modify→Templates→New Editable Region" command, and set a name for this region in the pop-up dialog box, and you are done. Edit area settings.

Tip: After setting the editing area, you need to run the "File→Save" command to save the changes.

2. Use templates

After you have the templates, you need to use them when editing web pages. As long as you run the "File→New" command in the main window of Dreamweaver MX 2004, you will see the new window shown in Figure 1, and then enter the "Templates" tab to view the saved templates. You can also select one from them on the right Preview in the preview area (Figure 3), and finally select a template you like and click the "Create" button at the bottom to open this template.

In the opened template, the areas that cannot be edited will be highlighted, but some locations are locked areas but not highlighted. This is mainly because the picture just covers the background color. In this case, you can run the "Edit→Preferences" command, select the "Highlighting" item in the "Category" list of the pop-up window, and then select the "Show" option next to "Locked regions" in the right area (Figure 4 ), and set the highlight color to blue, so that you can clearly identify the locked area in the template.

Tip: If you still can't see the highlighting effect, you can also select the "View→Visual Aids→Invisible Elements" command in sequence.

Finally, we only need to add the content of the web page in the editable area, such as adding some text descriptions or inserting corresponding pictures, and finally save the page through the "File→Save" command.

3. Modify and replace templates

After creating several pages through a template, if you need to change the page or add columns, it will be very troublesome to manually modify all the pages. Therefore, we can solve this problem through the template modification function of Dreamweaver MX 2004. For example, after we modify the template, run the "File→Save" command to save the template. At this time, a prompt box will pop up asking whether to update all pages that use the template (Figure 5). After confirmation, the updated page will be displayed. The total number and updated time and other information.

In addition, Dreamweaver MX 2004 also provides a function to change templates for web pages. Changing templates is a bit like changing clothes for people. You only need to make various templates and then wear whatever you want. However, templates cannot be replaced casually. The conditions for replacing templates are that the page to be replaced must be created through a template, and the number and name of the editable areas on the page must match the number and name of the editable areas of the template to be replaced. consistent. For example, there are three editable areas in a web page, named t1, t2, and t3 respectively. There is also a template. No matter what the structure of this template is, as long as it also has 3 editable areas and the names are t1, t2 and t3, then you can use it to replace the original web page with a new template, and the 3 editable areas on the page can The content of the editing area accordingly remains unchanged. The specific method of replacing templates is also very simple. Just run the "Windows→Templates" command to open the template panel. At this time, you can select the appropriate template from the upper area, and then click the "Apply To Page" button, so that the template replacement operation can be completed quickly. .

Tip: Use this function to create summer and winter versions of the website homepage, which makes it very convenient to change the template.

In fact, there is a lot of related content about templates, but due to space limitations, I can only select some introductions. I hope everyone can draw inferences from one example and fully understand the subtleties of templates.