Use Dreamweaver templates to unify the site style

Source: Internet
Author: User
Tags dreamweaver

The construction of Amon's home page is almost the same, but the problem also arises. In order to make the style of the entire website consistent, many webpages have the same layout, however, it is difficult to create a webpage with the same layout style every time. Amon is a lazy person. Ming Jian couldn't see it. Tell Amon to use the template, which is much more convenient.

What does a template mean? For example, in a batch of webpages with similar layout styles, for example, the titles and navigation on the webpage are the same, while the text below is different, you can use the template, template creation can fix the objects on the webpage that do not need to be changed, and then apply them to other webpages with similar styles. In this way, you can quickly create a web page by modifying only some pages. The following describes how to create a template.

Create a webpage

First, you need to make a webpage (as shown in Figure 1). During The webpage creation process, you must note that all the parts on the page that do not need to be changed are created in advance, and are determined at a fixed position. Reserve space for the part of the text to be filled in, such as the title area and text area of the article.


Figure 1 What are fixed and what are changes?

Save Template

Run the "File → Save As Template" command and select "Save As Template". In the displayed system dialog box, enter the Template name and click "Save. After saving, the title bar in the window has changed. The text "<>" appears in the title bar, indicating that the currently edited page is already a template.

Set template editable area

The most important task is to set the editable area of the template. Otherwise, the page generated using this template cannot be edited. First, select the cells in the page title area, and then run the "Modify/Templates/New Editable Region" command to create a New Editable area. A dialog box is displayed (as shown in Figure 2). Enter the editable region name "edit1" and press "OK, in this way, a tag of the editable area surrounded by {} is generated, indicating that the current area is an editable area. In the same way, set the editable area of the body. Save the template and exit.


Figure 2 enter the name of the editable area

Application Template

Create a new page in Dreamweaver, run the "Window/Templates" command to open the template control panel, and select a template that has been created in the template list area, click the Apply button on the panel to Apply the template to the page (as shown in Figure 3 ). Note that after the application, the yellow part of the page cannot be edited. In this case, you can delete the text in the editable area and enter the corresponding content, in this way, you can quickly create a webpage file.


Figure 3 the template application is so simple

Update Template

Sometimes you need to modify a template to change the webpage style. In this case, you can open the template file and modify it. After the template is modified and saved, a dialog box is displayed (as shown in Figure 4), prompting whether to update the corresponding webpage associated with the template at the same time, at this time, you only need to click the "Update" button to immediately Update all webpages created using this template, so that you can modify a page to make the entire website look new, greatly improving work efficiency.

<

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.