How to Add a Text Box to Move a Picture in HTML

It is not the easiest thing in the world to move a picture on HTML exactly to where you want it to be. Want to know a different way? It’s called a text box. What this does is that it forms a box around your picture and enables you to move it where ever you would like. Sometimes, I know for me, it becomes very easy to get frustrated with HTML. This little trick is a short cut that you can use when you’re just a little beginner with HTML.

Let’s take for example the pictures on my website.

The picture on the far right is the picture that I will be moving with the text box.

The first thing we need to do is insert the text box. To do this simply go to the bars at the top of Dream Weaver and click on “Insert” the fourth one from the left. A pull down menu will appear with many options to choose from. Scroll down just a little until you have reached a tab that says “Layout Objects” which is underlined in red in the picture below. Scroll over it but do not click on it.

Another pull down menu will appear to the right of Layout Objects. Do you see the tab “AP Div” right underneath “Div tag”? Click on it! This will add the text box tag to your source code without you doing any work at all, wonderful right?

Once you clicked on that, look down at your source code. There should be a tag that reads <div id=”apDiv1″></div>. This tag will allow you to move your picture any where you want on this page of your website. Most of the hard work is over! Now all there is left to do is to insert the picture and move it to where ever you would like. Down below is a picture of what your source code should look like.

To make sure your picture is inserted in the right spot, use your mouse to click in between the >< brackets the connect <div id=”apDiv1″> to </div>. Your picture source will then appear between those two tags.

Time to insert your picture! Once again, go up to the “Insert” tab and click on it. Do not scroll as far down as you did for Layout Objects, select the “Image” tab that is the second one down from the top. It is underlined in red in the picture below. You should have your image already saved somewhere on your computer, but if you don’t this blog may not be to any use for you yet. For those of you who do have your image saved, select it and let the computer do all of the work.

Your picture should now be in your source code and next to it on your web page inside of a blue outlined box. Finally! The hard part is over. You can adjust the size of the picture to fit the blue box by pulling the corners of the picture or pulling the corners of the blue box if you want your picture to stay small. This is what my picture looks like once I inserted it into the source code.

The last thing you need to do is to move it where you would like it to be placed. Don’t sweat, it’s easy. Simply scroll your cursor over the blue edge of the picture. Your cursor should have four arrows on it, which means you can drag the picture to where you want. Click on the edge and feel free to put the picture anywhere! Congratulations! You have successfully used a text box to move your pictures, but remember only use this in times of difficulty and not for every picture you upload to your website.

-Alyssa Scalercio

~ by alyssascalercio on October 17, 2011.

%d bloggers like this: