El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Muse CC para diseño web responsivo

Empezamos a trabajar con la página galería

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta página usamos el widget botón de estado para crear un efecto avanzado de rollover, que aplicamos a una primera imagen y que permitirá activar el rollover de varios elementos como si fueran uno solo.
08:19

Transcripción

Vamos ahora a trabajar en la página Galería. Lo primero que necesitamos es el texto de encabezado. Como ese texto ya lo hemos estado utilizando dentro de la página Planes, entonces vamos a copiarlo desde aquí. Y dado que el formato de ese encabezado va a ser igual en todas las páginas, es buena idea crear un estilo de párrafo. De manera que selecciono este texto, abro el panel Estilos de párrafo, creo un nuevo estilo, clic para enlazarlo, un doble clic y el nombre que le voy a dar es 'Encabezado'. Ahora copio este texto, cierro esta página, voy a la página Galería y bajo el menú Edición voy a seleccionar la opción 'Pegar en contexto'. La opción 'Pegar en contexto' pega el elemento exactamente en la misma posición donde se encontraba originalmente cuando se copió. El texto va a cambiar, así que vamos a ir al archivo 'textos.txt' Este es el texto: "Galería de imágenes", y simplemente lo reemplazamos. Vamos a copiar el segundo párrafo, vamos a pegarlo y automáticamente me genera una caja de texto. Ahora vamos a aplicarle el estilo de párrafo Cuerpo a este texto y vamos a definir el tamaño de esta caja de texto. En el valor de ancho vamos a escribir 579 y el valor de alto queda en 75 pixeles. Vamos a centrar este elemento dentro de la página y lo dejamos más o menos a esta distancia del texto del encabezado. Ya tenemos entonces el segundo texto que vamos a utilizar. Ahora voy a tomar la herramienta marco de rectángulo, voy a crear una caja y vamos a definir el tamaño con el panel Transformar. El ancho va a ser 374 y el alto va a ser 310. A esta caja le vamos a aplicar como relleno una imagen. Para eso, entonces, vamos a las opciones de relleno, clic en Añadir imagen, vamos a aplicarle a esa caja la imagen que se llama 'san-agustin.jpg', hago clic en el botón de abrir, y ahora en este menú desplegable voy a seleccionar la opción 'Escalar para rellenar', y finalmente le vamos a decir que va a estar centrado. Después de crear esta caja y rellenarla con una imagen, vamos a crear una caja de texto. Tomo la herramienta de texto, dibujo la caja de texto, el ancho de esta caja de texto va a ser exactamente el mismo ancho de esta imagen, 374 pixeles, así que al ancho 374 pixeles y al alto vamos a darle 117 pixeles. El texto que voy a pegar dentro de esta caja de texto es este párrafo: "El Estrecho del Magdalena", pegamos el texto y ahora vamos a aplicar formato. Voy a seleccionar este texto y en el panel de texto vamos a indicarle que va a ser una fuente Open Sans Regular. Adicionalmente necesito un espaciado, para que el texto no quede pegado al borde de la caja. Entonces, bajo el menú Ventana voy a seleccionar el panel Espaciado y vamos a darle un valor de 25 pixeles, esos 25 pixeles se van a aplicar por todos los lados. Observen que aquí aparece una pequeña línea, esto indica que necesitamos un poco más de tamaño al alto, vamos a darle 119 pixeles y la línea ya desaparece. Nuevamente tenemos una caja de texto a 374 pixeles de ancho, una imagen también a 374 pixeles de ancho. Yo necesito configurar un efecto de rollover para este texto. Entonces voy a hacer lo siguiente: voy a seleccionar el estado rollover y con el estado rollover activo, entonces voy a cambiar el color de relleno de esta caja a negro. En las opciones de relleno, cambio el valor de opacidad al 50 %. Y el color del texto va a ser blanco. Entonces, selecciono y el color de texto es blanco. Si venimos al modo normal, en el modo normal yo necesito eliminar el color del texto. Así que selecciono el texto y voy a decirle que el color de texto en el estado normal, es ninguno. Tenemos entonces en el estado normal ninguno, en el rollover blanco, y el color de fondo negro. Vamos a previsualizar para ver si está funcionando ese rollover. Está funcionando correctamente, tal vez le podemos agregar también un efecto de transición. Vamos al área de Previsualización y el efecto ya es mucho mejor. Ahora voy a tomar esta caja y la voy a alinear respecto a la imagen. Y necesito lo siguiente: que cuando el usuario coloque el puntero sobre la imagen, no importa si coloca el puntero sobre el área donde está el texto o sobre el área donde no alcanza a estar el texto, necesito que el rollover del texto se active. Para lograr eso, vamos hacer uso de un "widget". Así que abro el panel de Biblioteca de widgets, abro la categoría Botones y tenemos un "widget" que se llama 'Botón de estado', lo arrastro hacia la página. Este "widget" actualmente está compuesto de varios elementos, pero vamos a eliminar este, vamos a eliminar este elemento también y ahora que tenemos solamente un rectángulo necesito que el tamaño de ese rectángulo sea igual al tamaño de la imagen. El tamaño de la imagen es 374 por 310, entonces selecciono este elemento y 374 por 310. Aquí tenemos exactamente el mismo tamaño de esta imagen. No necesito el color de relleno, entonces lo voy a eliminar y debo eliminarlo también en los demás estados. Miren como ya el relleno se ha eliminado de todos los estados. Lo que voy a hacer ahora es seleccionar estos dos elementos, ubicarme cerca de este "widget", vamos a hacer un zoom y vamos a tomar los dos elementos y los vamos a ubicar dentro del "widget". El zoom simplemente lo hice para tener un mayor nivel de precisión. Ya esos dos elementos hacen parte de ese "widget". Vamos a previsualizar y lo que obtenemos es que, sin importar donde coloque yo el puntero, el rollover del texto se está activando. Si coloco el puntero sobre el texto, se activa. Si coloco el puntero sobre la imagen en el área donde todavía no está el texto, igual también se activa ese rollover. Finalmente vamos a seleccionar este "widget" y en el área de Hipervínculos vamos a escribir numeral y esto hace que cuando previsualicemos y coloquemos el puntero sobre la imagen, entonces el puntero cambie a una manita. Volvemos al área de Diseño y de esta manera, utilizando el "widget" Botón de estado, nosotros hemos configurado un efecto de rollover para esta imagen.

Muse CC para diseño web responsivo

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.