Page layout in iWeb

iWeb for Musicians

Web Page Layout

Main Navigation Menu:

Music Website iWeb Audio Files Music Players Applications SEO Promote Tricks EBlast HTML5 Players

Laying out your page sections

The best template’s to use to start a custom page are the “Black” and the “White” ones. I usually start with a blank page.

First, I go to the “Page” inspector and uncheck the two boxes to get rid of the standard iWeb navigation. I’ll explain why later.

Then I delete the line that’s left at the top of the page, the box that say’s “Text” and then I click on the space that this box occupied and delete the box that is used for your “header” text that is lurking underneath.

Next, I specify the page width and header and footer height. This is done in the “Page” inspector “Layout” menu. The default page width is 700 px but I like to increase this to 980 px. The header height on this website is 200 px and that is high enough to accommodate the page title, the icons and the main navigation menu.

My footer height is 50 px. This takes the place of bottom padding as I don’t need to insert any of the iWeb Buttons which would normally occupy this space. Using these buttons will make your site look as though it was built in iWeb!

I insert a text box into the main content section and type my © notice into it. I can then drag this box down the page to make it as long as I want. I try not to make my pages too long so that there isn’t much scrolling required.

This is the copyright notice box. This should be on every page of your website. The © is created by holding down the Option key and typing the letter g.

I start with the Black template out of habit but I could just as easily use the “White” one. It doesn’t really matter which if you are not using the default navigation.

Ok, so you don’t like black or maybe you hate it! You can change the color in the “Page” inspector or choose “Gradient Fill” and use two colors and have some fun spinning them about with the “Angle” wheel.

Obviously, I have set my “Browser Background” color to black as well.

Once I have got the basic page I click its name in the sidebar and duplicate it a few times - Command D.

Now is the time to ask yourself the BIG question. How many pages do you think you are going to have on your website? What am I going to put on these pages? How can I organize these pages into some sort of logical order?

This is the subtle art of forward planning but, as we all know, the future always contains lots of surprises and twists and turns. The best you can hope to do is make your basic website layout versatile enough to adapt to all those zillions of ideas you are going to think up tomorrow!

Click HERE to read the Disclosure of Material Content in compliance with the FTC Guidelines effective December 31, 2009