06 May 2009

Faking columns or sidebars in iWeb

10 Comments Tutorials

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.

iweb_columns_ex

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.

web_inspector_page_background

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.

finished_columns_iweb_site

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.

Tags: , , , ,
written by
AllAboutiWeb (AAi) is your one stop shop for everything iWeb. We provide tips, tricks and more to get the most out of your iWeb website. Follow us in twitter at @allaboutiweb
Related Posts

10 Responses to “Faking columns or sidebars in iWeb”

  1. Reply Ultan says:

    Great Idea! How often do you post to this site! I’m going to do a youtube video about this site right now! I’ll give a link to you if you want! 🙂
    Ultan 🙂

    • Reply All About iWeb says:

      Ultan,

      Thanks for the comment, it’s good to hear you enjoy the site. I look forward to seeing the vid. I try and post 2 times a week if I can (work allowing!!)

      Tim

  2. Reply Ultan says:

    Hey Tim!
    How wouldn’t I enjoy this site! I have only been coming to this site for a few days and already i have fallen in love with it!
    My video:
    http://www.youtube.com/watch?v=VPUZ-3KLKrU

  3. Reply Bryson says:

    Tim,

    This question is unrelated to this post. is there a way to add free or cheap Content Management System- type features to a site so my clients can edit information? or is there a way around this? Like a cheat or something?

    • Reply All About iWeb says:

      Bryson,

      Thanks for your comment. Sadly no such thing exists for iWeb, the only way to edit an iWeb site is through iWeb and without transferring the ‘Domain’ file from Mac to Mac it can only be done from one machine.

      Tim

  4. Reply Michael says:

    You’ve got some great tip! I have been noticing a few subtle but important changes that Apple has made to iWeb 09′. I have been using iWeb to create my company intranet site. So far so go out my IS guy is a DORK and keep putting up road blocks because he hates that I have a MAC.

    Love your site I’ll keep coming back!

    ~M

  5. Reply Katrina says:

    is there any program that comes standard on the mac that could replace the photoshop bit? Could I do it in pages and save it as a jpg? GIMP hates me, as does every other photo editing program I’ve ever used…

    • Reply All About iWeb says:

      Katrina,

      You can’t save a Pages file as a JPG but you can use the ‘Print’ menu to export it as a PDF. Save it to your desktop and then open it in Preview. You can then use the ‘tools’ menu within Preview to resize/crop it to get it looking good then press CMD+Shift+S to save it as a JPG file.

      I hope that helps,

      Tim

  6. Reply Katrina says:

    Done that MANY times! Thanks for getting the ball rolling. You rock.

  7. Reply Justin Singleton says:

    I tried to use a “tab” feel for my fake columns, using shadow and what-not. Here is an example: http://www.holinessheartbeat.org/default/Dear_Phil/Entries/2004/11/1_Letting_the_Dead_Bury_the_Dead.html

Leave a Reply