estela escribió:estoy en mi página web, la que construí en base a las geniales lecciones del tutorial y deseo poner en ella una galería de fotos.
¿cómo tengo que hacer?
Gracias
Hola:
Creo que hay muchas maneras de tener por un lado una galería de fotos (creo hay programas que ya tienen esa implementación) y lo otro, es crearla uno mismo.
Yo personalmente me gusta crearla, por ejemplo:
Hago una copia de mi plantilla, la guardo como galeria.html, luego borro todo lo que va dentro de la capa "contenido", para dejarla libre, así que mantengo la capa cabecera y la capa navegación y la capa pie. Como voy a cambiarle el color de fondo a esa capa contenido, y lo haré en la hoja de estilo-general, al hacerlo cambiaría el color en todas las otras páginas que tienen la capa contenido, para que eso no me suceda, lo que hago es en la página en que quiero poner la galería, convertir esa capa contenido de esa página en una clase, por ejemplo, en vez de que se llame <div id="contenido"> modifico y lo dejo así:
<div class="misfotos"> También aprovecho de hacer una lista acá ej:
<ul>
<a href="#">[contenido no disponible]
<span>Reloj</span></a>.
Luego repito esto dependiendo de la cantidad de fotos, solo cambiando donde dice "objetos/foto1.jpg ya que la proxima foto será la foto2 y así sucesivamente, termino la lista con . Luego voy a la hoja de estilo general, y como allí ya tiene la capa contenido que sirve para todas las páginas, y es capa única, pues esa capa no la toco, y ya que cree en la página de las fotos una clase para esa capa, lo que hago es poner abajo de la capa contenido en la hoja de estilo las directivas para esa clase por ejemplo:
#contenido{} esta es la capa contenido para todas las páginas
#contenido p{} estas son las directivas para lo párrafos
entonces debajo de esas capas pongo
.misfotos { acá le doy las mismas propiedades de la capa contenido solo cambio el color de fondo a negro}
.misfotos li{display:inline; float:left; width:130px;padding:5px;margin:10px; text-align:center; border-right:#FF0000 solid 1px; border-bottom:#FF0000 solid 1px;}
</div>
Luego voy a la parte de abajo de la hoja de estilo y en los A añado est:
.misfotos a{color:red;font-size:1.1em;text-decoration:none}
.misfotos a:link{}
.misfotos a:visited{}
.misfotos a:hover{color:orange;text-decoration:underline;background-color:aqua;}
.misfotos a:active{}
Es bueno que las fotos midan lo mismo de ancho, y ya se colocan ellas solas.
Si esto le sirve, pues muy bien , y si no es esto lo que desa , pues no pasa nada.
Saludos