Muse CC para diseño web responsivo

Empezamos a trabajar con la página inicio

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este video empezamos el proceso de trabajar en los elementos de la primera sección de la página de inicio de nuestro sitio web, agregando una imagen y los textos y formateándolos y ubicándolos posteriormente.
07:33

Transcripción

Vamos a empezar a crear el contenido de la página Inicio. Para eso vamos a tomar la herramienta marco de rectángulo y vamos a crear un rectángulo. Ahora tomamos la herramienta de selección y con el panel de Transformar vamos a definir el tamaño exacto que necesitamos para este rectángulo. El ancho va ser de 1.280 y el alto va ser de 283 pixeles. Tengan en cuenta que cuando he dado estos tamaños, tengo deshabilitada la función que mantiene la proporción, de esta manera nosotros podemos definir los tamaños de forma independiente, tanto el ancho como el alto, sin que se afecten entre ellos. Ahora voy a tomar el rectángulo y lo voy a alinear en la parte superior con el rectángulo gris y en la parte izquierda con el borde de la página. Ya que la página tiene un tamaño de 1.280 píxeles, el rectángulo que acabamos de hacer tiene exactamente el mismo tamaño de la página. Ahora, dentro de este rectángulo quiero una imagen de fondo, para eso hago clic en el texto de relleno, para abrir las opciones de relleno, y en el "hyperlink" Añadir imagen hago clic nuevamente. La imagen que voy a utilizar como imagen de relleno para ese rectángulo se llama 'banner-1.280.jpg'. Es una imagen que tiene 1.280 por 350 pixeles. Hago clic en el botón de Abrir. Aquí tenemos ya la imagen. En el menú desplegable, voy a seleccionar la opción Escalar para rellenar. De esta manera, cuando nosotros estemos escalando la ventana del navegador, la imagen también va a estar escalándose para mantener siempre rellena toda el área que corresponde al rectángulo. Finalmente, voy a hacer clic en el ícono que tenemos en esta parte para alinear la imagen dentro del rectángulo, tanto la escala como la alineación centrada se van a mantener siempre de forma independiente al tamaño de la ventana del navegador. Ahora vamos a tomar la herramienta de Texto, voy a dibujar una caja de texto y nuevamente voy a definir los tamaños mediante el panel de Transformar. El tamaño va a ser 4.76 de ancho por 80 pixeles de alto. Recuerden, estos tamaños los estoy definiendo teniendo desmarcada la opción de proporción, para que no se afecten entre ellos. Como esto es una caja de texto, dentro voy a escribir un texto. Ese texto lo voy a obtener de un archivo que se llama 'textos.txt' que se encuentra dentro de la carpeta 'assets'. Simplemente abrimos este archivo y debajo del texto "inicio" vamos a seleccionar este primer texto, lo copiamos y lo pegamos dentro de esta caja de texto. Ahora vamos a empezar a aplicarle el formato: seleccionamos este texto y ahora en el panel de texto, en este menú desplegable, vamos a seleccionar la fuente Open Sans Bold. Ya tenemos la fuente seleccionada, el color del texto va a ser blanco, lo elegimos también en este menú desplegable, y el tamaño del texto va a ser de 24 pixeles. Ahora vamos a aplicarle a este rectángulo un color de relleno: hacemos clic en este menú desplegable y el color va a ser negro. Ahora quiero aplicarle un valor de opacidad o de transparencia a ese relleno color negro que acabo de aplicarle a esta caja de texto. Ese valor de opacidad no se lo puedo aplicar con esta casilla, porque cuando aplicamos un valor de opacidad con esta opción, ese valor se aplica tanto a la caja como al contenido de la caja, es decir, en este caso tanto a la caja como al texto que está incluido dentro de esta caja. De manera que voy a deshacer lo que acabo de hacer, verifico que mantenga seleccionada esta caja y esa opción de opacidad la voy a aplicar en las opciones de relleno. Aquí tenemos Opacidad, vamos a darle un valor del 20 %, y en este caso este valor va a ser aplicado solamente al relleno de la caja y no al texto que contiene esta caja. Como pueden ver, el texto está muy pegado al borde izquierdo y al borde superior de la caja, entonces bajo el menú Ventana, vamos a abrir un panel que se llama Espaciado y en este panel, verificando que tengamos este botón activo para que todos los valores sean iguales en todos los lados, vamos a darle por ejemplo un valor de 5 pixeles por todos los lados, para aumentar un margen o espaciado entre el contenido de la caja y el borde de la caja. Probablemente podamos darle un valor más alto, vamos a ensayar con 10 pixeles y vemos que funciona bastante bien. Aquí tenemos entonces ya formateado el texto que necesitamos como parte del encabezado de esta página, ahora nuevamente voy a tomar la herramienta de texto y voy a crear una caja de texto. Tomo la herramienta de selección, abro el panel Trasformar y vamos a definir el tamaño de esa caja de texto. Necesitamos 270 pixeles por 40, entonces 270 píxeles al ancho, 40 píxeles al alto. Es una caja de texto, vamos a incluir el texto dentro de esa caja. El texto es este párrafo "Más información", copiamos, pegamos, tomamos la herramienta de selección, vamos a aplicarle un trazado de 2 pixeles, el color de ese trazado, de ese contorno, va a ser blanco. Vamos ahora a tomar el texto, lo seleccionamos y dentro del panel de texto vamos a aplicar la fuente Open Sans, pero esta vez va a ser Regular. El color de relleno va a ser blanco y vamos a alinear este texto hacia el centro, entonces hacemos clic en esta opción. El tamaño del texto va a ser 16 pixeles. Tomamos la herramienta de selección, abrimos el panel de Espaciado y vamos a darle un valor de espaciado. Lo que buscamos con este espaciado es centrar el texto de forma vertical, vamos a darle un valor de espaciado de 9 pixeles por todos los lados. Aunque en realidad necesitábamos ese valor de espaciado solamente para la parte superior, no hay ningún problema en si lo configuramos solo en la parte superior o en todos los lados. Finalmente, tomamos esta caja, la alineamos en la parte derecha con la segunda columna, tomamos esta caja de texto, la alineamos en la parte izquierda con la caja texto que tenemos en la parte superior, vamos a seleccionar los dos elementos y ahora, de forma manual, vamos hacer un centrado vertical de estos dos elementos. Previsualizamos para mirar el resultado de lo que hemos hecho hasta el momento y ya tenemos los elementos que hacen parte del encabezado de la página de 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:
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.