Como criar absoluto posicionado (ap) divs no adobe dreamweaver cs6

Adobe Dreamweaver CS6 utiliza recipientes virtuais controlado por CSS, ou caixas, criado pela tag DIV para posicionar livremente conteúdo de uma página. o DIV tag é uma tag básico usado para criar áreas de 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 tag DIV pode ter um estilo ID único atribuído a ele para controlar sua posição, aparência e tamanho. O processo de colocação de conteúdo muitas vezes requer duas etapas: criar o tag DIV e, em seguida, criar o seu estilo correspondente.

Dreamweaver torna esta tarefa fácil com a ferramenta AP Div, o que lhe permite desenhar caixas livremente na página e colocar o conteúdo dentro.

CSS trata a maioria dos elementos de contêiner em uma página como caixas- Nesta abordagem, referida como a modelo CSS Box, permite que estes elementos de partilhar propriedades uniformes, tais como enchimento, as margens, largura, altura, e as fronteiras.

Embora CSS pode considerar mais qualquer elemento contendo em uma página como uma caixa (tal como uma mesa ou uma lista), tags DIV são mais comumente usados ​​para criar caixas virtuais que você pode usar para posicionar o texto, imagens e até mesmo caixas aninhadas.

Cada caixa pode ter a sua própria largura, altura, posição (através das propriedades superior e esquerda), fronteira, margens, e padding- cada um é definido utilizando as propriedades CSS apropriados.

Para criar AP (Absolute-Posicionado) Divs, siga estes passos:

  1. Criar uma nova página ou abrir uma página existente do seu site.

  2. No painel Inserir, selecione a categoria Layout.

  3. Selecione a ferramenta Desenhar AP Div.

    O cursor aparece como uma cruz quando você movê-lo para trás ao longo da página.

  4. Clique em qualquer lugar da página e arraste para desenhar uma nova AP Div- soltar o botão do mouse.



    Desenhando um novo AP Div no Dreamweaver.

  5. Mova o ponteiro do mouse sobre a borda da caixa até que ele mude para um 4-way da seta clique uma vez e alças aparecem por todos os lados.

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

  7. Para mover a caixa, clique e arraste-a pela aba que fica em sua borda superior esquerda e coloque a caixa onde você quiser na página.

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

  8. Se o painel Estilos CSS não estiver aberto, escolha Janela → Estilos CSS para abrir ele- sob Tudo painel, clique à esquerda da folha de estilo () Para expandi-lo.

    Você vê um novo # apDiv1 style ID que está anexado ao novo AP Div você criou. Para cada novo DIV criados, cessionários Dreamweaver apDiv com um número correspondente, a fim de criação.

    Painel Estilos CSS no Dreamweaver.

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

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

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


Publicações relacionadas