Criação de DIV relativamente posicionada no Adobe CS5 Dreamweaver - dummies

Adobe Creative Suite 5 (Adobe CS5) O Dreamweaver suporta a criação e edição de DIVs que utilizam posicionamento relativo . Os DIVs relativamente posicionados permitem que um elemento seja deslocado juntamente com o conteúdo que o rodeia, tornando o layout mais líquido. Esse tipo de posicionamento é importante para o conteúdo aninhado ou qualquer situação em que os itens se enquadram em outros conteúdos da página.

Use a ferramenta Inserir etiqueta de div, que pode ser encontrada nas categorias comum e layout do painel Inserção para criação ou edição de um DIV relativamente posicionado.

1. Clique dentro da sua página para posicionar o cursor dentro de uma Div de AP existente e, em seguida, clique na ferramenta Inserir etiqueta de classificação nas categorias Common e Layout do painel Inserir.

2. Quando aparece a caixa de diálogo Inserir etiqueta de div, ajuste a localização do seu novo DIV selecionando um local no menu suspenso Inserir.

   Por exemplo, escolha After Start of Tag para colocá-lo dentro de uma tag DIV existente em sua página.

   Você também pode usar a lista suspensa Inserir tabela de diálogo da etiqueta Div para colocar o DIV antes, depois ou dentro de elementos existentes na página. Deixe a lista suspensa Inserir definida como At Insertion Point para sair da caixa onde você desenhou ou escolha outro local onde deseja que o DIV seja criado.

   

   Escolha um local específico para criar e colocar o novo DIV.

1. Se você possui um seletor de classe existente que deseja aplicar, escolha-o na lista suspensa Classe. Caso contrário, deixe em branco.

2. Atribua um seletor ID ao DIV para controlar sua aparência, selecionando a partir da lista suspensa ID.

   Se um não estiver disponível, insira um novo nome e clique no botão Nova regra CSS para criar um.

3. Quando a caixa de diálogo Nova regra CSS aparecer, certifique-se de que seu novo seletor esteja configurado como ID e que o nome tenha um sinal de libra (#) na frente dele. Clique OK.

4. Quando a caixa de diálogo Definição de regras do CSS aparecer, clique e selecione Posicionamento na lista de categorias à esquerda para visualizar as propriedades de posicionamento CSS.

5. Na área Posicionamento, selecione Relativo no menu Posição, insira um valor de largura e altura nas caixas de texto Largura e Altura, e então clique em OK.

6. Clique em OK para fechar a caixa de diálogo Inserir etiqueta de div.

   Um DIV novo e relativamente posicionado aparece com o texto do espaço reservado.

   

   Você pode criar um novo DIV dentro de outro DIV.