Vamos a montar ya una verdadera página Web.

Por favor… leed atentamente y seguir paso a paso el tutorial. Hay que primero entender bien, para mas tarde no tener problemas a la hora de ejecutar los pasos y que todo quede genial, vale?

Esta vez la estructura ha de ser para todas la misma, los contenidos evidentemente podréis variarlos cada una, pero la estructura conviene que sea la misma vale? Además, lo convertiremos en nuestro index desde el cual accederemos al resto de los documentos.

Vamos a ‘engañar’ a los navegadores que no sean IE, para que vean bordes donde no los hay Eso si, de momento y hasta no aplicar estilos propios, no podremos sino simular bordes sólidos, sin virguerías

También trabajaremos el concepto de ir anidando tablas unas en otras, cuando hagamos diseños gráficos para traer a tablas, veréis que es como construir un puzzle y la forma de unir las piezas es de este modo.

Empezamos:

Vamos a crear esta pagina, como si fuera totalmente independiente de lo que hemos ido haciendo hasta ahora. Creamos una carpeta nueva, a la que llamaremos web sin imágenes, o portal, por ejemplo, en nuestro Sitio.

* Notas: Cada carpeta que tenemos dentro del Sitio, es lo que llamaremos Directorios y dentro de los directorios, podemos crear de nuevo un documento index.htm. Para verlos en los navegadores, ahora si que habrá que poner toda la ruta, no como cuando hemos creado el index, htm principal, que bastaba con poner la dirección que nos dio el servidor para llegar a la página.

Dentro de ella, iremos guardando los documentos que luego vincularemos en el Index que ya tenemos y así podremos ver nuestro trabajo.

Abriremos un nuevo documento htm e insertaremos una tabla. Nos vamos a ir acostumbrándonos a asignar una medida de ancho, que sera generalmente con la que siempre empezaremos una página y que son 780 px.

*Nota : De este modo nos aseguraremos que se vera perfecta en una resolución de 800. Se trabaja así, porque aun hay la mayoría de gente que  usan esta misma resolución Mas tarde podremos elegir si le quitamos esta medida o continuamos con ella)

Este documento, sera el index del nuevo directorio, así que lo guardamos, dentro de el, con el nombre index.htm.

*Nota: Alerta, al guardarlo, asegurarse que lo hacéis en el directorio o carpeta correcto, si no, pisaria el que hemos modificado y es el index principal de nuestra Web. Si no queréis correr ese riesgo, guardarlo con otro nombre, como por ejemplo portal.htm, websinimg.htm… etc,.

Como ya hemos visto como configurar las propiedades de la pagina, este sera el primer paso, os dejo un enlace, por si no lo recordáis:  Propiedades de la Página.

Una vez que hayamos configurado las propiedades de la pagina, insertamos una tabla con esta configuración:

4 filas, 1 columna

Esp. celda 1

Borde 0

Desde el Inspector de Propiedades y con la Tabla seleccionada:

Ancho = 780px

Alinear = Centro

Color de fondo para la tabla = #DE931C

Seleccionamos todas las filas y ponemos un color de fondo a las Celdas <td> O una a una tanto da, solo que para agilizar, podemos hacerlo así

Observamos que al haber configurado las propiedades de la página, ya no hemos de dar formato al texto.

Y la alineación basta que la apliquemos a la celda también. De esta forma ya nos olvidamos de la alineación del texto. Bastara con darla a la celda.

*Nota: Vamos a crear muchas tablas 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. Por eso, aplicaremos otro diferente a las celdas, que seria el que haría de color elegido para la página.

Repetiremos estos pasos en cada una de las tablas que insertemos. Es decir: Crear la tabla, y configurar el ancho, ( que si variara a partir de ahora) color de fondo a la Tabla, a la Celda y alineación tanto a la tabla, como a la celda. Es muy importante que nos habitemos a esto, pues mas adelante nos va a evitar muchos trastornos y malos ratos de porque no nos hace caso al aplicar un estilo, vale?

Para ayudarnos y ver mucho mejor el trabajo, es interesante poner la tabla en modo Ampliada:

Esto nos ayudara y si comprobáis así mismo en vista previa, veréis que no afectara en nada al aspecto de la pagina, solo nos facilitara el trabajo.

Nos situamos en la primera fila e insertamos una nueva tabla,

1 fila, 2 columnas

Alineada al centro

Esp. celda 1

Borde 0

Ancho, a partir de ahora, a 100%

Añadir el color de fondo a la tabla (color base)

Alineación ahora no es necesario dársela a la tabla, ya que la tenemos anidada en una que tiene un ancho concreto, ( 780 px) el 100% que le hemos asignado a esta, será por tanto el 100% de 780px. Podéis si queréis dársela, pero no se moverá de donde la hemos colocado y de lo que se trata es de trabajar lo menos posible no?

Igual que antes, aplicamos el color de fondo a la Celda:

El aspecto que va teniendo sera así:

*Nota: Vemos mas pequeñas las tablas en las capturas, porque para mostrarlas les di otro tamaño!

En la segunda y ultima fila, insertaríamos una tabla con 1 fila y 1 columna. A la cual, solo insertaríamos el color base al fondo de la tabla, podemos usarlas o no, pero ahora nos hará la primera de separación y la ultima de pie de pagina:

A las celdas, podemos darles la alineación aunque de momento les vayamos a insertar ningún contenido. Así mas tarde ya estará aplicado. La de arriba, quedara bien sin nada, como separación de lo que sera el Titulo y el resto, pero en la de abajo, podemos insertar nuestro correo o el copyright y quedara mucho mejor si esta justo en el centro, no?

Nos vamos a situar en la tercera que será donde insertemos los contenidos. Insertamos una tabla nueva, configurada igual que las anteriores, solo que serán 1 fila y tres columnas:

Aplicamos el color de fondo a la tabla y luego a las celdas:

Estas tres columnas, serán las que van a carga los contenidos de la pagina, así que las dos laterales, serán las distintas opciones que luego vamos a tener. Estamos montando una estructura, mas o menos de un Portal, así que estas columnas laterales, han de ser mas estrechas que la central.

Con el cursor situado en la primera celda, en el Inspector de Propiedades, le damos estos valores:

Después a la lateral derecha, los ponemos igual. Si seleccionamos la taba, veremos que quedan así:

Las columnas marcan la anchura : 150 y la central que no le dimos nada mas que alineación, ocupara el resto, del 100% de la primera tabla, que era 780 px. recordáis? y no muestra nada.

*Nota: La cifra que vemos justo en el centro de 100%, nos indica que la tabla la insertamos con este porcentaje. No debéis hacer mucho caso a lo que muestra la captura, puesto que yo modifique el ancho de la primera tabla, para que me dejase mostrarla toda y la captura no fuese demasiado grande. Pero si al concepto que indica… nos dice que la tabla es un 100% de la anterior, donde esta insertada y que su anchura en pixeles es de 483. Os lo comento tan solo como dato, por si os fijasteis, para tener una idea de lo que significan estos números. Mas tarde es interesante si hemos de diseñar una Web, teniendo esto en cuenta, podemos hacerlo al milímetro.

Si escribimos un texto y pulsamos varios Enter, el aspecto que ha de tener desde el navegador sera así:

Ver Aquí

Escribí un texto en cada celda y fui aplicando un formato de encabezado de distintos tamaños, a cada texto.

Es hora de comprobar en los navegadores que se ven igualitas en los dos, Si no es así chiquis… algo no fue del todo bien, por lo que os aconsejo empezar todo de nuevo, mejor que en estos momentos, intentar ver donde anda el problema vale??

Yo voy a poner en la web, un ejemplo de cada tutorial, vosotros podéis ir despues de cada tutorial y una vez este todo correcto, trabajando en el mismo documento, para así no liarnos mas, vale?

El ejemplo de este tuto, lo veremos en Web Diseño – Shalana , como Portal .