Diseño Web, FrontPage, diseñando con tablas:
(Edición 29/2/08)
Continuando lo visto en el punto anterior en el Curso
para iniciarse en el diseño web seguimos, ahora con el "como se hace" en
relación a las tablas.
Antes, cuando la mayoría poseía un resolución de pantalla
standard decía: "Puede insertarlas de los tamaños que
desee, la cantidad de filas y columnas que quiera y puede poner una tabla
dentro de otra e incluso juntar columnas o filas o celdas adyacentes,
siempre que quede prolijo.
Muchas Web profesionales están realizadas de esta manera:
manejando tablas."
Lo recomendable por el tema de la
resolución de pantalla según el tipo de monitor que utilice el usuario, es
realizar una tabla central de unos 1010 píxeles aproximadamente de ancho,
centrada.
Ahora bien si su pagina es una pagina personal en index, es decir la principal, lo mas probable es que no tenga que utilizar
una tabla, sin embargo la utilizará por ejemplo en la sección fotos
personales, o en una sub-página en la que tenga por ejemplo poesías. A mayor
contenidos se hace mas necesario el orden y la estructura.
Para manejar las dimensiones de las
mismas basta con poner el cursor del mouse sobre la línea a mover, teniendo
apretado el botón izquierdo del mouse trasladar hasta la medida deseada.
O mejor, botón derecho del mouse en la celda o tabla a modificar sus
dimensiones, propiedades de celta o tabla según corresponda, y allí ingresar
el valor correcto deseado.
Tenga en cuenta, el tamaño
real que observará nuestro visitante estará relacionado con el tamaño que
tenga su Explorador, si no limita la tabla central como si indicó, o le
especificó a esta un porcentaje. Revise igualmente de estar haciendo una web
comercial, como queda la tabla desde distintas medidas del
navegador y resoluciones, antes de dejarlas establecidas.
Podrá hacer lo siguiente en el
diseño:
Propiedades
de tabla es para modificar una tabla. Propiedades de celda, es para
modificar una celda contenida en una tabla.
Especificar un ancho y alto,
especialmente un largo que no ocupe todo el largo de la hoja. Se puede
especificar en porcentaje, o píxeles para ser exacto en un diseño que lo
requiera.
Alinear una tabla. No se confunda con la
alineación de la barra de formato, esta es para texto, de la misma forma se
puede alinear la tabla pero desde sus propiedades. Desde alineación dentro de propiedades
Se podrá poner una imagen de fondo en
Fondo, tendrá que tildar en utilizar imagen de fondo y seleccionar la imagen
con examinar.
Si en tamaño de bordes ingresa cero no se verán las
líneas, si pone un número mas grande las líneas de la tabla, estas se
ampliarán.
Las etiquetas para tabla son:
<TABLE>
</TABLE>
Es la etiqueta general, que engloba a
todas las demás. Estas dos indican principio y fin de tabla, entre
estas irán todos los datos de tabla: filas, columnas y contenidos
<TABLE BORDER= ......>
(en los puntos suspensivos irá el número que desee)
Presenta los datos de
borde, haciendo las tablas más atractivas, manejando el grosor.
<table border="1"
width="98%">
Esto significa que hay
una tabla con width 98% , es decir de ancho 98 % de la página,
con un borde visible.
<TR> Acá va el contenido de la fila </TR>
Esta etiqueta es para realizar una
fila, obviamente el contenido irá entra ambas TR. Cada vez que se
quiera agregar una fila en html se agregará otro par de <tr>
<TD> [contenido de cada celda (imágenes,
texto, etc.)] </TD>
Permite formar las distintas celdas
que contendrá cada fila de la tabla. Hay que repetirlas tantas veces
como celdas queramos que tenga la fila.
<TR>
<td width="50%"
align="center"
</TR>
Este es un ejemplo:
Td es entonces una celda
que está dentro de la fila <TR>, tiene un ancho de 50 % del espacio de
la fila y esta centrada. Si agregamos otro <TD> del mismo ancho, nos
encontraremos entonces con una fila (etiqueta <TR>) que posee dos
columnas (etiqueta <TD>) de ancho 50 % cada una (etiqueta <width>
<TH> [encabezamiento de tabla] </TH>
Es utilizada para colocar
encabezamientos en negrita sobre las columnas
Este Sitio en Internet está realizado en
su mayor parte por la siguiente estructura de tabla. Es muy sencilla.
Logo
links
Contenido
foro
Aclaraciones
Para añadir un fondo
En la clase para diseño grafico para Web vamos a realizar un fondo, ahora
pondremos una imagen o color. Las imágenes deben ser claras, casi
transparentes o bien no dificultar la lectura.
Formato, fondo, aquí seleccionamos un color o una imagen.
Para imagen tildar en “imagen de fondo” y luego ubicarla desde
“Examinar”
Seleccione “marca de agua” para que se mueva solamente el
texto y no la imagen de fondo cuando utilice, en el navegador, la barra de
desplazamiento.
