Como criar divs relativamente posicionado em adobe dreamweaver cs6

A precisão e posicionamento-a-pixel da AP (Absolute-Posicionado) Divs em Adobe Dreamweaver CS6 pode ser muito libertador para designers, especialmente aqueles que gostam da flexibilidade de layouts baseados em impressão.

Video: Adobe Dreamweaver CS6 - Website (Parte 4 - Inserindo div container)

No entanto, em certas ocasiões, você pode querer caixas a fluir em linha com outros conteúdos na página. AP Divs flutuar acima de outros elementos, de modo deslocando outro conteúdo da página não tem efeito sobre a sua posição, o que pode ser uma boa ou uma coisa má.

Para o comportamento em linha mais tradicional, você pode criar DIVs que usam posicionamento relativo. Isso permite que um elemento a ser deslocado, juntamente com o conteúdo que o rodeia, para fazer uma disposição mais líquido. Este tipo de posicionamento é importante para o conteúdo aninhado ou qualquer situação onde os itens devem cair em linha com outro conteúdo da página.

Video: Div Tag Kullanımı Dreamweaver CS6(Kodsuz)

Para esta tarefa, use a ferramenta Tag Inserir Div, que você pode encontrar dentro de categorias comuns e layout do painel Inserir.

Siga estes passos para criar um DIV relativamente posicionado:

1. Clique dentro de sua página para posicionar o cursor dentro de um AP Div existente e, em seguida, clique na ferramenta Tag Inserir Div sob categorias comuns e layout do painel Inserir.

   Video: Adobe Dreamweaver CS6 - Website (Parte 8 - posicionando logotipo com padding)

2. Quando a caixa de diálogo Inserir Tag Div aparece, afinar a localização do seu novo DIV seleccionando uma localização a partir da lista drop-down Inserir.

   Video: Dreamweaver CS6 Tutorial: Div tags and CSS rules

   Por exemplo, escolha após o início do Tag para colocá-lo dentro de uma tag DIV existente em sua página.

   Você também pode usar a lista drop-down da caixa de diálogo Inserir Tag Div de colocar o DIV antes, depois, ou no interior os elementos existentes na página. Deixe a lista drop-down Inserir definido para no ponto de inserção para deixar a caixa onde você desenhou-lo ou escolher um outro local onde deseja que o DIV criado.

   
   
   
   

   

3. Se você tem um seletor de classe existente que deseja aplicar, selecione-o na classe drop-down-list caso contrário, deixe em branco.

4. Se um ID existente não está disponível, digite um novo nome no campo ID e clique no botão Nova regra CSS para criar uma.

5. Quando a caixa de diálogo Nova regra CSS aparece, certifique-se de que o seu novo seletor está definido para ID e que o nome tem um sinal de sustenido (#) na frente dele. Clique em OK.

6. Quando a caixa de diálogo Definição de regra CSS aparece, clique e selecione Posicionamento da lista Categoria à esquerda para visualizar as propriedades de posicionamento CSS.

7. Na área de Posicionamento, selecione Relativa a partir do menu Posição, introduza um valor de largura e altura em caixas Largura e Altura do texto, e digite um Top e valor Esquerda sob as propriedades de posicionamento. Clique em OK.

8. Clique em OK para fechar a caixa de diálogo Inserir Tag Div.

   A, DIV relativamente posicionado nova aparece com o texto do espaço reservado.

   

Os valores superior e esquerda se comportam de forma ligeiramente diferente para absoluta contra DIVs relativamente posicionado. No caso de posicionamento relativo, estes valores indicam um desvio do conteúdo circundante, em oposição a uma posição definida dentro da página.