28 Feb 2011

iWeb 101 – How an iWeb site is made up

13 Comments iWeb 101, Web Design

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.

They way iWeb builds its sites compared to a regular web designer is that rather than give the whole site just one CSS, Images and Scripts folder, it creates one per page; this is one of the main reasons iWeb sites load slower than a regular site as the browser is, in effect, having to load a completly new page from scratch with new stylesheets, javascripts and images; just like going to a new web-site. Here’s what’s in the Welcome folder.

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.

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

13 Responses to “iWeb 101 – How an iWeb site is made up”

  1. Reply Julie Azhadi says:

    Thank you! This is very timely as I have been struggling with speed and incompatibility with some versions of IE. This understanding should help me plot the battle better.
    Much Appreciation,
    Julie

  2. Reply Driezzie says:

    Tim could you add a category widget to this theme pls? It’s very unpractical to only use the search function. Thanks

  3. Reply drgoodeye says:

    This complicates matters. Do you know is the web building package in Server 10.6 does the same type of folder arrangement?
    Since you are going into CSS, can you build your site and put it in the iDisk, using the web links. Or maybe fix a link to another site on the same disk. For example, having the iWeb page and then link to another webserver that I have, or to the other site design.
    Again, this is attempting to use the iDisk folders as my upload target, to speed the retrieval of the pages.

  4. Reply Steo says:

    HA !
    That’s why despite all my efforts my iWeb site loads slower than others !!

    I was looking for the reason for a long time.

    Thanks !

    ((steo))

  5. Reply David says:

    Is there any way to merge the css and image docs in a text editor or something (before ftp Upload) to make it flow like a normal website?

    • Reply Tim Bowden says:

      Hi David,

      No you don’t want to do that because you will move elements that are linked to with the iWeb pages and therefore your pages will all go ‘Pete Tong’.

      Tim

  6. Reply Androo says:

    I’ve noticed that the index.html file for iweb sites just redirects to the home page and does not actually contain any info if you open it up. Does this affect SEO and can it be avoided?

    Thank you

    • Reply Tim Bowden says:

      Androo,

      No it shouldn’t effect your SEO as that page isn’t shown in the browser. All your keywords and cleverly named images are on the right pages.

      Tim

  7. Reply Gjalt says:

    Hi Tim,

    In my cleaning spree trying to get rid of old (before iWeb) files, I deleted everything besides the (what I thought) folder that stores all the new iWeb-site files. That didn’t go very well…

    I guess I shouldn’t have deleted the index.html file in the main folder since that redirects to the iWeb pages, right? Now people only get a blank page when they type the main adress for my site…

    Do you have a tip on how to restore that index.html file? Is there a way to recreate that?

    Thanks,
    Gjalt

  8. Reply Bill MacNeil says:

    Greetings Tim,

    It would seem that this is the reason for iWeb created pages not being compatible with
    eBay listing pages which won’t accept the java script and meta files. I’ve searched your site in hopes of finally finding any current information on how to make my iWeb created eBay listings work with eBay’s restrictions, but I’ve come up empty. If you have any information pro or con, it would be greatly appreciated.

    Thanks in advance – Bill

  9. Reply Jason says:

    Great Article!

    Quick question with regard to the way iWeb creates it’s site folders. If I’m uploading an iWeb site to a Windows server, do I need to do anything special? Do I need to include the .plist file that resides outside of the site content folder? I’m guessing yes, but thought I’d ask.

    To clarify, FTP is not an option in this scenario. The site is hosted on a secure Windows server, so I’m forced to export my iWeb site to folder, then transfer those files via thumb drive to the one computer that controls the server. Very frustrating and not ideal, I know.

    Any help would be greatly appreciate.

    Thank you in advance.

    Jason

  10. Reply Jason says:

    Hi Tim:

    Great blog – I’ve built about a dozen iWeb sites for business and personal use. I love the program and have referred to AAi often.

    What drew me to this article is a problem I’ve encountered that has to do (I think) with how iWeb exports the site to folders. I’ve successfully uploaded all of my iWeb sites (thus far) to a linux server via FTP. Never a problem.

    I’ve recently tried to upload a site I built to a secure Windows server after exporting the site files to folder, then transferring those files to the server via thumb drive. Sadly, this is the only option – FTP isn’t possible in this situation.

    Long story short, the site isn’t loading. There’s no particular error message, the site simply doesn’t load when you type in the URL.

    The file tree looks different than the site that was there before, due to the fact that iWeb has a .plist file and an index file that reside outside of the site content file. I’m wondering if you have a workaround for that. Am I doing something wrong or is it simply that iWeb doesn’t play well with Windows server.

    Anyone else have similar issues and / or a solve?

    Any help from the AAi collective is greatly appreciated. Thanks in advance.

    Jason

  11. Reply Morgan says:

    my first website , the twr one is woking fine, but the one named lowrange and mos worked for a few days and now it stalls when you enter the site, its like a cover thats over the whole site, and the images doesn’t load at all, and all of them are quiet small png files.

    Help plzzz

Leave a Reply