Lar Mídia social Como usar o painel de texto no painel de propriedades CSS do Dreamweaver - manequins

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

Índice:

Vídeo: Curso Essencial Adobe Dreamweaver CC 2017 - Aula 13 Painel Propriedades 2025

Vídeo: Curso Essencial Adobe Dreamweaver CC 2017 - Aula 13 Painel Propriedades 2025
Anonim

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.

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

Escolha dos editores

Como criar um módulo HTML personalizado no Joomla - dummies

Como criar um módulo HTML personalizado no Joomla - dummies

Uma das grandes coisas sobre o Joomla é o quão incrivelmente flexível é. A instalação padrão do CMS inclui 23 módulos diferentes para ajudá-lo a fazer seu site funcionar sem problemas. Às vezes, no entanto, você pode querer adicionar uma função ao seu site que esses 23 módulos simplesmente não vão cobrir. Sob tais circunstâncias, você pode querer considerar ...

Como criar um item de menu no Joomla Content Management - manequins

Como criar um item de menu no Joomla Content Management - manequins

Um item de menu determina o layout dos artigos, que é um dos aspectos do Joomla para o qual você precisa se acostumar. As páginas da Web não existem fisicamente no Joomla - elas são apenas itens no seu banco de dados - até que a página seja acessada. Quando você abre um artigo, o Joomla tira os dados necessários do ...

Como criar um novo item de menu com o Joomla! 1. 6 - dummies

Como criar um novo item de menu com o Joomla! 1. 6 - dummies

Não estresse se você precisa criar um item de menu em sua página da Web interativa - é fácil ao usar o Joomla! Gerenciador de menu. Para adicionar itens de menu a um site existente, basta usar estas etapas: Escolha Menus → Gerenciador de menus para abrir o Gerenciador de menus. Clique no nome do menu que deseja adicionar um novo ...

Escolha dos editores

Obtendo Ajuda do Eclipse - dummies

Obtendo Ajuda do Eclipse - dummies

Com a complexidade do Java e a nuance do Eclipse, você não pode esperar para lembrar de tudo. Às vezes, você precisa de um pouco mais de ajuda do Eclipse para começar sua programação. Felizmente, o Eclipse oferece ajuda geral e sensível ao contexto: para ajuda sensível ao contexto: no Windows, pressione F1. No Linux, pressione Ctrl + F1. Em um Mac, pressione ...

Software gratuito: preenchimento automático de células no OpenOffice. org Calc - dummies

Software gratuito: preenchimento automático de células no OpenOffice. org Calc - dummies

OpenOffice. org - uma alternativa gratuita para o Microsoft Office - inclui Calc, uma planilha eletrônica semelhante ao Excel. O Calc fornece uma maneira fácil de criar automaticamente uma coluna ou linha de números em qualquer sequência que você especificar. Esse recurso de preenchimento automático é útil para criar listas numeradas ou preencher os cabeçalhos de colunas e linhas de tabelas, como ...

Acessos acessíveis no modo de exibição do Prezi - dummies

Acessos acessíveis no modo de exibição do Prezi - dummies

O prezi possui dois modos de operação diferentes: Modo de edição, no qual você crie sua apresentação e Show Mode, no qual você apresenta suas criações. No modo Show, use esses atalhos úteis para tornar sua apresentação ainda mais suave. Use esta como uma lista de verificação de prática antes de começar: Use esta função: Para fazer isso: Completo ...

Escolha dos editores

Elementos HTML básicos - dummies

Elementos HTML básicos - dummies

HyperText Markup Language (HTML) é o idioma da web, onde os elementos ditaram a formatação e o estilo do seu conteúdo. Os elementos HTML compõem a codificação baixada que você vê quando você acessa uma página da Web em seu navegador da Web (como Internet Explorer, Firefox ou Safari). Aqui estão alguns elementos básicos para você ...

Usando AutoCAD DesignCenter - dummies

Usando AutoCAD DesignCenter - dummies

DesignCenter é um nome tolo para uma paleta útil, se um pouco ocupada. A paleta DesignCenter é útil para dados de mineração de todos os tipos de desenhos. Enquanto a paleta Propriedades está preocupada com as propriedades do objeto, a paleta DesignCenter lida principalmente com objetos nomeados: camadas, tipos de linha, definições de bloco (isto é, símbolo), estilos de texto e outros objetos organizacionais ...

Zoom e Panning no AutoCAD - dummies

Zoom e Panning no AutoCAD - dummies

O AutoCAD facilita a panorâmica, oferecendo barras de rolagem e panning em tempo real. Na panorâmica em tempo real (em oposição à panorâmica de finalização), você pode ver objetos movendo-se na tela enquanto você arrasta o mouse para cima e para baixo ou para frente e para trás. Claro, o ponto de vista está em movimento, não os objetos. Tanto a panorâmica quanto o zoom mudam a visualização ...