Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.
Occasionally, you might have an older page or a site that you want to move into your new templated format. Instead of having to copy and paste everything into a new page, you can apply a template to an existing page. As you'll see, this technique does have its drawbacks. So most of the time, you'll need to make a determination as to which approach will be quicker, either applying the template or copying and pasting the content into a new page based from the template. As you'll see, that decision is largely made based upon the complexity of the page that you're working with.
So here I have the mission.htm page open from the 13_06 directory. And as you can see, this is fairly simple. There is really not a lot going on here. We have some content. Some headings, some paragraphs, an image, and they're all inside of a div tag that's sort of holding all that content together. Now, this is clearly not a complex page and it fits perfectly within the workflow of applying a complex template to a simple page. It's when your pages getting more complex that applying the template to it gets a little bit more difficult.
And as we go through this exercise, I think you'll see what we are talking about. So we want to go ahead and apply our Explore California main template to this page. Well, one of the easiest ways to do that is to use the Assets panel. So right there beside the Files panel, I am going to click on the Assets panel and bring that up. Now, in your Asset panel categories, you want to click right here on the Template category. It's the second to last icon from the bottom. This kind of looks like that page with some blue text on it. Okay, inside of our templates we really only see one main template.
One of the options of our Assets panel when we highlight main template is Apply. Highlighting a template and clicking Apply will go ahead and apply that template to whatever open page you're currently focused on. So obviously that's a button that needs to be treated with a little bit of care. Well, there is another way to apply templates to pages that you might find a little bit easier or at least certainly more fun. You can grab the main template right here in the Assets panel and literally just drag that on to your page and let go. Now, Dreamweaver will go ahead and apply the template to that page.
But if we had those things in this page, Dreamweaver would also want to know if we wanted to bring that material into our new templated page as well. Okay, so how do we tell Dreamweaver where to place the contents of the page? Well, simply highlight document body right here and then using your pulldown menu, you tell Dreamweaver where you want to place this content. Now, in this case, this content is going to go into the mainContent region. Now, to be honest with you, this is one of the biggest drawbacks to using this technique. Let's say that you had your sidebar content on this page, maybe some breadcrumb information, maybe some mainContent region.
You aren't going to have that ability to basically say take these elements and place them in this region. Everything on a page has to go in one region. Now, if you have a big enough region, you could place everything in there and then when you get into the page, cut and paste things into other regions. But that's not really ideal workflow either. So occasionally, if your page is really complex, it's probably going to be easier for you just to create a new page from the template and then copy and paste from an existing page. But for the page we have here, this workflow is going to work fine. I am going to go ahead and click OK.
And now our mission.htm is using the template for its page structure. You can see here is the content we have, who we are, and our image and all of our paragraphs and they fit in there just fine. So all we need to do at this point would be to place some Trivia information in there, and then determine what we want to do as far as our sub-navigation menu, breadcrumbs and Region ID would be helpful. So I am going to highlight that. Type in Mission. Now, I am going to go ahead and set our template properties as well.
I am going to go up to Modify and choose Template Properties. Now, for my bodyClass, we don't have any breadcrumbs on this page. So instead of the bodyClass being hasCrumbs, I am going to change that to noCrumbs and I'mable type in anything I want there. Breadcrumbs will remain invisible as will all of my sub-navigation. So since their default is to be invisible, I am not going to have to go change anything there. I do need to go down however to my missionLink and make sure that Dreamweaver knows that that is the current link. So I am going to replace the text baseLink with current, again being very careful not to modify mission or the space between the two of them.
So I just wanted to say mission current. Now, when we previously modified template properties and in modifying in this time, you may have noticed this little checkbox right here, Allow nested templates to control this. Well later on, we'll be creating a nested template based on our main template. And this as gives you the option or the ability to go ahead and allow people to set these attributes in your nested templates as well. For what we are doing here though, we don't need to do that. We'll just leave it as mission and current. I am going to go ahead and click OK.
And you may have noticed that the headline in the body copy moved down. That's because this page doesn't have breadcrumbs, so the margin above the content region was increased to compensate for that. I am just going to go ahead and save this and preview this in my browser. There we go. There's our page. It's looking good. The only thing it lacks is our trivia information, which we could go ahead and put in at any time. Now, for complex pages, or pages where you might have to move multiple regions around, once the template has been applied to it, this might not be the best workflow.
Often copying and pasting content into a new page based off the template will actually be faster and less prone to error. Regardless, it's helpful to understand both workflows so that when the time comes, you can make an informed choice as to which method to use.
Find answers to the most frequently asked questions about Dreamweaver CS5 Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.