AP Divs Criação no Adobe CS5 Dreamweaver - dummies

Adobe Creative Suite 5 (Adobe CS5) O Dreamweaver usa recipientes virtuais posicionados em CSS ou caixas, criados pela etiqueta DIV para posicionar o 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. 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 colocar conteúdo geralmente requer duas etapas: criando a etiqueta DIV e criando seu estilo correspondente. A ferramenta Divisão de AP permite desenhar caixas livremente na página e colocar conteúdo dentro.

AP Div é pequeno para DIV de posição absoluta; um item com uma posição absoluta é fixado em um local específico na página. Quando você desenha uma AP Div, sua posição geralmente é definida usando as propriedades CSS superiores e esquerdas, com o canto superior esquerdo da página como seu ponto de referência.

CSS trata cada elemento em uma página como uma caixa que contenha conteúdo; conhecido como o modelo CSS Box. Embora o CSS considere que uma caixa é mais um elemento que contém em uma página (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 outras 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 regras CSS.

1. No painel Inserir, selecione a categoria Layout.

2. Selecione a ferramenta Draw AP Div.

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

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

   

   Clique e arraste a página com a ferramenta Draw AP Div para criar uma caixa.

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

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

6. 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.

7. 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.

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

Quando você desenha uma Div de AP na página, o Dreamweaver insere uma marca para criar a caixa e cria um seletor de 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.

Cada Div de AP que você desenha é listado automaticamente no painel de elementos de AP (escolha Janela → Elementos de AP para exibi-lo. O painel de elementos de AP pode ajudá-lo a selecionar, esconder e mostrar qualquer Divisão de AP na página.

Usar o painel de elementos de AP para selecionar, ocultar e reorganizar Divisões de AP na sua página.