Your code might look something like this:. This example defines a repeating list item. You wouldn't want the repeating region code defined outside the ul tags, or you'd create multiple lists in the child pages instead of multiple list items in one list. Using repeating regions in child pages is easy and fun. When you open a child page whose parent template contains a repeating region, and view it in Design view, you see a colored Repeat label with the name of the region, followed by a little set of control icons for adding, removing, and rearranging repeating entries see Figure To work with the repeating region, do the following:.
The code for the repeating region in the child page includes indications of where each iteration begins and ends:. Probably the most common use of repeating regions in web pages is to build a table in which one or more rows repeats and every cell contains an editable region. Price lists, company directories, and a whole host of other layout tasks work very well with this kind of repeating table structure. And guess what?
Dreamweaver provides you with a special object just for creating this structure. In the child pages based on this template, you use the repeating table exactly like you would use any repeating region. Nested templates let you define templates based on other templates, and then create child pages based on those templates.
It might sound daunting, but if you're willing to put a little extra thought into it, nested templates can make even extensive and complex websites easier to create and maintain. For instance, suppose you have an overall layout that you want all the pages in your site to have. That's your main template. But you also want some pages in your hierarchysecond- or third-level pages, perhapsto have additional page elements. Or you want an overall layout for all pages, but pages in different sections of your website should have additional requirements.
You can define one main template for the entire site and then additional templates for each section, or for each level of the hierarchy, that are based on the main template.
You have created a template based on a template. But the fun doesn't really begin until you learn how to handle editable regions, attributes, and other template features across your multiple generations of templates. You don't have to stop with one generation of nesting. It's possible to nest templates inside nested templates, as many generations deep as you like. When you nest templates, editable regions always begin in the parent template.
As shown in Figure The nested template can then lock part of any of these regions, so the child page retains only part of it as editable. If the nested template does not specify which portion of the parent's editable region should be locked, the entire region is passed to the child page as editable. When building the main template, you must keep in mind that you'll be defining editable regions for two purposes: some to be inherited by the nested template and locked there, and some to be passed down through the nested template to the child pages.
When building the nested template, keep in mind that if you do nothing to one of the parent template's editable regions, it is passed to the child page as an editable region. To lock part of one of the parent template's editable regions, define another editable region within it. For instance, a layout table in a parent template might have a row defined as an editable region; in the nested template, one of the cells in that row can be defined as an editable region, which automatically locks all other cells in the row.
Figure The code for the editable row looks like this:. The edit-row region is defined in the parent template; the edit-cell region is defined in the nested template.
Dreamweaver uses color-coded highlights to keep track of which editable regions have been defined where. By default, the labels for all editable regions defined in a parent template are aqua 66CCCC ; labels for editable regions defined in a nested template are gold FFCC What if you want a child template to lock an entire editable region from the parent template instead of locking part of it by making another part editable?
You can't do this, but you can create an empty editable region in the child template to accomplish your goal. In the nested template, place the insertion point anywhere in the parent's editable region, and create a new editable region. Then delete all contents from this editable region. Optional regions, editable attributes, and any other template parameter that appears in the Template Properties dialog box can also be used with nested templates.
As with editable regions, any template parameter defined in a parent template can be passed to nested templates to control, or can be passed directly to the child pages. Parameters defined in parent templates for control by child pages are called pass-through parameters , because they pass through the nested template.
After you've defined the pass-through parameter, each child page you create based on the nested template can set the parameter independent of all other pages.
Select the parameter, and set its value. This exercise builds and formats a small website using basic and advanced template features. Define a site called Chapter 20, with this folder as the local root folder. Start by opening the layout. This file holds the layout you'll use for the site, including a layout table and navigation banner, and a link to a CSS style sheet see Figure Make sure you're dragging the main template from the Assets panel and not the Site panel.
If you drag from the Site panel to the Document window, it just opens the main. If you drag from the Assets panel, it applies the template to the open document.
The code in templates might look like HTML comments, but that's just to fool browsers into ignoring it. This code is actually a scripting language a small subset of JavaScript, in fact that Dreamweaver uses to construct child pages from templates. If you want to become a true template power user, you should learn how to speak template. Templates and regions are defined with opening and closing tags that look like this as defined in the template :. Table Template parameters work like variables in a scripting language.
They're declared in the document head and can be used anywhere in the document. Dreamweaver uses them to set optional regions, editable attributes, and other template constructs, but you can use them for much more than this if you know the rules. Like variables in a scripting language, template parameters can be of various data types, for storing different kinds of information.
The parameter's name is how it can be referred to throughout the template; its value is the information stored in it. The general idea is to define a parameter in the template document and allow each child page to assign its own unique value. After a parameter has been defined, it can be called on anywhere in the document by using an expression, like this:.
It works like this: Anywhere in the template document that the expression is present, the child page substitutes the parameter's value. So if the template page includes the following expression in its code:. For this expression syntax to work properly, your parameter names must not include spaces or other special characters. Dreamweaver automatically creates parameters and expressions every time you define an editable attribute in your template.
But you can also create your own parameters, for use any way you like, using this same syntax. Imagine, for instance, that you have one template governing product display pages for several categories of products.
You could define a category parameter by entering the following code in the template head:. You could cause that category name to appear at the top of each page by entering an expression like this:. You have to enter the parameter definition by hand using Code view.
But you can create the expression in Design view by just typing in category and formatting it. When Dreamweaver notices that you've entered an expression here, it displays an expression placeholder where you typed your text, as shown in Figure The category parameter appears in the dialog box, ready to accept a new value.
When you're working with nested templates, and you want to define a parameter in the main template that will be controllable by child pages and not by the nested template , do so by opening the child template and adding a passthrough attribute to the parameter definition with a value of true :. Any time you tinker with code, there's the possibility that things will go wrong typos, syntax goofs, and so on.
You'll get either an error message or a clean bill of coding health. In scripting, a conditional statement indicates that something should happen only if a certain condition is met. Conditional statements generally involve testing the value of variables or parameters.
Every time you work with optional regions in your Dreamweaver templates, you're working with conditional statements. As soon as you know your way around conditional syntax in template language, you can start creating advanced optional regions.
The cond attribute must have as its value an expression that evaluates to true or false. For instance, if the head section of the template defines a parameter like this:. If the head section defines a parameter that isn't itself a Boolean, the conditional statement can use various comparison operators to determine if the optional content should display:.
As discussed earlier in the chapter, when you create a basic optional region using the Optional Region object, Dreamweaver defines a template parameter of the Boolean type and then uses a conditional statement that tests this parameter to determine whether the optional region should show:.
But you can create more advanced optional regions using other kinds of parameters and conditionals:. You'd have to work in Code view to define the parameter shown here. But you can create the optional region without working in Code view by using the advanced settings for the Optional Region object. Do it this way:.
But sometimes, you might have a parameter that can have any of several values, and you want to display different page content for each value if the category is JEWELRY, do this; if the category is HATS, do this; and so on.
For such occasions, the template language has a special kind of conditional called a MultipleIf statement. You can create templates in Dreamweaver by saving any page as a. You find more detailed instructions for creating templates in Dreamweaver in our tutorials section. This is a demonstration store. No physical products will be shipped.
Step 1: When is it best to use Dreamweaver templates? There are two big advantages to storing common website elements in a template: You can use the template to create new pages with common elements, such as logos and banners, already in place.
If you save the navigation bar in your template, you can then use the template to add new navigation links to all of the pages created from the template automatically — a real time saver. Step 3: Save the template When you save a file as a template, it helps to give it a special name you can use to identify the template later.
Step 4: All templates must be saved in the Templates folder Dreamweaver stores all of the templates you create in a folder called Templates, which it creates for you when you save your first template. Step 7: Name each editable region Each time you insert an editable region into your pge, you need to name it.
Step Editing a page created from a template After you create a page from a template, you can edit it as you would any other pages, inserting images, text, and multimedia into the editable regions — with one big exception. Step Changes are applied to all pages with the template is saved When you save a template with changes, Dreamweaver opens a dialog and gives you the option of updating all of the pages created from the template, or not.
February 11, at am. Rajesh says:. The most useful working view in Dreamweaver is the 'Split' View, accessed by clicking the 'Split' button in the top left of the working document window figure 2. This view enables you to simultaneously view the Code as well as the rendered Design View.
If you select a word in the Design View you'll see it highlighted in the Code View - and vice versa. The fact that you don't have to constantly flick between modes like in Adobe GoLive saves a great deal of time. In Dreamweaver CS4 the code window appears at the top of the working window.
This was changed to a side view in the subsequent CS5 version - which works better. I also find it useful when working in Dreamweaver to keep the Head Content visible, especially when working with templates:. As you'll see in figure 2 above, sandwiched between the Code and Design Views is a horizontal area containing a few little icons.
The ones that are encased in a blue box will be editable in pages that are based on this template. Any icons outside the blue boxes will not be editable outside this template.
0コメント