Como usar opções de layout no Painel de 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 align e tags posição de criar layouts de várias colunas.

image0.jpg

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 suas dimensões especificadas, como uma tag. opções de tamanho são pixel (px), pontos (pt), pica (pc), porcentagem (%), em, rem, ex, e ch.

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

  • Min e Max Largura: Especificar as 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 de design 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: Definir a quantidade de espaço em torno de um elemento. As margens podem ser usadas para criar um espaço entre a borda de um elemento e outros elementos da página, como entre uma imagem e um texto ou entre duas marcas. Você pode definir a margem separadamente para o topo, direita e 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 padding para criar espaço entre as fronteiras de um tag e seu conteúdo. Você pode definir o preenchimento separadamente para o topo, direita e 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 Propriedades, altera a maneira como os elementos são posicionados em uma página. O posicionamento pode mudar dramaticamente o modo como elementos de bloco (como 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 é selecionada, cada elemento herda o posicionamento de seu elemento pai.

  • Estático: Colocar o conteúdo na sua localização no interior 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 browser. 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.

    image1.jpg
  • Flutuador: Alinhar elementos, como imagens e tags, para a esquerda ou para a direita de uma página ou outro texto causando a 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: Impedir que o conteúdo flutuante da sobreposição de uma área 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, se sobrepõe outro elemento em nível de bloco, como uma tag usada para criar o rodapé de uma página.

  • Overflow-x e -y: Diga 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, tal como uma imagem ou texto, visível, mesmo que ele se expande para além da altura definida ou 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 inline 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 estã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 é apresentado.

  • Colapso: Para uso com tabelas HTML. Recolher 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 se sobrepõem elementos numerados mais baixos.

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

  • menu