|
ADDING IMAGES TO YOUR TEMPLATE
NOTE: IF YOU JUST
ENTERED THIS SITE ONTO THIS PAGE FIRST, I HIGHLY RECOMMEND CLICKING THE HOME
LINK ABOVE AND STARTING FROM THE BEGINNING.
Now that you have the basics down for your new template lets learn how to add
your auction photos to your template. NOTE: You must have a web hosting site in
order to use this. I recommend
photobucket, they are easy and free.
Let's begin by using the same table code in the beginning with the image
background.
<table bordercolor=black cellspacing=0
cellpadding=20 width=100%
background=http://i90.photobucket.com/albums/k280/justonemorewebsite/page%20graphics/backgrounds/dragon-bg36.jpg border=4><tbody><tr><td>Welcome to my auction
template that I created myself.
Let me
first introduce you to few new html codes.
<br> This is a simple little code called the
"break". This merely causes a line break.
<img src=""> This is the code you will need to
display an image or picture.
<center> This is the html code to center the
format after it.
With these 3 new codes we are going to enter them into our basic template code.
Go ahead and copy-paste this into the html section.
<table bordercolor=black cellspacing=0 cellpadding=20 width=100%
background=http://i90.photobucket.com/albums/k280/justonemorewebsite/page%20graphics/backgrounds/dragon-bg36.jpg
border=4><tbody><tr><td>
<br><center><img src="http://i90.photobucket.com/albums/k280/justonemorewebsite/page%20graphics/prod_129_1609.gif"><br></tr></td></tbody></table>
Click back to the standard mode and you should now have a pretty butterfly
inside your template. Notice how it is already centered on the page, that is
from the
<center> code.
Notice the space above and below the butterfly, that is
from the
<br> codes before and after the image address.
Let's try a test. Switch back to the html mode and replace my butterfly
address
with your auction photo address stored on your web hosting site. If you use
photobucket it will be the second address below your image. The URL address.
With photobucket click once on the second address line, this will highlight that
entire address blue, now right click over it and a little box will pop up. In
that box click on the COPY. Now, go back to the code in the html section and
with your cursor click directly in between the last letter and the quotation
marks.
( between the
f &
"
<img src="http://i90.photobucket.com/albums/k280/justonemorewebsite/page%20graphics/prod_129_1609.gif">
With you cursor in between the two, holding down the left mouse button, highlight
the entire address in between the 2 quotation marks by moving your cursor over
the address. It should highlight it all black. Go a head and let go of the mouse
button, it will remain highlighted. now right click over the highlighted area
and click on paste. This should erase my address and add yours that you copied
from your photobucket site.
Now you can click back to the standard mode and see your picture. It should be
nicely centered.
To add more pictures simply add another address as so:
<table bordercolor=black cellspacing=0 cellpadding=20 width=100%
background=http://i90.photobucket.com/albums/k280/justonemorewebsite/page%20graphics/backgrounds/dragon-bg36.jpg
border=4><tbody><tr><td> <br><center><img src="http://i90.photobucket.com/albums/k280/justonemorewebsite/page%20graphics/prod_129_1609.gif"><br> <img src="your next address here"><br> <img src="your next address here"><br></tr></td></tbody></table>
Notice the
<br> after each image address. Without the
<br> your pictures will be
directly next to each other. Experiment and remove one of the
<br> and see what
happens. This is how you add all the pictures you want without having to pay all
those e-bay picture fees.
WOW, you now have the basics for creating a basic template with your own
background image or color and all the photos you want to add. Remember, you can
use the standard mode to add all the text. Once you add the text and click back
to the html mode you will see a lot of mumbo jumbo and become lost. That is just
all the html code the editor added to display the texting that you entered in
the standard more. Don't forget, you can change your border color and size to
suit your template.
Below is the entire basic code we just used for your template. Feel free
to copy it to get you started now that you know what the codes are for.
<table bordercolor=black cellpadding=20 cellspacing=0 width=100%
background="your background address here" border=4><tbody><tr><td><br><br><center><img
src="your image addy here"><br><img src="your image addy here"><br><img src="your
image addy here"><br></tbody></tr></td></table>
SOME SIMPLE TIPS:
1.) To easily add space in between images while in the standard mode, place your
cursor directly after the top image and click once. Now hit the enter button on
your keyboard. This will automatically add a break <br>.
2.) To easily center or align and image while in the standard mode, click once
on the image. Then use the standard mode alignment tabs    to align your image.
3.) To resize your image while in the standard mode, click once on that image.
This will bring about little square boxes on each corner and side of that image.
Click once and hold on one of the little square boxes and drag to the size you
prefer. When your done just click anywhere outside of the image to remove the
little squares.
4.) If your image is showing blank with a red X, check your html code. One
simple error will prevent your image from showing. You must have the entire code
correctly. If the code is exact and you still get the red x it could be your
image address is incorrect.
5.) You must always end your tags. Examp. </tr></td></tbody></table> tells the
computer to end that table.
|
