Como usar opções de layout no painel propriedade css do dreamweaver

Na parte superior do painel Propriedades de CSS Designer lo a encontrar as propriedades CSS comumente usados ​​para criar layouts de páginas. Você usar essas opções para especificar a altura, largura, alinhamento, posicionamento e espaçamento. Essas configurações são ideais para criar layouts de páginas com estilos de classe e ID para fazer coisas como imagens alinhar e marcas posição de criar layouts de várias colunas.

Você pode usar as opções de layout no painel de propriedades CSS para definir esses valores:

  • Largura: Especificar uma largura para qualquer elemento que pode ter as dimensões especificadas, tal como um marcador. opções de tamanho são pixels (px), pontos (pt), pica (pc), porcentagem (%), em, rem, ex, e ch.

  • Altura: Especificar uma altura de qualquer elemento que pode ter as suas dimensões especificadas.

  • Min e Max Largura: Especificar larguras mínimas e máximas para tags e outros elementos de bloco. Estas opções são úteis quando você especificar a largura como uma porcentagem da janela do navegador. Por exemplo, você pode definir a largura projeto em 80 por cento da janela do navegador, e, em seguida, definir uma largura máxima de 1000 px para evitar o seu layout de ficar esticado mais amplo do que 1000 pixels.

  • Min e Max Altura: Especifique alturas mínimas e máximas para tags e outros elementos de bloco.

  • Margem: Defina a quantidade de espaço em torno de um elemento. As margens podem ser usados ​​para criar espaço entre a borda de um elemento e outros elementos da página, como entre uma imagem e texto ou entre duas tags. Você pode definir a margem separadamente para o topo, direita, inferior e esquerda. Estofamento é medida em pixels, pontos, polegadas, centímetros, milímetros, picas, EMS, exs, e percentagens.

  • Preenchimento: Define a quantidade de espaço dentro das fronteiras de um elemento. Por exemplo, você pode usar preenchimento para criar espaço entre as fronteiras de um tag e seu conteúdo. Você pode definir o preenchimento separadamente para o topo, direita, inferior e esquerda. Estofamento é medida em pixels, pontos, polegadas, centímetros, milímetros, picas, EMS, exs, e percentagens.

    Definir preenchimento e espaçamento de margem pode ser complicado. Quando você adiciona margin e padding de um elemento, como uma imagem ou tag, você aumenta o tamanho total desse elemento e a quantidade de espaço que exige no layout.

  • Posição: A opção Posição, disponível a partir da parte inferior da seção Layout do painel de Properties, altera a maneira como os elementos são posicionados em uma página. Posicionamento pode mudar dramaticamente o modo como elementos nível de bloco (como a tabela, lista, cabeçalho, parágrafo, e tags) aparecem em um navegador.

  • Herdar: Você não precisa especificar essa opção padrão. A menos que outra opção é seleccionada, cada elemento herda o posicionamento do seu elemento pai.

  • Estático: Coloque o conteúdo em sua localização dentro do fluxo do documento. Por padrão, todos os elementos HTML que posso ser posicionado são estáticas.

  • Absoluto: Use as coordenadas superior e esquerdo para controlar a posição de um elemento em relação ao canto superior esquerdo da janela de navegador, ou no canto superior esquerdo de um elemento que contém o elemento.

  • Fixo: Posicionar um elemento em relação ao canto superior esquerdo do navegador. O conteúdo de um elemento usando posicionamento fixo permanece constante mesmo se o usuário rola para baixo ou através da página.

  • Relativo: Use uma posição em relação ao ponto em que você inserir o elemento na página ou em relação ao seu recipiente.



  • Flutuador: Alinhar elementos, tais como imagens e tags, para a esquerda ou para a direita de uma página ou outro texto causando embalagem ou outros elementos para envolver em torno dele. Clique nos ícones na área Float para especificar as seguintes quatro opções: Herdar, direita, esquerda, ou nenhum.

  • Claro: Evitar que o conteúdo flutuante a partir de uma área de sobreposição para a esquerda ou para a direita, ou para ambos os lados de um elemento. Esta opção é útil quando um elemento flutuado, como um tag usada para criar uma barra lateral, sobrepõe outro elemento nível de bloco, como uma tag usada para criar o rodapé de uma página.

  • Overflow-x e -y: Dizer ao navegador como exibir o conteúdo de um elemento se o recipiente, como uma tag, não pode ajustar a altura ou a largura inteira do elemento. opções de transbordo são

  • Visível: Mantenha o conteúdo, como uma imagem ou texto, visível, mesmo se ele se expande para além da altura definida ou a largura de um recipiente.

  • Escondido: Cortar o conteúdo se ele excede o tamanho do recipiente. Esta opção não fornece barras de rolagem.

  • Rolagem: Adicionar barras de rolagem para o recipiente, independentemente de seu conteúdo excede o tamanho do elemento.

  • Auto: Fazer barras de rolagem aparecem somente quando o conteúdo de um contentor ultrapassa seus limites.

  • Exibição: Indicar se, ou como, para tornar um elemento em um navegador. Por exemplo, você alterar o posicionamento de uma lista desordenada de horizontal para vertical, escolhendo em linha ou ocultar um elemento, tornando-o invisível, escolhendo Nenhum. Você pode usar a opção Display com uma linguagem de script para alterar a exibição de elementos dinamicamente.

  • Visibilidade: Controlar ou não o navegador exibe um elemento. As opções de visibilidade são

  • Herdar: O elemento tem a visibilidade do elemento em que ele está contido (o padrão).

  • Visível: O elemento é apresentado.

  • Escondido: O elemento não é exibido.

  • Colapso: Para uso com tabelas HTML. Colapso pode ser usado para remover uma coluna ou linha, sem afectar o resto da disposição da tabela.

  • Z-Index: Controlar a posição de um elemento na coordenada Z, que controla a ordem de empilhamento dos elementos em relação uns aos outros. elementos de número maior sobrepor elementos numerados inferiores.

  • Opacidade: Controlar o nível de opacidade para um elemento de 0,0 (totalmente transparente) a 1,0 (totalmente opaco). Por exemplo, se você digitar 0,5 no campo de opacidade, a opacidade de um elemento será reduzido para 50 por cento.


  • Publicações relacionadas