Header and Footer layer

You may want some contents to display regardless scrolling (always appear). Since iWeb doesn't support this trick which calls "Floating", we decided to develop this feature for iWebsite. This technique doesn't need HTML snippet, instead you can simply apply this trick to your site with iWeb SEO Tool which is an free tool only working for iWeb. As you can see, we also inserted this gradient layer into header areas of every page. Put important elements like a search field or simple navigation menu into this layer in order to maximize accessibility to foremost interfaces.

Introduction

To build this style for your site, you need to install "iWeb SEO TOOL". If you don't make use of this tool yet, please read this tutorial: Title Tag. This will look like "black-gradient bar" on the top of this site (header). This will create "black-gradient layer" which overlaps upon the footer as well as header. Try to scoll down and up this page.

What contents are better within this layer:

Logo / Brand Identity
Simple navigation menu
Google Custom Search
Social networking icons (Link to Facebook, Twitter, e-Mail, iCloud, RSS Feed, and etc...)
Something which MUST always appear (Floating menu)

Instruction

Download this code, and then extract it.
Go to "layer" folder.
Open "footer-layer.html" or "header-layer.html" file using TextWrangler or TextEdit. (We recommend to download and use "TextWrangler" which is really a great Text editing tool for Mac.)
To compose your own contents in the layer is up to you. We recommend to acknowledge general HTML elements. (also available Basic HTML code tutorial)
Open "iWeb SEO Tools", then select your site folder to insert some scripts into all of the pages.
Copy the code from "<style>" to "</style>" (including <style> tags), then paste it into "Header code box" like below. (within the <head> tag)

Font-type / Font-size / Text color / Layer Background / Layer height (Layer width is always equal to the web browser's width.) can be customizable.
After defining styles of your footer or header layer, you have to make your own contents which will be inserted into the layer. HTML coding is required.
Compose your own contents in HTML. (Below is just an example for footer layer)


<div id="site_footer">
<table><tr><td>
<img src="/images/plugidea-logo-small.png" style="float:left;border:none;margin-right: 15px;"/>Beyond iWeb is one of PLUG iDEA's services.<br>
Copyright © 2011 <a href="http://plugcreative.com" target="_blank">PLUG creative, Inc.</a>
</td></tr></table>
</div>

Copy the code from <div id="site_footer"> to </div> , then paste it into "Footer code box". (within the <body> tag)
It does not matter if you insert a header layer code into the footer code box of iWeb SEO Tool.
For footer layer, "copyright" / "contact information" / "short description about your company or website" would be appropriate. On the other hand, "Social networking links" / "Simple navigation menu" / "Google Custom Search" would be fitted with header layer.
The settings you made will apply to every page of your website, thus every page has same footer or header layers.
For better understanding, please refer to the source code of our example.
If you complete to customize your code, push "Replace" button at the bottom.
This tool will automatically insert "Header or Footer layer" to all pages at once.

Whenever you publish your site again, you MUST do this. Otherwise, this script will be vanished.