Join Paul Trani for an in-depth discussion in this video Creating multiple pages based on a template, part of Creating a First Web Site with Dreamweaver CS5.
Once you have your template file set up, you can then start to make all of your pages based on this one template file. So, again, I'm going to close that out. I'm going to Dreamweaver. And the first thing you need to do is you need to make sure your Local Files folder is set up correctly, because if you do just go in and try to make a new page based on a template, notice how nothing is going to be in there. That's why you need to set up your local file structure. So go to your Files panel, go to Manage Sites > EcoStyle Studio, click Edit, and now you need to define and browse to Chapter 07/02 begin.
Notice how there's that templates folder. That Main.dwt? Well, you know what? That's the folder I'm after. So, 02 Begin is the local root folder. I'll click Choose. Puts it right in there. Click Save. It will recreate the cache. I'll click Done. And notice how there's this templates folder in there now, so make sure that's in its proper location. And now you can go to File > New, and now you can see Page from Template, EcoStyle Studio, that main template right there. So click Create and it creates this page.
So the first page I am going to make is going to be-- I'm going to save this file. It's going to be the About page. So I'm going to save this file as about.html. Remember, this is a page based on that template. I'll click Save. And now what I can do is start to swap out some of this content, starting with this SWF file. In fact, all I need to do is double-click on it. When I double-click on it, and since I have that local root folder set up, it actually points me automatically to the images folder and I can locate the headerAbout.swf.
And I'll click Choose and now it actually drops it in there in place of the Home SWF. Okay, let's take a look at some of this other content, because obviously I don't want to have all of this content in here either. There's a lot of stuff I need to swap out. So I'm going to go ahead and do that. I'm going to go ahead and just delete this information, clear down here to this last line, which is the e-mail address. And in this content area, that's where I want to paste in the appropriate content. So if I go into my assets folder, I'm going to take a lot of this content from this Web site content document.
And I'm going to scroll down to the About page and I'm going to select all of that content clear down to the education, so. And I'm going to go to Edit > Copy, and go back into Dreamweaver, make sure my cursor is in the right place, right down in here, and do an Edit > Paste. Paste all that content right in there. There's a lot going on, and like I've said before, what you need to do if you have a lot of copy is to kind of break up that copy with some imagery.
And that's again what I need to do is insert an image. So I went to Insert > Image. Now, in the Images folder I can locate this bradley.png file, click Choose. Bradley Owner. Give it a quick alternate text and drop it right in there. And again, I can't just click and drag it over. What I need to do is I need to change the alignment, so with that file selected I can change its alignment to the right side using the Properties panel.
Perfect. Since it's all about him and his company, we have his image there, education, all of that good stuff. And now I can go ahead and save this file. All right, let's take a look at this 'cause I want to go ahead and preview it in a browser. In Safari. And there we have our image. So this is interesting what has happened because I need to actually adjust the size of this SWF. But overall, everything looks pretty good. In fact, I can probably click on the Home Menu button right there and it brings me to that button in that section.
Click on About Us, and it brings us back over here. All right, let's take a look at this because what I did is I just swapped out this SWF file and this is what happens when you just swap out an image. It will replace it, but it won't resize that image to the new image that gets put in there. In fact, if I look down here in the Properties panel, it's really kind of hard to tell but this height is bold. That's bolded. It says, "Hey, you know what? I'm actually a different size." Well, what you can do is just hit this Reset size. And if I click on that, it will actually make it the size of the graphic that was just added, so.
Again, I will save this and just to give you an idea of what it looks like, I'll go out to Safari. And now you can see it's not as stretched out and it's much more appropriate. So it's looking good so far. The next couple pages I might want to hook up are the men.html, the women.html, and the contact.html. So what I can do is go to File > New, create another new page based on that main template. Click Create. Double-click on this SWF file. And again, this is the men page I'm going to deal with, but keep in mind what I need to do before I do any of this is I'm going to save it.
So watch what happens. As soon as I click choose it says, "Hey, you know what? You should probably save this page first." So you will get that message if you haven't saved your page. So go to Save and call it men. Now when I double-click on this image to replace it, I can click Choose and I'm not given that dialog box anymore. All right. And again, it looks like it is the right size. Everything looks pretty good so far. Down here, I'm just going to remove most of this copy because this is going to be replaced by something else and what I'm going to do is just going to call this Men's Fashion.
All right, I will save this file. I'm going to create another new page. This one is going to be women. So I'm going to do a Save As > women. And again, swapping out this SWF file with women. Just like that. Again, you can see that it's a little bold, so you can hit that refresh button and start to swap out all the other content. Again, I'm going to delete this information and then replace this line with Women's Fashion.
Save this file. Okay, there we are. Women's, men's, and we'll go ahead and create a new file based on that template again. And this last one is going to be our contact.html. Double-click on that SWF file to locate that headerContact.swf, all right? I chose it, and again, I want to hit that refresh button that will resize it, and this is where my contact information goes.
And I'm going to type in Contact Us. And I'm going to pull some of this content from that Word document, so right down here I can go ahead and select this copy and I can copy it and go back in here. So when you're creating multiple pages, you're going to be pasting in content from other locations. And if I paste in this content, what it does is it actually keeps that table as well, which is what I want.
And I can modify that later, but overall it looks good. I'll click Save. Now let's see where we're at with all of these pages by previewing everything in a browser. So, again, we can see our Contact Us page. I can fix some of this formatting later, but it looks appropriate. Looks good. Let me jump back to the About Us page. That one looks good. Let's go into the Fashion Portfolio to Men's Fashion. Let's see what this looks like. And this one, again, needs to be swapped out, so I'll fix that in a second.
Let's check Women's Fashion. We can see there's that women's SWF file as well. So again, that one I do need to fix is this one right here. I'll double-click on that SWF file and swap out that headerMen.swf just like that, and again, I'll hit that refresh button and I'll save it. So, again, I was able to quickly generate four different pages based on that one template, and really the cool thing is is that I'm able to sort of add various categories and sections and all I need to do is edit that template and it will update all the pages across the site.
- Understanding Internet and Web site principles
- Adding content to a Web page
- Linking to Web sites and e-mail addresses
- Styling content with CSS
- Exploring Dreamweaver’s pre-built layouts
- Inserting images
- Adding SWF content
- Uploading and testing a Web site