As a precursor to some of the CSS3 based iWeb tutorials I have planned for All About iWeb in the very near future I thought it may be a good idea if I explained how an iWeb site is acutally made up in comparison to a regular web-site. In the long-term it should make things easier if we all have a better understanding of the file structure and layout of an iWeb site.
A Regular Web-Site
Let’s start by taking a look at a ‘regular’ web-site. In the image below (and in an ideal world) you can see all of the pages are contained on the same level, within the same folder along with some other folders, in this case CSS, Images and Scripts.
Each page within this web-site will link back (from within its <head> section) to the one (or sometimes more) stylesheets within the CSS folder. As a rule there only tends to be one for the layout of the whole site and perhaps one for a seperate layout which is used when printing. There may even be smaller CSS files that contain just a few lines of code that are specific to an individual page, but normally it’s all contained within a main stylesheet.
The Image folder contains, as you would expect, all of the pictures, photographs and graphics that are used on the site. This folder may be broken down further if the webmaster so wishes and it is not uncommon to find a folder for the nav-bar, one for an image gallery etc. All of these images are linked to from within whichever page is using it however, I must point out that there will be only one of each image.
And finally the Scripts folder which, as the name suggests contains any code snippets that the webmaster may or may not want to use on his site. Once again the files contained within this folder are normally linked to via the <head> section.
This method of file structure is now becoming more and more common place amongst webdesigners as it allows a uncluttered workspace that is easy to navigate if and when changes have to be made. I think you will agree that it looks neat and tidy!
An iWeb Site
Now lets take a look at how an iWeb site looks. Below is a screenshot of a site I made using one of every page from the Leaf Print theme. You can do this yourself, just save the site to your hard-drive and then take a look at it in Finder.
Within the iWeb site’s folder we see one web-page, a plist file and another folder with the site’s name; in this case ‘iwebrox’.
Opening that folder we see all of the pages and yet more folders, each with the same name as the page.
Yes that’s right, each page’s folder has its own page’s images within it, so there can be a lot of duplication; that is why it is critical that you keep image size down when you are designing your site. What I am trying to say is that if you add something to your iWeb page within iWeb via a HTML Snippet (like we will be doing in the near future) and that Snippet relies on (for example) images make sure you put the images in the correct folder.
Of course, we could also create another folder and just upload it, via FTP, to our web space (or in Finder if you use MobileMe) and that would work too. My point is, be careful when you are adding extras or accessing your iWeb site from your hard-drive. Get the wrong file or folder and you can muck-up your site so that you have to start again.
Of course, now that is out of the way, I will get on with finishing the other tutorials ready to get them posted. I have to be honest an say that this is one of the things I hope that Apple sorts out in the next version of iWeb. It will be difficult to do because of the way they build their themes, but it would be possible.
If you have any questions on how iWeb sets up a site just leave a comment.