wordpress theme code help.

Hi, I need some basic info on understanding the where and how of changing the code on my wordpress run site. This is my first wordpress expierience. I used the fantastico to install it.
So I have picked a theme and added it to my theme directory. What is the best way to work on it without loosing info, when im logged in and am in the theme editor? or working on the files and re ftping them up. This is in regards to changing the header, and adding images that are redirectable to the add spots on the theme.

I have the basic idea down but the where and what code to use is my problem. Figuring out the ad images and redirect code is the most brain tumoring thing for me. when in the theme editer I can see where the code lines are for the image ads but they look slightly different than the base html I am use to, mabe I am code dyslexic.
Here is the code part I am having problems understanding,

-there is a banner spot in the header, the code looks like this
<div id="header_top">
<div class="top_banner">
<img src="<?php bloginfo('template_url'); ?>/images/468x60.gif" alt="468x60 box for AdSense or other advertiser" />

I want to put a clickable banner in there,
--side question, how do I get an image address for the images I want to use? when uploading to my server.

-in the sidebar is another section for adblocks,

<div id="sidebar">

<div class="top_ad_container">
<div class="adtitle"><span>Ads</span></div>
<div class="adbox"><img style="display:block;" src="<?php bloginfo('template_url'); ?>/images/300x250.gif" alt="300x250 box for AdSense" /></div>
</div>

<div class="sidebar_content">
<ul>
this looks more general but what is the proper code I need to have a redirect clickable image there?
And finally there is a row of image blocks. There is only one image in my upload image folder for the multipul spots. the code looks like this

</div> <!-- sidebar_content -->

<div class="sidebar_ads_container">
<div class="sidebar_ads_title"><span>Sponsors</span></div>
<div class="sidebar_ads">
<img style="display:block;margin-top:5px;margin-bottom:5px;" src="<?php bloginfo('template_url'); ?>/images/125x125.gif" alt="125x126 box for sponsors" />
<img style="display:block;margin-bottom:5px;" src="<?php bloginfo('template_url'); ?>/images/125x125.gif" alt="125x126 box for sponsors" />
<img style="display:block;margin-bottom:5px;" src="<?php bloginfo('template_url'); ?>/images/125x125.gif" alt="125x126 box for sponsors" />
<img style="display:block;margin-bottom:5px;" src="<?php bloginfo('template_url'); ?>/images/125x125.gif" alt="125x126 box for sponsors" />
</div>
</div>

</div> <!-- sidebar -->
Do I need to upload/ftp these pictures to my folder or can I use pictures hosted at say photobucket? And of course what is the proper code for the image redirect.

I know this may sound so easy to some but I do not wish to make changes just to majorly screw the rest of my content. If anyone can give me a real answer Please help me out, im on day 4 of putting my website up and I do not feel smarter than a monkey right now. Ie: so easy even a monkey can do it.
thanks
Pierce