| Heading With Your Important Keywords | | | | structure in HTML. The nav section butts up |
| | | | against the top left corner of the page (top |
| Subheading With Important Keywords | | | | and left are both 0px). The # sign defines |
| | | | the "id" of the div followed by the name. I |
| Your important content will be here, with | | | | set the width to 200px which is like making a |
| keywords. Notice how this is right at the | | | | table cell that width. I have used the 500px |
| top of your code. No matter where this is on | | | | height just as an example so the summary |
| the page, you want it here at the top of your | | | | below will start where the nav ends. You |
| code. | | | | want to be sure everything will fit with the |
| | | | sizes you specify. You can also set padding, |
| This could have image buttons, text, or both. | | | | but unlike a table cell in HTML, you can set |
| If using images, make sure to include alt | | | | each side separately. In the example above, |
| text which should contain keywords. With | | | | the first 20px is the top, then it declares |
| tables for layout, this would most likely be | | | | each side in clockwise order so the left side |
| above the content, now it is below where it | | | | is also 20px. */ #summary {position: |
| should be. The div id above will help you | | | | absolute; top: 00px; left: 0px; width: |
| control this. | | | | 200px; padding: 20px 10px 10px 20px; } /* |
| | | | The summary above starts where the nav ends, |
| As the name can imply, this can be at the top | | | | at 500px from the top. The other settings |
| of the page, but notice how it is way down | | | | match for alignment. I did not set a height |
| in your code because it has no strong SEO | | | | because it will stretch just like a table |
| elements. It might be your logo or additional | | | | cell when you insert your content. */ |
| navigation. Even though it shows at the top | | | | #banner {position: absolute; top: 0px; |
| of the page to the user, it is not the first | | | | left: 200px; width: 550px; height: 150px; |
| thing you want the search engine to read or | | | | padding: 20px 0px 10px 20px; } /* The |
| display in search results. | | | | banner will be at the top of the page, but |
| | | | will start at 200px from left where the nav |
| This example of another div is used to | | | | ends. Declaring a height is optional, but it |
| illustrate another SEO principle. Use | | | | will help for making sense out of where the |
| keywords in it so it is like your closing | | | | content below will start. I used 150px just |
| point. By appearing at the bottom of the | | | | as an example. The reason for 0px padding on |
| code, it makes stronger SEO. | | | | the right side is because the remainder of |
| | | | the screen is empty in this layout, no need |
| Next, I will show a simple example of how to | | | | to pad that side. I limit the width so it |
| make the file.css to control the layout. You | | | | will display well down to 800x600 res (the |
| can use this code in a text editor to see the | | | | total width here is 750px). */ #content |
| effects. For simplicity, I will focus on only | | | | {position: absolute; top: 150px; left: |
| the layout code, we will not be declaring | | | | 200px; width: 550px; padding: 10px 0px 10px |
| fonts, sizes, links, etc. | | | | 20px; } /* Now the content starts right |
| | | | where the banner leaves off, 200px to the |
| In the HTML example, we have 4 sections | | | | left and 150px from the top. Notice this is |
| (divs). You can divide up by pixels or | | | | last. If you used tables to create the same |
| percentages (or even both). We will be using | | | | layout, this would be last in your code too. |
| pixels for simple illustration of the | | | | The search engines would read everything else |
| principle here. | | | | before getting to the meat of your page. In |
| | | | the HTML used here, it is at the top of your |
| /*Begin CSS*/ /*Just for the record, this is | | | | code so the search engines see it first. */ |
| a comment in CSS*/ #nav {position: absolute; | | | | /*End CSS*/ |
| top: 0px; left: 0px; width: 200px; | | | | |
| height: 500px; padding: 20px 10px 10px 20px; | | | | These are simple examples, but if you can |
| } /* To explain the code above, I listed | | | | think in terms of top down logic, you can |
| the divs in a different order than the HTML. | | | | build search engine friendly pages. They will |
| This order follows the flow of the way I am | | | | also load faster as complex table structures |
| doing the page layout. It also follows the | | | | take longer to load than CSS layout, which is |
| flow you would have if you set up a table | | | | another benefit to CSS. |