Muse CC para diseño web responsivo

Trabajamos con los estilos de párrafo en nuestro sitio web

¡Prueba gratis durante 10 días

nuestros 1265 cursos !

Prueba gratis Mostrar modalidades de suscripción
Los estilos de párrafo automatizan la aplicación y la reutilización de los aspectos de formato de texto en párrafos, tales como tamaño, color, tipo de fuente, etc., por lo cual su uso es muy recomendado en el proceso de diseño.
06:42

Transcripción

Vamos ahora a formatear el texto que se encuentra debajo de estos logos. Así que voy a seleccionar primero este párrafo, voy a abrir el panel de texto y vamos a cambiar el color de este texto a azul. El tamaño de este texto va a ser 20 pixeles y la fuente que vamos a utilizar es la fuente Open Sans Bold. Vamos ahora a seleccionar el párrafo que se encuentra más hacia la parte inferior, el color de ese párrafo va a ser gris, el tamaño del texto va a ser 16 pixeles y la fuente va a ser Open Sans Regular. Ahora vamos a aumentar el valor del espacio entre líneas de 120 %, que es el valor por defecto, a 140 % y vamos a darle un valor de espacio antes de párrafo de 9 pixeles. Este valor genera una separación entre el párrafo y el texto que se encuentra en la parte superior. Ya hemos formateado este título y el texto que tenemos en la parte inferior y ahora debemos formatear de la misma manera los textos que se encuentran en la parte derecha, ya que el formato de texto que vamos a aplicar en estos textos va a ser exactamente igual al que aplicamos en esta caja texto. Entonces, es una muy buena idea crear estilos de párrafo. Vamos al menú Ventana, voy a seleccionar el panel Estilos de párrafo, voy a seleccionar este párrafo, hago un clic sobre el botón de la parte inferior del panel Estilos de párrafo, para crear un estilo párrafo nuevo, hago un clic para enlazar este texto con el estilo de párrafo que acabamos de crear y hacemos un doble clic para cambiar el nombre del estilo de párrafo. El nombre de este estilo de párrafo va a ser 'Titulos'. Yo en teoría puedo utilizar tildes dentro de los nombres, pero prefiero evitar estas tildes y símbolos además porque estos nombres de estilos posteriormente se van a convertir en nombres de reglas CSS cuando se haga la exportación del sitio web, y cuando tenemos este tipo de símbolos en los nombres de estilo CSS, podríamos generar inconvenientes, entonces yo prefiero prescindir de símbolos y de tildes. Así que vamos a escribir Títulos pero sin la tilde. Hago clic en OK y ya tenemos ese estilo de párrafo creado. Vamos a seleccionar el siguiente estilo de párrafo, repito el proceso para crear un nuevo estilo de párrafo y el nombre de este estilo va a ser 'Cuerpo', hago clic en OK y ya tenemos el estilo párrafo Titulos y el estilo párrafo Cuerpo. Como ya contamos con estos estilos, aplicar el formato al resto de texto va a ser muy sencillo. Simplemente hacemos un clic sobre este párrafo, observen como ni siquiera he seleccionado los caracteres, simplemente hice un clic, y hago clic ahora en el nombre del estilo de párrafo. Ya que se trata de un estilo de párrafo, automáticamente el estilo se aplica a todo el párrafo, aún cuando yo no haya seleccionado todo el párrafo. Igual, en el párrafo inferior hacemos un clic, o seleccionamos el párrafo si lo deseamos, y clic en el estilo párrafo Cuerpo. Repetimos el proceso en esta última caja de texto para los títulos y para el cuerpo de texto y ya hemos aplicado el formato al texto que se encuentra debajo de los logos, utilizando además los estilos de párrafo para automatizar ese proceso. Esos estilos de párrafo se pueden modificar, por ejemplo he seleccionado este texto y en el panel de texto voy a indicar que quiero que ese texto esté centrado de forma horizontal. Voy a hacer lo mismo con el párrafo que tenemos más hacia la parte inferior. Después de hacer ese cambio, voy a abrir nuevamente el panel Estilos de párrafo y observen que tengo seleccionado el texto de la parte inferior, el segundo párrafo, el cual tiene un estilo de párrafo aplicado que se llama Cuerpo. En la parte más hacia la derecha del nombre aparece un más. Adicionalmente, tenemos un "tooltip" o una ventana amarilla donde aparece el listado de características que están guardadas como parte de ese estilo de párrafo. Más hacia la parte inferior encontramos una línea punteada, y bajo la línea punteada encontramos otra característica que se llama 'alinear al centro'. Esa característica que está debajo de la línea punteada es una característica que está aplicada a este texto, pero que no hace parte del estilo de párrafo. Y el más que está en la parte derecha del nombre del estilo de párrafo me está diciendo también lo mismo: que tenemos una característica adicional en este texto que no está incluida en este estilo de párrafo. Voy a hacer un clic derecho sobre el nombre de este estilo de párrafo y voy a seleccionar una opción que se llama Redefinir estilo. Al redefinir el estilo lo que estamos haciendo es tomar esa característica que se encontraba en este texto y aplicarla o incluirla entre las características que hacen parte de este estilo de párrafo. Voy a colocar el puntero sobre el nombre del estilo párrafo y observen que ya desaparece esa línea punteada y la característica de alineación que estaba debajo de esa línea punteada ahora se encuentra en la parte superior, es decir, hace parte de ese estilo de párrafo. Por ese mismo motivo tampoco parece el más. Voy a seleccionar el texto que tenemos en la parte superior y tenemos el mismo inconveniente. El más, si coloco el puntero sobre el nombre del estilo, entonces tenemos una característica de alineación hacia el centro que está debajo de esa línea punteada. En la parte inferior del panel Estilos de párrafo, tenemos una serie de botones y el segundo botón es Redefinir el estilo, es decir, el mismo comando que utilizamos cuando hicimos un clic derecho sobre el nombre del estilo. En este caso, voy a hacer clic sobre este botón y tenemos exactamente el mismo resultado: la característica adicional que tenía este texto ahora hace parte de este estilo de párrafo. De esta manera, nosotros hacemos cambios fácilmente sobre los estilos de párrafo y esos cambios se aplican automáticamente a todos los párrafos donde hayamos aplicado esos estilos.

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.