Unidad 9. Imágenes (II)

9.3. Organizar las miniaturas

Una vez que tenemos las miniaturas, hemos de plantearnos cómo las vamos a organizar en la página. Esto dependerá del número de miniaturas que queramos mostrar, de su tamaño, del diseño de la página, etc.

En nuestro ejemplo, vamos a simular una ficha para cada flor. En cada ficha estará la miniatura que enlaza con la imagen (hay flores que tienen dos imágenes), el nombre de la flor y su nombre científico.

Vamos a comenzar por crear la galería de las flores silvestres. Partiendo del archivo base.html, crea la página silvestres.html, guardándola dentro de la carpeta flores.

Si pruebas la página en el navegador, comprobarás que no se muestra el estilo, y los enlaces no funcionan. Esto se debe a que ni la hoja de estilo ni las otras páginas están en la misma carpeta. Para solucionarlo, podemos indicar delante del nombre del archivo ../, para indicar que se encuentra en un nivel superior. Por ejemplo href="../estilo.css".

Pondremos la pestaña Flores siempre como activa.

En el título (h2) hemos escrito Galería de flores silvestres.

Después del título, en un párrafo (p), hemos escrito Las flores silvestres son aquellas que crecen en nuestra región. Para verlas, basta con acercarnos a un parque o dar un agradable paseo por los alrededores de nuestra ciudad..

A partir de aquí, vamos a comenzar a añadir las fichas de las flores silvestres que tenemos. Vamos a ver como estructuramos la ficha. Como ejemplo, vamos a utilizar la flor del Agret (Oxalis pes-caprae):

Para delimitar las distintas fichas, lo más cómodo es crear un div para cada una. Como a este div le definiremos ciertas propiedades de estilo, podemos pensar ya que necesitará ser identificado. Y como habrá varios, y en varias páginas, vamos a asignarle la clase ficha.

Dentro de este div.ficha, colocamos la imagen de la miniatura:
<img alt="Agret" title="Agret" src="fotos/agret_mini.jpg" height="75" width="100" />.

Como al pulsar sobre la miniatura, hay que abrir el original, debemos de colocar un enlace con la imagen dentro. Por tanto quedará:
<a href="fotos/agret.jpg"><img ... /></a>.

Junto a la imagen, tenemos que colocar dos elementos de texto. En la primera línea el nombre de la flor, y en el segunda el nombre científico. Podríamos colocar el texto en un párrafo, y separar los nombres con un salto de línea (<br />). Pero como queremos diferenciar un poco el nombre científico, lo más cómodo será ponerlo en otro párrafo con una clase, por ejemplo class="cien". Por lo tanto, el texto nos ha quedado así:
<p>Agret</p>
<p class="cien">Oxalis pes-caprae</p>.

Si te fijas en el resultado final del ejemplo, verás que hay una página con un listado de las flores, y enlaces a cada una de ellas. Para poder enlazar, vamos a asignarle in ID al div.ficha. Para no liarnos, seguiremos una nomenclatura fácil de recordar. Por ejemplo, utilizaremos el nombre de la flor en minúsculas, y si tiene espacios, los cambiaremos por guiones bajos.

Por tanto, la ficha de la flor de Agret nos ha quedado así:

<div id="agret" class="ficha">
 <a href="fotos/agret.jpg"><img alt="Agret"
  title="Agret - Oxalis pes-caprae" src="fotos/agret_mini.jpg" height="75"
  width="100" /></a>
 <p>Agret</p>
 <p class="cien">Oxalis pes-caprae</p>
</div>

Y en KompoZer, en la vista normal, se ve así:

Nota: Observa que el archivo de imagen tiene el nombre de la flor, que además hemos puesto en los atributos alt y title. Esto aumenta la importancia de la imagen en los navegadores al buscar el nombre de la flor, y hace más probable que al buscar fotos de Agret en Google aparezca nuestra foto, lo que puede atraer usuarios interesados por la temática de la página.