Well in the post I'm going to teach you how to make scroll bars in Html in Dreamweaver. Scroll bars let you scroll though information or large images contained in a small viewing screen.
To complete this tutorial, you will need an image and a paragraph of text. Oh and don't worry, the tutorial shouldn’t take you more than 10 minutes.
First off you need to make sure and set up your root folder you will be using containing all your necessary files (your text, images, etc.)
First we will work with putting text inside a scroll bar.
1. You need to create a div using the tag
<div
2. Inside this tag you must add the proportions of this scroll box you are making. You will need to include height, width, and then the overflow style (we will use overflow:auto which means it can automatically detect if you need a scroll bar.) So for example:
<div style=" height: 100px; width: 200px overflow: auto;”>
3. Then copy and paste your text in
4. Then close up the tag with
</div>
5. Your finished code should look like this:
<div style="overflow: auto; height: 100px; width: 200px;">inserted text </div>
6. Save, then refesh and see what happened! Your text is now in a scroll bar! (you might have to go into live mode to see the scroll bars actually appear)
Second, if you want to get super fancy, you can add an image to a scroll bar
1. Start by creating a div just like you did the last one.
<div
2. Then add in your size specifications and overflow type.
<div style= “height: 500px; width:600px; overflow:auto;”>
3. Here where you add in your image source instead of text.
<img src="turtle.jpg" source="turtle.jpg" />
4. Don't forget to close your div off after so your finished code should look like this:
<div style="overflow: auto; height: 100px; width: 200px;"><img src="turtle.jpg" source="turtle.jpg" /></div>
5. Press save, and see what you got!
No comments:
Post a Comment