 |
Layers
What is a Layer?
Think of a layer as an empty container waiting to be filled with some element of HTML. This element can range from a simple background color to a flash movie. Layers have a wide range of uses but basically they are always used to layout an HTML web page.
Lets first look at the syntax of a basic layer code:
<div id="Layer1" style="position:absolute; left:57px; top:66px; width:250px; height:63px; z-index:1"></div>
Explanation of the above code:
|
<div
|
opens the layer tag
|
|
id="Layer1"
|
allows each layer to have its own identity, this is important if there are actions created which will affect specific layers (i.e. hiding or showing a layer based on users input)
|
|
Style=
|
allows for specific formatting of the layer. Below are explanations of the specific styles used in the above layer:
|
| |
|
position:
|
absolute vs. relative
|
|
left:
|
in pixels, tells the layers to be X pixels from the left of the page
|
|
top:
|
in pixels, tells the layers to be X pixels from the top of the page
|
|
width:
|
in pixels, tells the layer to be a certain width
|
|
height:
|
in pixels, tells the layer to be a certain height
|
|
z-index:
|
allows the layer to be positioned on the z-axis in relation to other layers, the z-axis is the 3d-coordinate which basically allows one layer to appear on top of or behind another layer, where 1 is top and 2 is below, etc. (note: the z-axis only affects other layers, you cannot tell a layer to be behind another element of HTML such as an image, unless that image is within a layer.)
|
|
|
</div>
|
closes the layer tag.
|
The above example is a very simple version of the layer tag. Combined with javascript, layers can be shown or hidden based on user input (clicks), layers can be moved with or without user input (imagine a logo flying across the screen) etc, etc. The usage and functionality of a layer is only limited by the browser which will handle the code. This means that Netscape may not understand what the z-axis is but IE will.
What do layers have to do with Search Engine Optimization?
To answer this we need to look at one of the most important aspects of the layer: top: X left: X, again this tells the layer to be x pixels from the top left corner of the page.
If a layer is a container waiting to be filled, which can be positioned anywhere on the page regardless of the code, this is very important for search engine optimization. Earlier we discussed the limitations of tables with respect to their layout of the code of a page. Because of the code structure of tables, your most important information may not be found within the code of your page until the bottom of the document. If a spider which visits your page does not index all code on all pages, they may not reach the bottom of your document, therefore not index your most relevant information. Furthermore, we will use a layer to put the important content higher on the page at the code level, therefore ensuring that the spiders encounter and index this information first. This is important because we do not know exactly how every spider acts when crawling your site. Questions like: Will the spider index every page on my site? Will the spider index every peice of code or just the content? The answer to these questions vary, therefore we try and assume the worst, which is the spider will not want to read a WHOLE page from your site, and if we put the important content as close to the top of the document, we feel there is a very good chance the spider will index the information we'd like it to.
A layer aids in this because no matter where in the code of your HTML document your layer tag appears, the information will be rendered on the browser dictated by the "top: x; left: x" coordinates.
 Is all of this making your head spin yet? This is actually a very simple concept, click the button on the right to view a graphical version of this information.
Lets now take a look at a submission chart for the major search engines. Next Section >
|
|
