Estructura web solo con tablas III
Para entenderme yo, imagino a las tablas con la propiedad de ‘elasticidad’ Vamos a ver porque las imagino así. Y sigo trabajando en el documento que había guardado como portal2.htm
Ver aquí tamaño original de la captura.
En la celda superior, que guarde pensando en poner el titulo, lo que quiero hacer ahora, es poner un logo y una imagen. Sitúo el cursor sobre el texto que había insertado antes y lo selecciono todo, y nos sera de gran ayuda, el tener el espacio de trabajo del DW en Diseño dividido:
Ya que nos permitirá ver si hay o no párrafos en esta celda ( <td> </td>) y vemos que si hay:
<td align=”center” bgcolor=”#FFF1D6″><h1>Diseño Web sin Imágenes </h1><p> </p></td>
Para que este totalmente limpia, habríamos de dejarla así.:
<td align=”center” bgcolor=”#FFF1D6″></td>
Sin embargo, para que la celda no desaparezca, ha de haber algo dentro de ella, pues si no, se esfuma! con esta combinación de caracteres especiales: lo que hacemos en insertar un carácter invisible en la celda, no se vera nada pero no desaparece tampoco 
Ya iréis viendo, que el DW, lo pone solo, y basta suprimir el texto y la etiqueta desde la barra, encima del Inspector de Propiedades:
Una vez que este ‘limpia’ del todo, vamos a Insertar/Tabla con esta configuración:
Y como no se las imágenes que vais a utilizar, dejo a vuestra elección, si aplicáis fondo a la tabla o no, o a la celda, como habíamos hecho en los tutos anteriores. En mi caso si lo hice. Lo que si haremos todos es poner alineación (Centro, y dar tamaño de ancho a la celda/columna de la izquierda:
150 px, como antes le habíamos dado a la columna de las opciones, o menú. El efecto estético, es fundamental en una Web, así, que estas columnas han de estar totalmente igualadas, en caso de tener 200 px en una, la otra conviene que sea también de 200 px.
En el Psp, ( o cualquier programa de gráficos ) creamos una imagen que nos sirva para este cometido y tendremos en cuenta, las medidas de las columnas, o la simetría de estas quedará eliminada, independientemente de que les hayamos dado el mismo valor de anchura.
Vamos a verlo
Preparar tres imágenes, una de 100/100, 150/150, 200/200 píxeles, e iremos insertándolas una a una, a ver que ocurre: Insertamos la primera, de 100/100 px:
No habíamos puesto alineación en la celda, por tanto queda en la parte izquierda que es la predeterminada. No rompe la simétrica de las columnas, pero queda descentrada, por lo que esta nos puede servir ya que para centrarla, ya sabemos como hacerlo. Alineación = centro en la celda
Para comprobar por vosotros mismos, podéis también probar de quitarle el valor de anchura, o incluso cambiárselo a 100 Os queda así?
Se adapto por completo a la imagen, a su tamaño.. por tanto si es mas pequeña y queremos que la columna tenga un ancho concreto, hemos de dárselo por separado a ella, o nos quedará mal el diseño.
Observar así, mismo, que toda la Fila, tiene la misma altura que la imagen, y as,. lo hará con las próximas imágenes, por tanto de la altura nos hemos de preocupar, tan solo al crear la imagen, ya que la misma que tenga esta, será la que tendrá la Fila, y claro, afectará también a la tabla donde este insertada.
No cambiéis el valor de ancho de la celda, dejarlo a 100, vemos que ocurre con la segunda, 150 px:
Queda perfecta, a la primera, incluso aunque la celda no tenga el mismo valor de ancho… que la imagen! Veis porque les llamo ‘elásticas’?
*Nota: Fijaos también, que en el recuadro donde vemos el valor de la celda, nos dice, 100 (150), be… 100 es el valor que nosotros hemos puesto antes, y entre paréntesis, vemos el que tiene realmente.
Para acabar de comprobarlo, vemos que ocurre con la imagen de 200 px:
Y dará lo mismo que cambiemos el valor al tamaño de la celda! Es elástica!!! Por lo tanto, podemos ver que quien acaba mandando, son las imágenes, o contenidos. Porque hemos usado una imagen, pero un texto nos hará lo mismo. Un enlace largo, igual.. La tabla, celda… se ‘estirara’ hasta abarcar todo el contenido que insertemos y de poco nos servirá haber puesto un tamaño concreto… alargará y crecerá tanto como el contenido que insertemos en ellas!
Con respecto a la altura, si alguna vez os ocurre que observáis que la celda es mas alta, o que sobra un espacio sobre la imagen:
Se deberá como se observa en la captura a que hay una etiqueta, en este casp <p> (párrafo) un contenido mas que aunque no vemos.. esta y nos molesta! hemos de quitarlo
Pondremos por tanto, el tamaño adecuado a la imagen que estamos usando y que en mi caso es 150/150 px y para las imágenes siguientes, tendré en cuenta que el máximo de altura, si no quiero que me desmonte el diseño, sea de 150px.
En la celda de la derecha, insertamos una tabla con 100% y esta vez si que no hemos de poner fondo ni nada, la dejaremos transparente y que se vea el fondo que ya habíamos puesto anteriormente:
En la columna de la derecha, inserto una imagen y le asigno el mismo valor (a la columna) que tiene la imagen de ancho, como veis, la altura es inferior a 150px.
Se puede ver mejor en la siguiente captura:
y ni hemos de preocuparnos por la alineación ni nada mas.
En la otra columna inserto una imagen de un texto y en le asigno alineación central, y queda ‘flotando’ en el centro que es lo que pretendía, para el próximo paso.
A la celda no le asignaremos ningún valor de ancho.
Y lo interesante viene ahora, ya que si en la primera tabla, sustituimos aquellos 780 px del principio, por 100%, se ‘estiraran’ todas las tablas:
Escribimos 100 y cambiamos a %
Conservando el mismo diseño que teníamos pero esto hara que el usuario final, cuando entre a nuestra pagina, tenga la resolución que tenga, la vea a pantalla completa, sea de 600, 800, 1024, 1280 o superior.
A mi sigue gustándome mas ‘recogidita’ es decir, con el valor inicial de 780 px pero ahora que sabemos como cambiar esto, cada uno que elija la forma que mas le guste