Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I want to examine the sidebar for a moment. Every bio page and every gallery page has a link in the secondary navigation over here. So, while we are creating these bios, I would really like to indicate which bio we are on by showing our current state and we have already done the CSS for this. There is a current class style that if we apply the class style to one of those links, it will show up as the Current. So, we could certainly open up every bios page as we are building the template pages and apply that class style. But again, template expressions help us take some of the work or the drudgery out of assembling these pages. So, let's see how our template expression can actually do the work for us.
So, I am going to switch to Code View and scroll down to around line 45 or so. At line 49, we can see the link for Aimee's Gallery page. So, on line 49 we find that link. We are going to put a template expression with a conditional operator in here. A conditional operator is a fancy way of saying and IF statement. So, it's going to take a look at the value and make a decision on what to do based upon that value. So, what we are going to do is we will go ahead and type in the syntax. So, we are going to evaluate what the syntax is and then we will replace that with the actual values we are gong to use. So, place your cursor just at the end of the href attribute inside the A tag. Type in a space so that we have some distance between the href value and the expression we are about to type in and we will begin our expression.
Just type in two @ symbols, @@, and then a parenthesis, then we want to type in condition and then a double =, so ==, conditional value, ?, the word TRUE; and the word FALSE. So, this is our conditional operator. Let's take a look at the syntax before we actually plug in the values we are going to use. Essentially, the question mark is the heart of this. On the left hand side of the question mark is the condition that is being evaluated. On the right hand side of the question mark is what to do if the condition evaluates as a true value or if the condition evaluates as a false value. So to turn our attention to the condition. It's going to check a template parameter and it is going to see what the value of that template parameter. So, it's saying, "Condition" and then ==.
So, the double equal sign is an operator that looks for equality so it checks for equality. It says "Is this value equal to this condition?" So, we are going to go ahead and replace the condition with the template parameter that we are looking for and here's how we are going to do that. Highlight the word Condition and replace it with _document and then open up a bracket. So, we are going to use bracket notation here, type in a single quote and then type in our template parameter, which is currentArtist. Remember to close your single quotation mark and close your bracket notation.
So, bracket notation forces the evaluation of something and so it's forcing us to evaluate what is Current Artist. Highlight condition value on the other side of the double equal signs and let's type in single quotation marks the word Aimee. Since we are checking Aimee's link, we are basically saying at this point is the value of CurrentArtist Aimee. If it is, we want something to happen. So, we are going to highlight the True value and we will change that to reflect what we want Dreamweaver to do if this condition is true. So, we are going to type in single quotation marks 'Class ="current"'. Notice that Dreamweaver brings up the code in here for us. So, if you want to take advantage of that, go right ahead. Now, after you are done typing in the double quotation around Current, don't forget to close out the single quotation that we put around the whole statement there, 'class="current"'.
After the colon, we will highlight the word False and I am going to open up one single quotation mark and then close a single quotation mark, so that's going to be empty. Now since that we can put a value in there and if current artist did not return as Aimee, it would replace that. So, we could have said, 'class="not current"'. But we don't really want to do anything if the value isn't Aimee, so we will leave that blank so that nothing happens. So just to go over this one more time. We have the double @@ symbols. That opens up the parenthesis, then we see _ document currentArtist. So, what's the value of current artist. If it's equal to Aimee, we want class for the A tag to equal current. If it doesn't equal Aimee, we want nothing to happen. Now, after this, don't forget to close your parenthesis and then close your double @ symbols. We need to go ahead and make sure we are closing our template expression. Let's save our file.
Now, when we do that, it's going to prompt us to go ahead and update our files. We are going to do that but we are going to get something else that happens here too. An inconsistent region name dialog box comes up and essentially what happens is if you put a template expression inside an editable region, the editable region is no longer editable. So, we have to let Dreamweaver know what to do with the information that used to be in the sidebar on these other two pages. Well, we don't need two sidebar so we are just going to tell it instead of saying, Not resolved, we are going to tell it go nowhere. So, we will go ahead and click OK and it finishes our update.
Okay, let's open up Aimee, and so I will go over to my Files panel and I will open up the bios folder and I am going to double click Aimee.htm, and I am going to just test it in the browser. Now, you can see in the sub- navigation that Aimee Hutchins's name is highlighted indicating that it's the current page. I am going to go ahead and close my browser and let's go back into our template, because we want to go ahead and update that a couple of more times just to watch this in action. So, I am going to scroll down through down my code, so that I can see the links for Ben and we are going to also modify the link for Chris really quickly. The easiest way to do this template expression is to simply copy and paste it. So, I am going to highlight the template expression there on line 49 and just the template expression. Make sure you don't get any other part of that link.
I am going to copy it and I will place my cursor right at the end of the link for Ben. Now always remember the type and little bit of a space because you want at least one character void space between the href attribute and your template expression. So, we will pass in the template expression. Now, for Ben's link, I am not checking for the parameter of Aimee, I am checking for the parameter of Ben. So, I have got to change the value of Aimee to Ben right there, and then we will just do the same thing for Chris. So type in at the end of Chris's link, type in a space, paste the expression, and then change the value from Aimee to Chris.
So, you can see that this would be pretty easy to do. We have got several links here but it wouldn't really take that long to get this finished. So, we are going to go ahead and save that. Again, it's going to ask me to update those pages. I don't get the replaced sidebar region. I will only have to do that one time. So, I am going to open up Ben's page and now if I check Ben's page in the browser, I see that Ben's link is listed as active. If I click on Aimee's page, her link is now listed as Active. Well, we have been doing this kind of piece by piece. So, let's see the finished product. I am going to close out of Firefox again and we are going to finish it up by creating one more page off of our bios template. So, I am going to close Ben, I will close Aimee and save that, and I will just go ahead and close my template too. I don't really don't like to have it open unless I am editing it.
So, I will say File > New and we will do New from Template, cheek_artist_bios, we are going to create there, and I am going to go up and select Save and we will save this in the bios folder and we will save it as Chris.htm. It's going to ask me if I want to replace the existing one, and I am just going to go ahead and say Yeah. I will switch back to Design View and as we expect, all of Aimee's comes up. So, I am going to replace Aimee's name with Chris Mattia and we will save that, and now all I have to do is go up to Modify and choose Template Properties.
I will change the value of Aimee to Chris and now that we do that, notice everything that changes. The banner graphic changes, Chris's photograph changed, if I scroll down, I see that the Chris Gallery link has been generated, and if I look over in the sub-navigation, we can see that Chris is now indicated as the active link. So, I hope this gives you some idea of how powerful template expressions are and how you can use them in your Dreamweaver workflow.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.