Google Sites Tip - Background Layout

When you making a background for your Google Site make sure you use "Blank Slate" as your theme.  This is the only theme I know of that support transparency.

First of all, take note of your header's height in 'Site Layout.'  If it is 125 pixels high, make a header that is exactly 125 pixels high.

Here's a great tip for horizontal navigation: The horizontal navigation bar is 25 pixels high.  So, in this scenario where you have a 125 pixel header, create a background that incorporates your horizontal navigation bar starting at 125 to 160.  That will give you some space above and below your bar.

If you don't want any space above and below make it snug 130 to 155.

Click on and save this background and use on your website.  Just make sure your header height is 125px.

 

Here's what it looks like on your Google Site

Here an example of a finished product using good background layout and design.

Tip - The Small Things

Even BIG professional web designers miss some basic things in Google site powered professional  website.
Some of them are:

1. Favicon:   Making a favicon and upload in Google sites is very simple. That gives you the personalised look.  That’s not very tough, right?... Go to favicon.cc and just make one favicon and upload it in Google site's attachments. (Ha ha, I know, most of them are aware of it, but even they are not doing it.).
2. Site header/ Background/ Wrapper images:   Some plain Background images are always not necessary too BIG, like this.

 

           You can make a header like this, instead of above.

    

  and make it repeat horizontally.   So we can reduce the size, and web page will load faster.

3. Logo:   It’s always nice to put a logo in separately uploaded as logo ( Site layout> Height: Use theme default (change logo)). So that, It’ll clickable to homepage. You can make a .png image with background as transparent.

 
See the sample site.