Como alinhar os elementos com flutuadores em Dreamweaver
Designers muitas vezes alinhar uma imagem, uma marca, ou outro elemento à esquerda ou à direita de uma página da Web no Dreamweaver e, em seguida, enrole qualquer texto ou outros conteúdos em torno desse elemento. A imagem é alinhada à direita da coluna de modo que o texto é disposto ao lado do que no lado esquerdo. Nas etapas a seguir, você descobrir como criar estilos como este.
CSS oferece muitas vantagens quando se trata de alinhar elementos como este, mas a maneira como você configurar esses estilos não é tão óbvia como se poderia esperar no início porque você usar a opção float.
Depois de entender que você pode flutuar elementos, tais como imagens, para o lado esquerdo ou direito da página, é muito fácil criar estilos que realizar este objetivo. Neste exercício, você aprenderá a criar dois estilos que são ideais para alinhar as imagens à esquerda e à direita da página, completo com um pouco de margem de apenas onde for necessário.
Os layouts CSS incluídos no Dreamweaver CC já tem estilos flutuador que você pode usar para alinhar elementos à direita e à esquerda. Estes estilos de classe são nomeados .fltlft (Para, você adivinhou, flutuar à esquerda) e .fltrt (Para flutuar à direita).
Para criar dois estilos de classe que você pode usar para alinhar imagens e outros elementos para a esquerda e direita da página, siga estes passos:
Clique no sinal de mais no painel Seletores CSS Designer.
Dependendo do que está na página, um novo nome de estilo ou um campo em branco onde você pode digitar um nome de estilo é adicionado ao painel de seletores.
Clique duas vezes para selecionar o nome que o Dreamweaver adicionado 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 que deseja no campo vazio. Você pode nomear o estilo que quiser, mas certifique-se de entrar em um período antes do nome se você criar um estilo de classe ou de um sinal # para um estilo de ID.
Clique duas vezes o novo nome e editá-lo como desejado.
Embora você pode nomear estes estilos que você prefere, estilos de alinhamento são comumente chamado com o fltrt abreviada e fltlft, que representam o flutuador direito e flutuar esquerda, respectivamente.
Por exemplo, se você criar um estilo para alinhar elementos para a esquerda, você nomeia-o .fltlft.
No painel Propriedades, clique no ícone que define Float para a esquerda.
Use as configurações de margem no painel de propriedades para criar uma margem em torno do elemento flutuado.
É uma boa prática para adicionar espaço de margem para o lado oposto da configuração float. Se você estiver criando um estilo para flutuar uma imagem para a esquerda, adicionar 5 ou 10 pixels de espaço para o campo margem direita. Ao alinhar uma imagem para o lado esquerdo da página, uma margem vai ser criado entre a imagem e qualquer outro elemento que envolve lado da imagem.
Selecione a imagem ou outro elemento que deseja alinhar na página.
Selecione o nome do estilo que criou a partir da classe drop-down no Inspetor de propriedades.
As regras de estilo que você definiu quando criou o estilo são aplicadas automaticamente. Se você selecionou uma imagem em uma página de texto, a imagem se moveria para o lado esquerdo da página e o texto iria envolver em torno dele com uma margem entre a imagem eo texto.
Repita os passos 1-7, uma vez com o flutuador definido para a direita e de 5 a 10 pixels de espaço de margem na área margem esquerda na categoria Box, e novamente com o Float definido para Esquerda e de 5 a 10 pixels de espaço de margem no direito campo de margem na categoria Box.