When I created the Photo Fairy Designs website back in March 2011 I looked around several different website providers, and even tried a few, before deciding upon Weebly. The thing I love about Weebly is how easy it is to get the basics started on your website. I had a good idea of what I wanted it to look like but as I had never created a website before I was unsure whether I could actually achieve what I was hoping for.

Weebly have many free templates you can select for your website or you can buy one of their premium designs, they use a very simple drag and drop system to add pictures, paragraphs and columns to each page which makes it a perfect starting place for any novice looking to create their first website. The thing I particularly like is that you can edit and personalise each template further if you wish by going into the design section and modifying the html and css code. I found websites such as w3schools.com extremely useful tools to dip into whenever I needed to change or add something that required an amendment to the page coding and I was unsure exactly how to do it.  

One of the biggest problems I encountered was when I decided I wanted to insert an image map or hot spots into my banner at the top of my website. An image map is basically a picture that has areas on it that will direct the user to a particular page on your site when they click their mouse on it. So, for example, if you take a look at my header and move your mouse over my logo in the centre you will notice that your mouse cursor changes from an arrow to a hand. If you were to click on my logo it would take you back to the home page. Similarly if you click on the Blog or Facebook logo you will be directed to the relevant pages/ sites. 
It took me a while to find out how to do this and since then I have received many emails from other Weebly users asking me for help with their image maps, so I decided I would give the information of how I created my image map on a blog post in the hope that it will help others.

How to Insert an Image Map
1. To begin with the first thing you need to do is to get your image ready that you want to use and make sure the dimensions are ok for your weebly page. 
2. Once you have your image ready go into the html code of your page (design>edit html/css>) and click on 'add new files' in the left hand menu. 3. Upload the image you want to use for the image map on your page, you then need to generate the image map html code for it. You can do this either using dreamweaver or you can use this free site http://www.image-maps.com/.
 
This is the html code I have for my header so you get an idea of what it will look like:
 
<img src="/files/theme/header.png" width="1140" height="241" border="0" usemap="#map"/> 
<map name="map"> 
<area shape="rect" coords="27,8,211,43" href="http://www.photofairydesigns.com/photo-enhancement.html" /> 
<area href="http://www.photofairydesigns.com/fairy-photos.html" shape=rect coords="46,45,230,69" /> 
<area href="http://www.photofairydesigns.com/seasonal-editing.html" shape=rect coords="46,71,273,95" />
<area href="http://www.photofairydesigns.com/photo-invitations--cards.html" shape=rect coords="45,97,240,121" />
<area href="http://www.photofairydesigns.com/word-art.html" shape=rect coords="41,121,162,143" />
<area href="http://www.photofairydesigns.com/photos-to-dvd.html" shape=rect coords="47,148,204,170" /> 
<area href="http://www.photofairydesigns.com/dvd-invitations.html" shape=rect coords="49,176,206,198" /> 
<area href="http://www.photofairydesigns.com/freebies.html" shape=rect coords="45,201,202,223" /> 
<area shape="rect" coords="445,26,753,220" href="http://www.photofairydesigns.com/index.html" />
<area shape="rect" coords="875,36,946,109" href="http://www.photofairydesigns.com/blog.html" />
<area shape="rect" coords="971,32,1039,104" href="http://www.facebook.com/photofairydesigns" />
<area shape="rect" coords="1062,33,1122,104" href="http://twitter.com/photofairydesig" /> 
 <area shape="rect" coords="1003,136,1126,167" href="http://www.photofairydesigns.com/about-us.html" />
 <area shape="rect" coords="909,173,1122,204" href="http://www.photofairydesigns.com/mailing-list.html" />
</map>

Within my html code this is inserted as follows:
 
<body>
<div id="wrapper">
<div id="logo">IMAGE MAP CODE INSERTED HERE
</div> 
Of course if you want yours at the bottom of the page you will need to put it down within the footer area of the html code, it may take a bit of playing around with to get it there but as long as you don't save any changes you don't have to worry about messing up what you have already done. I recommend copying and pasting the html code into a word document so you have it saved as a back up just in case you do make a mistake, I also found it useful to print a copy and write notes against it so I could remember what adjustments caused what changes. This can make future updates a lot quicker!I hope this post helps a few more fellow Weebly users.