Archive for Tutorials

24 Nov 2010

Custom accordion slider for your iWeb all in CSS3

22 Comments Tutorials

Continuing in the vain of adding CSS3 bits n’ pieces to iWeb in an effort to bring it up to date I have been working on something that uses the new ‘transition’ elements taken from the new version.

This week I would like to show you how to insert a custom accordion style slider into your iWeb sites. These are becoming particularly popular at the moment as they are something that you can place on your homepage, without taking up too much space, but it still allows you to give a bit of information about your other pages. Read more

17 Nov 2010

How to add a Facebook Like button to your iWeb site

59 Comments Tutorials

This tutorial has been turned into a video. I highly recommend everyone watch the video to better visualize how adding a Facebook Like button to your iWeb website works.

I have been meaning to do this tutorial for quite a while now but never got round to it. I am sure once you find out how easy it is to do you will be amazed that you didn’t try it sooner.

Unless you have been living in a cave somewhere in the middle of nowhere for the last 8 years you will know that Facebook is the second most popular web-site on the face of the planet after Google. With that sort of pulling power it seems almost ridiculous not to include a Facebook ‘Like’ button on your web-site. Read more

25 Oct 2010

How to add CSS3 buttons to your iWeb site

24 Comments Tutorials

Those of you that follow my twitter feed will know that I have been a little displeased with the fact that iLife 11 didn’t get a new (or even updated) version of iWeb. Apple seem to be wanting to lead the way when it comes to browsers, but doesn’t seem to want to produce a web design app to back it up.

Moaning aside, one thing that I would have expected to see in a new version of iWeb is the use of CSS3, the latest version of ‘Cascading Style Sheets’ that allows you to arrange and design a web page how you want to. CSS3 allows us to do much more than layouts however, and in this tutorial I want to show you how you can add great looking buttons to your iWeb site using just CSS3 – no images. Read more

06 Sep 2010

Create tileable backgrounds in iWeb

11 Comments Tutorials, Web Design

Okay, so perhaps not just iWeb, we’ll have to use Preview too. And Paparazzi but that’s a free download as well. But the main bit of the work is done in iWeb.

As you may well know iWeb can be used to set an image as a background for your iWeb site. The only problem is, is that when you set it to tile it tiles on both the horizontal and vertical axis. To get round this we will have to use very long tiles, but it is all do-able in iWeb. Read more

31 Aug 2010

How to add a drop-down navigation bar to iWeb

41 Comments Tutorials

If I had a pound for every time I had been asked this question I would, without doubt, be a rich man by now. The one thing that all iWeb users seem to want to know is how to add a drop-down navigation bar to the top of their iWeb sites.

We all know that the standard nav-bar that is built into iWeb does a job. It’s functional and easy to create, but only sticks to one level; that’s it. In addition, as it is built from javascript it isn’t the most search engine friendly navigation bar in the world.

The reason this tutorial has been so long coming is simple. I wanted to wait until I could work out an ‘easy’ way to do it. Read more