Aprenda a trabajar con texto en Adobe Muse. Personalice la apariencia del texto, agregue relleno, especifique los valores de sangría y mucho más desde el panel Texto.

Nota:

Adobe Muse ya no añadirá nuevas funciones y dejará de ofrecer asistencia técnica el 26 de marzo de 2020. Para obtener información detallada y asistencia, consulte Página de fin de servicio de Adobe Muse.

Mientras diseña una página web, puede añadir texto con Adobe Muse de las siguientes formas:

  • Añada un cuadro de texto y empiece a escribir el contenido dentro del cuadro de texto.
  • Guarde el texto en un archivo de texto e importe este archivo en su página de Adobe Muse.
  • Utilice una aplicación como InDesign para maquetar el texto. Copie este texto preformateado en el portapapeles y péguelo en Adobe Muse.

En diseño adaptable, también puede dar formato al texto en función del dispositivo utilizado por los usuarios para ver su sitio web. Por ejemplo, puede hacer el texto para smartphones más grande, con más relleno, en comparación con la versión para equipos de escritorio. Además, el diseño web adaptable de Adobe Muse permite dar formato al texto para cada punto de rotura. Es posible cambiar el estilo, el color, el interlineado, el relleno y el tamaño del texto para cada punto de rotura. Para obtener más información sobre cómo dar formato al texto mientras se crea un sitio web para distintos dispositivos en un solo archivo, consulte Formateado de texto en diseños adaptables.

Creación y aplicación de estilos a marcos de texto

Para rellenar los menús, deberá copiar el texto del menú de los archivos de texto externos y pegar el contenido en los marcos de texto. También deberá aplicar estilo al texto creando y aplicando estilos de párrafo. Siga estos pasos:

  1. Mientras edita una página en la vista Diseño, puede utilizar la herramienta Texto para crear un marco de texto. Si desea copiar texto de otro origen de archivo, copie el texto y, en Adobe Muse, utilice la herramienta Texto para hacer clic en el marco de texto. Pegue el contenido de texto copiado en el marco de texto.

  2. Utilice la herramienta Texto para seleccionar cualquier línea de texto.

  3. En el panel Texto, seleccione cualquiera de las siguientes opciones para dar formato al texto:

    • Fuente: Droid Serif Bold (o cualquier fuente serif de su elección)
    • Tamaño de fuente: 14
    • Estilo: Negrita
    • Color: #A6342A (rojo)
    • Alineación: izquierda
    • Interlineado: 120%
  4. Asimismo, puede utilizar cualquiera de las opciones adicionales siguientes para dar formato al texto:

    • Superíndice
    • Subíndice
    • Mayúsculas
    • Minúsculas
  5. Con el texto seleccionado, haga clic en el botón Estilo nuevo situado en la sección inferior del panel Estilos de párrafo (Ventana > Estilos de párrafo). Haga doble clic en el nuevo estilo de párrafo y cambie su nombre: encabezado comida.

    Esto hará que sea más fácil aplicar el mismo formato a otros encabezados de texto en los menús.

  6. Seleccione el siguiente elemento de desayuno con la herramienta Texto: Croissants $3.

  7. Haga clic en el estilo de párrafo llamado encabezado comida para aplicar el mismo formato al segundo elemento de desayuno.

  8. Repita los pasos 7 y 8 para seleccionar y aplicar el estilo de párrafo encabezado comida a todos los elementos de desayuno en el marco de texto (todas las líneas que incluyen el signo del dólar).

  9. Desde la parte superior, utilice la herramienta Texto para seleccionar la primera descripción de elementos de desayuno: Bananas, mandarin oranges, red delicious apples, mixed berry cup.

  10. Haga clic en el estilo de párrafo de cuerpo que aparece en el panel Estilos de párrafo, para aplicar formato a la línea de texto.

  11. Uno por uno, seleccione cada texto de descripción restante bajo los elementos de desayuno y aplique el estilo de párrafo de cuerpo.

fig_66_building
Aplique formato para aplicar estilo al menú con estilos de párrafo.

Puede resultarle útil visitar la versión activa del sitio de ejemplo y utilizar su diseño como referencia.

Para obtener más información sobre cómo trabajar con texto, lea el artículo titulado Tipografía en Adobe Muse.

Uso del corrector ortográfico integrado

Muse incluye un corrector ortográfico que consigue que sea muy fácil buscar y resolver errores tipográficos en los marcos de texto. El corrector ortográfico está siempre activado. Todas las palabras que no están en su diccionario aparecen subrayadas en rojo.

fig_67_building
Las palabras que parecen tener algún error de deletreo se subrayan en rojo.

fig_68_building

Si una de las palabras sugeridas es correcta, pulse la flecha abajo o utilice el ratón para seleccionar la palabra sugerida que desea utilizar y, a continuación, pulse Retorno/Intro para aplicarla. Si comete un error y selecciona la palabra equivocada, simplemente deshaga el cambio (Editar > Deshacer) y, a continuación, elija otra palabra sugerida o edite la palabra con la herramienta Texto.

Si una palabra marcada como error tipográfico se utiliza solo una vez (por ejemplo, el nombre o la ubicación de una persona) y sabe que está escrito correctamente, no es necesario arreglarla. El subrayado rojo que ve en la vista Diseño no aparece al realizar una vista previa, publicar o exportar un sitio.

Cuando se trabaja con palabras que se utilizan habitualmente, como nombres o direcciones de negocios, puede añadir las palabras al diccionario del corrector ortográfico para que no se marquen como errores tipográficos.

Utilice la herramienta Texto para hacer clic con el botón derecho en la palabra que quiere añadir al diccionario y, a continuación, seleccione la opción Añadir al diccionario en el menú contextual que aparece.

Puede seleccionar el idioma deseado (que, a su vez define el idioma del diccionario del corrector ortográfico) para todo el sitio y los cuadros de texto individuales.

Para configurar el diccionario del corrector ortográfico para todo el sitio, seleccione Archivo > Propiedades del sitio. Haga clic en la ficha Texto, seleccione el idioma deseado en el menú Idioma y, a continuación, haga clic en OK.

fig_69_building
Configure el idioma para todo el sitio en el cuadro de diálogo Propiedades del sitio.

A veces es necesario proporcionar texto en varios idiomas para los proyectos de sitio. En estos casos, se puede establecer el idioma predeterminado (utilizado más frecuentemente) en las propiedades del sitio y, a continuación, establecer el idioma del corrector ortográfico para determinados marcos de texto con contenido en un idioma diferente.

Para configurar el diccionario del corrector ortográfico para un marco de texto, seleccione un marco de texto con la herramienta Selección. Haga clic con el botón derecho del ratón y elija Idioma > (Elija el idioma deseado) en el menú contextual que aparece.

fig_70_building
Configure el idioma seleccionado para el marco de texto seleccionado en el menú contextual.

A continuación, deberá actualizar el aspecto del marco de texto. Tal y como si fueran rectángulos y marcos de imágenes, puede configurar el trazo, el relleno y la imagen de fondo de los marcos de texto para aplicarles estilo.

Actualización del aspecto de los marcos de texto

En esta sección, deberá actualizar los atributos de un marco de texto, para que destaque de los gráficos del fondo de la página.

  1. Seleccione el marco de texto que contiene el menú de desayuno con la herramienta Selección.

  2. En el panel de control, establezca el valor de la anchura de trazo en 5 y el color de trazo en negro.

  3. Utilice el menú Relleno para seleccionar el color de relleno de la muestra que cambió de nombre a menú crema (o introduzca el valor de color hexadecimal: #E9916F). Haga clic en el icono de la carpeta junto a la sección Imagen y seleccione el archivo denominado bg-texture.png, ubicado en la carpeta de archivos de ejemplo. Haga clic en OK para cerrar el cuadro de diálogo Importar. Configure el menú Encaje en mosaico y, a continuación, haga clic en cualquier otra parte de la página para cerrar el menú Relleno.

  4. Si es necesario, utilice la herramienta Selección para arrastrar los manejadores del marco de texto y cambiar su tamaño, hasta que quepa el texto. Las dimensiones del menú de desayuno en el sitio de muestra activo son de aproximadamente 800 píxeles de ancho por 440 píxeles de alto.

    La imagen de fondo en mosaico con el color de relleno crema añade un efecto pergamino al marco de texto y el trazo oscuro le permite destacarse del fondo.

    Ahora, añada un título a la parte superior del menú de desayuno, para que los visitantes lo identifiquen.

  5. Utilice la herramienta Texto para crear un marco de texto directamente sobre el menú de desayuno, alineado con la parte superior izquierda.

  6. Escriba la palabra: Breakfast (desayuno).

  7. En el panel Texto, seleccione los siguientes valores para dar formato al texto:

    • Fuente web: Kaushan Script (o cualquier fuente de escritura que prefiera)
    • Tamaño de fuente: 32 Color: #70909D (en la tercera parte, cambió el nombre de este color a menú azul)
    • Interlineado: 120%
    • Alineación: centrado
  8. Mientras el texto está aún seleccionado, haga clic en el botón Estilo nuevo en la parte inferior del panel Estilos de párrafo para crear un nuevo estilo de párrafo. Haga doble clic en el nuevo estilo de párrafo y cambie su nombre: etiqueta menú.

La etiqueta situada sobre el menú de desayuno ayuda a orientar a los usuarios y hace que puedan conocer de un vistazo qué menú están leyendo. Después de realizar estos cambios, el aspecto del menú de desayuno completado es similar a lo que se muestra en la siguiente imagen.

fig_71_building
Al menú del desayuno se le ha aplicado estilo y el contenido de texto se ha formateado.

En la siguiente sección, deberá duplicar el menú de desayuno y, a continuación, deberá actualizar el contenido del texto en los marcos de texto duplicados para crear los menús de almuerzo, cena y postres.

Duplicación de marcos de texto

En las secciones anteriores, ha creado el marco de texto del menú de desayuno, y lo ha rellenado con texto de un archivo de texto externo, ha utilizado estilos de párrafo para aplicar formato de texto uniforme y, a continuación, ha actualizado el aspecto del marco de texto mediante la adición de una imagen de fondo de mosaico, un color de relleno y un trazo. También ha añadido un segundo marco de texto encima del marco de texto del menú, para crear un encabezado que identifique el menú del desayuno. El siguiente paso implica duplicar este conjunto de elementos tres veces, para crear un total de cuatro menús.

  1. Utilice la herramienta Selección para seleccionar el marco de texto con la palabra Breakfast (desayuno) y el marco de texto que contiene el menú de desayuno.

  2. Mantenga pulsada la tecla Opción (Mac) o Alt (Windows) y, a continuación, arrastre el conjunto de los dos cuadros de texto a la página, para crear una copia duplicada. Arrastre la copia y manténgala verticalmente alineada con el original (las guías inteligentes que aparecerán temporalmente indican cuándo están alineados los laterales y los centros). El conjunto duplicado de marcos de texto debe ser de aproximadamente 430 píxeles por debajo del conjunto original.

    fig_72_building
    Arrastre un duplicado del menú de desayuno a la página.

  3. Con la herramienta Texto, seleccione la etiqueta del campo de texto duplicado. Sustituya la palabra Breakfast (desayuno) por la palabra: Lunch (almuerzo).

  4. Salga temporalmente de Adobe Muse y vuelva a su escritorio. Abra la carpeta de archivos de ejemplo y localice el archivo denominado text-food-lunch.txt. Haga doble clic en el archivo para abrirlo con un editor de texto. Copie la primera línea del texto: The JR $9.

  5. Vuelva a Adobe Muse. Utilice la herramienta Texto para hacer clic en el marco de texto del menú de almuerzo. Pegue el contenido del texto copiado en el marco de texto, reemplazando el primer elemento de la lista de comida existente: Croissants $3.

  6. Repita los pasos 4 y 5, para copiar cada una de las líneas con símbolos de dólar del archivo text-food-lunch.txt y reemplazar los elementos del menú de almuerzo.

  7. Para continuar rellenando el menú de almuerzo, copie cada una de las descripciones del archivo de text-food-lunch.txt y pegue las descripciones una a una en la parte superior de las descripciones existentes del menú del almuerzo duplicado. Esta estrategia garantiza que los estilos que se aplican al contenido de texto se mantengan.

  8. Repita los pasos del 1 a 7 para seleccionar los dos cuadros de texto del almuerzo, duplíquelos y arrástrelos 430 píxeles por debajo del menú de almuerzo existente, cambie el nombre de la etiqueta a Cena y, a continuación, copie los elementos del archivo text-food-dinner.txt para llenar el menú de cena.

  9. Repita el paso 8 nuevamente. Esta vez, cambie el nombre de la etiqueta duplicada: Postre. Copie las líneas de texto de text-food-dessert.txt para finalizar el menú de postres.

  10. Utilice la herramienta Selección para volver a colocar cada uno de los cuatro cuadros de texto según sea necesario, de manera que queden alineados verticalmente con alrededor de 120 píxeles en cada sección.

    fig_73_building
    Alineación vertical de los cuatro menús (desayuno, almuerzo, cena y postres) en la página de comida.

Debe haber observado que a medida que arrastra cada copia duplicada abajo, la zona de pie de página que se definió en la primera parte se desplaza automáticamente hacia abajo para crear más espacio vertical en la página. Como resultado, la página de comida se hace más larga de altura que las otras páginas de este sitio de ejemplo.

Debe añadir anclajes por encima de cada menú para crear un sistema de navegación que permita a los visitantes pasar rápidamente de un menú a otro. Como la página de comida es una página más larga, el contenido se desplaza verticalmente para mostrar el menú correspondiente, en función del elemento de menú en el que los visitantes hagan clic. También descubrirá cómo trabajar con los vínculos para crear varios tipos de vínculos, incluidos los de descarga, que permiten a los visitantes descargar archivos PDF.

Inserción de símbolos y caracteres especiales

El panel de pictogramas permite insertar símbolos, como © o caracteres especiales, como la beta (ᵝ) que no están disponibles en un teclado estándar. El panel de pictogramas permite insertar caracteres Unicode.

Los tipos de símbolos y caracteres que se pueden insertar dependen de la fuente que elija. Por ejemplo, algunas fuentes pueden incluir caracteres internacionales (Ç, ë) y símbolos de moneda (£, ¥). La fuente incorporada Symbol incluye flechas, viñetas y símbolos científicos.

Para insertar caracteres mediante el panel de pictogramas, haga lo siguiente:

  1. Si todavía no lo ha hecho, cree un marco de texto en la parte de la página web donde desea insertar el carácter.

  2. Seleccione Ventana > Pictogramas para abrir el panel Pictogramas.

  3. Utilice la lista desplegable para seleccionar la categoría del carácter que desee insertar.

  4. El panel de pictogramas muestra todos los caracteres de la categoría seleccionada. Haga clic en el carácter que desee insertar.

Edición del aspecto de los marcos de texto

No importa si aplica fuentes web, fuentes web seguras o fuentes del sistema al texto, siempre se puede editar el contenido de texto mientras se trabaja en la vista Diseño. También puede actualizar el aspecto del marco de texto en sí, de modo que el bloque de texto se muestra de forma diferente.

Piense en los marcos de texto como contenedores que rodean cada sección del texto. Puede controlarlos de muchas maneras para influir en el modo en el que se muestran en el sitio activo.

Cuando se desea dar formato y estilo a los marcos de texto, utilice la herramienta Selección para seleccionar el marco de texto y, a continuación, aplique cambios que afecten al aspecto del contenido de texto.

Nota: si selecciona el texto con la herramienta Texto, puede aplicar estilo al texto configurando las opciones de formato en el panel Texto o en el panel de control.

Puede cambiar el tamaño de un marco de texto arrastrando los manejadores para ampliar o reducir. También puede arrastrar el marco de texto completo alrededor de la página para volver a colocarlo. Cuando se cambia el tamaño del marco de texto, una sugerencia muestra sus dimensiones.

fig_15_type
Arrastre los manejadores alrededor de un marco de texto para cambiar el tamaño.

También puede girar un marco de texto, pero tenga en cuenta que si gira un marco de texto (independientemente de las fuentes que se apliquen) el texto se exportará como un archivo de imagen. Por tanto, hágalo con moderación y añada siempre un título al texto rotado.

Para actualizar la apariencia de un contenedor de marco de texto, puede utilizar las mismas opciones de formato que utiliza para editar rectángulos. Es posible configurar el color de relleno e incluso añadir imágenes de fondo. También puede establecer un trazo y utilizar la misma configuración para controlar el ancho del trazo, el color y la alineación. Con los menús Vértices y Efectos del panel de control, puede definir el radio de vértice del marco de texto y aplicar sombras paralelas, biseles y resplandores.

Para añadir transparencia a un marco de texto, cambie el valor de opacidad con el regulador de opacidad.

Y use el menú Hipervínculo y el campo Hipervínculo para añadir títulos al texto, así como añadir vínculos y definir si el vínculo se abrirá en una nueva ventana del navegador.

Control del ceñido y alineación de texto alrededor de una imagen

Los marcos de texto son muy útiles para la creación de contenido de la página. Como se ha visto en la sección anterior, los marcos de texto pueden contener elementos y efectos gráficos, además de contenido de texto.

En esta sección, verá cómo controlar el contenido de texto dentro de un marco de texto, estableciendo relleno para añadir más espacio. También aprenderá a crear diseños de estilo de revistas para crear columnas de texto que se ciñan alrededor de las imágenes.

Adición de relleno a texto

De forma predeterminada, el texto que se escribe, coloca o pega en un marco de texto está alineado a la izquierda. Si observa la configuración del panel Espaciado, los valores se establecen en 0.

PaddingZero
El relleno predeterminado aplicado al texto de un marco de texto.

Para añadir más espacio a la izquierda, a la derecha, en la parte superior o inferior del marco de texto, escriba el valor deseado (en píxeles) o haga clic en las flechas arriba y abajo situadas junto a cada campo para aumentar o reducir el valor numérico.

Sangría y control de los valores de interlineado y tracking

Puede controlar el formato de texto en Adobe Muse del mismo modo que actualiza contenido de texto en un procesador de texto y otras herramientas de edición de imágenes. El panel Texto incluye muchas opciones de configuración adicionales, algunas de los cuales no se muestran en el panel de control cuando se selecciona el texto.

Siga estos pasos para sangrar la primera línea del texto de un párrafo:

  1. Utilice la herramienta Texto para seleccionar algún texto.

  2. Actualice el valor de sangría en la herramienta Texto con el valor de píxeles deseado.

TypeToolIndent
Escriba un número en el campo o haga clic en las flechas arriba y abajo para cambiar el valor.

La opción Espacio entre letras del panel Texto permite definir la cantidad de espacio entre cada uno de los caracteres. Esto es especialmente útil para efectos de texto y para hacer que las fuentes ornamentadas o estilizadas sean más fáciles de leer en la web.

Puede aplicar espacio entre letras en el texto seleccionado, introduciendo el número de píxeles en el campo Espacio entre letras. Como alternativa, puede hacer clic en las flechas arriba y abajo para aumentar o disminuir el valor hasta conseguir el efecto deseado.

TypeToolAddSpace
Escriba un número en el campo Espacio entre letras o haga clic en las flechas arriba y abajo para cambiar el valor.

Interlineado es otra útil función que se puede utilizar para controlar el formato de texto en los párrafos. Interlineado le permite ajustar el espacio entre las líneas de texto. La función Interlineado está disponible tanto en el panel de control como en el panel Texto.

TypeToolLeading
Actualice el valor de Interlineado para aumentar o disminuir el espacio entre líneas.

Los otros cuatro controles de tipografía disponibles en el panel Texto son:

Margen izquierdo y Margen derecho

Como era de esperar, controlan el espacio entre los caracteres de ambos lados del marco de texto y el borde de los marcos de texto. Esta configuración es muy similar a la de Relleno del panel Espaciado, salvo que se selecciona el marco de texto con la herramienta Selección, (en lugar de seleccionar el contenido de texto con la herramienta Texto) para editar los valores de relleno.

Espacio antes y Espacio después

Puede utilizar esta configuración para controlar la cantidad de espacio (en píxeles) que se muestra antes o después de un salto de párrafo. Esta configuración le permite ver más o menos espacio en blanco entre un conjunto de párrafos que se encuentran en un solo marco de texto.

Asegúrese de practicar con todas estas opciones en el panel Texto para aprender cómo se puede controlar la visualización del contenido de texto en las páginas que diseñe.

Colocación de texto de un archivo de texto en una página

Los archivos de origen que contienen la copia del cuerpo para este proyecto de ejemplo se encuentran en la carpeta Kevins_Koffee_Kart. El texto se guarda en archivos con formato TXT. En Adobe Muse, puede colocar un archivo completo de texto para agregar texto a la página. No es necesario abrir archivos de texto en un editor de textos ni copiar las líneas de texto para pegarlas en las páginas.

  1. Elija Archivo > Colocar o utilice el comando de teclado para colocar, Comando+D (Mac) o Control+D (Windows®), para iniciar la operación Colocar. Es el mismo proceso que utilizará para colocar archivos de imagen en una página.

  2. En el cuadro de diálogo Importar, vaya a la carpeta Kevins_Koffee_Kart y seleccione el archivo de texto denominado TextThreeSpeed.txt.

  3. Haga clic en el contenedor más grande de color gris claro en el widget Acordeón, por debajo del encabezado TASTING NOTES, para colocar el contenido del archivo de texto en el panel Acordeón superior.

  4. Después de colocar el nuevo marco de texto, utilice la herramienta Selección para cambiar su posición a debajo del encabezado TASTING NOTES y arrastre los manejadores de las partes superior e inferior y de los lados del marco de texto para expandir el contenedor gris claro como sea necesario para ajustar tanto el encabezado como el texto que se encuentra debajo de él. Al hacer clic y arrastrar el texto que acaba de colocar, puede saber cuándo está alineado con el lado izquierdo del texto de encabezado porque aparecerá temporalmente una guía azul si los dos elementos están alineados. Observe que, además de arrastrar los manejadores para cambiar el tamaño del texto colocado, puede hacer clic en el contenedor gris y arrastrar los manejadores inferiores para expandir la altura del contenedor.

  5. Mientras el contenedor gris claro esté seleccionado, haga clic en el selector de color de relleno y defina el color de fondo del panel en Sin relleno.

    fig_40
    Añada texto a la ficha gris superior y el mayor contenedor correspondiente para rellenarlo con contenido.

Trabajo con texto sincronizado

Para obtener información sobre cómo trabajar con texto sincronizado, consulte Trabajo con texto sincronizado.

Trabajo con texto en diseño adaptable

Para obtener más información sobre cómo dar formato al texto en diseño adaptable, consulte Formateado de texto en diseños adaptables.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea