Arraste na régua correspondente.
Última atualização em
27/04/2021
Use auxílios visuais para layout no Dreamweaver, incluindo a definição de réguas e de guias de layout e o uso de guias com modelos, de uma grade de layout e de uma imagem de rastreamento.
Definir réguas
As réguas ajudam a medir, organizar e planejar o layout.Elas podem aparecer nas bordas esquerda e superior da página, marcadas em pixels, polegadas ou centímetros.
- Para ativar e desativar as réguas, selecione Exibir > Opções de visualização de design > Réguas > Mostrar/ocultar.
- Para alterar a origem, arraste o ícone de origem da régua
(no canto superior esquerdo da Visualização de design da janela Documento) para qualquer lugar da página. - Para redefinir a origem para sua posição padrão, selecione Exibir > Opções de visualização de design > Réguas > Redefinir origem.
- Para alterar a unidade de medida, selecione Exibir > Réguas e selecione Pixels, Polegadas ou Centímetros.
Definir guias de layout
Guides são linhas que você arrasta para o documento a partir das réguas.Eles ajudam a posicionar e alinhar objetos com mais precisão.Você também pode usar os guias para medir o tamanho dos elementos da página ou emular as dobras (áreas visíveis) dos navegadores web.
Para ajudar a alinhar elementos, você pode ajustar elementos aos guias e ajustar guias aos elementos.(Os elementos devem estar posicionados de forma absoluta para que o recurso de ajuste funcione.) Você também pode bloquear guias para evitar que sejam movidos acidentalmente por outro usuário.
Criar um guia horizontal ou vertical
Posicione o guia na janela Documento e solte
o botão do mouse (reposicione o guia arrastando-o novamente).
Nota
Por padrão, os guias são registrados como medidas absolutas em pixels a partir do topo ou lado esquerdo do documento, e são mostrados relativos à origem da régua.Para registrar o guia como porcentagem, pressione a tecla Shift enquanto você cria ou move o guia.
Mostrar ou ocultar guias
Selecione Exibir > Guides > Mostrar guias.
Encaixar elementos nas guias
- Para encaixar elementos nas guias, selecione Exibir > Opções de visualização de design > Guias > Encaixar nas guias.
- Para encaixar guias nos elementos, selecione Exibir > Opções de visualização de design > Guias > Encaixar guias nos elementos.
Nota
Quando você redimensiona elementos, como elementos com posição absoluta (elementos PA), tabelas e imagens, os elementos redimensionados se encaixam nas guias.
Bloquear e desbloquear todas as guias
Selecione Exibir > Opções de visualização de design > Guias > Bloquear guias.
Visualizar e mover um guia para uma posição específica
Mantenha o ponteiro do mouse sobre o guia
para visualizar sua posição.
Clique duas vezes na guia.
Digite a nova posição na caixa de diálogo Mover guia e
clique em OK.
Exibir a distância entre guias
Pressione Control (Windows) ou Command (Macintosh) e mantenha o ponteiro do mouse em qualquer lugar entre os dois Guides.
Nota
A unidade de medida é a mesma da unidade de medida usada para as réguas.
Emular a dobra (área visível) de um navegador web
Selecione Exibir > Opções de visualização de design > Guias e selecione um tamanho de navegador predefinido no menu.
Remover uma guia
Arraste a guia para fora do documento.
Alterar configurações da guia
Selecione Exibir > Opções de visualização de design > Guias > Editar guias, defina as seguintes opções e clique em OK.
Cor da guia
Especifica a cor das linhas da guia. Clique na amostra de cores e selecione uma cor no seletor de cores, ou digite um número hexadecimal na caixa de texto.
Cor da distância
Especifica a cor das linhas que aparecem como indicadores de distância quando você mantém o ponteiro do mouse entre guias.Clique na amostra de cores e selecione uma cor no seletor de cores, ou digite um número hexadecimal na caixa de texto.
Mostrar guias
Torna as guias visíveis na Visualização de design.
Encaixar nas guias
Faz com que os elementos da página se ajustem aos guias conforme você move elementos pela página.
Bloquear guias
Bloqueia as guias no lugar.
Encaixe das guias nos elementos
Encaixa as guias nos elementos na página enquanto elas são arrastadas.
Limpar tudo
Limpa todas as guias da página.
Usar guias com modelos
Quando os guias são adicionados a um modelo do Dreamweaver, todas as instâncias do modelo herdam os guias.Os Guias em instâncias de modelo, no entanto, são tratados como regiões editáveis, para que os usuários possam modificá-los. Os Guias modificados em instâncias de modelo são restaurados para o local original sempre que a instância é atualizada com o modelo principal.
Você também pode adicionar suas próprias guias às instâncias de um modelo. Os Guides adicionados dessa maneira não são substituídos quando a instância de modelo é atualizada com o modelo mestre.
Usar a grade de layout
A grade exibe um sistema de linhas horizontais e verticais na janela do documento.É útil para posicionar objetos com precisão. Você pode fazer com que elementos de página posicionados de forma absoluta se ajustem automaticamente à grade conforme você os move e alterar a grade ou controlar o comportamento de ajuste especificando configurações de grade. O ajuste funciona independentemente de a grade estar visível ou não.
Mostrar ou ocultar a grade
Selecione Exibir > Opções de visualização de design > Grade > Mostrar grade.
Ativar ou desativar o encaixe
Selecione Exibir > Opções de visualização de design > Grade > Encaixar na grade.
Alterar configurações da grade
Selecione Exibir > Opções de visualização de design > Grade > Configurações da grade.
Defina as opções e clique em OK para aplicar as alterações.
Cor
Especifica a cor das linhas da grade. Clique na amostra de cor e selecione uma cor no seletor de cores ou digite um número hexadecimal na caixa de texto.
Mostrar grade
Torna a grade visível na Visualização de design.
Encaixar na grade
Faz com que os elementos da página se encaixem nas linhas da grade.
Espaçamento
Controla a distância entre as linhas de grade. Insira um número e selecione Pixels, Polegadas ou Centímetros no menu.
Exibição
Especifica se as linhas de grade aparecerão como linhas ou pontos.
Nota
Se Mostrar grade não estiver selecionado, a grade não aparece no documento e nenhuma alteração fica visível.
Usar uma imagem de rastreamento
Você pode usar uma imagem de rastreamento como guia para recriar um design de página que foi criado em um aplicativo gráfico como o Adobe Freehand ou Fireworks.
Uma imagem de rastreamento é uma imagem JPEG, GIF ou PNG que é colocada no fundo da janela do documento.Você pode ocultar a imagem, definir a opacidade e alterar a posição.
A imagem de rastreamento fica visível apenas no Dreamweaver; ela não fica visível quando você visualiza a página em um navegador.Quando a Imagem de rastreamento está visível, a imagem do fundo real da página e a cor não ficam visíveis na janela Documento; no entanto, a imagem do fundo e a cor ficam visíveis quando a página é visualizada em um navegador.
Colocar uma Imagem de rastreamento na janela Documento
Siga um destes procedimentos:
Selecione Exibir > Opções de visualização de design > Imagem de rastreamento > Carregar.
Selecione Arquivo > Propriedades da página e, na categoria Imagem de rastreamento, clique em Procurar (ao lado da caixa de texto Imagem de rastreamento).
Navegue até o arquivo de imagem e clique em OK.
Na caixa de diálogo Propriedades da página, especifique a transparência da imagem arrastando o controle deslizante Transparência da imagem e clique em OK.
Para alternar para outra imagem de rastreamento ou alterar a transparência da imagem de rastreamento atual a qualquer momento, selecione Arquivo > Propriedades da página.
Mostrar ou ocultar a imagem de rastreamento
Selecione Exibir > Opções de visualização de design > Imagem de rastreamento > Mostrar.
Alterar a posição de uma Imagem de rastreamento
Selecione Exibir > Opções de visualização de design > Imagem de rastreamento > Ajustar posição.
Para especificar com precisão a posição da imagem de rastreamento, insira valores de coordenadas nas caixas de texto X e Y.
Para mover a imagem um pixel por vez, use as teclas de seta.
Para mover a imagem cinco pixels por vez, pressione Shift e uma tecla de seta.
Redefinir a posição da Imagem de rastreamento
Selecione Exibir > Opções de visualização de design > Imagem de rastreamento > Redefinir posição.
A imagem de rastreamento retorna ao canto superior esquerdo da janela do documento (0,0).
Alinhar a Imagem de rastreamento a um elemento selecionado
Selecione um elemento na janela Documento.
Selecione Exibir > Opções de visualização de design > Imagem de rastreamento > Alinhar à seleção.
O canto superior esquerdo da imagem de rastreamento é alinhado com o canto superior esquerdo do elemento selecionado.
Definir propriedades da imagem de rastreamento
Definir propriedades para uma imagem de rastreamento (que é um arquivo de imagem usado como guia na criação da página).
Siga um destes procedimentos:
- Clique em Arquivo > Propriedades da página.
- Clique em Janela > Propriedades e clique em Propriedades da página no Inspetor de propriedades de texto.
Na caixa de diálogo Propriedades da página, selecione Imagem de rastreamento. Você pode definir as seguintes configuraçoẽs neste painel:
- Imagem de rastreamento: Especifica uma imagem a ser usada como guia para copiar um design. Essa imagem serve apenas como referência e não aparece quando o documento é exibido em um navegador.
- Transparência: Determina a opacidade da imagem de rastreamento, de completamente transparente a completamente opaca.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
