Dynamic Web Templates

Size: px

Start display at page:

Download "Dynamic Web Templates"

Scarlett McDowell
5 years ago
Views:

1 Dynamic Web Templates This section describes how to create and implement a Dynamic Web Template to ensure consistent design throughout your site and to simplify the creation, updating, and management of your site. Introduction A Template provides the basic foundation for a series of web pages that share the same layout and other common elements. They are best used when you want a set of pages to have an identical layout and/or when you want to design the final layout for a set of pages first, and then add content later. Templates are particularly useful in an environment where a designer controls the page design while others add content to the pages but are not allowed to change the design. A template is a linked asset when you link a page to a template, the page automatically contains all of the objects from the original template including any text, graphics, banners, navbars, colours, links, etc. A page linked to a template is automatically updated whenever you make changes to the template, therefore templates make it easier to maintain a Web site because you can make a change in a template and update dozens of pages in seconds. When you create a template, you specify which elements of a page based on that template should be locked (i.e. non-editable), and which elements can be changed. This makes templates particularly useful when you want to retain the same page layout throughout your site and in an environment where a designer controls the page design while others add content to the pages but are not allowed to change the design. You can edit a template even after you have created pages based on it. When you edit a template, the locked (non-editable) regions in documents that are based on the template are updated to match the changes to the template. You can edit any item in a template whether it is marked as editable or locked; however, if you open a page based on a template file, you can only edit the regions that are marked as editable. You must be in Design view for most template-related operations to be available. Building your Template There is no single correct way to build a template the method you choose will depend on the design you have chosen for your site. Identifying Template Items At this point, you should have a clear idea of the overall design of your site and the underlying structure that will be common to all of the pages. You will also have determined which elements will appear on every page. Your site folders and pages should have been created, and you should also have created the graphics needed for the site Camosun School of Business Page 1 ABT 294 Course Pack

Items to be placed in the template include all of the items that will appear on every page, plus the addition of editable regions in which to place the page-specific content.

These two regions are locked to prevent them from being edited on individual pages.

2 Items to be placed in the template include all of the items that will appear on every page, plus the addition of editable regions in which to place the page-specific content. In the layout shown below, region 2 contains the page banner and navigation bar (or menu) and region 4 contains the footer (usually containing text hyperlinks and update indicators). These two regions are locked to prevent them from being edited on individual pages. Regions 5, 1 and 3 are used as editable content areas, so that pagespecific content can be updated on the individual pages in the site (regions 1 and 3 have been combined in the illustration below). Hyper Linking in Templates When you create a link in a template file use either the Point-to-File button or the Browse for File button in the Property Inspector to select the file. If you type the pathname, the link may not work as expected Camosun School of Business Page 2 ABT 294 Course Pack

1) Choose File Save as Template. The Save as Template dialog box will be displayed. 2) Select a site from the Site pop-up menu then type a name for the template in the Save As field. 3) Click Save.

3 Creating a Template Templates can be created from existing documents, or you can create them from scratch. Creating a Template from an Existing File 1) Open the page that you want to use as a template. If the document is based on a template, detach it so that you can save it as a template in its own right. 1) Choose File Save as Template. The Save as Template dialog box will be displayed. 2) Select a site from the Site pop-up menu then type a name for the template in the Save As field. 3) Click Save. Dreamweaver saves templates with the file extension.dwt into a folder named Templates in the local root folder of your site. If the Templates folder does not exist, Dreamweaver creates it automatically for you. It is important that you do not move templates out of the Templates folder, or move the Templates folder out of your local root folder. Moving a template or the Templates folder creates errors in the paths in the templates. 4) A Dreamweaver message box may appear asking if you would like to Update Links. Since the page is now located in the Templates folder, click Yes to ensure that your links will still work Camosun School of Business Page 3 ABT 294 Course Pack

Creating a Template from Scratch Dynamic Web Templates 1) Choose Window Assets to display the Assets panel then click the Templates button located at the left of the panel to display the list of

4 Creating a Template from Scratch Dynamic Web Templates 1) Choose Window Assets to display the Assets panel then click the Templates button located at the left of the panel to display the list of available templates. 2) Click the New Template button located at the bottom of the Assets panel. A new, untitled template will be added to the list of templates. While the new template is still selected, type a name for the template Camosun School of Business Page 4 ABT 294 Course Pack

Setting Template Page Properties Page properties should be set directly in the template because a web page based on the template inherits all of the page properties from the template, except for the

5 Setting Template Page Properties Page properties should be set directly in the template because a web page based on the template inherits all of the page properties from the template, except for the page title. You can change the page title in a page based on a template, but you cannot change any other page properties. 1) Open the template and choose Modify Page Properties. The Page Properties dialog box will be displayed. 2) Use each of the tabs in the Page Properties dialog box to select the page properties you require (such as the base font, page colours, link colours, headings, etc.) and click OK. 3) If you already have pages attached to the template, Choose Modify Templates / Update Pages and select your options to update any pages based on the template. Adding Content 1) Open the template and add the content that will be common to all of the pages that will be attached to it (e.g. banner, navigation bar, and footer) Camosun School of Business Page 5 ABT 294 Course Pack

By default all regions of a new template are locked or non-editable.

6 Defining Editable Regions An editable region is an area of a page that can be changed in documents that are attached to a template. A locked (non-editable) region is an area of the page (such as the overall page layout) which cannot be changed in documents attached to a template. By default all regions of a new template are locked or non-editable. Before you create any new pages based on the template you must create some editable regions to hold the content that will vary from page to page. When you work in the template directly, you can edit both locked and editable regions; however, in documents attached to the template you can only add and edit content in the editable regions. Inserting an Empty Editable Region 1) Position the insertion point or select the area where you want to place the editable region. Note: You can mark an entire table, table rows, or an individual table cell as editable but you cannot mark multiple table cells as a single editable region. 2) Choose Insert Template Objects / Editable Region. Enter a unique name for the region (using standard alphanumeric characters with no spaces or symbols) into the New Editable Region dialog box. 3) The editable region is inserted into the template as a placeholder and is shown in the template enclosed in a highlighted rectangular box. A tab at the upper left corner of the region shows the name of the region. On the screen below, the selected table cell has been made editable, and the editable region has been named MainContent 2011 Camosun School of Business Page 6 ABT 294 Course Pack

7 4) When you work in a document based on the template you can select the region and replace it with text, images, or other content. Viewing Editable and Locked Regions Editable regions show in the document window surrounded by rectangular outlines. A small tab appears at the upper left of each editable region showing the name of the region. In addition, pages based on templates show in the document window with the entire page surrounded by a colored outline, with a tab at the upper right giving the name of the template that the document is based on. Removing an Editable Region You can only remove an editable region if you are working directly in the template file. 1) Open the template. 2) Select the region that you want to remove. 3) Choose Modify Templates / Remove Template Markup and click OK Camosun School of Business Page 7 ABT 294 Course Pack

8 Attaching and Detaching Templates You can create new pages based on a template or you can attach a template to existing Web pages. Basing New Pages on a Template 1) Choose File New to open the New Document dialog box. Select the Page from Template tab (located on the left hand side of the dialog box) and then select the Site that contains the template on which to base the page. 2) Select the specific template from the list of templates that are available in the selected site. By default, when you make changes to a template, any document based on that template is updated to reflect changes in the template. However, if you want to create a static copy of the template that is an independent HTML file with no locked or editable regions, you can deselect the Update page when template changes option in the New Document dialog box. Deselecting this option is equivalent to creating a new document based on a template and then detaching the document from the template Camosun School of Business Page 8 ABT 294 Course Pack

Attaching a Template You attach a template to a page when you want to be able to transfer the content of the template into your existing page and automatically control the content of the locked

9 Attaching a Template You attach a template to a page when you want to be able to transfer the content of the template into your existing page and automatically control the content of the locked regions of the page using the template. 1) Open the page you want to attach the template to. 2) Choose Modify Templates / Apply Template to Page to display the Select Template dialog box. Select the Site containing the template, and then select the template to attach from the Templates list. Make sure that the Update page when template changes option is selected unless you want to simply create a static page containing the template items. Click Select. 3) If content already exists on the target page, the Inconsistent Region Names dialog box opens so that you can assign the existing content to one of the editable regions defined in the template Camosun School of Business Page 9 ABT 294 Course Pack

4) Select a region that is flagged as <Not resolved>, then use the Move content to new region option to select the destination region for the unresolved content.

10 4) Select a region that is flagged as <Not resolved>, then use the Move content to new region option to select the destination region for the unresolved content. Click OK once the new location(s) for existing content have been resolved. Note: You can also open a page, select the desired template in the Templates section of the Assets panel and click the Apply button. You must assign all of the existing content in the document to an editable region of the template using the Inconsistent Region Names dialog box otherwise the content will be discarded. Detaching a Template You detach a template from a page when you want to be able to edit the non-editable (locked) regions, and when you no longer want the page to be updated automatically by the template. Once the page is detached it becomes a normal HTML document. 1) Open the page you want to detach the template from. 2) Choose Modify Templates / Detach from Template. Updating Pages Based on a Template Whenever you make changes to a template, Dreamweaver prompts you to update the pages that are based on the template. You can also manually update the current page or the entire site using the update commands. Modifying the Template Attached to the Current Document 1) Choose Modify Templates / Open Attached Template. 2) Modify the content of the template as desired. The locked regions of the current page will be updated Camosun School of Business Page 10 ABT 294 Course Pack

11 Updating the Current Document 1) Choose Modify Templates / Update Current Page. Dynamic Web Templates Updating an Entire Site or Pages Based on a Particular Template 1) Choose Modify Templates / Update Pages to display the Update Pages dialog box. 2) To update the entire site, choose Entire Site from the Look in list, and then choose the site name from the adjacent pop-up menu. This command updates all pages in the selected site using their corresponding templates. To update pages that use a particular template, choose Files That Use from the Look in list, and then select the template from the adjacent pop-up menu. This updates all pages in the current site that use the selected template. 3) Select Templates in the Update option. 4) Click Start. Dreamweaver updates the files according to the selections you made in the Update Pages dialog box. The Show Log option provides information about the files it attempts to update, including information on whether they were updated successfully Camosun School of Business Page 11 ABT 294 Course Pack

Deleting and Renaming Templates Deleting a Template Dynamic Web Templates 1) Select the template you want to delete in the Assets panel. Note: You cannot retrieve deleted template files.

12 Deleting and Renaming Templates Deleting a Template Dynamic Web Templates 1) Select the template you want to delete in the Assets panel. Note: You cannot retrieve deleted template files. 2) Click the Delete button (garbage can icon) and confirm that you want to delete the template. Documents that were based on the template are not detached from it; they retain the structure and editable regions that the template file had before it was deleted. To turn the page into a normal editable HTML file, choose Modify Templates / Detach from Template. Renaming a Template 1) Click the name of the template in the Assets panel to select it. Pause and then click a second time to open the name for editing Camosun School of Business Page 12 ABT 294 Course Pack

2) Type a new name and press <Enter>. The Update Files dialog box will be displayed. 3) To update all documents in the site based on the template, click Update.

Setting Template Preferences Dreamweaver allows you to set your preferred highlight colors for the outlines surrounding the editable and locked regions of templates.

13 2) Type a new name and press <Enter>. The Update Files dialog box will be displayed. 3) To update all documents in the site based on the template, click Update. If you do not want to update linked documents, click Don't Update. Note: You can manually update linked documents any time by choosing Modify Templates / Update when the template is open for editing. Setting Template Preferences Dreamweaver allows you to set your preferred highlight colors for the outlines surrounding the editable and locked regions of templates. 1) Choose Edit Preferences and select the Highlighting category. 2) Use the color boxes to select a highlight color using the color picker for the Editable and Locked regions. 3) Use the Show buttons to enable or disable the display of the selected colors in the Document window then click OK. 4) If you do not see the colours in the document window, choose View Visual Aids / Invisible Elements 2011 Camosun School of Business Page 13 ABT 294 Course Pack

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special. This section describes how to add content to your pages including text, Microsoft Office documents, images, Flash, and other media content. Inserting Text To add text to your document, you can type the