Como criar Divisões de posição absoluta (AP) no Adobe Dreamweaver CS6 - dummies

O Adobe Dreamweaver CS6 usa recipientes virtuais controlados por CSS ou caixas, criados pela etiqueta DIV para posicionar conteúdo livremente em uma página. A tag DIV é uma etiqueta básica usada para criar áreas para conteúdo em sua página.

Você pode criar tags DIV de vários lugares no Dreamweaver, incluindo a seção Layout do painel Inserir. Cada etiqueta DIV pode ter um estilo de ID exclusivo atribuído a ele para controlar sua posição, aparência e tamanho. O processo de colocação de conteúdo geralmente requer duas etapas: criando a etiqueta DIV e criando o estilo correspondente.

O Dreamweaver facilita esta tarefa com a ferramenta Div Div, que permite que você desenhe caixas livremente na página e coloque conteúdo dentro.

CSS trata a maioria dos elementos de contêiner em uma página como caixas ; Essa abordagem, denominada modelo CSS Box , permite que esses elementos compartilhem propriedades uniformes, como preenchimento, margens, largura, altura e bordas.

Embora o CSS possa considerar a maioria dos elementos contidos em uma página como uma caixa (como uma tabela ou uma lista), as tags DIV são mais comumente usadas para criar caixas virtuais que você pode usar para posicionar texto, imagens e até mesmo aninhadas caixas.

Cada caixa pode ter sua própria largura, altura, posição (através das propriedades superior e esquerda), borda, margens e preenchimento; cada um é configurado usando as propriedades CSS apropriadas.

Para criar divisões AP (Absolute-Positioned), siga estas etapas:

1. Crie uma nova página ou abra uma página existente do seu site.

2. No painel Inserir, selecione a categoria Layout.

3. Selecione a ferramenta Draw AP Div.

   O cursor aparece como um cabelo cruzado quando você o move de volta pela página.

4. Clique em qualquer lugar na página e arraste para desenhar uma nova Div de AP; solte o botão do mouse.

   

5. Mova o ponteiro do mouse sobre a borda da caixa até que ele mude para uma seta de 4 direções; clique uma vez e as manipulações aparecem em todos os lados.

6. Clique e arraste qualquer uma dessas alças para redimensionar a caixa verticalmente ou horizontalmente.

7. Para mover a caixa, clique e arraste-a pela aba que fica na margem superior esquerda e coloque a caixa onde deseja na página.

   Dê uma olhada no inspetor de propriedades, e você vê o nome, bem como muitas propriedades DIV listadas.

8. Se o painel Estilos CSS não estiver aberto, escolha Janela → Estilos CSS para abri-lo; no painel Todo, clique à esquerda da folha de estilos () para expandi-la.

   Você vê um novo estilo de ID # apDiv1 anexado ao novo Divário de AP que você criou. Para cada novo DIV criado, o Dreamweaver atribui o apDiv com um número correspondente em ordem de criação.

   

9. Clique dentro da nova caixa para digitar, colar ou inserir novo conteúdo.

Quando você desenha uma Div de AP na página, duas coisas ocorrem: o Dreamweaver insere uma marca para criar a caixa e cria um seletor de CSS ID que armazena a posição, largura, altura e outras propriedades do DIV.

Depois de criar um AP Div, você pode digitar, colar ou inserir conteúdo diretamente dentro dele. Você também pode atribuir uma regra de classe a qualquer DIV do inspetor de propriedades - na maioria das vezes para manipular a formatação de conteúdo, deixando o seletor ID para controlar posicionamento e dimensões.