Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using template parameters

From: Dreamweaver CS3 Beyond the Basics

Video: Using template parameters

In this movie we will continue to create the nested template we began in our last exercise. Make sure if you are following along that the aimee.htm file is still open from the previous exercise. Now often when creating a series of pages like our biographies, you are going to find yourself changing the same information over and over and over again, and in this case for each artist. To make the process of creating those pages based off of our nested template easier, we will use template parameters and template expressions to do a lot of the work for us. Before we can do that, we need to save this as a nested template, because right now it's still a HTML page.

Using template parameters

In this movie we will continue to create the nested template we began in our last exercise. Make sure if you are following along that the aimee.htm file is still open from the previous exercise. Now often when creating a series of pages like our biographies, you are going to find yourself changing the same information over and over and over again, and in this case for each artist. To make the process of creating those pages based off of our nested template easier, we will use template parameters and template expressions to do a lot of the work for us. Before we can do that, we need to save this as a nested template, because right now it's still a HTML page.

So let's go to file and you want to scroll down and find Save As Template. I am going to save this as a template, so this is going to be our third template. Since it's going to be based off of the cheek_artist template, I am actually going to call it cheek_artist_bios and I am just going to call this my biography artist template. That's going to pass along information that's used to build our bio pages. So we'll hit Save. It's going to ask me if I want to Update Links and I am going to say yes.

So now this is another template. You can see up top it says cheek_artist_bios.dwt, but it's based off of the earlier cheek_artist template. So if I update the cheek_artist template, the locked regions here will update into this template, which will in turn propagate down to any pages based off of this, which is exactly what we are wanting. Now we still need to define some editable regions here, because we have got areas of the page that are going to change. So I am going to highlight the artist's name, in this case Aimee Hutchins, and I am going to go to Insert > Template Objects > Editable Region and we will call this one, Artist Name. Now, notice what happened when I did that. We have got an editable region here called Aimee Hutchins, it's the artist's name one, and now the artist info tag that used to be sort of that teal color is now kind of a yellow color.

If you are kind of wondering where this color scheme is coming from or what any of this stuff means, you can go up to your Preferences. So on the Mac go up to Dreamweaver > Preferences, on the PC you go to Edit > Preferences, and you want to take a look at the Highlighting category. You can see that we have a list of areas and different colors that will be used to highlight those. So editable regions are that teal color and then nested editable regions come in as a yellow color. If you want to change the color scheme, go right ahead, but if you are working in a collaborative environment, make sure that everybody is on the same page as to what color means what, because if yellow means one thing to you and something to somebody else, then it can really get confusing. So I'll go ahead and click OK.

So Artist Info is a nested editable region, and it has the Artist Name editable region inside of that. Let's keep going. Start from the T, this is where I will make some text up, start from the T and not the image, and select all the way down to select all of the bio information. Now don't select the link Aimee's Gallery. Let's not select that. Let's leave it unselected and we will talk about why we are not going to make it a part of our editable region here in just a moment. So let's go to Insert > Template Objects > Editable Region and we are going to call this editable region Artist Info. So now we have the Artist Name and the Artist Info and that's going to need to change every single time we do a bio page.

Now one thing that you will notice that I haven't changed yet, I didn't change the banner graphic, we didn't change the headshot, and we didn't change the length of the gallery. That's because we are going to take advantage of something called a template parameter. Now a template parameter can either be created by Dreamweaver when you do something like an editable attribute or you can create them yourselves. So you can create your own custom template parameters and then use them to modify objects or items on the page. Before we create our own, let's actually go back and look at a template parameter, and a template parameter being used.

I am going to go ahead and open up the cheek_main.dwt and when I open that up-- I am going to switch over to Code View. I'll scroll up to the head of the document and there's a lot of Template Code up here in this head. I just want to focus around line number 9, right here. Let me go and highlight this. We have a template parameter tag here; you can see it starts out with a comment and it says TemplateParam name ="banner image" type="URL" and then it gives it a value. Now that's the editable attribute that we put on the banner graphic.

So Dreamweaver automatically created this parameter because it's something we can change on each of those pages. So when we go and base our page off of this, we can change this value anytime we want to. And you are not locked into just using the template parameters that Dreamweaver can create for you. You can create your own. So what we are going to do-- I am going to go ahead and close this template and I am not going to save any changes that I might have made. We are actually going to create a template parameter that identifies the artist for that particular page of bios. We can then propagate that information into the name of the graphic, the links, name of the banner graphic, and speed up and automate that process.

So we will switch over to Code View, and I'll just click on Code View. And if your Code View screen isn't towards the top of the page, you want to scroll up into this head content and in the head content around line 9 or so, you are going to see a couple of template tags already up there. The one of the ones I want you to focus on is Instance parameter name and that's a template parameter, but it's an Instance parameter, meaning it's a parameter only here inside this client. Notice the name is Artist List, the type is Boolean and the value is false. Well, that's our Optional Area and we don't want to modify that.

So I am going to place the cursor right before the InstanceEndEditable, right before the Instance parameter name tag, and I am going to create a blank line. I would like to put my template parameters on their own line. It sort of makes them easier to find and edit. So we begin a template parameter by typing in an HTML comment. So if you are not familiar with that, it has the exclamation point with the two dashes. And then we will do a space and we define it by typing in TemplateParam, and it's a capital T and a capital P. As soon as you type it in, your syntax coding should kick in and it should turn green, indicating a template tag.

There are three attributes to a template parameter you must include: a name, a template parameter type, and then if you have that particular template parameter, a value. We are going to type in name="currentArtist" and that's going to be all one word and that is the actual name of the template parameter. So when we tell it we want to change this in the client pages, this is the template parameter that will change. Next I'm going to do type. Now, your template parameter types, you have already seen those, because if you remember when we were defining an editable attribute, that's also a template parameter and we could use between Text and URL and Boolean value. So we are going to choose Text. So I am just going to type in Text to assign it a text value. After that we need to do the value attribute. The value for this particular page will be Aimee. I am going to end my template parameter the same way you would end an HTML comment, two dashes and then close that out.

So the template parameter only requires that one tag. You pass in the TemplateParam value and you give it a name, type of parameter that you are going to use, and then a value for that specific parameter. Now, we can change that template parameter on all the pages based off of this, which means that we can use that parameter and pass that into our page using template expressions. Now that we have created the template parameter, our next task will be to create template expressions to take advantage of these parameters on the client pages.

Show transcript

This video is part of

Image for Dreamweaver CS3 Beyond the Basics
Dreamweaver CS3 Beyond the Basics

102 video lessons · 38730 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Beyond the Basics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.