Arraste na régua correspondente.
Last updated on
|
Also Applies to Adobe Dreamweaver
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 avaliar, 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
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.
Criar uma guia horizontal ou vertical
-
-
Posicione a guia na janela Documento e libere o botão do mouse (reposicione a guia arrastando-a novamente).Observação:
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.
Mostrar ou ocultar guias
-
Selecione Exibir > Guias > 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.
Observação:
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.
Exibir e movimentar uma guia para uma posição específica
-
Mantenha o ponteiro do mouse sobre a 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 as duas guias.
Observação:
A unidade de medida é a mesma utilizada nas réguas.
Emular a dobra (área visível) de um navegador da 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 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.
Usar guias com modelos
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.
Usar a grade de layout
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.
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 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.
Observação:Se Mostrar grade não estiver selecionado, a grade não aparecerá no documento e nenhuma alteração ficará visível.
Usar uma imagem de rastreamento
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.
Inserir 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 posição de uma imagem de rastreamento
-
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.
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 Documento (0,0).
Alinhar 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 ao canto superior esquerdo do elemento selecionado.
Fazer logon em sua conta