Subtitles of the Movie

Let's now get back to our project and finish up our website. The first thing you'll want to do proceeding from here is to go to your Step 10 file. Make sure that everything is completed, all your content is in here, the styling is finished, the headings, titles, graphics all are in here. You probably want to add these new heading labels by grabbing these graphics in a graphics editor and adding these. Also the title and subtitle. So, once everything is finished you can start to create new pages. Now you could just do File, Save As and save this as a New Page and then just replace the content. Some of the content will be fine, others will not, namely this Spry Menu. Anything that's attached to an external style sheet like the Spry Menu, for example, notice if I create a new Page 3 file, save it in the projects folder and I insert a Spry Menu here, a Horizontal Spry Menu Bar, notice that it will be styled exactly the same as this one because they're using the same style sheet. Now, now they'll be styled exactly the same since they're using the same external style sheet but the content, notice, is different. This is Page 1 through 5, this just says Item 1 through 4. So, the first thing we need to do to make new pages then is to open up our Styles Panel here and let's transfer these embedded styles that I created earlier, the Page Title, Menu, Header, Caption to an external style sheet so we can make new Pages and keep the styling. So we're going to go to the upper right-hand corner of the CSS Styles Panel, click on New. We're going to make just a test class here. We're not interested in the Class, we just want to make a new style sheet file, like that. Click OK. Dreamweaver is asking me where this external style sheet should be saved. Make sure that it's in the project files folder. Let's call this master_style. I have some other style here. That's OK, .css, click Save. Dreamweaver's asking me about this test class which we're going to get rid of anyway so let's go ahead and close the dialog. Here is my master style with the tests in it. Let's delete that test. I don't need it. And what we're going to do is we're just going to simply drag the style definitions from the style embedded into the master style.css like that. Just drag and drop them in. It's essentially Dreamweaver's copying the CSS code up here into the new external style sheet for us. It's cutting it out of here and putting it in the new master style sheet, this one right here. So, let's let Dreamweaver do this; makes this easier on us and we're going to go ahead and drag the rest of these into the master style. I can also hold down the Shift key, select all of them. Let's get the last one there, and drag and drop all of them into master style.css. They're all there. Now, notice that if I want to create a new page, Page 3 for example, I can link to that external style sheet and then rebuild my, my page. I'm going to go ahead and delete this menu since we don't need it and let's go into the Properties Inspector here in the Class drop-down: Attach Style Sheet. I've saved this to the projects folder. Let's browse for my master style sheet. There it is. Click OK. Notice that some of the styling is there already and I have the rest of my DIV Tags. I can then insert these DIV Tags, one at a time, by choosing Insert, Layout Objects, DIV Tag and then here, in the ID drop-down just pick these in order: apDiv1 is my graphic - I'll need to reinsert the graphics so there is some extra work in making the new Pages but at least all the styling will be consistent and then you just go ahead and insert the rest of the DIV Tags here from the drop-down menu. Example there is the pagetitle. Again, the content won't be in there, just the styling but at least all of my formatting will be there. Notice as you keep inserting these DIV Tags, the options decrease because you can only use a DIV Tag once on the page. Also, be sure that when you insert it that you're inserting after the specified tag here; in this case, I'm going after the menu. Let's insert my pagetitle and also notice that as each DIV goes in: Content ID for pagetitle Goes Here, so none of the content is there but all the layout and the formatting will be intact using this method. Now, if that method is too time consuming now that you've created an external style sheet and moved all of your styles to it you can also create new pages here from your template here or your Project Step 10 that's finished by choosing File, Save As and then just call it page2.htm and then you can just replace the content. That'll leave all the styling in place but then you can just replace out the content, swap in new content. What's great about this, again, is if you want to make changes to the styling all of your pages will be updated. However, if you have a lot of content that you want to reuse from page to page you might want to think about using a Library Element for that, perhaps the Header and the Menu would be a Library, maybe the Footer. It there's even more content, let's say the Header and the Left Column and the bottom all is going to be reused from page to page, you could consider using a Dreamweaver Template. I didn't cover Dreamweaver Templates but you can look up how to use these in the Dreamweaver Help. Essentially with a Dreamweaver Template you would create a page and then designate certain areas as being editable. For example, this middle section would be editable, maybe the right column. The rest of it would be uneditable so any pages that you made from that template, none of that uneditable content would change. This stuff would change,. If you later wanted to make changes to this uneditable content you would open up the Template, make changes and then those changes would be cascaded through your entire site, or at least all those pages that were based on that template. So once you've added all your content and finished styling your pages, go ahead and Save them. You can go ahead and check out page.html in the project files for another version of this website. This is the version that came out of the Template Generator. You can compare your work with this one, borrowing and copying any code or styling that you like. But that will conclude our project work. You now have the directions for creating a small, very attractive functional website with a Spry Menu, CSS Styling throughout and a very easy to update page structure and layout with most of the graphics that you need to recreate this website available in the project files folder. Again, those will be in the images subfolder. When moving this to your Host or to another computer, don't forget to bring along the SpryAssets and those images. In fact, you'll probably want to just take the entire project files, move that over to another computer or host, run through all of the procedures and skills and techniques as well as tools that I've covered in this Managing Dreamweaver Site section of the course. So go ahead and close all of your open files and move on to the next movie.