Muse CC para diseño web responsivo

Trabajamos en la tercera sección de la página inicio

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
La tercera sección de la página inicio contiene una imagen, dos párrafos de texto y un botón que nosotros formatearemos y configuraremos en este video usando entre otros recursos los estilos de párrafo.
04:59

Transcripción

Vamos a crear los elementos de la tercera sección de la página de inicio. Empezamos tomando la herramienta rectángulo, vamos a dibujar un rectángulo, voy a tomar la herramienta de selección y ubicamos ese rectángulo un poco más hacia la parte inferior. El alto de ese rectángulo va a ser de 336 pixeles, así que en el panel de Transformación deshabilito esta opción de proporción e indico 336 pixeles. El ancho, por su parte, lo voy a ajustar de forma manual, que cubra todo el ancho de la página, y el color de fondo va a ser azul. Yo quiero mantener una separación de 45 pixeles entre el borde inferior de estos botones y el borde superior de este marco. Eso lo puedo hacer de muchas formas diferentes, ya anteriormente había mostrado un truco que simplemente corresponde a crear un rectángulo con el tamaño que necesitamos para la separación. Ahora vamos a hacer un truco diferente: voy primero a alinear este rectángulo con el borde inferior del botón y en la posición Y, en el panel de Transformar, vamos a sumar el espacio que nosotros necesitamos: 45 pixeles, Enter y automáticamente Muse hace la operación matemática y el resultado lo asigna como la posición Y de este elemento. En resumen, esto me da la separación de 45 pixeles que yo necesito. Ahora vamos a importar una imagen: Archivo, Colocar, la imagen se llama 'arequipa', colocamos la imagen y necesito que el alto de esta imagen sea 244 pixeles, pero manteniendo el alto de 580. Esto quiere decir que yo necesitaría cambiar la proporción de la imagen, por supuesto al cambiar la proporción de la imagen estaría dañándola, así que lo que voy a hacer es recortar o enmascarar la imagen. Tomo la herramienta de recorte, me ubico en la parte inferior en este manejador y arrastro mientras voy verificando el tamaño en el panel Trasformar. El tamaño va a ser de 244, la imagen queda entonces de 580 pixeles de ancho por 244 pixeles de alto. Tomamos la imagen, la vamos a centrar de forma visual dentro de ese espacio azul y ahora tomo la herramienta de texto y creo una caja de texto dejando el espacio de medianil. El texto que va dentro de esa caja lo encontramos en el archivo 'textos.txt'. Son estos dos párrafos. Copiamos y pegamos. Este primer párrafo vamos a aplicarle el estilo Titulos y este segundo párrafo le vamos aplicar el estilo Cuerpo. Vamos a hacer unos cambios: este texto va a ser blanco y va a estar alineado hacia la parte izquierda. Vamos a hacer lo mismo con este segundo párrafo: blanco y alineado hacia la parte izquierda. Tomamos la herramienta de selección y vamos a alinear este texto en la parte superior respecto a la imagen que tenemos en la parte izquierda. Hacemos un pequeño ajuste en la altura de la caja de texto, siempre evitando que no me vaya a parecer esta guía que me está indicando que podría haber un recorte de texto si la dejamos. Entonces arrastramos un poco la caja para evitar que aparezca esa guía. Ahora tomamos el botón que se encuentra en la parte superior, en la primera sección, lo duplicamos, vamos a colocarlo al frente, así que vamos al menú Objeto y le decimos Traer al frente. Vamos a ubicarlo aquí aproximadamente y vamos a editar el estado rollover. En el estado rollover, vamos a cambiar el relleno a blanco y el texto lo vamos a cambiar a color azul. Vamos a previsualizar el resultado de ese cambio que hemos hecho y aquí tenemos nuestro efecto de rollover y también tenemos ya finalizada la tercera sección que hace parte de la página inicio.

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:
Formadores:
Fecha de publicación:15/09/2016
Duración:3:10 horas (41 Videos)

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.