This method of faking columns in iWeb is not a new one to web design but it is a useful one. Not only do you have to use it to produce false columns, you could use it to create a sidebar if you prefer. All you need is a basic graphics application and a little bit of imagination.
The beauty of this tutorial is it can also help to get your iWeb site loading a bit quicker too. We all know that one the problems with iWeb is that it does sometime take a bit long to get all of the page to load due to the images and graphics Apple has used when designing the themes. This method should help to get that time down.
So how do we do it?
To begin with you have to make a decision. How wide do you want your iWeb site to be? the standard is 700 px which I guess was okay a year or two ago but it is very rare to find someone with an 800 x 600 px monitor in this day and age.
For this tutorial I am going to pick a site width of 850px, but before we open iWeb you need to open the image editor of your choice. It doesn’t matter which one you pick, Photoshop, Illustrator, Gimp or Fireworks (let’s face it there are hundreds to choose from). Now we have to create a background image that is 850px wide and about 50px high. Yes I did say fifty pixels.
The reason why the height is set so small is because we want our image to be of high quality but small size when we save it (and therefore quicker to load).
Now another decision; what colors do you want your web-site background to be? For the purposes of this exercise I am going to be in a blue and beige mood so I make the background of the image I created above a nice shade of light blue and on top of that I place a beige filled rectangle 550px wide by 50px high. This rectangle is placed all the way to the left hand side so that I end up with the image shown below.
That’s the difficult bit over; now open iWeb and create a new page. Open ‘Inspector’ and select the ‘Page’ tab. Select the ‘Layout’ button and go down to the ‘Page Background’ area about half-way down.
Click on the first drop-down menu, select ‘Image Fill’ and choose your column image that you created earlier.
Make sure the next drop-down menu says ‘Tile’; this will ensure the small image will repeat all the way down the bottom of the page.
You will notice from the screenshot of iWeb’s Inspector that I have also amended the page-width to 850px to match the image and set the Padding, Header and Footer to zero to make sure that the columns stick to the top and bottom of the screen.
You now have fake columns or in effect a sidebar; all you have to do now is create content. Obviously the side-bar is an excellent place to put your ‘Recent Posts’, Google Ads or even your Social Networking icons. In the example I created below (it’s not fantastic but it’s just for show) you can see that I have added a header image too. Just make sure that it is 850px wide.
Obviously you don’t have to stick with the dimensions I laid out above, if you want a narrower side-bar then just increase the width of the rectangle you create. I added a little drop shadow to the rectangle too, in order to give the content section of the iWeb site a bit of depth. This shadow is then repeated in the nav-bar at the top.
Do you use fake columns in your iWeb site? Leave a comment and let us take a look.