Como modificar divs absolutos posicionado (ap) em adobe dreamweaver cs6

Video: Introduction to using AP divs in Dreamweaver CS6

Cada Absolute-Posicionado (AP) Div você desenhar no Adobe Dreamweaver CS6 é listado automaticamente no painel Elementos PA (escolha Janela → Elementos PA para exibi-lo). O painel Elementos PA pode ajudá-lo a selecionar, ocultar e mostrar quaisquer Divs PA na página. Este painel é útil quando você tem um monte de Divs PA na página e deseja navegar entre eles com precisão.

Acima de tudo, porque você pode modificar as propriedades para qualquer Div AP de seu estilo ID correspondente, o painel ajuda você a descobrir qual o estilo ID pertence a um AP Div.

O painel Elementos PA muitas vezes é agrupado com o painel Estilos CSS, apenas no caso de você está procurando por ele.

Para modificar uma caixa (AP Div), siga estes passos:

  1. Escolha Janela → Elementos PA para abrir o painel Elementos PA.

    Video: Adobe Dreamweaver CS3 CREATING LAYOUTS WITH ABSOLUTE POSITIONING Creating a Layout with AP Divs

  2. No painel, localizar e seleccionar apDiv1 para destacá-lo na página.

    Video: Dreamweaver CS6 tutorial: Creating a mobile layout | lynda.com

    O inspetor de propriedades exibe seu tamanho e posição, além de outras propriedades.

  3. Usando as caixas de texto no Property inspector, alterar a largura da caixa, introduzindo um número no campo W e mudar a altura da caixa, introduzindo um número no campo H.

  4. Clique na amostra ao lado Bg Cor e escolha uma cor do painel Amostras do pop-up para definir a cor de fundo da caixa.

    Para propriedades adicionais, como borda ou preenchimento, adicioná-los no painel Estilos CSS.

  5. Se o painel Estilos CSS já não estiver visível, abri-lo, escolhendo Janela → Estilos CSS.



  6. Clique duas vezes no # ApDiv1 ID estilo que controla a caixa.

    A caixa de diálogo Definição de regra CSS aparece.

  7. Selecione a categoria de Fronteiras da esquerda para mudar a fronteira.

  8. Na coluna Estilo, use a lista drop-down Top para definir um estilo de borda (como sólido) em todos os quatro lados.

    Utilizar a drop-down list Topo sob a categoria Largura para seleccionar uma espessura da borda (por exemplo, meio) para todos os quatro lados. Use o mais alto Color Picker sob a coluna de cor para atribuir uma cor da borda para todos os quatro lados.

    Para atribuir valores diferentes a qualquer ou a todos os lados para o estilo, largura, ou cor, desmarque a mesma em caixa de seleção de acordo com as respectivas colunas.

  9. Na categoria caixa à esquerda, sob Enchimento, definir o preenchimento para todos os quatro lados da caixa com a espessura desejada (por exemplo, digite 5 px nas caixas de texto).

  10. Clique em OK para sair do painel e aplicar as alterações.

    Você vê como as propriedades CSS você aplicou afetar o apDiv1 caixa na página.

Para ocultar uma caixa mostrado sob o painel de Elementos PA, clique na coluna à esquerda do seu nome (sob o ícone do olho) até um ícone olho fechado aparece. Para fazer a reaparecer caixa, clique no ícone de olho até que a caixa se abre novamente.

Você pode notar caixa, desmarcada por padrão verificar as evitar sobreposições, na parte superior do painel Elementos PA. Porque Divs PA pode facilmente se sobrepõem uns aos outros, a seleção desta caixa de seleção substitui esse comportamento, forçando caixas ao lado uns dos outros e evitar a criação de novas caixas em cima uns dos outros.


Publicações relacionadas