Como usar o painel de texto no painel de propriedades CSS do Dreamweaver - manequins

O painel de texto do Dreamweaver possui uma coleção de opções que controlam a exibição do texto em suas páginas. Você pode acessar as opções do painel Texto deslizando pelo painel Propriedade até obter abaixo as opções de Layout, ou clicando no ícone T na parte superior do painel.

O painel Texto inclui as seguintes opções de formatação:

• Cor: Defina a cor do texto. Você pode clicar bem na cor e escolher uma cor, usar o conta-gotas para provar qualquer cor na tela ou inserir um código de cor hexadecimal no campo de cores. Se você inserir um código de cor hexadecimal, inclua o sinal de início da libra (#).

• Font-Family: Definir uma família de fontes ou uma série de famílias. Você pode adicionar fontes do seu disco rígido local ou do Adobe TypeKit escolhendo Gerenciar Fontes na parte inferior da lista suspensa e iniciando a caixa de diálogo Gerenciar Fontes.

  

• Font-Style: Digite Normal, Itálico ou Oblique. No entanto, o itálico e o oblíquo raramente são diferentes em um navegador da web, então fique com itálico, a menos que você tenha uma razão específica para não.

• Font-Variant: Muda o texto para pequenas capas. Teste seus projetos com cuidado porque este atributo não é suportado por todos os navegadores.

• Font-Weight: O texto aparece em negrito selecionando Bold ou Bolder na lista suspensa. Você também pode inserir um número entre 100 e 900 para controlar com mais precisão a corajosa do texto. Para remover a formatação em negrito, escolha Normal ou Mais leve.

• Tamanho da fonte: Defina o tamanho do texto. Você pode escolher um tamanho numérico específico ou um tamanho relativo. As opções de tamanho são pixel (px), ponto (pt), pica (pc), porcentagem (%), em, rem, ex e ch. Pixels, ems e porcentagens são as opções mais utilizadas para tamanhos de texto.

• Altura da linha: Especifique a altura da linha na qual o texto é colocado. Muito parecido com o tamanho do texto, você pode especificar a altura da linha de uma variedade de maneiras, incluindo pixels, ems e porcentagens. É uma boa prática na web adicionar altura da linha, porque aumentar o espaço em torno do seu texto facilita a leitura em uma tela de computador.

• Alinhamento de texto: Alinhe à esquerda, alinhe, centre ou justifique seu texto clicando no ícone correspondente. O primeiro ícone, para Herdar, é o padrão. Por exemplo, você poderia centrar o texto no rodapé da sua página da Web, incluindo o ajuste de texto definido para Centro na definição de um estilo que você aplica para a marca na parte inferior da página.

• Decoração de texto: Especifique se o texto está sublinhado, subitado, exibido com tachado ou exibido com o efeito de piscar.Você também pode escolher Nenhum, que é freqüentemente usado para remover o sublinhado do texto vinculado.

• Text-Indent: Especifique a quantidade que o texto será recuado do lado esquerdo da página, digitando um número em uma das opções de tamanho, como pixels, ems ou porcentagens.

Por que tantas fontes?

Você pode ter ouvido que agora você pode usar qualquer fonte que você deseja em suas páginas da web, graças à versão mais recente do Cascading Style Sheets, CSS3. Esta afirmação é verdadeira, mas com algumas limitações: você deve ter o direito legal de publicar a fonte e a fonte deve ser hospedada em um servidor web.

Para ajudar a garantir que seu texto apareça conforme você pretende, o Dreamweaver inclui coleções das fontes mais comuns em computadores Windows e Macintosh. Essas fontes são agrupadas em famílias, como

• Gotham, Helvetica Nue, Helvetica, Arial, sans serif

• Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, Times e serif

Você pode criar suas próprias coleções de fontes usando a caixa de diálogo Gerenciar Fontes, que é acessível, selecionando a opção Gerenciar Fontes na parte inferior da lista drop-down Font-Family no painel Texto no painel CSS Designer.

A seção Text-Shadow do painel de texto

A seção Text-Shadow do painel Text fornece ferramentas para adicionar sombras de texto, uma das mais recentes propriedades CSS incluídas na definição CSS3. As opções mais populares são as seguintes:

• H-shadow: Adicione uma sombra ao seu texto no eixo horizontal. Primeiro, escolha uma opção de tamanho e, em seguida, insira um número no campo. Por exemplo, insira 2px, para adicionar uma sombra horizontal com 2 pixels de largura.

• V-shadow: Adicione uma sombra ao seu texto no eixo vertical. Primeiro, escolha uma opção de tamanho e, em seguida, insira um número no campo.

• Blur: Controla a quantidade de borrão na sombra. Quanto maior o número, mais a sombra está espalhada ou desfocada.

• Cor: Digite um código de cor hexadecimal para especificar a cor da sombra ou use o conta-gotas para provar qualquer cor na tela.

  

Os recursos na parte inferior do painel de texto, que não são tão comuns quanto as outras opções do painel de texto, são os seguintes:

• Transformação de texto: Mude a caixa do seu texto. As opções são Capitalize, maiúsculas e minúsculas. Clique no ícone correspondente para definir esta propriedade.

• Espaçamento de letras: Define a quantidade de espaço em branco inserido entre as letras. As opções de tamanho são pixel (px), ponto (pt), pica (pc), porcentagem (%), em, rem, ex e ch.

• Espaçamento de palavra: Define a quantidade de espaço em branco inserido entre as palavras. As opções de tamanho são pixel (px), ponto (pt), pica (pc), porcentagem (%), em, rem, ex e ch. (Consulte a barra lateral anterior "Comparando as opções de tamanho CSS".)

• Espaço branco: Diga ao navegador como lidar com quebras de linha e espaços em um bloco de texto. Suas opções são Herdar, Normal, Nowrap, Pre, Pre-line ou Pre-wrap. Nowrap é especialmente útil porque impede que os elementos sejam separados se eles devem se encaixar para caber dentro de uma janela do navegador ou outro recipiente.

• Vertical-Align: Alinhe elementos em linha, como texto e imagens, em relação aos elementos que os cercam. Você pode definir um valor numérico ou escolher Baseline, Sub, Super, Top, Text-Top, Middle, Bottom e Text-Bottom.