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.
As réguas ajudam a avaliar, organizar e planejar o layout. Elas podem aparecer nas bordas esquerda e superior da página, marcadas em pixels, polegadas ou centímetros.
As guias são linhas que você arrasta das réguas para o documento. Elas ajudam a colocar e alinhar os objetos com mais precisão. Você também pode usar guias para medir o tamanho dos elementos de página ou emular as dobras (áreas visíveis) dos navegadores da Web.
Para alinhar os elementos, encaixe-os nas guias e encaixe-as nos elementos. (Os elementos devem ter posição absoluta para que o recurso de encaixe funcione.) Você também pode bloquear as guias para impedir que elas sejam movidas acidentalmente por outro usuário.
Por padrão, as guias são registradas como medições de pixel absolutas no lado superior ou esquerdo do documento, e são exibidas em relação à origem da régua. Para registrar a guia como porcentagem, pressione a tecla Shift enquanto cria ou move a guia.
Quando você redimensiona elementos, como elementos com posição absoluta (elementos PA), tabelas e imagens, os elementos redimensionados se encaixam nas guias.
Selecione Exibir > Opções de visualização de design > Guias > Bloquear guias.
A unidade de medida é a mesma utilizada nas réguas.
Selecione Exibir > Opções de visualização de design > Guias e selecione um tamanho de navegador predefinido no menu.
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 as 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 encaixem nas guias quando você move os 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.
Quando as guias são adicionadas a um modelo do Dreamweaver, todas as instâncias do modelo herdam as guias. No entanto, as guias nas instâncias do modelo são tratadas como regiões editáveis; portanto, os usuários podem modificá-las. As guias modificadas nas instâncias do modelo são restauradas para seu local original sempre que a instância é atualizada com o modelo mestre.
Você também pode adicionar suas próprias guias às instâncias de um modelo. As guias adicionadas desta maneira não são sobregravadas quando a instância do modelo é atualizada com o modelo mestre.
A grade exibe um sistema de linhas horizontal e vertical na janela Documento. Ela é útil para posicionar os objetos com precisão. Você pode fazer com que os elementos de página com posição absoluta se encaixem automaticamente na grade enquanto os move, além de alterar a grade ou controlar o comportamento de encaixe especificando configurações da grade. O encaixe funcionar quer a grade esteja ou não visível.
Selecione Exibir > Opções de visualização de design > Grade > Mostrar grade.
Selecione Exibir > Opções de visualização de design > Grade > Encaixar na grade.
Selecione Exibir > Opções de visualização de design > Grade > Configurações da grade.
Cor
Especifica a cor das linhas da grade. Clique na amostra de cores 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. Digite 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.
Se Mostrar grade não estiver selecionado, a grade não aparecerá no documento e nenhuma alteração ficará visível.
Você pode usar uma imagem de rastreamento como uma guia para recriar um design de página criado em um aplicativo gráfico como o Adobe Freehand ou Fireworks.
Uma imagem de rastreamento é uma imagem JPEG, GIF ou PNG colocada no plano de fundo da janela Documento. Você pode ocultar a imagem, definir sua opacidade e alterar sua posição.
A imagem de rastreamento é visível somente no Dreamweaver. Você não poderá vê-la quando exibir a página em um navegador. Quando a imagem de rastreamento estiver visível, a cor e a imagem de fundo real da página não estarão visíveis na janela Documento. No entanto, elas estarão visíveis quando a página for exibida em um navegador.
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.
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.
Selecione Exibir > Opções de visualização de design > Imagem de rastreamento > Mostrar.
Selecione Exibir > Opções de visualização de design > Imagem de rastreamento > Ajustar posição.
Para especificar precisamente a posição da imagem de rastreamento, digite os valores de coordenada nas caixas de texto X e Y.
Para mover a imagem 1 pixel por vez, use as teclas de seta.
Para mover a imagem 5 pixels por vez, pressione Shift e uma tecla de seta.
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 Documento (0,0).
Selecione Exibir > Opções de visualização de design > Imagem de rastreamento > Alinhar à seleção.
O canto superior esquerdo da imagem de rastreamento é alinhado ao canto superior esquerdo do elemento selecionado.
Fazer logon em sua conta