Enquanto edita uma página na exibição Design, use a ferramenta Texto para criar um quadro de texto. Se deseja copiar o texto de outra origem de arquivo, copie o texto e, no Adobe Muse, use a ferramenta Texto para clicar no quadro de texto. Cole o conteúdo do texto copiado no quadro de texto.
Última atualização em
May 04, 2021 11:18:06 PM GMT
Saiba como trabalhar com texto no Adobe Muse. Modifique a aparência do texto, adicione preenchimento, defina valores de recuo ou muito mais usando o painel Texto.
Ao projetar um site, é possível adicionar texto usando o Adobe Muse das seguintes maneiras:
- Adicionar uma caixa de texto e comece a digitar seu conteúdo dentro dela.
- Salvar seu texto em um arquivo de texto e importe este arquivo para sua página do Adobe Muse.
- Usar um aplicativo como o InDesign para definir o layout do texto. Copie este texto pré-formatado para a área de transferência e cole-o no Adobe Muse.
No layout responsivo, você também pode formatar o texto de acordo com o dispositivo no qual os usuários visualizam seu site. Por exemplo, você pode aumentar o texto para smartphones ou adicionar mais preenchimento em comparação à versão para desktop. Além disso, um design responsivo para web no Adobe Muse também permite formatar o texto para cada ponto de quebra. Você pode alterar o estilo, cor, entrelinha, preenchimento e tamanho do texto para cada ponto de quebra. Para saber mais sobre a formatação de texto ao criar um site para vários dispositivos em um único arquivo, consulte Formatar texto no layout responsivo.
Criar estilos e quadros de texto
Para preencher os menus, você copiará o texto do menu de arquivos de texto externos e colará no conteúdo em quadros de texto. Você também aplicará estilo ao texto criando e aplicando estilos de parágrafo. Siga estas etapas:
-
-
Use a ferramenta Texto para selecionar uma linha de texto.
-
No painel de texto, use uma das seguintes configurações para formatar o texto:
- Fonte: Droid Serif Bold (ou qualquer fonte com serifa de sua escolha)
- Tamanho da fonte: 14
- Estilo: Negrito
- Cor: #A6342A (vermelho)
- Alinhamento: Esquerdo
- Entrelinha: 120%
-
Formate o texto ainda mais usando qualquer uma das seguintes opções de formatação de texto adicionais:
- Sobrescrito
- Subscrito
- Maiúsculas
- Minúsculas
-
Com o texto ainda selecionado, clique no botão Novo estilo na parte inferior do painel Estilos de parágrafo (Janela > Estilos de parágrafo). Clique duas vezes no novo estilo de parágrafo e renomeie-o como: food-header.
Isso facilitará a reaplicação da mesma formatação a outros cabeçalhos de texto nos menus.
-
Selecione o próximo item de café da manhã com a ferramenta Texto: Croissants $3
-
Clique no estilo de parágrafo chamado food-header para aplicar a mesma formatação ao segundo item de café de manhã.
-
Repita as etapas 7 e 8 para selecionar e aplicar o estilo de parágrafo food-header a cada item de café da manhã no quadro de texto (todas as linhas que incluem o cifrão).
-
Na parte superior, use a ferramenta Texto para selecionar a descrição do primeiro item de café da manhã: bananas, tangerinas, maçãs vermelhas, porção mista de frutas vermelhas.
-
Clique no estilo de parágrafo do corpo listado no painel Estilos de parágrafo, para aplicar a formatação à linha de texto.
-
Um a um, selecione cada texto de descrição restante abaixo dos itens de café da manhã e aplique o estilo de corpo de parágrafo.
Talvez seja útil visitar a versão ao vivo do site de exemplo e use seu design como uma referência.
Para saber mais sobre como trabalhar com texto, leia o artigo chamado Tipografia no Adobe Muse.
Usar o verificador ortográfico incorporado
O Adobe Muse tem um Corretor ortográfico que facilita a localização e a resolução de erros ortográficos em quadros de texto. O Corretor ortográfico sempre está ativado. Ele exibe um sublinhado em vermelho em todas as palavras não encontradas no dicionário.
Se uma das palavras sugeridas estiver correta, pressione a Seta para baixo ou use o mouse para selecionar a palavra sugerida que você deseja usar e pressione Return/Enter para aplicá-la. Se você cometer um erro e selecionar a palavra incorreta, apenas desfaça a alteração (Editar > Desfazer) e escolha uma palavra sugerida diferente ou edite a palavra usando a ferramenta Texto.
Se a palavra sinalizada como um erro tipográfico for usada apenas uma vez (como um nome de uma pessoa ou local) e você souber que ela foi digitada corretamente, não será necessário corrigi-la. O sublinhado em vermelho observado no modo de exibição Design não é exibido quando você visualiza, publica ou exporta um site.
Ao trabalhar com palavras usadas com frequência, como nomes ou endereços comerciais, você pode adicionar as palavras ao dicionário do Corretor ortográfico para que não sejam marcadas como erros ortográficos.
Use a ferramenta Texto para clicar com o botão direito do mouse em uma palavra a ser adicionada ao dicionário e escolha a opção Adicionar ao dicionário no menu contextual exibido.
É possível definir o idioma desejado (o que, por sua vez, define o idioma do dicionário do Corretor ortográfico) para todo o site e para quadros de texto individuais.
Para definir o dicionário do Corretor ortográfico para todo o site, selecione Arquivo > Propriedades do site. Clique na guia Texto, escolha o idioma desejado no menu Idioma e clique em OK.
Às vezes, os projetos de site requerem o fornecimento de texto em vários idiomas. Nesses casos, você pode definir o idioma padrão (usado mais frequentemente) nas Propriedades do site e defina o idioma do Corretor ortográfico para quadros de texto específicos que exibem o texto em um idioma diferente.
Para definir o dicionário do Corretor ortográfico de um quadro de texto, selecione um quadro de texto com a ferramenta Seleção. Clique com o botão direito do mouse e escolha Idioma > (escolha o idioma desejado) no menu contextual exibido.
Em seguida, você atualizará a aparência do quadro de texto. Como retângulos e quadros de imagem, você pode definir o traço, o preenchimento e a imagem do fundo de quadros de texto para aplicar estilo a eles.
Atualizar a aparência de quadros de texto
Nesta seção, você atualizará os atributos de um quadro de texto, para destacá-lo dos gráficos de fundo na página.
-
Selecione o quadro de texto que contém o menu de café da manhã com a ferramenta Seleção.
-
No painel de controle, defina a largura do traço como 5 e a cor do traço em preto.
-
Use o menu Preenchimento para definir a cor de preenchimento da amostra que você renomeou como cream-menu (ou insira o valor de cor hexadecimal: #E9916F). Clique no ícone de pasta próximo à seção Imagem e navegue para selecionar o arquivo na pasta de arquivos de exemplo chamada bg-texture.png. Clique em OK para fechar a caixa de diálogo Importar. Defina o menu Ajuste como Lado a lado e clique em qualquer outro lugar na página para fechar o menu Preenchimento.
-
Se necessário, use a ferramenta Seleção para arrastar as alças do quadro de texto e redimensioná-lo, até ajustar o texto. As dimensões do menu de café da manhã no site ao vivo de exemplo são de aproximadamente 800 pixels de largura por 440 pixels de altura.
A imagem do fundo lado a lado com a cor de preenchimento creme adiciona um efeito de pergaminho ao quadro de texto e o traçado escuro ajuda a destacá-lo do plano de fundo.
Agora, você adicionará um título à parte superior do menu de café da manhã, para identificá-lo para os visitantes.
-
Use a ferramenta Texto para criar um quadro de texto diretamente no menu de Café de manhã, alinhado ao lado esquerdo superior.
-
Digite a palavra: Café de manhã.
-
No painel de texto, escolha as seguintes configurações para formatar o texto:
- Fonte da Web: Kaushan Script (ou qualquer fonte de script de sua preferência)
- Tamanho da fonte: 32 Cor: #70909D (Na parte três, você renomeou essa cor como menu azul)
- Entrelinha: 120%
- Alinhamento: Centralizado
-
Com o texto ainda selecionado, clique no botão Novo estilo na parte inferior do painel Estilos de parágrafo para criar um novo estilo de parágrafo. Clique duas vezes no novo estilo de parágrafo e renomeie-o como: menu-label.
O rótulo acima do menu de café da manhã ajuda a orientar os usuários e destacar visualmente qual menu está sendo lido. Após a realização dessas alterações, o menu de café da manhã completo ficará parecido com o da imagem a seguir.
Na próxima seção, você duplicará o menu de café da manhã, em seguida, atualizará conteúdo de texto nos quadros de texto duplicados para criar os menus de almoço, jantar e sobremesa.
Duplicar quadros de texto
Nas seções anteriores, você criou o quadro de texto do menu de café da manhã, preencheu com texto de um arquivo de texto externo, usou estilos de parágrafo para aplicar formatação de texto consistente e atualizou a aparência do quadro de texto adicionando uma imagem do fundo lado a lado, uma cor de preenchimento e um traço. Você também adicionou um segundo quadro de texto acima do quadro de texto do menu, para criar um cabeçalho que identifica o menu de café da manhã. A próxima etapa envolve duplicar esse conjunto de elementos três vezes, para criar um total de quatro menus.
-
Use a ferramenta Seleção para selecionar o quadro de texto com as palavras Café da manhã e o quadro de texto que contém o menu de café de manhã.
-
Mantenha pressionada a tecla Option (Mac) ou Alt (Windows) e arraste o conjunto de dois quadros de texto para baixo na página, para criar uma cópia duplicada. Arraste a cópia para baixo e mantenha-a verticalmente alinhada com o original (as guias inteligentes que aparecem temporariamente indicam quando os lados e os centros estão alinhados). O conjunto duplicado de quadros de texto deve ter aproximadamente de 430 pixels abaixo do conjunto original.
Arraste uma duplicata do menu de café da manhã na página. -
Use a ferramenta Texto para selecionar o rótulo do campo de texto duplicado. Substitua as palavras café da manhã pela palavra: Almoço.
-
Alterne temporariamente do Adobe Muse para a área de trabalho. Abra a pasta de arquivos de amostra e localize o arquivo denominado text-food-lunch.txt. Clique duas vezes no arquivo para abri-lo em um editor de texto. Copie a primeira linha de texto: JR $9.
-
Volte para o Adobe Muse. Use a ferramenta Texto para clicar no quadro de texto do menu de almoço. Cole o conteúdo do texto copiado no quadro de texto, substituindo o primeiro item de alimento listado: Croissants $3.
-
Repita as etapas 4 e 5, para copiar todas as linhas com cifrão do arquivo text-food-lunch.txt para substituir os itens no menu de almoço.
-
Continue preenchendo o menu de almoço, copiando cada uma das descrições no arquivo text-food-lunch.txt e colando as descrições uma de cada vez sobre as descrições existentes no menu de almoço duplicado. Essa estratégia garante que os estilos aplicados ao conteúdo do texto sejam mantidos.
-
Repita as etapas 1 a 7 para selecionar os dois quadros de texto de almoço, duplicá-los, arrastá-los cerca de 430 pixels abaixo do menu de almoço existente, renomear o rótulo como Jantar e depois copiar os itens no arquivo text-food-dinner.txt para preencher o menu de jantar.
-
Repita a etapa 8 novamente. Dessa vez, renomeie o rótulo duplicado como: Sobremesa. Copie as linhas de texto de text-food-dessert.txt para finalizar o menu de sobremesa.
-
Use a ferramenta Seleção para reposicionar os quatro quadros de texto conforme necessário, para que eles sejam alinhados verticalmente com cerca de 120 pixels entre cada região.
Alinhe os quatro menus (café de manhã, almoço, jantar e sobremesa) verticalmente na página alimentos.
Você deve ter percebido que, à medida que arrasta cada cópia duplicada para baixo, a região de rodapé definida na Parte 1 é movida automaticamente para baixo para criar mais espaço vertical na página. Por isso, a página alimentos é mais alta do que as outras páginas neste site de exemplo.
É preciso adicionar âncoras acima de cada menu para criar um sistema de navegação que permita que os visitantes passem rapidamente para cada menu. Como a página alimentos uma página maior, o conteúdo é rolado verticalmente para exibir o menu correspondente, com base no item de menu que os visitantes clicam. Você também explorará como trabalhar com Links para criar vários tipos de links — incluindo links de download, que permitem que os visitantes façam download de um arquivo PDF.
Inserir símbolos e caracteres especiais
O painel Glifos permite inserir símbolos como © ou caracteres especiais, como beta (ᵝ), que não estão disponíveis em um teclado padrão. O painel Glifos permite inserir caracteres Unicode.
Os tipos de símbolos e de caracteres que podem ser inseridos dependem da fonte escolhida. Por exemplo, algumas fontes podem conter os caracteres internacionais (Ç, ë) e símbolos monetários internacionais (£, ¥). A fonte do símbolo incorporada inclui setas, marcadores e símbolos científicos.
Para inserir caracteres usando o painel Glifos, faça o seguinte:
-
Caso ainda não o tenha feito, desenhe um quadro de texto na página da Web onde você deseja inserir um caractere.
-
Selecione Janela> Glifos para exibir o painel Glifos.
-
Use a lista suspensa para selecionar a categoria de caracteres que você deseja inserir.
-
O painel Glifos exibe todos os caracteres de uma categoria selecionada. Clique no caractere que você deseja inserir.
Editar a aparência de quadros de texto
Quer você aplique fontes da Web, fontes seguras da Web ou fontes de sistema para texto, sempre poderá editar o conteúdo de texto ao trabalhar no modo de exibição Design. Também é possível atualizar a aparência do quadro de texto em si, para que o bloco de texto seja exibido de modo diferente.
Pense nos quadros de texto como contêineres ao redor de cada seção do texto. Você pode controlá-los de várias maneiras para afetar o modo como serão exibidos no site ao vivo.
Quando você quiser formatar e aplicar estilos aos quadros de texto, use a ferramenta Seleção para selecionar o quadro de texto e depois aplicar as alterações que afetam a aparência do conteúdo do texto.
Nota: se você selecionar um texto usando a ferramenta Texto, poderá aplicar um estilo ao texto definindo opções de formatação no painel Texto ou no painel de controle.
Você poderá redimensionar as dimensões de um quadro de texto arrastando as alças para estendê-lo ou reduzi-lo. Você também poderá arrastar todo o quadro de texto na página para reposicioná-lo. Durante o redimensionamento do quadro de texto, uma dica de ferramenta exibe suas dimensões.
Você também pode girar um quadro de texto, mas saiba que se fizer isso(independentemente de fontes aplicadas), o texto será exportado como um arquivo de imagem. Assim, faça isso com moderação e sempre adicione um título ao texto girado.
Para atualizar a aparência de um contêiner do quadro de texto, você poderá usar as mesmas opções de formatação utilizadas para editar retângulos. Você pode definir a cor de preenchimento e até mesmo adicionar imagens de fundo. Também é possível definir um traço e usar as mesmas configurações para controlar a largura, a cor e o alinhamento do traço. Usando os menus Cantos e Efeitos no painel de controle, você pode definir o raio do canto do quadro de texto e aplicar sombras, chanfro e brilhos.
Para adicionar transparência a um quadro de texto, altere o valor de opacidade usando o controle deslizante Opacidade.
E use o menu e o campo Hiperlink para adicionar títulos ao texto, bem como adicionar links e definir se o link é aberto em uma nova janela do navegador.
Controlar o alinhamento do texto e a quebra de texto ao redor de uma imagem
Os quadros de texto são extremamente úteis para criar conteúdo da página. Conforme visto na seção anterior, os quadros de texto podem conter elementos e efeitos gráficos, bem como conteúdo de texto.
Nesta seção, você terá que verificar como controlar o conteúdo de texto em um quadro de texto, ajustando o preenchimento para adicionar mais espaço. Você também aprenderá a criar layouts no estilo de revistas criando colunas de texto com quebras de texto ao redor das imagens.
Adicionar preenchimento ao texto
Por padrão, o texto digitado, inserido ou colado em um quadro de texto é alinhado do lado esquerdo. Se você observar as configurações no painel Espaçamento, todas estão definidas como 0.
Para adicionar mais espaço à esquerda, à direita, à parte superior ou inferior do quadro de texto, digite o valor desejado (em pixels) ou clique nas setas para acima e para baixo ao lado de cada campo para incrementar ou reduzir o valor numérico.
Recuar texto e controlar valores de entrelinha e acompanhamento
Você pode controlar a formatação de texto no Adobe Muse da mesma forma que atualiza conteúdo de texto em processadores de texto e em muitas outras ferramentas de edição de imagens. O painel Texto contém várias configurações adicionais, algumas das quais não são exibidas no painel de controle quando o texto é selecionado.
Siga estas etapas para recuar a primeira linha de texto em um parágrafo:
-
Use a ferramenta Texto para selecionar o texto.
-
Atualize o valor de Recuo na ferramenta Texto para o valor de pixels desejado.
A opção Espaço entre letras no painel Texto permite definir a quantidade de espaço entre cada caractere. Ela é especialmente útil para efeitos de texto e para criar fontes ornamentadas ou com estilo mais fáceis de ler na Web.
Você pode aplicar o espaçamento entre letras ao texto selecionado digitando o número de pixels no campo Espaço entre letras. Como alternativa, clique nas setas para cima e para baixo para aumentar ou diminuir o valor até obter o efeito desejado.
A entrelinha é outro recurso que você pode usar para controlar a formatação do texto em parágrafos. Ela permite ajustar o espaço entre as linhas de texto. O recurso Entrelinha está disponível no painel de controle e no painel Texto.
Os outros quatro controles tipográficos disponíveis no painel Texto são:
Margem esquerda e Margem direita
Como esperado, controlam o espaço entre os caracteres nos dois lados do quadro de texto e da borda de quadros de texto. Essas configurações são muito semelhantes à configuração de valores de Preenchimento no painel Espaçamento, exceto por você selecionar o quadro de texto com a ferramenta Seleção, (em vez de selecionar o conteúdo de texto com a ferramenta Texto) para editar valores de preenchimento.
Espaço anterior e Espaço posterior
Use essa configurações para controlar a quantidade de espaço (em pixels) exibida antes ou depois de um retorno de parágrafo forçado. Essas configurações permitem exibir mais ou menos espaço em branco entre um conjunto de parágrafos em um único quadro de texto.
Não se esqueça de testar todas essas configurações no painel Texto para saber como controlar a exibição de conteúdo de texto nas páginas que criar.
Inserir texto de um arquivo de texto em uma página
Os arquivos de fontes contendo a cópia do corpo deste projeto de amostra estão localizados na pasta Kevins_Koffee_Kart. O texto é salvo como arquivos TXT. No Adobe Muse, você pode inserir um arquivo de texto inteiro para adicionar tipo à página. Não é necessário abrir arquivos de texto em um editor de texto e copiar as linhas do texto para colá-las nas páginas.
-
Escolha Arquivo > Inserir ou use o comando do teclado Posicionar: Command+D (Mac) ou Control+D (Windows®) para iniciar a operação de posicionamento. É o mesmo processo que será usado ao inserir arquivos de imagem em uma página.
-
Na caixa de diálogo Importar, navegue até a pasta Kevins_Koffee_Kart e selecione o arquivo de texto nomeado TextThreeSpeed.txt.
-
Clique no contêiner maior cinza claro no widget sanfonado, abaixo do cabeçalho TASTING NOTES, para inserir o conteúdo do arquivo de texto no painel superior do widget sanfonado.
-
Depois de inserir o novo quadro de texto, use a ferramenta Seleção para reposicioná-lo abaixo do cabeçalho TASTING NOTES, e arraste as alças na parte superior, inferior e nas laterais para expandir o contêiner cinza claro, conforme necessário, para que tanto o cabeçalho quanto o texto abaixo se ajustem. Ao clicar e arrastar o texto que acabou de inserir, você pode informar quando ele é alinhado à esquerda do texto do cabeçalho, porque uma guia azul aparece temporariamente quando os dois itens são alinhados. Observe que, além de arrastar as alças para redimensionar o texto inserido, você pode clicar no contêiner cinza e arrastar as alças inferiores para expandir a altura do contêiner.
-
Quando o contêiner cinza claro for selecionado, clique no seletor de cores de Preenchimento e defina a cor do fundo do painel como Sem preenchimento.
Adicione texto à guia cinza superior e ao contêiner correspondente maior para preenchê-lo com o conteúdo.
Trabalhar com texto sincronizado
Para obter informações sobre como trabalhar com Texto Sincronizado, consulte Trabalho com Texto Sincronizado.
Trabalhar com texto no layout responsivo
Para saber como formatar o texto no layout responsivo, consulte Formatar texto no layout responsivo.
Fazer logon em sua conta