Muse CC para diseño web responsivo

Empezamos a trabajar con la página planes

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
En la página planes usamos tres imágenes y los textos necesarios para describir los diferentes planes turísticos ofrecidos. Nuevamente hacemos uso de estilos para automatizar la aplicación de formato a los párrafos.
06:05

Transcripción

Vamos a trabajar ahora con la página Planes. Lo primero que voy a hacer es a tomar la herramienta de texto y a crear una caja de texto. El ancho va a estar definido por las guías de margen. Vamos a ir al archivo textos.txt, selecciono "Planes turísticos", lo pego, vamos a formatearlo, el tamaño va a ser 25 pixeles, el tipo de fuente que vamos a utilizar es Open Sans Bold, el color es azul y la alineación va a ser hacia el centro. Tomamos la herramienta de selección y ajustamos el tamaño de la caja. Recuerden evitar esa guía punteada. Esa guía punteada está diciendo que corro el riesgo de que el texto quede oculto en algún momento. La posición de esta caja de texto va a ser de 145 pixeles. Listo, ya tenemos nuestra caja de texto en el lugar que nosotros necesitamos y ahora vamos a importar unas imágenes. Bajo el menú Archivo, selecciono el comando Colocar y las imágenes que voy a importar son: graz2, leyva y montanita. Hago clic en el botón de abrir, flecha hacia la derecha o hacia la izquierda para navegar. Colocamos esta primera imagen, esta segunda imagen y esta tercera imagen. El ancho de estas imágenes va a ser de 6 columnas, así que vamos a hacer el ajuste necesario y listo, tenemos las imágenes con un ancho de 6 columnas. Necesitamos una separación de 45 pixeles en vertical, así que en el panel de Transformar, en la posición Y, vamos a sumar 45 pixeles, por supuesto después de haber hecho la alineación de este borde con el borde inferior de la caja de texto. Desplazamos esta imagen y observen que las guías inteligentes me están mostrando cuando tenemos exactamente la misma separación: 45 pixeles. Repito el proceso para esta imagen. Y aquí tenemos las guías inteligentes indicándonos la separación de 45 pixeles. Tomo la herramienta de texto y voy a crear una caja de texto. El ancho de esa caja de texto va a ser también de 6 columnas. Este es el texto para esa primera caja de texto, vamos a aplicarle el formato, selecciono este primer párrafo y en estilos de párrafo selecciono Titulos. Selecciono el resto de texto y el texto es Cuerpo. Vamos ahora a seleccionar todo el texto y este texto va a estar alineado hacia la izquierda. Tomamos la caja de texto y la alineamos con la parte superior de la imagen, duplicamos, duplicamos, y el alto de esta caja de texto va a ser de 210 pixeles. Mismo alto para esta caja y mismo alto para esta caja. Ahora tomamos la herramienta rectángulo, vamos a dibujar un rectángulo. El alto de ese rectángulo va a ser de 226 pixeles, el ancho va a ser el mismo tamaño de la página, 1280 pixeles. Aquí lo tenemos, aplicamos como color de relleno azul, desplazamos este rectángulo hacia la parte inferior y vamos a ubicarlo con una separación de 45 pixeles. Hacemos el mismo truco de sumar esos 45 pixeles a la posición Y después de hacer esta alineación y aquí tenemos la separación. Ahora tomo la herramienta de texto, voy a crear una caja de texto. El texto que va dentro de esa caja va a ser este, lo copiamos, lo pegamos, el primer párrafo corresponde al estilo Titulos y el segundo párrafo corresponde a Cuerpo. Los dos párrafos van a tener color de relleno blanco, el ancho de esta caja va a ser de 580 pixeles, ajustamos el alto, centramos este contenido y vamos a necesitar también un botón. Ese botón lo vamos a copiar de la página de inicio. Seleccionamos este botón, copiamos, vamos al área de planes, pegamos y lo ubicamos. Pero tenemos que reemplazar el texto, el texto es: "Contáctanos", así que seleccionamos el texto, pegamos el texto, seleccionamos las dos cajas y centramos de forma visual dentro del área azul.

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.