Diagramado de páginas Web en CSS

De BurbuWiki

Antes de que estuviera disponible CSS, la única manera de componer, la distribución de espacios, en una página Web era el uso de tablas. Aunque es una técnica cómoda y versátil, se está usando un elemento con una semántica particular, que es la de expresar información tabular, solamente por su efecto presentacional.

La introducción de CSS ha permitido en muchos casos reemplazar el uso de tablas. Sin embargo CSS todavía no permite la versatilidad que ofrecían, y que siguen ofreciendo, las tablas. Lograr un diagramado coherente de una página compleja suele ser una tarea ardua en CSS y las diferencias de interpretación, entre navegadores, dificultan aún más la tarea.

En términos coloquiales esto quiere decir que si abrimos la misma página con navegadores distintos como Mozilla Firefox, Internet Explorer u Opera, la interpretación del código de la página será distinta en cada navegador.

La diferente interpretación que hace cada navegador es un grave problema para los programadores y desarrolladores de páginas Web. Como es natural estos tratan de que las páginas que diseñan se visualicen correctamente en el mayor número de navegantes. El número de usuarios que usa Internet Explorer, a Diciembre de 2007, es la gran mayoría, con el grave inconveniente de que este navegador es el menos se atiene a los estándares de todos. Microsoft, la empresa que desarrolla Explorer, es la que lleva a la incompatibilidad deliberadamente para que el estándar sea su propio navegador y así acaparar el mayor mercado posible.

Se espera que futuros desarrollos en CSS3 resuelvan esta deficiencia y hagan de CSS un lenguaje más apto para describir la estructura espacial de una página.

[editar] Qué son las capas

Diferencias entre varias etiquetas para aplicar estilos y crear capas y una pequeña introducción a las capas.

utilizada para construirla y los atributos CSS con los que podemos aplicar estilos.

sirve para aplicarle estilo a una pequeña parte de una página HTML. Por ejemplo, con ella podríamos hacer que una parte de un párrafo se coloree en rojo. Con no es habitual englobar un trozo muy grande de texto, por ejemplo el que comprenda a varios párrafos.

Con <DIV> también podemos aplicar estilo a partes de la página HTML.

La diferencia entre <SPAN> y <DIV> es que con esta última si que podemos aplicar estilo a una parte más amplia de la página, por ejemplo a tres párrafos. Además, la etiqueta <DIV> tiene un uso adicional que es el de crear divisiones en la página a las que podremos aplicar una cantidad adicional de atributos para modificar sus comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la división al centro, izquierda, derecha o justificado. Pero su uso más destacado es el de convertir esa división en una capa.

Una capa es una división, una parte de la página, que tiene un comportamiento muy independiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier parte de la misma y la podremos mover por ella independientemente, por poner dos ejemplos. En el uso de capas se basan muchos de los efectos más comunes del DHTML.

Los atributos que podemos aplicar a estas etiquetas, pero en concreto a las dos recomendadas y

, son principalmente de estilos CSS. Estos atributos nos permiten, como hemos podido ver en el manual de hojas de estilo en cascada de desarrolloweb, modificar de una manera muy exhaustiva la presentación de los contenidos en la página. Para aplicar estilos a estas etiquetas se utiliza el atributo de HTML style, de esta manera:

<SPAN style="text-decoration:underline;font-weight:bold">...</SPAN>
<DIV style="color:red;font-size:10px">...</DIV>

Atributos aplicados a la etiqueta <div>

Como ya pudimos ver muchos ejemplos en el manual de CSS, nos referimos a él para ampliar esta información. Pero no habíamos visto todavía una serie de atributos que nos sirven para posicionar la división en la página como una capa. Estos atributos se pueden aplicar a la etiqueta

que es la que servía para crear capas compatibles con todos los navegadores.

Los atributos para que la división sea una capa son varios y se pueden ver a continuación.

<div id="c1" style="position:absolute; left: 200px; top: 100px;">
 Hola!
 </div>

El primero, position, indica la posición, en la página, de manera absoluta y los segundos, left y top, son la distancia desde el borde izquierdo de la página y el borde superior.

Hay otros atributos especiales para capas como width y height para indicar la anchura y altura de la capa, Z-index sirve para indicar la posición sobre el eje z que tendrán las distintas capas de la página. Dicho de otra forma, con z-index podemos decir qué capas se verán encima o debajo de otras, en caso de que estén superpuestas. El atributo z-index toma valores numéricos y a mayor z-index, más arriba se verá la página. clip que sirve para recortar una capa y hacer que partes de ella no sean visibles, o visibility para definir si la capa es visible o no.

Un ejemplo de código de una capa con la etiqueta div y todos los parámetros que se han visto aquí, además de algunos más:

<div style="clip: rect(0,158,148,15); height: 250px; width: 170px; left: 10px; top: 220px; position: absolute; visibility: visible; z-index:10; font-size: 14pt; font-family: verdana; text-align: center; background-color: #bbbbbb">