How to Make a Web Page Scrollbar

Video Transcript

"Hello, I'm Kelly Karnetsky website designer at SpringsHosting.com. Today I'm going to show you how to make a web page scrollbar. In order to create a web page scrollbar, all you need is an HTML editor. Today, that editor I'm going to use is Adobe Dream Editor. You can download a free trial from their website at adobe.com. It's available for Windows and Mac and you get a thirty day free trial. Now why do you want a scrollbar? Sometimes you don't want people scrolling all the way down the page so you want just one page where they can scroll it inside that page. If you want that that's what we're about to show you. So step number one in to doing this is we need to open up your favorite HTML editor. I'm going to use Dream Weaver. If you don't have Dream Weaver, you can download a free trial at adobe.com. So step two is we need to go ahead and put text in our document. So I'm just going to go ahead and paste some text in. So now I've got three paragraphs and it's going to bring in scrolling right here on my page. So what we need to do is put it inside an iFrame. So step three, after we've edited the text we need to go ahead and save the document. We're going to go and save our document as content just to make it easier. Now we've got our document saved. So step four after we've saved our current document we need to create a second document and this second document is going to pull in the content from the first document in to an iFrame. So we go to file, new and we create. Now inside the body it's going to be very simple. We're just going to do our iFrame tags. So step number five is to go ahead and create the iFrame. So we do, a very simple iFrame, close it and then close the iFrame. Now step six, we need to find our parameters for our iFrame. So we're going to give it a width of five hundred, the height of three hundred and we need to say that it's scrolling. We also need to define where the content is going to be from. So we just select the content and then a step number seven, save the document. So we're going to save this as test content. Now we've got our iFrame right here. So step number eight is to preview the document. So we're going to do a shortcut and in Dream Weaver which is F twelve and we will bring over our document. And now you can see our scrolling text right here inside this iFrame. You can go through and change up the borders on the iFrame. You can also change the width or the height but this is just a very basic parameters of creating one. I'm Kelly Karnetsky, website designer with SpringsHosting.com, and you just learned how to create a web page scrollbar."