Let's ride and a real Web page.

Please ... l eed carefully and follow the step by step tutorial. We must first understand it, to avoid problems later when executing the steps and everything is great, right?

This time the structure must be all the same, the contents of course you can vary them each, but the structure should be the same applies? In addition, we'll make our index from which to access the rest of the documents.

We are going to 'cheat' to browsers other than IE, to see edges where there are none That if, now and not applying your own styles, but we can not simulate solid borders, without fancy stuff

Also work the concept of nesting tables go on each other, when we bring graphic designs for tables, you will see that is like building a puzzle and how to put the pieces is in this way.

We begin:

Let's create this page, like totally independent of what we have been doing so far. Create a new folder, we'll call web without images, or portal, for example, on our Site.

* Notes: Each folder that we have within the Site, is what we will call and Directories within directories, we can recreate a document index.htm. To see them in browsers, now you have to put the entire route, not like when we created the index, htm principal, it was enough to put the address you gave the server to reach the page.

Within it, we will save documents then will link in the Index that we have so we can see our work.

Htm We will open a new document and insert a table. We will be getting used to assign a width measurement, which will usually always start with a page and are 780 px.

* Note: In this way we will ensure will look perfect in a resolution of 800. It works well, because even there most people that use this same resolution Later you can choose if we take this action or continue with it)

This document will be the index of new directory, so we keep it, within it, with the name index.htm.

* Note: Warning, when you save it, make sure you do it in the correct directory or folder, otherwise we would step the modified and is the main index of our website. If you will not take that risk, save it under another name, such as Portal.htm, websinimg.htm ... etc,.

As we have seen how to configure the properties of the page, this will be the first step, I leave a link, you do not remember: Page Properties.

Once you have configured the properties of the page, insert a table with this configuration:

4 rows, 1 column

CellSpace 1

Edge 0

From the Property Inspector and the selected table:

Width = 780px

Align = center

Background color for table = # DE931C

Select all rows and put a background color to cells <td> O gives both one to one, only to speed, we can do so

We note that, having set the page properties no longer have to format the text.

And the lineup is enough to apply it to the cell too. In this way and we forget the text alignment. Enough to give it to the cell.

para realizar este ejercicio, y queremos que se vean bien en todos los navegadores , el dar un color de fondo a la Tabla , es para que se vea un Borde de un color que hayamos elegido. * Note: We will create many tables for this exercise, and we want to look good in all browsers, giving a background color to the table, is to make it look an edge of a color we have chosen. So, we will apply a different one to the cells, which would be the chosen color would do for the page.

Repeat these steps for each of the tables that we insert. That is: Create table and set the width (if you vary from now) background color to the table, and the cell alignment to the table both as to the cell. It is very important for us to dwell on this because later we will avoid many problems and bad times for us because no case to apply a style, right?

To help us and do a much better job, it is interesting to the table in Extended mode:

This will help us and if comprobáis himself in preview, you will see nothing that would not affect the appearance of the page, just provide us with work.

We are located in the front row and insert a new table,

1 row, 2 columns

Center-aligned

CellSpace 1

Edge 0

Wide, from now on, 100%

Add the background color to the table (base color)

Alignment now no need to give it to the table, as we have nested in one that has a width Specifically, (780 px) 100% that we have assigned to it, will therefore be 100% of 780px. You can if you want to give it, but will not move from where we have placed and what it is to work as little as possible right?

As before, we apply the background color of the cell:

The aspect that will be given as:

* Note: We see smaller tables in the catch, because I gave another display size!

In the second and last row, would insert a table with 1 row and 1 column. To which, one would insert the base color to the bottom of the table, we can use them or not, but now we will make the first and last separation of footer:

The cells, we can give the lineup but for now they're going to insert any content. So later it will be applied. The top, stay well with nothing, as separation of what will be the title and the rest, but on the bottom, we can insert our mail or copyright and much better if you stay right in the middle, right?

We will put in the third, which is where we insert the contents. Insert a new table, like the previous set, only to be 1 row and three columns:

We apply the background color to the table and then to cells:

These three columns are the ones that will load the contents of the page, so the two sides, are the various options then we will have. We're putting a structure, more or less of a portal, so these side columns, must be narrower than the plant.

With the cursor in the first cell in the Property Inspector, we give these values:

After the right side, put them equal. If we select the tobacco, we see that down to this:

The columns mark the width: 150 central and we did not give anything more than alignment, occupied the rest, 100% of the first table that was 780 px. remember? and shows nothing.

* Note: The figure we see right in the center of 100% indicates that the inserted table with this percentage. You must not pay much attention to showing a snapshot, since I change the width of the first table, so let me show it all and catch was not too big. But if the concept that indicates ... tells us that the table is a 100% of the above, where this inserted and that its width in pixels is 483. I just commented so as data, in case you fijasteis, to get an idea of ​​what these numbers mean. Later it is interesting if we are to design a website, with this in mind, we can do to the millimeter.

If we write a text and press Enter number, the aspect that has to have the browser will be as follows:

View Here

I wrote a text in each cell and was applying a header format of different sizes, each text.

It's time to check in browsers that are igualitas in both, If not chiquis ... something was not quite right, so I advise you to start all over again, better than at present, trying to see where the problem is worth doing?

I'll put on the web, an example of each tutorial, you can go after each tutorial and once this is all right, working in the same document, so as not tiing more, okay?

The example in this tutorial, we will see in Web Design - Shalana as Portal.