Como adicionar e formatar texto no Dreamweaver - dummies

Muitas pessoas ficam agradavelmente surpreendidas com a facilidade com que podem criar uma página web básica com texto e imagens no Dreamweaver. Você pode fazer formatação básica de texto usando as opções de formatação HTML do Dreamweaver, incluindo as tags de título e parágrafo. Comece com estas tags HTML básicas para manter as coisas simples em primeiro lugar.

Como adicionar texto a uma página da Web no Dreamweaver

Para adicionar texto a uma página, você pode simplesmente clicar para inserir o cursor na parte superior de uma página e digitar. Se quiser adicionar texto que você tenha em outro lugar, como em um arquivo criado no Microsoft Word, você pode copiar e colar o texto no Dreamweaver em vez de redigitá-lo.

O Dreamweaver oferece muitas maneiras de manter a formatação quando você copia e cola texto de outro programa. Esse recurso é especialmente importante quando você copia texto do Microsoft Word porque, se você apenas colar o texto como está, corre o risco de incluir um monte de código extra exclusivo do Microsoft Word e pode causar problemas em sua página da Web.

Você pode alterar o padrão de como o Dreamweaver lida com a formatação quando você escolhe Editar → Colar, alterando as Preferências na categoria Copiar / Colar. Você também pode escolher Editar → Colar Especial para exibir essas opções sempre que colar novos conteúdos.

As seguintes são as quatro opções principais para inserir texto quando você escolhe Editar → Colar especial, bem como três maneiras de refinar sua escolha:

• Somente texto: O Dreamweaver tira qualquer formatação e inserção texto simples.

• Texto com Estrutura: O Dreamweaver inclui parágrafos, listas, tabelas e outras opções de formatação estrutural.

• Texto com estrutura Plus Basic Formatting: O Dreamweaver inclui formatação estrutural, bem como formatação básica, como negrito e itálico.

• Texto com estrutura Plus Full Formatting: Além das opções anteriores, o Dreamweaver inclui a formatação criada por folhas de estilo em programas como o Microsoft Word.

• Retenção de Linha: As quebras de linha são preservadas, mesmo que você não mantenha outras opções de formatação. Esta opção não está disponível se você escolher Somente texto.

• Limpar Espelhamento de parágrafo da palavra: Esta opção remove o código de formatação especial exclusivo do Microsoft Word e é desnecessário (e não recomendado) para texto na web.

• Converter cotações inteligentes para cotações diretas: Cotações inteligentes - o nome comum para aquelas citações curly sofisticadas que os designers gostam de usar em documentos impressos - exigem que um caractere especial seja exibido corretamente na web, e esse personagem especial faz não funciona em todos os navegadores da web.Para evitar esse problema potencial, selecione esta caixa e converta todas as suas cotações inteligentes para as diretas.

Como formatar texto com as tags de título no Dreamweaver

Uma das melhores opções de formatação para manchetes é a coleção de tags de título. Em HTML, usar tags de título (

,

e assim por diante) para formatar texto que serve como título ou título oferece muitas vantagens. As tags de título são projetadas para serem exibidas em tamanhos relativos, com

o maior,

menor,

menor ainda, e assim por diante através de

.

Então, não importa o tamanho de texto padrão de uma página da web (e os tamanhos de texto podem variar devido às configurações do navegador e à plataforma do computador), qualquer texto formatado com uma tag

é sempre maior que o texto formatado com

.

A crença popular é que muitos mecanismos de pesquisa dão prioridade às palavras-chave no texto formatado com uma marca

porque o texto mais importante em uma página geralmente é incluído no título maior. Da mesma forma, os especialistas do mecanismo de pesquisa dirão que você deve usar a marca

apenas uma vez por página.

Para formatar texto com uma etiqueta de título, siga estas etapas:

1. Destaque o texto que deseja formatar.

2. No inspetor de propriedades, na parte inferior do espaço de trabalho, verifique se o botão HTML no lado esquerdo do inspetor está selecionado.

3. Use a lista suspensa Formato para selecionar uma opção de título.

   Quando as tags de título são aplicadas, o texto muda automaticamente para tornar-se grande e ousado na visualização Design.

   

   Crédito: Photo by Casey Stoll

Em geral, o inspetor de propriedades é a maneira mais fácil de aplicar a formatação básica, mas você também pode encontrar essas opções de formatação HTML, escolhendo Formato → Formato de parágrafo e, em seguida, selecionando uma opção de título a partir do submenu que aparece.

Como adicionar parágrafos e quebras de linha no Dreamweaver

Quando você cria projetos de página para a web, você deve trabalhar dentro de muitas limitações que podem parecer confusas no início. O design da Web e o design de impressão são fundamentalmente diferentes, e isso pode tornar as tarefas aparentemente simples mais complicadas do que você poderia esperar. A forma como você cria parágrafo e quebras de linha é um bom exemplo.

Se você estiver trabalhando na visão de design no Dreamweaver e pressione a tecla Enter (Windows) ou a tecla Return (Mac), o Dreamweaver insere uma tag de parágrafo ou

, no código, que cria um intervalo de linha seguido por uma linha em branco.

Se desejar uma interrupção de linha sem a linha extra em branco, mantenha pressionada a tecla Shift enquanto pressiona Enter (ou Retornar) para informar o Dreamweaver para inserir a marca

no código, criando uma quebra de linha única.

A melhor prática é evitar o uso de várias palavras de parágrafo ou quebrar para criar espaço extra em uma página da Web (e nem todos os navegadores manterão o espaço em branco se você o criar dessa maneira). Se você deseja adicionar muito espaço entre parágrafos ou outros elementos em uma página, sua melhor opção é usar o CSS.

Se você estiver trabalhando na vista de Código e adicionando espaço usando a tecla Enter ou Return, você adiciona espaço em branco dentro do código. O espaço extra no código HTML pode ser útil porque o espaço extra pode tornar o código mais fácil de ler, mas, em geral, ele não afeta a forma como uma página é exibida na visualização Design ou em um navegador da Web.