Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In our last exercise, we created our base template and defined two editable regions. Occasionally, you will have an object on the page that needs to update but that you don't necessarily need to place inside an editable region, take our banner graphic, for example. Our banner graphic is going to change on every single child page, but it's going to retain the same size and the same position. So placing it inside of an editable region would allow people to change it out or delete it altogether and that's not what we want to have happen. So the only two things that change are the image source path and the Alt text, so we can make the attributes of an object editable as well.
So we will start with our banner graphic and then we will move on the two other sections of the page where we need editable attributes as well. So, start by selecting the banner graphic. Now, we still have the cheek_main template open, so if you have that from the last exercise, make sure it's open. So, select the banner graphic and last time when we inserted editable regions, we went up to the Insert menu, and we went down to Template Objects. Now, it would be kind of nice if everything was in one place but when you need to make attributes editable, this is not where you want to go. We will need to go now to the Modify menu and we go down to Templates and right down there towards the bottom is Make Attribute Editable. So go ahead and select that.
The Editable Tag Attributes dialog box comes up and whatever you have selected or wherever you are currently focused in your page, you are going to see all of the attributes of that particular object or tag. Notice that if I grab the pulldown menu for Attribute, Source and ALT comes up. Those are the two attributes within this tag that I can edit. So if I click SRC, I can say Make attribute editable by clicking the check box and then I have to give it a label and you can label this really whatever you would like. So I am going to go ahead and label this banner image. That's a little bit more descriptive, most people know what SRC means but giving it a more descriptive label is a pretty good idea.
Now, if I choose Type, notice that you can have different types of editable attributes. We have Text, URL, Color, True/False, we have Boolean value and a Number. Well, we want to choose URL because this is going to be a link and what's really nice about this is by choosing URL, Dreamweaver actually give you a browse feature when you are creating the page based off of this template. So we need more than one attribute to be editable on our banner graphic. So instead of just doing a SRC, we will also do the ALT text, I will go ahead and make that to be editable as well and we will just label that as banner alt text. It will indeed be text, so I will leave the Type as Text and I could give it some default text if I wanted to but I don't necessarily have to.
It's usually a good idea that to at least put something in there. So I am just going type in banner graphic, if whoever is working forgets to do it, at least, it will have an ALT tag of banner graphic. So we will go ahead and click OK and once again, we will go ahead and save our file. Now you may have noticed that our image went away and if I scroll over so I can see where our image is, you can see it looks be a little broken link and that's okay and that's just the template's way of representing to you that there is an expression here for the SRC. As a matter of fact, I will switch over to Code view and let's see that. So on line 27, if we look at our banner graphic now and the image source inside of that, we have this really odd looking text. Well, this is actually a template expression and we are going to explore template expressions in a later movie.
So, I am going to switch back to Design view now. Now, I mentioned that there are two other items that need to have editable attributes and we are going to focus on the navigation first. You will notice that the current page is indicated by having its links state changed. So since this was based off of the news page, the news page is sort of a lighter tanned to sort of indicate that hey, I am selected. Well, this is actually done through CSS and if I go back to Code view and scroll up to see the body tag, I can see that the body tag has an ID. Now your cascading style sheets are using the ID being passed into them to determine which link it should basically indicate as current. So in each page, we will need to go ahead and change the body tags id.
So I will go back to Design view and I am going to use the Tag Selector to choose the body tag, so you can click anywhere on the page, just click the body tag and you have it selected. So we will go back up to Modify > Templates > Make Attribute Editable. Once again, that is going to search through the body tag, find any attributes and we only have the ID, so we will choose that one. We will make the attribute editable and we'll go ahead and label this one as current page. Now what that will do for us again is it will come up and say okay, what's the current page and you'll need to type that in.
Again, we really need to have a default value; we will just leave it as news. Now, the problem here is if somebody forgets to fill that in, it's going to indicate that you are on the current news page, and they won't be. So be careful about that, so I will click OK. And the last thing that we need to take care of is our style sheet. Now, this page is actually linked to our base style sheet, but some of the sub pages like the Artists page, for example, or the Shows page, they have their own CSS because the pages are a little bit more complicated. So that needs to be able to change on these child-level pages as well.
So I am going to switch to Code view and I am going to scroll up to the head of my document. There is nothing wrong with having head content editable as well. You will notice that it's already wrapped our title tag in editable region. So I am going to go ahead and select on line number 8, our link tag. Now, it links out to our CSS file. So I will go back up to Modify > Template and choose Make Attribute Editable. Now again, this time, I get all sorts of choices because this link tag has an HREF attribute, a REL attribute, TYPE, MEDIA. We are just going to choose HREF and we will make that attribute editable and we will just go ahead and call this document styles.
Now again, we will make this a URL, and we will leave the default as the base line CSS so if we don't need to change it, it will remain the base CSS but when we get to those more specialized pages, we will be able to go in and change that property. So we will go ahead and click OK. Now that we have built our template, it's time to rebuild the pages in our site with our new template. So next to explore creating new pages based off of our template and how to apply templates to existing pages.
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.