Simplemente, di click con el botón derecho del mouse sobre una imagen, seleccioné: Inspeccionar elemento y Firefox (versión 12.0), mi navegador favorito, me mostró, en la pantalla, el html del elemento y todas la capas que había, antes y después de él.
Al principio, me apareció ésta barra en la parte inferior del navegador:
Di click en el botón del lado derecho que dice: Estilo. Y aparecieron, a la derecha, las línea de CSS relacionadas con la imagen.
Di click en el botón del lado derecho que dice: HTML. Y apareció, en la parte inferior, el HTML relacionado con el objeto.
Dando click en cada una de las etiquetas que se ven al centro me fui moviendo por las distintas capas que habían en la página. Viendo su HTML y los estilos relacionados.
Da click sobre esta línea, con el botón derecho del mouse, si estas usando Firefox 12.0, para probarlo. Selecciona del menú que aparece la opción: Inspeccionar elemento.
Incluso se puede desactivar algún estilo para ver lo que ocurre y directamente cambiar el Width o el Heigth de una capa para ver como se modifica el diseño.
Lógicamente no se puede grabar esos cambios, pero el Inspector de Firefox te dice en qué archivo CSS y en qué línea del archivo está la propiedad que estas manipulando. Lo que hace que sea mucho más fácil la etapa de maquetación y ajuste de un diseño.
Para cerrar el Inspector, click en la X, al lado de el botón: Estilo, al lado derecho de la barra de inspección.
Espero que ésta herramienta te sea tan útil como a mi.
Ah y visita: http://accesoperu.com , el mejor sitio para estudiar Diseño y Programación web.
chaveztoro
