Site Formatting

Well, a sites format or layout is extremely important when making a website. There are many things to consider when developing the layout. Ease of use should be the first concern while also considering how it looks and if the information is sensible. There are many different techniques that can be used when formatting your sites layout all of which will be discussed below.

Major Considerations While Designing a Website

  - Easy Navigation - Don't let users get lost or confused.
  - Links - Make sure all links from all pages are working.
  - Focal Points - Know where your user is most likely to look, place more important information there.
  - Understand Your Visitors - Design like a user of the internet, not the owner of a website.

This formatting can be done using many different techniques.  I will discuss the major ones and hopefully they will help when creating your page.

Top

What is meant by formatting?

The format of your site is the way it is set up. This site for instance has the menu on the left and the information on the right. I decided on this because it is very simple to follow and information is easy to find. In the end the design is up to you. What I'm trying to help you with is what codes to use to achieve the design you want. After reading this you should almost be able to picture a design in your head and already know what the code behind the look will be.

Top

What's a Table?

A table is just a layout of different boxes which are attached to one another that allow you to separate your websites page into different parts. This sites layout is designed using tables because it is the easiest and most effecient way to create the design I was looking for. As you see there are lines which separate the different boxes of my table. One has the Code It All banner seen at the top. Then another section allows me to place the Google advertisement. Then two sections of the table are placed next to each other, one for the menu and the other for the information and below that is the footer of the page.

Top

How do I use tables?

Tables are a little confusing and as you may have noticed from the other pages, I believe the best way to learn is by seeing it done. So that's exactly how I'm going to do this.

I will explain the coding of a table piece by piece.

<table border="1" cellspacing="0" cellpadding="0" width="100px">

The code above is the initial part of the table. As you see here the border is set to 1 which allows you to see the different outlines of the table.

Cellspacing and cellpadding are a little bit tougher to explain so if that's what you are looking to learn please view the following image.

Cellspacing, Cellpadding HTML Example.

Width is exactly what you'd assume. How wide do you want the entire table to be. In this example it is set to 100.

Now that the initial setup of the table has been set it's time to tell it what it's really going to look like.

Taking this code apart piece by piece you will first notice the <tr> line which is coupled with </tr>.  This tag declares the row that you are working with.

The next line is ' this is best explained as the column of the table.  The background color in this example is set to red bgcolor="ff0000".

colspan=4 Chooses the amount of columns that the column you are working in will take up.  In this case 4.

height="50" Sets the height of the column to 50 pixels.

The next line is placing an image inside of the column you've just created.  If the size of the image is larger than the table is set then the table will expand to hold the image, or text for that matter.

In order to add a row underneath that you will need to open a new <tr> and <td>

<tr>
<td bgcolor="#ffffff" width="30" valign="top" style="padding:5px;">
Menu

But wait!, what if you didn't just want one column underneath this image. Well then you just need to close that column using the </td> tag and then open up a new td on the same row. In order to stay on the same row you cannot close the <tr> tag using the </tr>

</td>
  <td bgcolor="#ffffff" width="70" valign="bottom" style="padding:5px;">
   Main Text
  </td>
</tr>

Here the code closes the opened column and opens a new one.  With the text Main Text inside of it and close the column using </td>.  Then and only then can we close the row using </tr>.

The initial width of the table was 100px which means that if we are going to have two columns in our table the size cannot exceed 100px.  That is why the first column is 30 and the second is 70.  30 + 70 = 100.  The background color for these images is set to white.

valign="top" This vertically aligns the text or image to the top of the column that was created.  If set to bottom it will be on the bottom, center the center.

Setting the style padding to 5px makes it so that the text will be spaced 5 pixels away from all borders of the table.  This makes it look much more opened.

</table>

All thats left is to use the code above to close the entire table and you're done.

You will notice in the examples below that although the top row is set to have a red background that until example three where the size is set larger than the image you will not see the red background because the image takes up more than the size of the row which stretches the tables section to just fit the image and no surrounding color.

- Example 1 - The finished code using the steps above.

- Example 2 - This is what the table would look like with no borders.  Notice the design is the same but there is not edges to separate the parts of the table.

- Example 3 - This example enlarges the height of the top section of the table.  You do not need to make the width of the table larger to show the background color however, you will notice only red shows below and on top of the image.  To see red to right and left you would need to enlarge the table width since the width is currently set to the same size as the images width.

- Example 4 - The Valign usage was not noticable in the previous examples because no height was set to those sections of the tables.  Here you will notice we set the height larger than the necessary size to hold the text Menu and Main Text.  Menu will be aligned to the top and Main Text aligned at the bottom.  Previously, with no height set, the size of those sections was set by the system to be just large enough to fit the text.  If more text was entered it would expand even further.

- Example 5 - I figure since I made a point of what would happen if height was not introduced to those sections of the table and more text was entered that I would show you since here we like to teach by example.

Example 5 is very useful because it shows that you can use the same table code and just continuously use different information and the table would accommodate the information and change the pages.  If php includes were to be used to send information to the same layout the layout would change based on the information.  You can learn more about php by going to the php section.

Top

What is a Div Layer?

Div layers are similar to tables with a few more options to be spoken of. A div layer is a section on your website in which you can place any information. What it has that can be much more helpful is the ability to specify the location of the layer.

<div style="height:150; width:50;">This is a Div Layer</div>

As you will see this just creates a section to write the line above in. Since the style has no border you just see text and there's no background color difference.
- See This Code In Action

The next step that can be taken in a div layer is to change the background color. That can be done using the following code.

<div style="height:150; width:50; background-color:ff0000;">This is a Div Layer</div>

- See This Code In Action

If you don't want background color simply take out that portion of the code. Instead a border can be used to show the edges of the layer.

<div style="height:150; width:50; border:1; border-style:solid; border-color:ff0000;">This is a Div Layer</div>

- See This Code In Action

Here you will notice the border is set to 1 pixel wide and the color of the border is red.  Also, notice you need to declare a border style or the border will not appear.  Some choices for border style are solid, dashed, or dotted.
In the style section of div which is what we are concentrating on here you may notice that most commands are the same as in any other tag.  Therefore padding will work here just as it did in the sections of the table.  IF you notice in the previous example the text is right next to the border while in the example below (using padding) we are able to create a space between the text and the border.

- See This Code In Action

The biggest thing to notice about div layers such as these is if you create the size too small the layer will not adjust the size.  Text will simply flow out of the border.

Div layers can also have the code overflow:; placed within the style=" " and it can either have hidden or visible as the value of overflow.  This is most easily explained by seeing it in action.

- See Overflow Hidden In Action

- See Overflow Visible In Action

Top

Div Positioning

Div positioning is where the whole div layer idea gets a little tougher.  There are two types of positioning.  Absolute and Relative.  Before we get into examples I will do my best to explain the difference.

When using absolute positioning the basis for the distance is the sites borders.  Meaning if you position absolutely and say to have it 10 pixels from the top it will be exactly 10 pixels from the top of the page.

When using relative positioning the position is not based on the entire page instead it is based on the bottom of the last thing placed on your site.  If a table is written before using a div layer the position is based on the bottom of the table.

Positions can be based on top:;, bottom:;, left:;, or right:;.  Try to only use left or right and top or bottom.  In between : and ; place the number of pixels you would like the div layer to be from that section.

<div style="position:absolute; top:10; left:20; border:1; border-color:black; border-style:dashed;">This is a div layer with positioning 10 from the top and 20 from the left.</div>

- See Absolute Positioning In Action

<div style="position:relative; top:10; right:300; border:1; border-color:black; border-style:dashed;">This is a div layer with positioning 10 from the top and 300 from the right.</div>

If you change the position to relative and use 300 pixels from the right and 10 from the top you will see a different result.

- See Relative Positioning In Action

Top

iFrames

iFrames are just like div layers but with some cool abilities. iFrames allow you to open a website within your website.

- See iFrames In Action

Now to explain each of the peices of the code above.

name="examplepage"

name allows you to specify different iframes on a single page. This is used to allow the opening of websites within the iframe. This will be explained in more detail later on.

src="http://www.codeitall.com"

src is the source of iframe. In this case Code It All opens in the iframe. Change the link and the new page will open in the frame. Leave it blank if you don't want anything to show up.

style="width:200; height:200; overflow:visible; border:1; border-type:solid; border-color:ff0000;"

Well most of this should look familiar from the previous pages of this site but I will explain again for those who might've skipped ahead.

width is how wide the iframe is. height how high.

This places a red border color around the iframe. Note that border:; must be higher than 0 for this to have an effect.

border:1;

This code just tells what size the frames border should be.

border-color:ff0000;

This code just tells what color the frames border should be.

border-type:solid;

This code just tells what type of border is wanted for the iFrame. Choices for this are solid, dashed and dotted.

Back to using name= along with links. The use of name is extremely cool and can be very helpful when using links. For example. Below you see an iframe which is currently displaying nothing. If you click the link above it which links to codeitall.com it will open but only within that frame. That's simply by placing the name of the iframe in for the target of the link.

- See This In Action

Top