Está en la página 1de 8

GALERIA DE PORTAFOLIO

Vamos a crear 8 cajas de miniaturas:


Entonces selecciono el contenido y lo elimino

Ahora insertare una caja para las ocho miniaturas estas servirn como
vinculo a las imgenes mas grandes, para eso usaremos el botn etiqueta
div.

En el indicador de la clase voy asegurarme que la caja miniatura este


seleccionada

Creare un nuevo estilo para esta caja


En el dialogo pulsare menos especifico hasta quedarme con miniatura y
seleccionare un nuevo archivo.

Vamos a navegar , en la carpeta css guardamos con el nombre portafolio

En la categora de caja inserto 160 de ancho y 160 pxles de ancho

En la categora de borde uso estilo solido, 5 pixles de ancho y color

Selecciono el contenido de la caja miniatura para eliminarlo, ahora


selecciono la vista compartida para poder duplicar las cajas de miniatura
Para poder duplicar la caja selecciono todo el cdigo div y los copeo siete
veces

Voy a fijarme en el estilo vista diseo, y notamos que estn las cajitas en fila
entonces tenemos que modificar el estilo.

Vamos a alinear a la derecha, vamos a dar 5 pixeles de ancho y de alto

Ahora vamos agregar las imgenes a las cajas de miniatura, para aserlo solo
es necesario arrastrarlos desde la ubicacin al contenido de las cajas.
Tenemos que fijarnos que al momento de jalar el cursor palpite dentro delas
cajas.

Ahora hay que ligarlos las imgenes a las cajitas de miniaturas de tamao
completo, esto lo aremos por medio de vnculos.
Selecciono mi carpeta de imgenes y los voy a ligar uno a uno

Como podemos notar las cajitas al ser vinculador adquiere un borde de color
azul esto ocurrir con las ocho cajitas, para modificar tenemos que crear un
nuevo estilo.
Me aseguro de que la cajita que ya esta vinculada este seleccionado

Ahora nuevo estilo

En la categora de borde voy a usar 0 pixeles de anchura, al aplicar este


cambio noto que el borde de color azul desaparece

Ahora continuamos a agregar el vinculo a las dems cajitas


Ahora para que al pasar con el mouse por el borde de las imgenes cambie
de color de borde duplicamos un estilo

En el tipo de selector voy a utilizar compuesto

Ahora hacemos doble click al estilo duplicado y cambiamos el color del


borde. Para culminar guardamos todos los cambios.

También podría gustarte