Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 8: Templates

Bài giảng Thiết kế web Dreamweaver CS4 - Chapter 4 introduce templates. This chapter presents content: Template basics, creating a template, defining editable regions, repeating region, adding a repeating region,...and another content.

Templates

Template: let you build pages that share a similar

structure and graphic identity

A new page based on a template, called a template

instance, you can edit only certain areas of the

page, called an editable regions

A Dreamweaver template can be very basic: one or more areas of a page (the editable regions) can be changed on pages built from the template, others

can’t (the locked regions)

Template Basics

Turning a Web Page into a Template: The

easiest way to create a template is base on a Web page in your current site folder

– You may run into problems with links and paths

to images, as described in a moment

– File ➝ Save As Template, template page is saved

in the Templates folder

– It adds the extension dwt

Creating a Template

Building a Template from Scratch:

– Window ➝ Assets and then click the Template assets icon, then click the New

– Type a new name for template

– After you’ve created a blank template for the site, you can open it by double-clicking its name

in the Assets panel

– It opens just like any Web page, so that you can get busy designing it

Creating a Template

By default, everything on a page is locked To make

a template usable, you must define the area or

areas you can change

– Selecting the part of the page you want to make changeable

– In the Common category of the Insert panel select Editable Region from the Template menu – Insert ➝ Template Objects ➝ Editable Region

– Type a name for the region click OK

Defining Editable Regions

Repeating Region

Some Web pages contain lists of items

If you were to make a template for either of these pages, you would add an editable region to the area of the page where these lists appear Just creating an editable region

However, wouldn’t give you any ability to enforce (or easily update) the design of these lists, because

everything within an editable region can be

changed

Adding a Repeating Region

Select the area of the template page you wish to make repeatable This area usually contains at least one editable region: single list item (the <li> tag), a table row (<tr> tag), or even an entire <div> tag

– On the Insert panel, select the Repeating Region option from the Templates menu

– Or Insert  Template Objects  Repeating Region

– OK

Repeating Tables

The repeating table tool to creating a table with

one or more repeating rows

To use the repeating table tool:

• Click the template page where you wish to insert the table

• On the Common category of the Insert panel, select the Repeating Table option from the Templates menu

Repeating Tables

– Or choose Insert ➝ Template Objects ➝ Repeating Table

Repeating Tables

– In the “Starting row” box, type the number of the row where the repeating region should begin

– In the “Ending row” box, type the number of the last repeating row

– Type a name for this repeating region OK

To remove a repeating region, select it by clicking the blue Repeat tab, and then choose Modify ➝Templates ➝ Remove Template Markup

Making a Tag Attribute Editable

An editable region lets you change areas of HTML:

a paragraph, image, or entire table that you create from a template

To limit these page authors’ editing abilities, or to allow change the source of an image used for a banner advertisement without letting them change the width, height, and class applied to the image

Tag Attribute Editable to specify which tag properties your successors can change

Making a Tag Attribute Editable

To make a tag attribute editable:

• Select the tag whose property you wish to make editable

• Choose Modify ➝ Templates ➝ Make Attribute Editable

Making a Tag Attribute Editable

• Make sure the “Make attribute editable” box

is turned onType a name in the Label field

• Choose a value type from the menu

–Text: when a property’s value is a word –URL: when the editable property is a path

to a file –Color: If the property requires a Web color

–Number: Use this choice for properties that require a numeric value

Adding Optional Regions

 Optional regions is simply part of a template page that you can hide or display on each template-based page

 To crate Optional region: select the HTML code you

wish to make optional, and do one of the following:

– On Insert panel, select the Optional Region option from the Templates menu

– Or Choose Insert  Template Objects  Optional Region

– In the New Optional Region window, type a name

OK

Optional Editable Regions

Optional Editable Region: inserts an optional

region with an editable region inside it

To use it, click in the template at where you’d like

to add it:

• Choose Insert ➝ Template Objects ➝ Optional Editable Region

• The New Optional Region window appears;

• Give it a name, and then follow the same steps out-lined previously for an optional region

Advanced Optional Regions

When you want several different areas of a page to

be either hidden or visible at the same time

By using Advanced optional regions, you can easily have a single region control the display of one or

more additional areas of a page

Advanced Optional Regions

Here’s how to do it:

– Create the first optional region

– Select the part of the page: an image, paragraph,

or table that you wish to turn into a second optional region

– On the Insert panel, choose the Optional Region item from the Templates menu

– The New Optional Region window appears Click the Advanced tab

Advanced Optional Regions

– Click the “Use parameter” button and select the name of the first optional region from the menu

 OK

Controlling regions with

expressions

You can program even more complex behaviors

using a basic expression language Ex: you want to

have a region appear when another region is invisible

Here’s how you’d control the navigation bar:

• Click the page where you wish to insert the navigation buttons

• Insert the highlighted (“You are in this section”) navigation button

Controlling regions with

expressions

– Click next to the highlighted button and insert the plain (“You can go here”) navigation button – In the Property inspector, select the highlighted navigation button and link

– On the Insert panel, choose Optional Region from the Template menu

– Type the name of the section into the Name field

– Click OK

Controlling regions with

expressions

– Use the Property inspector to select the plain button and link, and then click the Optional Region button on the Insert bar

– Click the Advanced tab; select “Enter expression”

– Type an exclamation point (!) followed by the name you  Click OK

Editing Optional Regions

To edit an optional region, first select it using one

Removing Optional Regions

To remove an optional region:

– Select it using one of the techniques listed previously

– Choose Modify ➝ Templates ➝ Remove Template Markup

– Dreamweaver removes most of the code associated with the optional region

Building Pages Based on a Template

To create a new document based on a template,

– Choose File ➝ New to open the New Document window

– Click the “Page from Template” button, and then, from the Site list, select the current site you’re working on

– All templates for the selected site appear in the right column Select the template you wish to use, and then click Create

Building Pages Based on a Template

– A new Web page document opens, based on the template

– Bearing a tab in the upper-right corner that identifies the underlying template name

– Dreamweaver outlines any editable regions in blue;

– A small blue tab displays each region’s name

Working with Repeating Regions

Repeating regions work a bit differently than editable regions

These regions are intended to let a page editor add repeated page elements: rows of product information in a list of products

To add a repeating entry

• Click the + button that appears to the right of

the Repeat region’s blue tab

Working with Repeating Regions

You can then edit any editable regions within the entry

• Click inside an editable region inside a repeating entry

• Click + again to add a new entry after it

Working with Repeating Regions

Changing Properties of Editable Tag

Attributes

An editable tag attribute isn’t immediately apparent on template-based pages

To change this properties:

• Modify ➝ Template Properties to open the Template Properties dialog box

Changing Properties of Editable Tag

Attributes

To change the value of a template property

• Select its name from the list and fill out the option that appears at the bottom of the window

• Click the “select a file” folder icon to browse

to select the file

• When you finished setting the editable properties for the page, click OK

Applying Templates to Existing

• Choose File ➝ Open

• Choose Window ➝ Assets

• Click Templates button Apply

Applying Templates to Existing

• Choose File ➝ Open

• Choose Window ➝ Assets

• Click Templates button Apply

Updating a Template

You can update a template and all the pages based on it:

• Choose Window ➝ Assets

• Click the Templates button

• Double-click the template’s name to open it

• Or you can select the template in the Assets panel, and then click the Edit button to open the original template (.dwt) file

Updating a Template

Edit the template as you would any Web page

• Choose File ➝ Save

• If you’ve already created pages based on this template, Dreamweaver opens the Update Template Files dialog box

• It lists all the files that use the template

• Click Update to update all files based on the template

• Click Close