Como Alinhar Elementos com Flutuadores no Dreamweaver - dummies

Os designers geralmente alinham uma imagem, uma etiqueta ou outro elemento à esquerda ou a direita de uma página da Web no Dreamweaver e, em seguida, envolver qualquer texto ou outro conteúdo em torno desse elemento. A imagem está alinhada à direita da coluna para que o texto se envolva ao lado da esquerda. Nas etapas a seguir, você descobre como criar estilos como este.

crédito: Imagem de istockphoto. Com

O CSS oferece muitas vantagens quando se trata de alinhar elementos como este, mas a maneira como você configura esses estilos não é tão óbvia como você pode esperar no início, porque você usa a opção flutuante.

Depois de entender que você pode flutuar elementos, como imagens, no lado esquerdo ou direito de uma página, é muito fácil criar estilos que atinjam esse objetivo. Neste exercício, você aprende a criar dois estilos que são ideais para alinhar imagens à esquerda e à direita de uma página, com uma pequena margem, exatamente onde você precisa.

Os layouts CSS incluídos no Dreamweaver CC já possuem estilos de flutuação que você pode usar para alinhar elementos à direita e à esquerda. Esses estilos de classe são nomeados. Fltlft (para, você adivinhou, flutuou para a esquerda) e. fltrt (para flutuar para a direita).

Para criar dois estilos de classe que você pode usar para alinhar imagens e outros elementos à esquerda e a direita de uma página, siga estas etapas:

1. Clique no sinal de mais no painel CSS Designer Selectors.

   Dependendo do que está na página, um novo nome de estilo ou um campo em branco onde você pode inserir um nome de estilo é adicionado ao painel Seletores.

2. Clique duas vezes para selecionar o nome que o Dreamweaver adicionou ao painel e alterá-lo para o nome que deseja para o seu novo estilo, ou clique para selecionar o campo em branco e digite um nome.

   Se nenhum nome for adicionado, digite o nome desejado no campo vazio. Você pode nomear o estilo qualquer coisa que quiser, mas certifique-se de inserir um período antes do nome se você criar um estilo de classe ou um sinal # para um estilo de ID.

3. Clique duas vezes no novo nome e edite-o conforme desejado.

   Embora você possa nomear esses estilos o que você preferir, os estilos de alinhamento são comumente nomeados com o fltrt e fltlft abreviado, que representam o flutuador direito e flutuam para a esquerda, respectivamente.

   Por exemplo, se você criar um estilo para alinhar elementos à esquerda, você o nomearia. fltlft.

4. No painel Propriedades, clique no ícone que define Flutuador para Esquerda.

   

5. Use as configurações Margem no painel Propriedades para criar uma margem em torno do elemento flutuado.

   É uma boa prática adicionar espaço de margem para o lado oposto da configuração do flutuador. Se você estiver criando um estilo para flutuar uma imagem para a esquerda, adicione 5 ou 10 pixels de espaço ao campo de margem Direita.Quando você alinha uma imagem para o lado esquerdo da página, uma margem será criada entre a imagem e qualquer outro elemento que se encaixe ao lado da imagem.

6. Selecione a imagem ou outro elemento que deseja alinhar na página.

7. Selecione o nome do estilo que você criou no menu suspenso Classe no Inspetor de propriedades.

   As regras de estilo que você definiu quando você criou o estilo são aplicadas automaticamente. Se você tivesse selecionado uma imagem em uma página de texto, a imagem se moveria para o lado esquerdo da página e o texto ficaria envolvendo com uma margem entre a imagem e o texto.

8. Repita as etapas 1-7, uma vez com o flutuador definido para a direita e 5 a 10 pixels do espaço de margem no campo de margem Esquerda na categoria Caixa e novamente com o Flutuador definido para a esquerda e 5 a 10 pixels do espaço de margem no campo Margem direita na categoria Caixa.