Por donde empiezo el estilado de mi web

[JavierGuerrero]

Hola, Ancaragon.

Comentas que no se sabes cómo empezar a definir tus hojas de estilo CSS, por ello, voy a dedicar unas cuántas líneas explicando la manera en cómo yo lo hago.

Espero que te sirva.

1. Tareas previas.

Imaginando que tienes un diseño elaborado con alguna herramienta gráfica (por ejemplo: Photoshop o Gimp) el producto final sería un "pantallazo" de cómo debería lucir tu Sitio. Basándote en ese diseño procedes a definir una estructura con el(X)HTML, procurando realizar un marcado semántico.

Algunos consejitos para realizar tu marcado:

* Imprimir el diseño y con lápiz en mano comenzar a analizar cada detalle del mismo. Comienzas a realizar un inventario de las zonas de contenido de la página para luego bosquejarlo (describir los distintos bloques de contenido en un gráfico).

* A partir de este mapa mental del contenido de la página puedes describirla a través del marcado (XHTML). Cada una de las zonas de contenido se puede describir mediante un elemento div con un id exclusivo. Todas las zonas de contenido se marcan con un div de id descriptivo y el orden de anidación refleja las relaciones bosquejadas en el inventario de contenido.

* Realizar un esquema de tu nueva plantilla XHTML.

* Escribir el código XHTML en tu editor favorito. Personalmente, utilizo notepad++.

IMPORTANTE: Llegados a este punto, el marcado es una especie de plancha vacía a la que podemos empezar a aplicar el estilo. Los usuarios que no puedan ver los estilos empleados encontrarán una estructura de marcado bien definida y fácil de seguir.


2. Aplicando CSS

Volvemos a nuestro papel impreso con el diseño y con lápiz en mano empezamos a apuntar:

- Anchos (width).
- Detalles sobre la maquetación de la página.
- Tipo y tamaño de letra.
- Detalles del header, sidebar, main, footer, etc.
- Colores y estilos de titulares.


Con los apuntes anteriores tendremos una idea de cómo iniciar nuestro código CSS.

Para iniciar, escribo todo mi código CSS en un sólo archivo, posteriormente, cuando he establecido la maquetación y los detalles del header, sidebar, main, footer, etc., separo todo mi código CSS en los siguientes archivos: layout, type y color. Estos archivos son importados desde una archivo principal styles.css y a la vez este archivo es invocado en mi documento (X)XHTML.

He obviado algunos otros detalles, sin embargo, es suficiente para empezar.

Saludos

Javier Guerrero