Mareos de un geek

Mens Geek in Corpore Insano

Menú Cerrar

PFC: Dándole forma a la web con CSS

En los tiempos que corren se utilizan las hojas de estilo en cascada (más conocidas como CSS) para definir el aspecto de las páginas webs.

Un uso avanzado permite separar la forma visual de la página del contenido. A raíz de una entrevista de trabajo en la que me plantearon mostrar una página web cambiando el estilo CSS he buscado por Internet y he encontrado CSS Zen Garden. En esta página se puede observar un uso totalmente profesional de las hojas de estilo, que permite cambiar el aspecto visual de la web sin variar el contenido.

Es por eso, que para mi proyecto estoy utilizando las hojas de estilo. Recuerdo que en la asignatura de Desarrollo de Aplicaciones Web utilizabamos las hojas de estilo para cambiar los colores de fondos, textos, etc.. algo sencillo, pues la maquetación la realizabamos utilizando tablas.

Actualmente se ha extendido el uso de capas porque permiten más opciones y el código es más limpio.

Por eso para definir el aspecto general de la web he utilizado CSS combinándolo con XHTML. Siguiendo los consejos de otro de los libros que adquirí en Amazon me ha quedado algo así:

body {
text-align: center;
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
margin-top:20px;
text-align: left;
background: #fff url(images/nav-bg-fixed.gif)
repeat-y left top;
}
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
#footer {
clear: both;
}

En el libro se refiere a este modelo como dos columnas flotantes. Realmente he modificado la posición vertical para que no se muestre pegado a la parte superior del navegador modificando el margen superior del contenedor (referido como #wrapper)

Este diseño muestra el contenido de la página centrado totalmente en la pantalla del navegador, dejando un espacio suficiente en la parte posterior por si acaso en algún momento debe mostrarse una mayor cantidad de datos.

Por supuesto, me queda la parte más difícil que es conseguir que la página se vea de la misma manera en IE.

Un buen punto de partida y referencia continua para el uso de CSS es la página de Desarrollo Web. Tras leer los manuales y talleres sobre el tema me resulto más sencillo entender los conceptos y ejemplos del libro que he leido, ya que al estar en inglés a veces resulta un poco complicado.