23) [KompoZer] Cuestiones de Diseño

Filed under: , , by: NaNo

Como ya lo hemos dicho, las tablas son una importante herramienta para la maquetación de los contenidos dentro de una página.
A efectos de diseño podemos diferenciar dos tipos de tablas:

Tablas contenedoras: Se utilizan para alinear contenidos con respecto a la página y no suelen llevar bordes.
Tablas de datos: Suelen ser anidadas (dentro de las contenedoras). Son las que estructuran el contenido en sí, es decir, los textos, las imágenes, etc.

Aclaración: Al utilizar tablas contenedoras que utilicen todo el ancho de la página (100% de ancho y alto) hay que tener en cuenta que la página tiene un MARGEN superior e izquierda... y ese margen supondrá un espacio entre la tabla y el limite de la página en el navegador.
Si queremos que esa tabla ocupe realmente el 100% de nuestra página tendremos que eliminar cualquier tipo de margen aplicando como valor de margen 0 en el cuadro de Propiedades de página.

Resoluciones de pantalla

La resolución de pantalla del ordenador responde a la cantidad de píxeles que se visualiza a lo ancho y alto. La resolución normal suele ser de 800 x 600 píxeles.
Si algo en nuestra página Web supera los 800 píxeles de ancho, el navegador reproducirá un scroll horizontal, lo cual resulta antiestético.
También es conveniente que una página web se vea bien en resoluciones superiores (1024 x 768 píxeles).
Esto suele ser problema de las tablas de ancho en porcentaje (%), relativo al ancho de la ventana de documento. Al variar la resolución varía el ancho de la ventana de documento.
Veamos a continuación como superar este imprevisto:

Solución: Trabajar con tablas contenedoras con ancho relativo (%) y tablas de datos de ancho absoluto (píxeles).
1) El contenido de la página (texto, imágenes,...) se diseña en una tabla de ancho absoluto (en píxeles). De esta forma el diseño de esta tabla no variara de una resolución a otra.
2) Crear una tabla contenedora sin bordes de 100% de ancho y de alto, de solo una
celda. Esta tabla ocupará toda la pantalla en cualquier resolución.
3) Insertar la tabla con valor absoluto (en píxeles) dentro de la celda de la tabla contenedora. La alineación de esa celda nos permitirá colocar la tabla del contenido en la zona deseada.

0 comentarios: