Muse CC: Responsive webs

Finalización de la página galería

¡Prueba gratis durante 10 días

nuestros 1146 cursos !

Prueba gratis Mostrar modalidades de suscripción
Duplicamos el widget botón de estado que configuramos previamente con el rollover avanzado y reemplazamos las imágenes y los textos en cada uno de ellos para obtener el mismo efecto, aunque el contenido sea diferente.
04:26

Transcripción

Ya tenemos configurado un efecto de rollover. Ahora simplemente lo que voy a hacer es duplicar esta imagen y reemplazarla con las otras imágenes que también van a tener ese efecto de rollover, al igual que con los textos descriptivos. Voy entonces a alinear la parte izquierda de esta imagen con la tercera columna y en la parte superior voy a hacer la alineación también respecto a la parte inferior de esta caja de texto. En el panel Transformar, en la posición Y, voy a sumar 45 pixeles para que exista esa separación. Ahora duplico arrastrando con Shift y Option y tenemos entonces las dos primeras imágenes. Voy ahora a duplicar estos dos elementos hacia la parte inferior –también estoy presionando Shift y también estoy presionando Option o Alt si estoy trabajando en Windows– y voy a hacer un último duplicado. Observen como las guías inteligentes me están ayudando a mantener la separación igual entre cada uno de los pares de imágenes. Ya tenemos las 6 imágenes, aunque son las mismas, ahora simplemente vamos a hacer el proceso de reemplazar esas imágenes. Voy a seleccionar este segundo marco, observen que la primera vez que selecciono, aquí dice: Botón de estado, pero la segunda vez dice: Marco de imagen. Cuando diga marco de imagen, entonces hago clic en el texto relleno para abrir las opciones de relleno y en el texto 'san-agustin' hago un clic y me abre la ventana para que yo pueda seleccionar otra imagen que va a servir de reemplazo. En este caso, la otra imagen es 'machu-pichu'. Hago clic para abrir y aquí tenemos la imagen ya reemplazada. Repito el proceso para la tercera imagen. La tercera imagen va a ser 'arequipa', así que abro las opciones, hago clic y aquí tengo la imagen 'arequipa'. Clic en el botón de abrir y listo. Repetimos el proceso en la cuarta imagen: abro las opciones de relleno y reemplazo por una imagen que se llama 'graz2'. Quinta imagen: selecciono el marco, hago clic en las opciones de relleno y la imagen se llama 'montanita.jpg' Y en la última imagen, hago clic en las opciones de relleno y esta imagen se llama 'leyva.jpg' Ya tenemos entonces la 6 imágenes diferentes, el inconveniente que tenemos en este momento es que el texto de rollover, el texto descriptivo, es igual para todas las imágenes. Vamos a previsualizar. Observen, el rollover, aunque está funcionando correctamente, pues el texto no corresponde a cada una de las imágenes. Entonces, vamos al área de diseño, vamos a nuestro archivo textos.txt, seleccionamos el segundo párrafo que corresponde a 'machu-pichu', seleccionamos el texto y pegamos. Repetimos el proceso para la tercera imagen: seleccionamos el texto y pegamos. Básicamente, estoy haciendo exactamente lo mismo en cada una de las imágenes, simplemente teniendo cuidado de reemplazar el texto correspondiente. Vamos a previsualizar: este es el texto del 'Estrecho del Magdalena', este es el texto de 'machu-pichu', este es el texto de 'arequipa', el de 'graz', el de 'montanita' y el de 'villa leyva'. Y de esta manera, nosotros terminamos la creación de los elementos que hacen parte de la página Galería.

Muse CC: Responsive webs

Crea una web responsive sin escribir una sola línea de código gracias a Adobe Muse CC, la aplicación de la familia Adobe que te permite diseñar tu página de forma gráfica.

3:10 horas (41 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:15/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.