Giovani Generali Sexta-feira, 13 de dezembro de 2002

Dreamweaver MX: Layout View

Olá pessoal !

Neste artigo, iremos falar sobre a visualização de layout (Layout View) do Dreamweaver MX e estaremos vendo algumas configurações necessárias para um aproveitamento melhor dessa ferramenta.

Vamos lá !

• Definição

Um método comum de criar o layout de página consiste na utilização de tabelas HTML. No entanto, as tabelas podem ser de difícil utilização.Para simplificar o processo de utilização de tabelas para o layout de página, o Dreamweaver conta com a visualização de layout (Layout View).

É possível desenhar células (células de tabela) na página com facilidade e, em seguida movê-las para onde desejar. O layout pode ter uma largura fixa ou se expandir, até ocupar toda a janela do navegador.

Para utilizar a visualização de layout, vá no painel "Insert" e clique e layout. Veja figura:

- ícone de Desenhar a tabela de layout (Draw Layout Tablel)

- ícone de Desenhar a célula de layout (Draw Layout Cell)

• Células e tabelas de layout

Para desenhar uma célula de layout:

1- Clique no botão Draw Layout Cell, o ponteiro do mouse se transformará em um sinal de adição (+).

2- Posicione o ponteiro do mouse onde deseja começar a célula na página e, em seguida, arraste-o para criar a célula de layout.

A célula será contornada em azul na página que é a cor de contorno padrão das células de layout. O tamanho de cada célula é exibido na área do cabeçalho da coluna, no alto da célula.

Obs.: Para criar algumas células sem ter que clicar no botão Draw Layout Cell, mantenha pressionada a tecla "Control".

Para desenhar uma tabela de layout:

1- Clique no botão Draw Layout Table, o ponteiro do mouse se transformará em um sinal de adição (+).

2- Posicione o ponteiro do mouse na página e, em seguida, clique e arraste o mouse, para criar a tabela.

Se esta for a primeira tabela que estiver desenhando na página, ela será automaticamente posicionada no canto superior esquerdo da página.

Obs.: Para criar algumas tabelas sem ter que clicar no botão Draw Layout Table, mantenha pressionada a tecla "Control".

3- É possível criar tabelas de layout em áreas vazias do layout da página, em uma tabela de layout já existente (aninhamento) ou ao redor de células e tabelas de layout já existentes.

ps. Se a página já apresentar algum conteúdo, só será possível desenhar a tabela de layout abaixo da parte inferior.

• Como mover e redimensionar as células e tabelas de layout

Todas as células e tabelas no layout podem ser movidas e redimensionadas, o que facilita o ajuste do layout da página.

Para redimensionar uma célula:

1- Clique na extremidade da célula ou, mantendo pressionada a tecla Control, clique em qualquer ponto da célula. Aparecerão alças de seleção ao redor da célula.

2- Utilize as alças de seleção para aumentar a célula até o tamanho desejado. A célula se encaixará automaticamente às células existentes.

Uma célula de layout não pode se sobrepor às outras células e não é possível redimensioná-la fora dos limites da tabela de layout.

Para mover uma célula:

1- Clique na extremidade da célula.

2- Arraste a célula até onde desejar na página ou utilize as teclas de seta. A tecla de seta moverá a tabela um pixel por vez. Se a tecla Shift for mantida pressionada, a tabela será movida 10 pixels por vez.

Para redimensionar uma tabela:

1- Clique na guia da tabela, aparecerão alças de seleção ao redor da tabela de layout.

2- Utilize as alças de seleção para arrastar a tabela até o tamanho desejado, ela se encaixará automaticamente às células e tabelas existentes.

A tabela de layout não pode ser redimensionada a um tamanho menor do que o limite das células nela compreendidas, ela também não pode ser redimensionada de maneira a se sobrepor à tabelas e células vizinhas.

Para mover uma tabela:

1- Clique na guia da tabela.

2- Arraste a tabela até onde desejar na página ou utilize as teclas de seta, ela moverá a tabela um pixel por vez.

Se a tecla Shift for mantida pressionada, a tabela será movida 10 pixels por vez.

• Como formatar as células e tabelas de layout

A aparência de qualquer célula ou tabela de layout pode ser alterada no inspetor de propriedades.

Como formatar uma célula de layout

É possível definir o alinhamento, a largura, altura e as cores de fundo do conteúdo no inspetor de propriedades.

1- Clique na extremidade da célula ou, mantendo pressionada a tecla Control, clique em qualquer ponto da célula.

2- Agora abra o "Inspetor de Propriedades".

3- Escolha uma das seguintes opções de aparência:

• Para alterar a largura, escolha Fixed (Fixa) e digite uma largura na caixa em pixels, ou escolha Autostretch (Alongamento automático).

• Para alterar a altura, especifique a altura (px) na caixa de texto.

• Para definir a cor de fundo da célula de layout, escolha a cor no seletor de cores, ou digite o código hexadecimal correspondente à cor que deseja na caixa de texto.

• Para definir o alinhamento horizontal e vertical, selecione os menus pop-up

• Selecione "No Wrap" (sem quebra), para impedir a quebra automática de linhas. Se você selecionar a célula de layout se alargará para acomodar todo o conteúdo, sem quebrar para uma nova linha.

Como formatar as tabelas de layout

É possível definir a largura e altura, o preenchimento e o espaçamento, entre outros, no inspetor de propriedades.

1- Clique na guia ou extremidade da tabela.

2- Agora abra o "Inspetor de Propriedades".

3- Escolha uma das seguintes opções de aparência:

• Para alterar a largura, escolha Fixed (Fixa) e digite uma largura na caixa, em pixels, ou escolha Autostretch (Alongamento automático).

• Para alterar a altura, especifique a altura no campo de texto, em pixels.

• Para definir o preenchimento da célula, especifique o número de pixels no campo "CellPad" (preenchimento da célula). Ele especifica o espaço entre o conteúdo da célula de layout e os seus limites (ou parede).

Quando o espaçamento for definido acima de 0, todas as células de layout na tabela selecionada terão este espaçamento.

• Para definir o espaçamento da célula , especifique o número de pixels no campo de texto "CellSpace" Espaçamento da célula. Ele especifica o espaço entre cada célula de layout.

Quando o espaçamento for definido acima de 0, todas as células de layout na tabela selecionada terão este espaçamento.

• Para limpar as definições de altura de todas as células na tabela de layout selecionada, clique no botão (Limpar a altura). Se não houver elementos na tabela, esta será completamente fechada.

• Se o layout apresentar células de largura fixa, clique no botão (tornar consistentes as larguras). Este recurso redefine automaticamente as larguras HTML das células, tornando-as coincidentes com o seu respectivo conteúdo.

Por exemplo: se tiver definido a largura como 200 pixels e, subseqüentemente, tiver adicionado conteúdo com largura superior a 250, serão exibidos os dois números seguintes na barra superior tabela: 250 entre aspas e 200 entre parênteses. Ao clicar na opção Tornar consistentes as larguras, a definição de 200 pixels será removida e a de 250 será mantida.

• Para remover as imagens espaçadoras (imagens transparentes que são utilizadas para controlar o espaçamento no layout) da tabela de layout, clique no botão (remover todas as imagens espaçadoras).

• Se a tabela de layout selecionada estiver dentro de outra tabela, clique em Remover o aninhamento, para remover a tabela de layout aninhada sem perder o seu conteúdo. A tabela de layout desaparecerá e as células de layout e seus conteúdos passarão a integrar a tabela-mãe.

• Como definir a largura do layout

Existem dois tipos de larguras que podem ser utilizadas na visualização de layout: Largura fixa e Alongamento automático.

A largura fixa é uma largura numérica específica (como 300 pixels) e é exibida como um número. O alongamento automático redimensiona a largura automaticamente, dependendo do tamanho da janela, e é exibido como uma linha ondulada.

Com o alongamento automático o layout ocupará a janela do navegador, independente do tamanho de janela que o usuário tiver definido.

Para definir o alongamento automático:

Clique no alto da coluna que deseja definir o alongamento automático e selecione "Make Column Autostretch".

Quando você definir uma coluna como tendo alongamento automático, o Dreamweaver inseri imagens espaçadoras nas colunas de largura fixa, para controlar o layout.

Uma imagen espaçadora é uma imagem transparente que não é
visível na janela do navegador, mas é utilizada para controlar o espaçamento.

Para definir a largura fixa:

Clique no alto da coluna que você irá definir a largura fixa e selecione "Make Column Fixed Width".

O recurso Tornar fixa a largura da coluna define automaticamente a largura da coluna, para que coincida com o seu respectivo conteúdo.

Se você inserir um valor numérico menor do que a largura do conteúdo, o Dreamweaver definirá automaticamente o número correto de pixels da largura.

Às vezes, dois números aparecerão no menu Cabeçalho da coluna: a largura real da coluna e a largura que aparece no código HTML. Isto pode acontecer por diversas razões, como a inserção de conteúdo mais largo do que a largura desenhada ou especificada.

É recomendável tornar consistentes as larguras, para que somente um número apareça. Veja como:

Cilque no topo da coluna, selecione "Make Cell Widths Consistent".

• Como utilizar imagens espaçadoras

As imagens espaçadoras são imagens transparentes que não são visíveis na janela do navegador, mas que são utilizadas para controlar o espaçamento em tabelas de alongamento automático.

A imagen espaçadora mantém a largura que você tiver definido para cada tabela e célula na página. Se preferir não utilizar as imagens
espaçadoras em tabelas de alongamento automático, o tamanho das colunas será modificado ou desaparecerão, se não tiver algum conteúdo.

É possível inserir e remover as imagens espaçadoras de cada coluna ou permitir que o Dreamweaver adicione-as automaticamente, quando criar uma coluna de alongamento automático.

As colunas que contêm imagens espaçadoras possuem uma barra dupla no alto.

Quando você inserir uma imagem espaçadora em uma coluna ou definir o alongamento automático da coluna, aparecerá uma caixa de diálogo, que irá perguntar como você deseja configurar o arquivo da imagem espaçadora.

Para definir a imagem espaçadora:

1- Defina uma coluna como "Autostretch" (alongamento automático).

2- Na caixa de diálogo que aparecer, escolha uma dasdentre as seguintes opções:

• "Create a spacer image file" (Criar o arquivo da imagem espaçadora):

Se selecionar esta opção e clicar em OK, aparecerá outra caixa de diálogo, que permite navegar até o diretório do site onde deseja armazenar o arquivo da imagem espaçadora. Esta é a opção recomendada.

• "Use an existing spacer image file" (Usar um arquivo existente de imagem espaçadora):

Se já tiver criado um arquivo da imagem espaçadora para o site, escolha esta opção e depois navegue até a imagem espaçadora, na próxima caixa de diálogo que aparecer. A imagem espaçadora deverá ser um GIF transparente de 1 pixel por 1 pixel.

• "Don´t use spacer images for autostretch tables (Desative as imagens espaçadoras para as colunas de alongamento automático):

Se selecionar esta opção, aparecerá uma caixa de diálogo avisando-o de que outras colunas do layout poderão ser reduzidas para uma largura menor. Se escolher não usar imagens espaçadoras, as larguras das colunas terão o mesmo tamanho que o conteúdo destas. As colunas sem conteúdo se reduzirão a nada.

É possível inserir e remover as imagens espaçadoras em colunas específicas ou remover todas as imagens espaçadoras da página.

Para inserir uma imagem espaçadora numa coluna:

Selecione "Add Spacer Image" no menu da coluna. A imagem espaçadora será inserida na coluna e você não irá ver a imagem, mas a coluna poderá se deslocar um pouco uma barra dupla aparecerá no alto.

Para remover uma imagem espaçadora de uma coluna:

Selecione "Remove Spacer Image", no menu da coluna. A imagem espaçadora será removida e a coluna poderá se deslocar.

Para remover todas as imagens espaçadoras da página:

Selecione "Remove All Spacer Images", no menu da coluna, ou clique no botão "Remover todas as imagens espaçadoras", no inspetor de propriedades da tabela de layout.

O layout completo poderá se deslocar um pouuco ou totalmente, dependendo do conteúdo. Se não houver conteúdo em algumas colunas, estas poderão desaparecer completamente.

Bom pessoal espero que tenham gostado e que esse artigo facilite a criação de suas próximas páginas.

Até a próxima...