Curso de Diseño Web CSS con Dreamweaver

Como puedes ver en el ejercicio anterior, analizando las hojas de estilo de los diseños de CSS Zen Garden, los Selectores de las reglas de estilos tienen una relación directa con los elementos del XHTML de la página. Sobretodo aquellos que están identificados con un atributo id y los que tienen un atributo de clase class .
Estos atributos de los elementos html son claves para crear reglas de estilo específicos para cada elemento. Recuerda que según sea el atributo (id o class) el selector de la regla de estilo va precedido de uno u otro signo (almohadilla o punto):

Dada esta relación directa entre el elemento XHTML y la regla de estilo que se refiere a ese elemento resulta más cómodo para examinar el diseño CSS de una página usar una herramienta que compare automáticamente el elemento con la regla de estilo.
Esa posibilidad nos la da la extensión FIREBUG de FF que nos instalamos en la lección anterior.

Prueba esta herramienta con el diseño nº45: 'I Dream in Colour' Jeff Bilen

Para activar la herramienta basta con pulsar el icono que aparece en la barra inferior de la ventana del navegador, o desde la opción de menú Herramientas > Firebug . Aparecerá una división inferior en la ventana donde veremos la aplicación Firebug :

Su manejo es muy intuitivo y va a convertirse en la mejor herramienta para examinar los diseños por los que vamos a navegar.

Desde esta aplicación podemos examinar y editar tanto el HTML como el CSS o el JavaScript que esté funcionando en una página. Pero por lo general, en este curso utilizaremos Firebug tal y como se presenta de forma predeterminada: activado el menú HTML. De esta forma se divide en dos pantallas:

• Código HTML a la izquierda.
  No sólo eso, sino que ese código aparece coloreado y estructurado. A medida que pulsas en las flechas de cada elemento desplegamos los elementos anidados que contiene esa etiqueta. Gracias al coloreado de las atributos podemos distinguir perfectamente qué identificador o qué clase se ha aplicado a cada elemento.
• Código CSS a la derecha.
  Como verás, no aparece la lista completa de reglas de estilo de esa página. ¡ES MEJOR! Sólo aparecen las reglas de estilo que estén actuando sobre el elemento HTML que tengas seleccionado en la pantalla de la izquierda.

Lo interesante de esta aplicación, aparte de que permite editar el HTML y el CSS automáticamente (como la barra WebDeveloper), es que se basa en la SELECCIÓN DEL ELEMENTO XHTML para presentarnos las reglas de estilo que determinan su aspecto.
De hecho, para ver sus estilos, podemos seleccionar el elemento XHTML de varias formas en Firebug:

• Desde la pantalla izquierda del HTML
  Basta con pulsar en la etiqueta en cuestión, además ese elemento aparecerá bordeado en la ventana del navegador.
• Desde el Selector de etiquetas.
  Este selector es muy similar al de Dreamweaver. Representa el nivel de anidación de la etiqueta seleccionada, es decir, los elementos padre que la contienen. Podemos pulsar en cualquiera de esas etiquetas para seleccionar ese elemento.
• Desde el modo INSPECCIONAR.
  ¡Este es el que más me gusta! Al activar el modo Inspeccionar podemos pasar con el cursor por encima de la página y se irán destacando los elementos. Basta con pulsar cuando tengamos destacado el elemento deseado y quedará seleccionado.

Esperemos que después de este curso seamos capaces de realizar una hoja de estilo a la misma altura que cualquiera del proyecto CSS Zen Garden. Así que las vamos a tomar como referencia.
Si queremos crear una hoja de estilo para este proyecto os podéis imaginar que es muy importante saber como está estructurado su XHTML y, sobretodo, cuáles son los id y class que identifican cada parte de la pagina web.

Como hemos visto en el ejercicio anterior a través de la herramienta Firebug, la estructura del XHTML de un diseño CSS se basa en que una anidación de elementos (cajas dentro de cajas mas grandes: elementos padre que tienen dentro otros elementos llamados hijos y así sucesivamente).

Pues bien, con la ayuda de la herramienta Firebug para desentrañar el HTML vamos a realizar un esquema que represente claramente que elemento está dentro de cada cual.

Para hacerlo de forma ordenada comienza desplegando el primer elemento hijo del elemento padre y así sucesivamente: body > #container > #intro > #pageHeader ... hasta llegar al contenido base del texto (h3, p, ul, a, etc)

Realiza el esquema en un folio aparte sin escatimar espacio. Lo importante es que tengas claro como se estructura el código XHTML del proyecto CSS Zen Garden:

Lo importante es conocer el nombre de los identificadores de cada "padre" para después saber escribir el selector apropiado para dirigir correctamente la regla de estilo.

Aparte de que el código sea perfectamente accesible, verás que cada apartado del contenido está perfectamente identificado y así diferenciado del resto. En algunos casos en exceso, ya que incluso los párrafos se diferencian por clases según el orden en el apartado (p1, p2, p3 ...).

Esta estructura la tendremos presente ya que la utilizaremos siempre que queramos referirnos a cualquier parte del contenido.

Twitter Meneame Delicious Technorati Digg Facebook