Hi my name is Dave Casuto from San Francisco Computer Tutors and in this tutorial we are going to show you how to create a frames-based website using Dreamweaver and what we want to do is go to our layout tab and come all the way to your right and you will see if you move your mouse over it says frames and we are going to go ahead and choose the different frame that we want to have so you all these different choices, left frame, right frame and see it gives you a nice little preview of what each of them is so the little white on the left that's where your frame is and then etc. you see it for all the rest of them. So what we are going to choose is the left and nested top frame and then a window is going to pop up and it is going to say so for accessibility attributes what are you going to call it? So just go ahead and specify a title and you'll see here that they will have left frame, top frame and main frame and you can even see how it corresponds on the right hand side, top frame, main frame and left frame. So we're just going to keep it as is. Now at this point what you want to do is you want to basically save all and give them each a name so we are going to go to file and you see save all and you see the first part is going to be basically general and you can see here around the perimeter of our window it actually has encapsulated the entire frame set so it is an untitled frame set. So we are just going to call this about us frame and then I am going to click save and now notice where the box has gone to. So that's going to be our body, click on save and we are going to replace, we have got one already that says body. Then we are going to call this top frame, click save and this is going to be left frame and go ahead and click save and now we are ready to go and so it is going to be really beneficial for you as you are moving along to actually have everything named out like that. So now we have these different frames here so for the left hand side what I want to do is I actually want to put in my navigation and I am just going to put in like home, about us, maybe just about for right now just for the sake of this. Then we're going to put in services and then contact. So in a moment I will show you how to adjust the frames as well. So now we're going to also bring in an image from here. So we'll go ahead and bring in an image just like we normally would so let's get all our stuff out of here. Let's go back to comment and then insert image here and then let's go ahead and bring in our image, let's find where our folder is, desktop, Story Street, and we have our logo here so choose. The file is outside of the root folder so that's fine because we are now just starting a brand new one. This is in a root folder that was created before so we are just going to go and copy it to the one we are creating now so we will say yes and then copy file as, exactly how it is right there and then click o'kay, give it alternate texts, Story Street, leave the long description blank and then there it is. So now I'm just going to drag this down and make a little more room for it. With frames now that I've got this long text that I have actually pasted in here I can now scroll down and look what happens, see? On the left hand side my frames remain static, they remain frozen so my users don't have to actually lose sight of the links here. So let's go ahead and preview that in the browser and see what that looks like. Now it says the frame set files and frames files need to be saved before previewing in the browser, click o'kay to save the files, o'kay that's fine, you don't have to say don't warn me again but it will. It will just continue to save it for you. Now here I am looking at my site and then I have my scroll bar on the right hand side and look what happens as I scroll down, this remains the same. So this is a very basic version of how you would use it but I am sure you could use it on your own. Well that concludes our tutorial on creating frames-based sites using Dreamweaver. I hope you have enjoyed it as much as I did. Once again my name is Dave Casuto from San Francisco Computer Tutors and you can look me up on yelp.com under San Francisco Computer Tutors and I hope to hear from you soon. Thanks.
More Photos
