Adicionar texto e quadros de texto no Adobe Muse

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.

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:

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.

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.

Nesta seção, você atualizará os atributos de um quadro de texto, para destacá-lo dos gráficos de fundo na página.

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.

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.

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.

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:

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.

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.

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.

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:

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.

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.

Para obter informações sobre como trabalhar com Texto Sincronizado, consulte Trabalho com Texto Sincronizado.

Para saber como formatar o texto no layout responsivo, consulte Formatar texto no layout responsivo.