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.
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:
-
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.
-
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.
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.
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.
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.
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.
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.
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.
-
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.
-
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.
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.
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.
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.
-
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.
Arrastre un duplicado del menú de desayuno a la página.
-
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.
-
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.
-
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
-
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.
Para obtener información sobre cómo trabajar con texto sincronizado, consulte Trabajo con texto sincronizado.
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.
Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.