6 como projetar um layout de pagina

Como projetar um layout de página

Utilize as ferramentas de projetos visuais do Dreamweaver para criar layouts de página sofisticados.

Esta seção contém os seguintes capítulos:

l Apresentação do conteúdo com tabelas l Definição do layout de páginas na visualização de layout l Utilização de molduras

Apresentação do conteúdo com tabelas

As tabelas são ferramentas poderosas para a apresentação de dados tabulares e para a definição do layout de textos e gráficos em uma página HTML. Uma tabela consiste em uma ou mais linhas, sendo que cada linha é formada por uma ou mais células. Embora normalmente as colunas não sejam especificadas de forma expl ícita no código HTML, o Dreamweaver permite manipulá-las, bem como linhas e células.

Após criar uma tabela, é possível modificar facilmente sua aparência e estrutura. É possível executar qualquer um dos procedimentos abaixo:

l Adicionar conteúdo l Adicionar, excluir, dividir e mesclar linhas e colunas l Modificar propriedades de tabelas, linhas ou células para adicionar cor e alinhamento l Copiar e colar células

Nota: A maioria dos designers utiliza tabelas para definir o layout de páginas da Web. O Dreamweaver fornece dois modos de visualização e manipulação de tabelas: Visualização padrão, na qual as tabelas são apresentadas como grades de linhas e colunas, e Visualização de layout, que permite desenhar, redimensionar e mover as caixas na página enquanto estiver usando tabelas para a estrutura subjacente (consulte o Definição do layout de páginas na visualização de layout).

Este capítulo contém as seções a seguir:

l Como inserir uma tabela l Como adicionar conteúdo a uma célula da tabela l Como importar dados tabulares l Como selecionar elementos da tabela l Formatação de tabelas e células l Como redimensionar tabelas l Como alterar a largura da coluna e a altura da linha l Como adicionar e remover linhas e colunas l Como aninhar tabelas l Como recortar, copiar e colar células

Página 1 de 63Como projetar um layout de página

11/10/2002file://C:\Documents%20and%20Settings\Luis%20Carlos%20Quinhone\Configurações...

l Como ordenar tabelas l Como exportar dados da tabela l Referência

Como inserir uma tabela

Utilize a barra Inserir ou o menu Inserir para criar uma nova tabela. Para obter mais informações sobre como criar tabelas acessíveis no Dreamweaver, veja Autoria da acessibilidade.

Para inserir uma tabela:

1. Na visualização do projeto da janela do documento, colocar o ponto de inserção no local onde deseja que a tabela seja exibida.

Nota: Se o documento não tiver nenhum conteúdo, o único local para colocar o ponto de inserção será o início do documento.

2. Siga um dos procedimentos abaixo: ¡ Clique no botão Tabela na categoria Comuns da barra Inserir. ¡ Selecione Inserir > Tabela.

A caixa de diálogo Inserir tabela é exibida.

3. Digite novos valores conforme desejado.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Inserir tabela .

Como adicionar conteúdo a uma célula da tabela

É possível adicionar textos e imagens às células da tabela do mesmo modo que se adicionam textos e imagens fora de uma tabela.



Para obter mais informações, consulte o Como inserir e formatar texto e Como inserir imagens.

Ao adicionar ou editar o conteúdo de uma tabela, é possível economizar tempo utilizando o teclado para navegar pela tabela.

Para passar de uma célula a outra utilizando o teclado, seguir um dos procedimentos abaixo:

l Pressione a tecla Tab para passar à célula seguinte.

Ao pressionar Tab na última célula de uma tabela, outra linha é adicionada automaticamente à tabela.

l Pressione Shift+Tab para voltar à célula anterior. l Pressione as teclas de seta para mover para cima, para baixo, esquerda ou direita.

Como importar dados tabulares

Os dados tabulares criados com outro aplicativo (como o Microsoft Excel) e salvos em um formato de texto delimitado (com itens separados por tabulações, vírgulas, dois-pontos, ponto-e-vírgula ou outros delimitadores) podem ser importados para o Dreamweaver e formatados como uma tabela.

Para importar os dados da tabela:

1. Siga um dos procedimentos abaixo: ¡ Escolha Arquivo > Importar > Dados tabulares. ¡ Escolha Inserir > Objetos de tabela > Importar os dados tabulares.

A caixa de diálogo Importar os dados tabulares é exibida.

2. Na caixa de diálogo, fornecer as informações sobre o arquivo que contém os dados.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Importar os dados tabulares.

Tópicos relacionados

Como exibir os registros de bancos de dados



Como selecionar elementos da tabela

É possível selecionar uma tabela, uma linha ou uma coluna inteira ao mesmo tempo. Também é possível selecionar um bloco contíguo de células dentro de uma tabela. Após selecionar uma tabela ou células, seguir os procedimentos abaixo:

l Modificar a aparência das células selecionadas ou do texto ali contido. Veja Formatação de tabelas e células.

l Copie e colar as células. Veja Como recortar, copiar e colar células.

Também é possível selecionar várias células não-adjacentes de uma tabela e modificar suas propriedades. É imposs ível copiar ou colar conjuntos de células não-adjacentes.

Para selecionar uma tabela inteira, seguir um dos procedimentos abaixo:

l Clique no canto superior esquerdo da tabela ou em qualquer ponto da extremidade direita ou inferior.

l Clique em uma célula da tabela e, em seguida, selecione a tag table no seletor de tags, no canto inferior esquerdo da janela do documento.

l Clique em uma célula da tabela e selecione Modificar > Tabela > Selecionar a tabela. l Clique em uma célula da tabela e selecione a tag table no inspetor de tags.

Alças de seleção são exibidas nas bordas inferior e direita da tabela selecionada.

Para selecionar linhas ou colunas:

1. Posicionar o ponteiro de forma que aponte para a margem esquerda de uma linha ou para a margem superior de uma coluna.

2. Quando o ponteiro se transformar em uma seta de seleção, clique para selecionar uma linha ou coluna ou arrastar para selecionar várias linhas ou colunas.

Para selecionar uma única célula, seguir um dos procedimentos abaixo:

l Clique na célula e, em seguida, selecione a tag td no seletor de tags, no canto inferior esquerdo da janela do documento.

l Clique na célula e escolher Editar > Selecionar tudo.

Dica: Escolha Editar > Selecionar tudo novamente quando a célula estiver selecionada a fim de selecionar a tabela inteira.



l Clique em uma célula da tabela e selecione a tag td no inspetor de tags.

Para selecionar uma linha ou um bloco retangular de c élulas, seguir um dos procedimentos abaixo:

l Arrastar de uma célula a outra. l Clique em uma célula e pressionar a tecla Shift ao clicar em outra célula.

Todas as células dentro da região linear ou retangular definida pelas duas células são selecionadas.

Para selecionar células não-adjacentes:

Manter a tecla Control pressionada e clique nas células, linhas ou colunas que deseja selecionar.

Se as células, linhas ou colunas nas quais o usuário clicar ainda não estiverem selecionadas, elas serão adicionadas à seleção. Se já tiverem sido selecionadas, serão removidas da seleção.

Formatação de tabelas e células

É possível alterar a aparência das tabelas definindo-se as propriedades da tabela e das células ou aplicando-se um estilo predefinido à tabela. Veja Exibição e definição de propriedades da tabela, Exibição e definição das propriedades de célula, linha e coluna e Como utilizar um esquema de desenho para formatar uma tabela .

Para formatar o texto nas tabelas, é possível aplicar formatação ao texto selecionado ou utilizar estilos. Consulte o Como inserir e formatar texto.

Sobre conflitos na formatação de tabelas

Ao formatar tabelas na visualização do projeto, é possível definir propriedades para toda a tabela ou para linhas, colunas ou c élulas selecionadas da tabela. Quando uma propriedade, como cor de fundo ou alinhamento, é definida com um valor para toda a tabela e outro valor para células individuais, a formatação da célula tem precedência sobre a formatação da linha, que, por sua vez, tem precedência sobre a formação da tabela.

A ordem de precedência para formatação da tabela é esta:



1. Células 2. Linhas 3. Tabela

Por exemplo: se definir a cor de fundo azul para uma única célula e definir a cor de fundo amarelo para toda a tabela, a célula azul não mudará para a cor amarela, uma vez que a formatação das células tem precedência sobre a formatação da tabela.

Nota: Quando se definem propriedades em uma coluna, o Dreamweaver modifica os atributos da tag td correspondente a cada célula da coluna.

Exibição e definição de propriedades da tabela

Quando uma tabela é selecionada, o inspetor de propriedades permite exibir e alterar propriedades da tabela.

Para exibir as propriedades da tabela:

1. Selecione a tabela. 2. Escolha Janela > Propriedades para abrir o inspetor de propriedades.

Para exibir todas as propriedades da tabela:

Se o inspetor de propriedades não estiver expandido, clique na seta de expansão, no canto inferior direito, para ver todas as propriedades.

Para formatar uma tabela no inspetor de propriedades:

1. Selecione uma tabela. Para obter mais informações, veja Como selecionar elementos da tabela.

2. Escolha Janela > Propriedades para abrir o inspetor de propriedades. 3. Alterar a formatação da tabela definindo as propriedades.

Para obter mais informações, veja Definição das propriedades da tabela .


Como utilizar um esquema de desenho para formatar uma tabela



Exibição e definição das propriedades de célula, linha e coluna

Quando uma célula ou um conjunto de c élulas é selecionado, o inspetor de propriedades permite exibir e alterar propriedades da c élula.

Nota: Quando se definem propriedades em uma coluna, o Dreamweaver modifica os atributos da tag td correspondente a cada célula da coluna. Quando se definem certas propriedades para uma linha, no entanto, o Dreamweaver altera os atributos da tag tr em vez de alterar os atributos de cada tag td da linha. Ao aplicar o mesmo formato a todas as células de uma linha, a aplicação do formato à tag tr produz um código HTML mais conciso e limpo.

Para exibir as propriedades dos elementos da tabela:

1. Selecione uma célula ou um conjunto de c élulas em uma linha ou coluna. 2. Escolha Janela > Propriedades para abrir o inspetor de propriedades.

Para exibir todas as propriedades da célula, linha ou coluna:

Se o inspetor de propriedades não estiver expandido, clique na seta de expansão, no canto inferior direito, para ver todas as propriedades.

Para formatar elementos da tabela no inspetor de propriedades:

1. Selecione uma célula, linha ou coluna. Para obter mais informações, veja Como selecionar elementos da tabela .

2. Escolha Janela > Propriedades para abrir o inspetor de propriedades. 3. Alterar a formatação do elemento da tabela definindo as propriedades.

Para obter mais informações, veja Definição das propriedades de célula, linha e coluna.



Como utilizar um esquema de desenho para formatar uma tabela

Utilize o comando Formatar a tabela para aplicar rapidamente um estilo predefinido a uma tabela. Em seguida, as opções podem ser selecionadas para personalizar o estilo ainda mais.

Nota: Somente as tabelas mais simples podem ser formatadas usando estilos predefinidos. É imposs ível utilizar esses estilos para formatar tabelas que contêm células mescladas (colspan ou rowspan), grupos de colunas ou outras formatações pouco comuns que impedem que a tabela seja uma simples grade retangular de células.



Para utilizar um estilo de tabela predefinido:

1. Selecione a tabela e escolha Comandos > Formatar a tabela.

A caixa de diálogo Formatar a tabela é exibida.

2. Personalizar as opções, conforme desejado.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Formatar a tabela.

3. Clique em Aplicar ou em OK para formatar a tabela com o estilo selecionado.

Como redimensionar tabelas

É possível redimensionar uma tabela inteira ou determinadas linhas e colunas da tabela. Quando uma tabela inteira é redimensionada, o tamanho de todas as células da tabela é alterado na mesma proporção.

Nota: Se as células de uma tabela tiverem larguras ou alturas especificadas explicitamente, o redimensionamento da tabela alterará o tamanho visual das c élulas na janela do documento, mas não modificará as larguras e alturas especificadas das células.

Para redimensionar uma tabela:

1. Selecione a tabela. 2. Siga um dos procedimentos abaixo:

¡ Para redimensionar a tabela horizontalmente, arraste a alça de seleção à direita. ¡ Para redimensionar a tabela verticalmente, arraste a alça de seleção da parte

inferior. ¡ Para redimensionar em ambas as dimensões, arraste a alça de seleção no canto

inferior direito.





Como alterar a largura da coluna e a altura da linha

Como alterar a largura da coluna e a altura da linha

É possível alterar a largura de uma coluna ou a altura de uma linha utilizando o inspetor de propriedades ou arrastando as bordas da coluna ou linha. Também é possível alterar a largura e a altura da célula diretamente no código HTML utilizando a visualização do código.

Se houver dificuldade para redimensionar a largura das colunas ou altura das linhas, volte e comece novamente.

Dica: Podem-se especificar larguras e alturas como pixels ou porcentagens e também converter de pixels para porcentagens e vice-versa. Para obter mais informações, veja Exibição e definição de propriedades da tabela.

Para redimensionar uma coluna ou uma linha visualmente, siga um dos procedimentos abaixo:

l Para alterar a largura de uma coluna, selecione a coluna e arrastar sua borda direita.

Se a coluna não for a coluna mais à direita da tabela, a largura da coluna adjacente também mudará, mantendo a mesma largura geral da tabela. Se a coluna for a coluna mais à direita, a largura da tabela como um todo será alterada e todas as colunas aumentarão ou diminuirão na mesma proporção.

l Para alterar a altura de uma linha, selecione a linha e arrastar sua borda inferior.

Para definir a largura de uma coluna ou a altura de uma linha utilizando o inspetor de propriedades:

1. Selecione a coluna ou linha. 2. Escolha Janela > Propriedades para abrir o inspetor de propriedades. 3. Alterar a formatação do elemento da tabela definindo as propriedades.

Para obter mais informações, veja Definição das propriedades de célula, linha e coluna.

Para limpar todas as larguras ou alturas definidas:

1. Selecione a tabela. 2. Siga um dos procedimentos abaixo:

¡ Para remover todas as larguras especificadas, escolha Modificar > Tabela > Limpar as larguras das células ou clique no botão Limpar as larguras das colunas, no inspetor de propriedades.

¡ Para remover todas as alturas especificadas, escolha Modificar > Tabela > Limpar



as alturas das células ou clique no botão Limpar as alturas das linhas, no inspetor de propriedades.



Como redimensionar tabelas

Codificação no Dreamweaver

Como adicionar e remover linhas e colunas

Para adicionar e remover linhas e colunas, utilize os comandos do submenu Modificar > Tabela.

Dica: Ao pressionar Tab na última célula de uma tabela, outra linha é adicionada automaticamente à tabela.

Para adicionar linhas ou colunas:

1. Clique em uma célula. 2. Siga um dos procedimentos abaixo:

¡ Para adicionar uma linha acima da célula atual, escolha Modificar > Tabela > Inserir linha.

¡ Para adicionar uma coluna à esquerda da célula atual, escolha Modificar > Tabela > Inserir coluna.

¡ Para adicionar várias linhas ou colunas de uma vez ou para adicionar uma linha abaixo da célula atual ou uma coluna à direita dela, escolha Modificar > Tabela > Inserir linhas ou colunas.

A caixa de diálogo Inserir linhas ou colunas é exibida.

3. Se a opção Inserir linhas ou colunas for escolhida, insira as informações necessárias na caixa de diálogo e clique em OK.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Inserir linhas ou colunas.

Para excluir uma linha ou coluna:

1. Clique em uma célula dentro da linha ou coluna a ser excluída. 2. Siga um dos procedimentos abaixo:

¡ Para excluir uma linha, escolher Modificar > Tabela > Excluir a linha. ¡ Para excluir uma coluna, escolher Modificar > Tabela > Excluir a coluna.

Dica: Como opção, é possível selecionar uma linha ou coluna completa e escolher Editar > Limpar ou pressionar a tecla Delete para remover toda a linha ou coluna da tabela.



Para adicionar ou excluir linhas ou colunas utilizando o inspetor de propriedades:

1. Selecione a tabela inteira. 2. No inspetor de propriedades, siga um dos procedimentos abaixo:

¡ Aumente ou diminua o valor Linhas para adicionar ou excluir linhas.

O Dreamweaver permite adicionar e remover linhas na parte inferior da tabela.

¡ Aumente ou diminua o valor Cols para adicionar ou excluir colunas.

O Dreamweaver adiciona e remove colunas à direita da tabela.

Nota: O Dreamweaver não avisa quando as linhas ou colunas que contêm dados estão sendo excluídas.



Como inserir uma tabela repetitiva

Como exibir diversos registros

Como dividir e mesclar células

Utilize o inspetor de propriedades ou os comandos do submenu Modificar > Tabela para dividir ou mesclar c élulas. É possível mesclar qualquer número de células adjacentes (contanto que a seleção inteira seja uma linha ou um retângulo de células) para produzir uma única célula abrangendo diversas colunas ou linhas. É possível dividir uma célula em várias linhas ou colunas, independentemente de ela já ter sido mesclada. O Dreamweaver reestrutura automaticamente a tabela (adicionando os atributos COLSPAN ou ROWSPAN necessários) para criar o formato especificado.

Na ilustração a seguir, as células no meio das duas primeiras linhas foram mescladas, de forma a abrangerem duas linhas.

Como método alternativo para mesclar e dividir células, o Dreamweaver também fornece ferramentas para aumentar e diminuir o número de linhas ou colunas estendidas por uma célula.

Para mesclar duas ou mais células de uma tabela:

1. Selecione as células. As células selecionadas devem ser contíguas e ter formato retangular.



Na ilustração a seguir, a seleção é um retângulo de células, por isso elas podem ser mescladas.

Na ilustração a seguir, a seleção não é retangular, por isso as células não podem ser mescladas.

2. Escolha Modificar > Tabela > Mesclar as células ou clique no botão Mesclar as células, no inspetor de propriedades.

O conteúdo das células individuais é colocado na c élula mesclada resultante. As propriedades da primeira célula selecionada são aplicadas à célula mesclada.

Para dividir uma célula:

1. Clique na célula. 2. Escolha Modificar > Tabela > Dividir a c élula ou clique no botão Dividir a célula, no

inspetor de propriedades. 3. Na caixa de diálogo Dividir a célula, especificar o modo como a célula deve ser dividida.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Dividir a célula .

Para aumentar ou diminuir o n úmero de linhas ou colunas estendidas por uma célula:

1. Selecione uma célula. 2. Escolha Modificar > Tabela > Aumentar a extensão da linha ou Modificar > Tabela >

Aumentar a extensão da coluna ou Modificar > Tabela > Diminuir a extensão da linha ou Modificar > Tabela > Diminuir a extensão da coluna.

Como aninhar tabelas

Uma tabela aninhada é uma tabela dentro de uma célula de outra tabela. É possível formatar uma tabela aninhada como qualquer outra tabela; contudo, sua largura está limitada pela largura da célula na qual é exibida.



Para aninhar uma tabela na c élula de uma tabela:

1. Clique em uma célula da tabela existente. 2. Selecione Inserir > Tabela. 3. Na caixa de diálogo Inserir tabela, especifique as propriedades desejadas para a tabela

aninhada e clique em OK.

Como recortar, copiar e colar células

É possível recortar, copiar ou colar uma única célula da tabela ou diversas c élulas de uma só vez. conservando sua formatação.

As células podem ser coladas no ponto de inserção ou no lugar de uma seleção feita em uma tabela existente. Para colar diversas células da tabela, o conteúdo da área de transferência deve ser compatível com a estrutura da tabela ou da seleção da tabela na qual as células serão coladas.

Para recortar ou copiar células da tabela:

1. Selecione uma ou mais células da tabela. As células selecionadas devem ser contíguas e ter formato retangular.

Na ilustração a seguir, a seleção é um retângulo de células, por isso as células podem ser recortadas ou copiadas.

Na ilustração a seguir, a seleção não é um retângulo, por isso as células não podem ser recortadas ou copiadas.



2. Recortar ou copiar as c élulas utilizando Editar > Recortar ou Editar > Copiar.

Se uma linha ou coluna inteira tiver sido selecionada e a opção Editar > Recortar tiver sido escolhida, a linha ou coluna inteira será removida da tabela (não apenas o conteúdo das células).

Para colar as células da tabela:

1. Escolha onde deseja colar as c élulas. ¡ Para substituir as células existentes pelas células que estão sendo coladas,

selecione um conjunto de células existentes com o mesmo layout das células que estão na área de transferência. Por exemplo: se um bloco de células 3 x 2 for copiado ou recortado, é possível selecionar outro bloco de células 3 x 2 para substituir aquele por colagem.

¡ Para colar uma linha inteira de c élulas acima de uma determinada c élula, clique nesta célula.

¡ Para colar uma coluna inteira de células à esquerda de uma determinada célula, clique nesta célula.

¡ Para criar uma nova tabela com as células coladas, colocar o ponto de inserção fora da tabela.

Nota: Se houver menos de uma linha ou coluna inteira de células na área de transferência e o usuário clicar em uma célula e colar as células da área de transferência, a célula clicada e as células vizinhas poderão ser substituídas pelas células que estão sendo coladas (dependendo de sua posição na tabela).

2. Escolha Editar > Colar.

Se forem coladas linhas ou colunas inteiras em uma tabela existente, elas serão adicionadas à tabela. Se estiver colando um célula separada, o conteúdo da célula selecionada será substituído. Se a colagem tiver que ser feita fora de uma tabela, as linhas, colunas ou células serão utilizadas para definir uma nova tabela.

Para remover o conteúdo das células e mantê-las intactas:

1. Selecione uma ou mais células (certifique-se de que a seleção não é formada totalmente por linhas ou colunas completas).

2. Escolha Editar > Limpar ou pressionar a tecla Delete.

Nota: Se forem selecionadas somente linhas ou colunas completas ao escolher Editar > Limpar ou ao pressionar a tecla Delete, as linhas ou colunas inteiras serão removidas da tabela (e não somente seu conteúdo).

Para excluir linhas ou colunas que contêm células mescladas:

1. Selecione a linha ou coluna a ser excluída. 2. Escolha Modificar > Tabela > Excluir a linha ou Modificar > Tabela > Excluir a coluna.

Como ordenar tabelas



É possível ordenar as linhas de uma tabela com base no conteúdo de uma única coluna. Também é possível fazer uma ordenação mais complexa da tabela com base no conteúdo de duas colunas.

É imposs ível ordenar tabelas que contêm os atributos COLSPAN ou ROWSPAN, ou seja, aquelas que comportam células mescladas (para obter mais informações, veja Como dividir e mesclar células).

Para ordenar uma tabela:

1. Selecione a tabela (ou clique em uma célula qualquer). 2. Escolha Comandos > Ordenar a tabela.

A caixa de diálogo Ordenar a tabela é exibida.

3. Na caixa de diálogo Ordenar a tabela, especificar o modo como a tabela deve ser ordenada.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Ordenar a tabela.

Como exportar dados da tabela

É possível exportar dados da tabela do Dreamweaver para um arquivo de texto com o conteúdo das células adjacentes separado por um delimitador. É possível utilizar vírgulas, dois-pontos, ponto-e-vírgulas ou espaços como delimitadores.

Quando uma tabela é exportada, toda ela é exportada; é imposs ível selecionar partes de uma tabela para exportação. Se desejar exportar somente alguns dados de uma tabela (por exemplo: as seis primeiras linhas ou as seis primeiras colunas), copie as c élulas que contêm os dados, cole -as fora da tabela (para criar uma nova tabela) e exporte a nova tabela.

Para exportar uma tabela:

1. Coloque o ponto de inserção em qualquer c élula da tabela. 2. Escolha Arquivo > Exportar > Tabela.

A caixa de diálogo Exportar tabela é exibida.

3. Na caixa de diálogo Exportar tabela, especifique opções para exportar a tabela.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Exportar



tabela.

4. Clique em Exportar. 5. Na caixa de diálogo que for exibida, digite um nome para o arquivo e clique em Salvar.

Referência

Esta seção fornece informações sobre as caixas de diálogo e inspetores apresentados neste capítulo.

Definição das opções da caixa de diálogo Inserir tabela

Esta caixa de diálogo permite especificar os atributos de uma tabela antes de inseri-la.

Para preencher a caixa de diálogo Inserir tabela:

1. Especifique as opções a seguir:

A opção Linhas determina o número de linhas da tabela.

A opção Colunas determina o número de colunas da tabela.

A opção Preenchimento da célula determina o número de pixels entre o conteúdo de uma célula e seus limites.

A opção Espaçamento entre as células determina o número de pixels entre células adjacentes da tabela.

Dica: Se nenhum valor for explicitamente atribuído para o espaçamento entre as células e o preenchimento da célula, a maioria dos navegadores exibirá a tabela como se o preenchimento da c élula tivesse sido definido como 1 e o espaçamento entre as células como 2. Para se certificar de que os navegadores exibir ão a tabela sem nenhum preenchimento ou espaçamento, atribuir o valor 0 para Preenchimento da c élula e também para Espaçamento entre as células.

Largura especifica a largura da tabela em pixels ou como uma porcentagem da largura da janela do navegador.

A opção Borda especifica a largura em pixels das bordas da tabela.

Dica: Se nenhum valor for explicitamente atribuído à borda, a maioria dos navegadores exibirá a tabela como se a borda tivesse sido definida como 1. Para se certificar de que os navegadores mostrem a tabela sem nenhuma borda, atribuir o valor 0 para Borda. Para exibir os limites da célula e da tabela quando o campo Borda for definido com um valor 0,



selecione Exibir > Aux ílios visuais > Bordas da tabela.

2. Clique em OK para criar a tabela.

Para inserir uma tabela sem ter de especificar essas opções, desative a opção Mostrar a caixa de diálogo quando inserir objetos, nas Preferências gerais. Veja Definição das preferências gerais.

Tópico relacionado

Como inserir uma tabela

Definição das opções da caixa de diálogo Importar os dados tabulares

Esta caixa de diálogo permite especificar informações sobre um arquivo de dados tabulares e especificar atributos para a tabela a ser criada utilizando esses dados.

Para preencher a caixa de diálogo Importar os dados tabulares:


A opção Arquivo de dados representa o nome do arquivo a ser importado. Clique no botão Procurar para escolher um arquivo.

A opção Delimitador corresponde ao delimitador utilizado no arquivo que está sendo importado.

Se for selecionado Outro, uma caixa de texto será exibida à direita do menu pop-up. Digite o delimitador utilizado no arquivo.

Nota: Certifique-se de especificar o delimitador utilizado quando o arquivo de dados foi salvo. Caso contrário, o arquivo não será importado corretamente e os dados não serão formatados da maneira adequada em uma tabela.

A opção Largura da tabela determina a largura da tabela a ser criada. Selecione Ajustar aos dados para expandir cada coluna o suficiente para se adaptar à seqüência de texto mais longa da coluna. Selecione Definir para especificar uma largura de tabela fixa em pixels ou como uma porcentagem da largura da janela do navegador.

A opção Preenchimento da célula determina o número de pixels entre o conteúdo de uma célula e seus limites.

A opção Espaçamento entre as células determina o número de pixels entre células adjacentes da tabela.

Dica: Se nenhum valor for explicitamente atribuído para o espaçamento entre as células e o preenchimento da célula, a maioria dos navegadores exibirá a tabela como se o preenchimento da c élula tivesse sido definido como 1 e o espaçamento entre as células como 2. Para se certificar de que os navegadores exibir ão a tabela sem nenhum preenchimento ou espaçamento, atribuir o valor 0 para Preenchimento da c élula e



também para Espaçamento entre as células.

A opção Formatar a linha do alto determina o tipo de formatação (se houver) aplicada à linha superior da tabela. Escolha uma das quatros opções de formatação: sem formatação, negrito, itálico ou negrito itálico.


Dica: Se nenhum valor for explicitamente atribuído à borda, a maioria dos navegadores exibirá a tabela como se a borda tivesse sido definida como 1. Para se certificar de que os navegadores mostrem a tabela sem nenhuma borda, atribuir o valor 0 para Borda. Para exibir os limites da célula e da tabela quando o campo Borda for definido com um valor 0, selecione Exibir > Aux ílios visuais > Bordas da tabela.

2. Clique em OK.

Tópico relacionado

Como importar dados tabulares

Definição das propriedades da tabela

Este inspetor de propriedades permite definir propriedades das tabelas.

Para definir propriedades da tabela:

1. Defina qualquer uma das opções a seguir:

A opção Ident. da tabela representa a identificação da tabela.

As opções Linhas e Cols representam o número de linhas e colunas existentes na tabela.

As opções L e A especificam a largura e a altura da tabela em pixels ou como uma porcentagem da largura da janela do navegador.

Nota: Em geral, não é necessário definir a altura de uma tabela.

A opção Preench. da célula determina o número de pixels entre o conteúdo de uma célula e seus limites.

A opção Espaço entre células determina o número de pixels entre c élulas adjacentes da tabela.

Dica: Se nenhum valor for explicitamente atribuído para o espaçamento entre as células e o preenchimento da célula, a maioria dos navegadores exibirá a tabela como se o preenchimento da c élula tivesse sido definido como 1 e o espaçamento entre as células como 2. Para se certificar de que os navegadores exibir ão a tabela sem nenhum preenchimento ou espaçamento, atribuir o valor 0 para Preenchimento da c élula e também para Espaçamento entre as células.



A opção Alinhar determina o posicionamento da tabela com relação a outros elementos do mesmo parágrafo, como texto ou imagens. À esquerda alinha a tabela à esquerda de outros elementos (de modo que o texto do mesmo parágrafo fique ao redor da tabela à direita), À direita alinha a tabela à direita de outros elementos (com o texto ao redor da tabela à esquerda) e No centro centraliza a tabela (com o texto exibido acima e/ou abaixo da tabela). Padrão indica que o navegador deve utilizar seu alinhamento padrão.

Dica: Quando o alinhamento é definido como Padrão, nenhum outro conteúdo é exibido próximo à tabela. Para exibir uma tabela próxima a outro conteúdo, utilizar o alinhamento À esquerda ou À direita.



Os botões Limpar as larguras das colunas e Limpar as alturas das linhas excluem da tabela todos os valores de altura da linha e largura da coluna especificados explicitamente.

Os botões Converter as larguras da tabela em pixels e Converter as alturas da tabela em pixels definem a largura ou altura de cada coluna da tabela com o valor da largura atual em pixels (também define a largura de toda a tabela com o valor da largura atual em pixels).

Os botões Converter as larguras da tabela em percentagens e Converter as alturas da tabela em percentagens definem a largura ou altura de cada coluna da tabela com o valor da largura atual expresso como uma percentagem da largura da janela do documento (também define a largura de toda a tabela com o valor da largura atual como uma percentagem da largura da janela do documento).

A opção Cor do fundo representa a cor de fundo da tabela.

A opção Cor da borda representa a cor das bordas da tabela.

A opção Imagem de fundo indica a imagem de fundo da tabela.

2. Se tiver digitado um valor em uma caixa de texto, pressionar a tecla Tab ou Enter para aplicá-lo.



Como trabalhar com as cores

Vinculação de arquivos e documentos





Definição das propriedades de célula, linha e coluna

Este inspetor de propriedades permite definir propriedades de elementos da tabela (células, linhas e colunas).

Nota: Quando se definem propriedades em uma coluna, o Dreamweaver modifica os atributos da tag td correspondente a cada célula da coluna. Quando se definem certas propriedades para uma linha, no entanto, o Dreamweaver altera os atributos da tag tr em vez de alterar os atributos de cada tag td da linha. Ao aplicar o mesmo formato a todas as células de uma linha, a aplicação do formato à tag tr produz um código HTML mais conciso e limpo.

Para definir as propriedades de um elemento da tabela:


A opção Horiz especifica o alinhamento horizontal do conteúdo de uma célula, linha ou coluna. O conteúdo pode ser alinhado à esquerda, à direita ou no centro das células; como alternativa, é possível indicar que o navegador utilize seu alinhamento padrão (normalmente à esquerda para as células normais e no centro para as células de cabeçalho).

A opção Vert especifica o alinhamento vertical do conteúdo de uma célula, linha ou coluna. O conteúdo pode ser alinhado com a célula utilizando-se as opções Superior, Intermediário, Inferior ou Linha de base ou é possível indicar que o navegador utilize seu alinhamento padrão (normalmente, Intermedi ário).

As opções L e A especificam a largura e a altura das células selecionadas em pixels ou como uma porcentagem da largura ou altura da tabela inteira. Para especificar uma porcentagem, inserir um sinal de percentual (%) após o valor. Para permitir que o navegador determine a largura ou altura adequada com base no conteúdo da célula e as larguras e alturas das outras colunas e linhas, deixar este campo em branco (padr ão).

Por padrão, o navegador escolhe uma largura de coluna para acomodar a imagem maior ou a linha mais extensa em uma coluna. Por este motivo, uma coluna às vezes se torna mais larga do que as demais colunas da tabela quando se adiciona conteúdo a ela.

Por padrão, o navegador escolhe uma altura de linha para acomodar todo o texto e as imagens na linha.

Nota: Pode-se especificar uma altura como uma porcentagem da altura total da tabela, mas a linha não pode ser exibida utilizando-se a porcentagem de altura especificada nos navegadores.

A opção Fundo (campo de texto superior) representa o nome de arquivo da imagemde fundo para uma célula, coluna ou linha. Clique no ícone da pasta para procurar uma imagem ou utilizar o ícone Indicar o arquivo para selecionar um arquivo de imagem.

A opção Fundo (exemplo de cores e campo de texto inferiores) indica a cor de fundo de uma célula, coluna ou linha utilizando o seletor de cores.

A opção Borda representa a cor da borda das células.



O botão Mesclar as células combina as células, linhas ou colunas selecionadas em uma única célula (veja Como dividir e mesclar células). Somente é possível mesclar células se elas formarem um bloco retangular ou linear.

O botão Dividir a célula divide a célula criando duas ou mais células. Veja Como dividir e mesclar células. É possível dividir somente uma célula de cada vez. Este botão ficará desativado se mais de uma célula for selecionada.

A opção Sem quebra impede a quebra automática de linhas, mantendo todo o texto da célula em uma única linha. Se a opção Sem quebra for ativada, as células se expandirão para acomodar todos os dados à medida que forem digitados ou colados em uma célula (normalmente, as células se expandem horizontalmente para acomodar textos ou imagens maiores dentro da célula e se expandem verticalmente, se necessário, para acomodar outros conteúdos).

A opção Cabeçalho formata as células selecionadas como células de cabeçalho da tabela. Por padrão, o conteúdo das células do cabeçalho da tabela é exibido em negrito e no centro.






Como trabalhar com as cores

Vinculação de arquivos e documentos

Definição das opções da caixa de diálogo Formatar a tabela

Esta caixa de diálogo permite escolher um desenho pr é-formatado de tabela para aplicar a uma tabela.

Para preencher a caixa de diálogo Formatar a tabela:

1. Escolha um esquema de desenho na lista à esquerda.

A exemplo de exemplo apresenta um exemplo do desenho escolhido.


As opções Cores das linhas especificam as cores a serem aplicadas às linhas e como elas são freqüentemente alternadas.



As opções Linha de cima especificam o alinhamento, o estilo do texto, a cor de fundo e a cor do texto para a linha superior da tabela, que pode conter cabeçalhos de colunas.

As opções Coluna da esq. especificam o alinhamento e o estilo de texto para a coluna esquerda da tabela, que pode conter cabeçalhos de linha.



A opção Aplicar todos os atributos aos tags TD e não aos TR aplica o desenho às células da tabela (tags td) e não às linhas da tabela (tags tr).

Por padrão, a formatação especificada na caixa de diálogo Formatar a tabela é aplicada a linhas inteiras e não a células individuais. Ao aplicar o mesmo formato a todas as células de uma linha, a aplicação do formato à tag tr produz um código HTML mais limpo e conciso. No entanto, esta opção permite aplicar a formatação a células individuais se esta for a preferência de codifica ção do usuário. Para obter mais informações, veja Formatação de tabelas e células.

3. Siga um dos procedimentos abaixo: ¡ Clique em Aplicar para aplicar o formato a uma tabela sem fechar a caixa de

diálogo. Em seguida, fazer as alterações na formatação ou clique em OK ou em Cancelar para fechar a caixa de di álogo.

¡ Clique em OK para aplicar o formato à tabela e fechar a caixa de diálogo.

Definição das opções da caixa de diálogo Inserir linhas ou colunas

Esta caixa de diálogo permite inserir uma ou mais linhas ou colunas em uma tabela.

Para preencher a caixa de diálogo Inserir linhas ou colunas:


A opção Inserir indica se linhas ou colunas devem ser inseridas.

A opção Número de linhas ou Número de colunas representa o número de linhas ou colunas a serem inseridas.

A opção Onde especifica se as novas linhas ou colunas devem ser exibidas antes ou depois da linha ou coluna da célula selecionada.

2. Clique em OK.

Tópico relacionado



Como adicionar e remover linhas e colunas

Definição das opções da caixa de diálogo Dividir a célula

Esta caixa de diálogo permite especificar como dividir uma célula da tabela.

Para preencher a caixa de diálogo Dividir a célula:


A opção Dividir a célula em especifica se a célula deve ser dividida em linhas ou colunas.

A opção Número de linhas/Número de colunas especifica a quantidade de linhas ou colunas na qual a célula deve ser dividida.

2. Clique em OK.

Definição das opções da caixa de diálogo Ordenar a tabela

Esta caixa de diálogo permite especificar o modo como uma tabela deve ser ordenada.

Para preencher a caixa de diálogo Ordenar a tabela:


A opção Ordenar por determina os valores da coluna que serão utilizados para ordenar as linhas da tabela.

A opção Ordenar determina se a coluna deve ser ordenada em ordem alfabética ou numérica e em ordem ascendente (A a Z, de números inferiores a números superiores) ou em ordem descendente.

Se o conteúdo de uma coluna for números, escolher Numericamente. Uma ordenação alfabética aplicada a uma lista de números de um e dois dígitos faz com que os números sejam ordenados como se fossem palavras (como 1, 10, 2, 20, 3, 30) e não como se fossem números (por exemplo: 1, 2, 3, 10, 20, 30).

A opção E então por/Ordenar determina a ordenação secundária em uma coluna diferente. Especifique a coluna de ordenação secundária no menu pop-up E então por e a ordenação secundária nos menus pop-up Ordenar.

A opção A ordenação inclui a primeira linha especifica que a primeira linha da tabela deve ser incluída na ordenação. Se a primeira linha for um cabeçalho que não deve ser



movido, deixe esta opção desmarcada.

A opção Ordenar as linhas THEAD (se houver) determina a ordenação de todas as linhas da seção thead da tabela (se houver) utilizando os mesmos critérios que as linhas do corpo (observar que as linhas thead permanecem na seção thead e continuam sendo exibidas na parte superior da tabela mesmo após a ordenação). Para obter mais informações sobre a tag thead, ver o painel Referência (escolher Ajuda > Referência).

A opção Ordenar as linhas TFOOT (se houver) determina a ordenação de todas as linhas na seção tfoot da tabela (se houver) utilizando os mesmos critérios que as linhas do corpo (observar que as linhas tfoot permanecem na seção tfoot e continuam sendo exibidas na parte inferior da tabela mesmo após a ordenação). Para obter mais informações sobre a tag tfoot, ver o painel Referência (escolher Ajuda > Referência).

A opção Manter os atributos TR com a linha ordenada especifica que os atributos de linhas da tabela (tais como cores) devem permanecer associados ao mesmo conteúdo após a ordenação. Se as linhas da tabela forem formatadas com duas cores exibidas alternadamente, deixar esta opção desmarcada para assegurar que a tabela ordenada continue tendo linhas com cores alternáveis. Se os atributos da linha forem específicos ao conteúdo de cada linha, selecione esta opção para assegurar que esses atributos permaneçam associados às linhas corretas na tabela ordenada.

2. Clique em Aplicar ou em OK.

Definição das opções da caixa de diálogo Exportar tabela

Esta caixa de diálogo permite definir um delimitador e um estilo de quebras de linha para um arquivo de texto a ser criado por meio da exportação de dados de uma tabela.

Para preencher a caixa de diálogo Exportar tabela:


A opção Delimitador especifica o caractere delimitador que deve ser utilizado para separar os itens no arquivo exportado.

A opção Quebras de linha especifica o sistema operacional no qual o arquivo exportado será aberto: Windows, Macintosh ou UNIX (sistemas operacionais diferentes têm modos diferentes de indicar o fim de uma linha de texto).

2. Clique em Exportar.

Definição do layout de páginas na visualização de layout



O Dreamweaver oferece várias maneiras diferentes de definir o layout de páginas da Web.

Um método comum de se criar um layout de página consiste na utilização de tabelas HTML para posicionar os elementos. No entanto, pode ser difícil utilizar tabelas para layouts, pois elas foram criadas originalmente para exibir dados tabulares e não para definir o layout de páginas da Web.

Para dinamizar o processo de utilização de tabelas para o layout de página, o Dreamweaver fornece a visualização de layout. Na visualização de layout, é possível criar uma página utilizando tabelas como a estrutura básica, ao mesmo tempo em que se evitam alguns dos problemas que ocorrem com freqüência na criação de projetos baseados em tabelas através dos meios convencionais. Por exemplo: na visualização de layout, é possível desenhar células de layout na página e movê-las para qualquer local desejado. Também é possível criar facilmente layouts de largura fixa e layouts que podem ser automaticamente expandidos de acordo com a largura total da janela do navegador (veja Definição da largura de colunas).

Ainda é possível dispor as páginas utilizando tabelas segundo a maneira tradicional (veja Apresentação do conteúdo com tabelas) ou utilizando camadas e, depois, convertendo-as em tabelas (veja Utilização de tabelas e camadas para o layout). No entanto, a visualização de layout é a maneira mais fácil de configurar o layout da página.

Nota: Na visualização de layout, é impossível utilizar as ferramentas Inserir tabela e Desenhar camada como na visualização padrão. Para utilizar estas ferramentas, é necessário primeiro alternar para a visualização padrão.


l Sobre as células e tabelas de layout l Como entrar e sair da visualização de layout l Como desenhar células e tabelas de layout l Como adicionar conteúdo a uma célula de layout l Como mover e redimensionar células e tabelas de layout l Como formatar células e tabelas de layout l Definição da largura de colunas l Definição das preferências de visualização de layout l Referência

Sobre as células e tabelas de layout

Na visualização de layout, é possível definir o layout de uma página antes de adicionar o conteúdo. Por exemplo: é possível desenhar uma célula na parte superior da página para conter um gráfico de cabeçalho, outra célula no lado esquerdo da página para conter uma barra de navegação e uma terceira célula, à direita, para o conteúdo.



(Outro método consiste em desenhar cada célula apenas quando estiver pronto para inserir conteúdo ali. Este método proporciona maior flexibilidade, pois mantém mais espaço em branco na tabela de layout durante um maior período de tempo, o que confere maior facilidade para mover ou redimensionar células).

Ao desenhar uma célula de layout fora de uma tabela de layout, o Dreamweaver cria automaticamente uma tabela de layout como um recipiente para a célula. Uma célula de layout não pode existir fora de uma tabela de layout.

É possível definir o layout de uma página utilizando várias células de layout dentro de uma tabela de layout - que é o método mais comum para a definição do layout de uma página na Web - ou utilizar diversas tabelas de layout para layouts mais complexos. O uso de diversas tabelas de layout isola seções do layout, de modo que não possam ser afetadas por alterações feitas em outras seções.

Também é possível aninhar tabelas de layout ao inserir uma nova tabela de layout dentro de uma tabela existente. Esta estrutura permite simplificar a estrutura da tabela quando as linhas ou coluna em uma parte do layout não estiveram alinhadas com as linhas ou colunas em outra parte do layout. Por exemplo: ao utilizar tabelas de layout aninhadas seria possível criar facilmente um layout com duas colunas e quatro linhas na coluna esquerda e três linhas na coluna direita. Para obter mais informações, veja Como desenhar uma tabela de layout aninhada.



Como entrar e sair da visualização de layout

Para poder desenhar tabelas de layout ou c élulas de layout, é necessário alternar da visualização padrão para a visualização de layout.

Dica: Se o usuário criar uma tabela na visualização padrão e depois alternar para a visualização de layout, a tabela de layout resultante poderá conter células de layout vazias. Talvez seja preciso excluir essas células de layout vazias para poder criar novas células de layout ou mover as célula de layout pela tabela. Ao criar um novo layout para ser editado na visualização de layout, é mais fácil criar a tabela na visualização de layout em vez de criá-la na visualização padrão.

Para passar à visualização de layout:

1. Se a visualização do projeto não estiver visível, escolha Exibir > Projeto ou Exibir > Código e projeto.

A visualização de layout não pode ser ativada ou desativada na visualização do código.

2. Selecione Exibir > Visualização de tabelas > Visualização de layout ou clique no botão Visualização de layout na categoria Layout da barra Inserir (na área de trabalho de quatro estilos flutuantes do Dreamweaver, com uma barra Inserir vertical, os itens relativos ao layout são exibidos na parte inferior do painel e não em uma categoria distinta).

Uma barra cinza denominada Visualização de layout é exibida na parte superior da visualização do projeto para indicar que o usuário está na visualização de layout. Se houver tabelas nesta página, serão exibidas como tabelas de layout.

Para sair da visualização de layout:

1. Se a visualização do projeto não estiver visível, escolher Exibir > Projeto ou Exibir > Código e projeto.

A visualização de layout não pode ser ativada ou desativada na visualização do código.

2. Selecione Exibir > Visualização de tabelas> Visualização padrão ou clique no botão Visualização padrão na categoria Layout da barra Inserir.

Como desenhar células e tabelas de layout

É possível desenhar células e tabelas de layout na página enquanto se está na visualização de layout. Ao desenhar uma célula de layout fora de uma tabela de layout, o Dreamweaver cria automaticamente uma tabela de layout como um recipiente para a célula. Uma célula de layout não pode existir fora de uma tabela de layout.

Nota: Quando o Dreamweaver cria uma tabela de layout de modo automático, a tabela é exibida inicialmente para preencher toda a visualização do projeto, mesmo que o tamanho da janela do documento seja alterado. Esta tabela de layout padrão que ocupa todo o espaço da janela permite desenhar células de layout em qualquer local na visualização do projeto. É possível definir um tamanho específico para a tabela clicando na borda da tabela e arrastando suas alças de redimensionamento.



Para desenhar uma c élula de layout:

1. Certifique-se de estar na visualização de layout (veja Como entrar e sair da visualização de layout) e, em seguida, clique no botão Desenhar a c élula de layout na categoria Layout da barra Inserir (na área de trabalho de quatro estilos flutuantes do Dreamweaver, com uma barra Inserir vertical, os itens relativos ao layout são exibidos na parte inferior do painel e não em uma categoria distinta).

O ponteiro do mouse se transforma em um sinal de adição (+).

2. Posicione o ponteiro onde deseja iniciar a c élula na página e arraste-o para criar a célula de layout. Para criar v árias células sem precisar clicar no botão Desenhar a c élula de layout repetidamente, crie a célula de layout pressionando a tecla Control ao arrastar.

A célula será exibida contornada em azul na página (azul é a cor de contorno padrão para células de layout. Para alterar as cores de contorno, veja Definição das preferências de visualização de layout). A largura de cada c élula é exibida na área de cabeçalho da coluna, na parte superior da coluna, se as guias da tabela de layout estiverem visíveis (veja Definição das preferências de visualização de layout). Para obter mais informações sobre larguras de colunas, veja Definição da largura de colunas.

É exibida uma grade de linhas claras que se estende das extremidades da nova célula de layout para as extremidades da tabela de layout que a contém. Estas linhas ajudam a alinhar as novas células às células antigas e visualizar a estrutura da tabela HTML oculta.

No Dreamweaver, as extremidades das novas c élulas são alinhadas automaticamente com as extremidades das células existentes (as células de layout não podem ser sobrepostas). As extremidades da célula também se encaixam automaticamente às extremidades da tabela de layout que contém a célula se uma célula for desenhada próxima à extremidade de uma tabela. Para desativar temporariamente o encaixe, manter pressionada a tecla Alt ao desenhar a célula.

Para desenhar uma tabela de layout:

1. Certifique-se de estar na visualização de layout. Depois, seguir um dos procedimentos abaixo:

¡ Para desenhar uma tabela de layout, clique no botão Desenhar a tabela de layout na categoria Layout da barra Inserir. O ponteiro do mouse se transforma em um sinal de adição (+).

¡ Para desenhar mais de uma tabela de layout sem precisar clicar repetidamente no

botão Desenhar a tabela de layout, manter a tecla Control pressionada e clique neste botão. Ao terminar de desenhar a tabela de layout, é possível criar imediatamente uma outra tabela.

2. Posicionar o ponteiro do mouse na página e arrastá-lo para criar a tabela de layout.

Se não houver nenhum outro conteúdo na página, a nova tabela será posicionada automaticamente no canto superior esquerdo desta.

A tabela é exibida com um contorno verde na página (verde é a cor de contorno padrão para tabelas de layout. Para alterar as cores de contorno, veja Definição das preferências de visualização de layout). Uma guia denominada Tabela de layout é exibida na parte superior de cada tabela desenhada para ajudar a selecioná-la e distingui-la de outros elementos da página.

A largura da tabela (em pixels ou como porcentagem da largura da página) é exibida na área de cabeçalho da coluna, na parte superior da tabela, se as guias da tabela de layout estiverem



visíveis (veja Definição das preferências de visualização de layout). Para obter mais informações sobre larguras de tabela e de colunas, veja Definição da largura de colunas.

É possível criar uma tabela de layout em uma área vazia do layout da página ou ao redor de células e tabelas de layout existentes ou mesmo aninhada em uma tabela de layout existente. As tabelas não podem se sobrepor umas às outras, mas uma tabela pode ser totalmente inserida em outra tabela. Para obter mais informações, veja Como desenhar uma tabela de layout aninhada.

Dica: É imposs ível desenhar uma tabela de layout próxima a um conteúdo existente. Se a página já tiver conteúdo, é possível desenhar uma nova tabela de layout somente abaixo da parte inferior do conteúdo existente. Se tentar desenhar uma tabela de layout sob um conteúdo existente, mas se o ponteiro não disponível surgir, tentar redimensionar a janela do documento para aumentar o espaço em branco entre a parte inferior do conteúdo existente e a parte inferior da janela.

Como desenhar uma tabela de layout aninhada

É possível desenhar uma tabela de layout dentro de outra tabela de layout para criar uma tabela aninhada. As células internas de uma tabela aninhada não podem ser modificadas em relação à tabela externa; por exemplo: ao modificar o tamanho de uma linha ou coluna na tabela externa, o tamanho das células da tabela interna não é modificado.

É possível inserir diversos níveis de tabelas aninhadas. Uma tabela de layout aninhada não pode ser maior do que a tabela que a contém.

Nota: Se uma tabela de layout for desenhada no centro da página antes de uma célula de layout ser desenhada, a tabela desenhada será aninhada automaticamente dentro de uma tabela maior.



Para desenhar uma tabela de layout aninhada:

1. Certifique-se de estar na visualização de layout e, em seguida, clique no botão Desenhar a tabela de layout na categoria Layout da barra Inserir.


2. Aponte para qualquer área vazia (cinza) em uma tabela de layout existente e, em seguida, arrastar para criar a tabela de layout aninhada.

Nota: É imposs ível criar uma tabela de layout dentro de uma célula de layout. Só é possível criar uma tabela de layout aninhada em uma área vazia de uma tabela de layout existente ou ao redor de células existentes.

Para desenhar uma tabela de layout ao redor de células ou tabelas de layout já existentes:

1. Certifique-se de estar na visualização de layout e, em seguida, clique no botão Desenhar a tabela de layout na categoria Layout da barra Inserir.


2. Arraste o ponteiro para desenhar um retângulo ao redor de um conjunto de células ou tabelas de layout existentes.

É exibida uma tabela de layout aninhada, incluindo as células ou tabelas existentes.

Dica: Para encaixar perfeitamente uma célula de layout em uma das bordas da nova tabela aninhada, começar a arrastá-la próximo à borda da célula. A borda da nova tabela se encaixará à borda da célula. É imposs ível arrastar do centro de uma célula de layout, pois não se pode criar uma tabela de layout inteiramente no interior de uma c élula de layout.



Como encaixar células de layout na grade

É possível ativar a grade do Dreamweaver para servir como um guia visual ao desenhar o layout. À medida que os elementos da página forem movidos, é possível encaixá-los automaticamente na grade e alterá-la ou controlar o comportamento de encaixe especificando definições da grade. O encaixe funciona independentemente da visibilidade da grade.

Para mostrar ou ocultar a grade:

Escolha Exibir > Grade > Mostrar a grade.

Para ativar ou desativar o encaixe:

Escolha Exibir > Grade > Encaixar na grade.

Para alterar as defini ções da grade:

1. Escolha Exibir > Grade > Definições da grade.

A caixa de diálogo Definições da grade é exibida.

2. Defina as opções, conforme desejado.

Para obter mais informações, veja Configuração das op ções da caixa de diálogo Defini ções de grade.

3. Clique em OK.

Como adicionar conteúdo a uma célula de layout

É possível adicionar texto, imagens e outros tipos de conteúdo às células de layout na visualização de layout, do mesmo modo que o conteúdo é adicionado às células da tabela na visualização padrão. Clique na célula onde deverá ser adicionado o conteúdo e, em seguida, digite o texto ou inserir outro conteúdo.



É possível inserir conteúdo apenas em uma célula de layout, mas não em uma área vazia (cinza) de uma tabela de layout. Desse modo, para poder adicionar conteúdo, é necessário primeiro criar as células de layout (veja Como desenhar células e tabelas de layout).

Ao adicionar conteúdo maior do que a célula, a célula de layout se expandir á automaticamente. À medida que a c élula se expande, a coluna onde a célula está localizada também se expande, o que pode alterar o tamanho da células circunvizinhas. A área de cabeçalho dessa coluna modifica-se para mostrar a largura que aparece no código, seguido pela largura visual da coluna(a largura do modo como é exibido na tela do usuário) entre parênteses (para obter mais informações sobre larguras de colunas, veja Definição da largura de colunas).

Para adicionar texto a uma célula de layout:

Coloque o ponto de inserção na célula de layout em que deseja adicionar texto e seguir um dos procedimentos abaixo:

l Digite o texto na c élula. A célula se expande automaticamente à medida que um texto é digitado, se necessário.

l Colar o texto copiado de outro documento. Utilize o comando Colar. Para obter mais informações, veja Como inserir e formatar texto HTML.

Para adicionar uma imagem a uma célula de layout:

1. Coloque o ponto de inserção na célula de layout em que deseja adicionar a imagem. 2. Siga um dos procedimentos abaixo:

¡ Clique no botão Inserir imagem, na categoria Comuns da barra Inserir. ¡ Escolha Inserir > Imagem.

3. Na caixa de diálogo Selecionar a imagem, escolher um arquivo de imagem.

Para obter mais informações, veja Como inserir uma imagem.

Como limpar automaticamente as alturas das células

Ao criar uma célula de layout, o Dreamweaver especifica automaticamente uma altura para a célula, de modo que ela seja exibida com a altura selecionada mesmo que estiver vazia. Após inserir conteúdo na célula, não será mais preciso especificar a altura; por isso é possível remover da tabela as alturas da célula.

Para limpar as alturas da célula, seguir um dos procedimentos abaixo:

l Selecione Limpar as alturas das células no menu de cabeçalho da coluna.

O Dreamweaver limpa todas as alturas especificadas na tabela. Algumas células da tabela



podem encolher verticalmente.

l Selecione uma tabela de layout, clicando na guia exibida na parte superior da tabela, e clique no botão Limpar as alturas das colunas, no inspetor de propriedades.

O Dreamweaver limpa todas as alturas especificadas na tabela.

Como mover e redimensionar células e tabelas de layout

Para ajustar o layout da página, é possível mover e redimensionar células de layout e tabelas de layout aninhadas (a parte externa da tabela só pode ser redimensionada).

As células de layout não podem ser sobrepostas. É imposs ível mover ou redimensionar uma célula para que ela ultrapasse os limites da tabela de layout que a contém. Uma célula de layout não pode ser reduzida a um tamanho menor do que seu conteúdo.

Uma tabela de layout não pode ser redimensionada a um tamanho menor do que o menor retângulo que contém todas as suas células. Uma tabela de layout também não pode ser redimensionada de modo que sobreponha outras tabelas ou células.

Para redimensionar uma c élula de layout:

1. Selecione uma célula clicando em uma extremidade desta ou mantendo a tecla Control pressionada e clique em qualquer local da célula.

São exibidas alças de seleção ao redor da c élula.

2. Arrastar uma alça de seleção para redimensionar a célula.

As extremidades da célula encaixam-se automaticamente para se alinhar com as extremidades de outras células.



Para mover uma célula de layout:


São exibidas alças de seleção ao redor da c élula.

2. Siga um dos procedimentos abaixo: ¡ Arraste a célula para outro local dentro da tabela de layout. ¡ Pressione as teclas de seta para mover a c élula 1 pixel por vez. Mantenha

pressionada a tecla Shift ao utilizar as teclas de seta para mover a célula 10 pixels de cada vez.

Para redimensionar uma tabela de layout:

1. Selecione uma tabela clicando na guia, na parte superior da tabela.

São exibidas alças de seleção ao redor da tabela.

2. Arraste as alças de seleção para redimensionar a tabela.

As extremidades da tabela encaixam-se automaticamente para se alinhar com as extremidades de outras células e tabelas.

Para mover uma tabela de layout:

1. Selecione uma tabela clicando na guia, na parte superior da tabela.

São exibidas alças de seleção ao redor da tabela.

2. Siga um dos procedimentos abaixo: ¡ Arraste a tabela para outro local na página.

Nota: É possível mover uma tabela de layout somente se ela estiver aninhada no interior de outra tabela de layout.

¡ Pressione as teclas de seta para mover a tabela 1 pixel por vez. Mantenha pressionada a tecla Shift ao utilizar as teclas de seta para mover a tabela 10 pixels de cada vez.

Tópico relacionado

Para utilizar a grade do Dreamweaver como guia ao mover ou redimensionar as células e tabelas, veja Como encaixar c élulas de layout na grade.

Como formatar células e tabelas de layout

É possível alterar a aparência de qualquer célula ou tabela de layout utilizando o inspetor de propriedades.



Como formatar células de layout

É possível definir vários atributos de uma célula de layout no inspetor de propriedades, incluindo largura e altura, cor de fundo e alinhamento do conteúdo da célula.

Para formatar uma célula de layout no inspetor de propriedades:


2. Abra o inspetor de propriedades escolhendo Janela > Propriedades. 3. Modifique a formatação da célula definindo as propriedades.

Para obter mais informações, veja Definição das propriedades da célula de layout.

Como formatar tabelas de layout

É possível definir vários atributos de uma tabela de layout no inspetor de propriedade, incluindo largura, altura, preenchimento e espaçamento.

Para formatar uma tabela de layout:

1. Selecione uma tabela clicando na parte superior desta ou clicando na tag <table> do seletor de tags.

2. Abra o inspetor de propriedades escolhendo Janela > Propriedades. 3. Altere a formatação da tabela definindo as propriedades.

Para obter mais informações, veja Definição das propriedades da tabela de layout.

Definição da largura de colunas



Uma coluna na visualização de layout pode ter uma largura fixa ou uma largura que se expande automaticamente para preencher o máximo possível a janela do navegador (“alongamento automático”). As informações sobre largura são exibidas na área de cabeçalho da coluna, na parte superior de cada coluna da tabela selecionada, se as guias da tabela de layout estiverem visíveis (veja Definição das preferências de visualização de layout).

Uma coluna com largura fixa tem uma largura numérica específica, como 300 pixels, sendo que a largura é exibida na área de cabeçalho da coluna (a menos que a coluna seja muito estreita para exibir os números). A largura de uma coluna com alongamento automático é modificada automaticamente, dependendo da largura da janela do navegador. A área de cabeçalho da coluna de uma coluna com alongamento automático mostra uma linha ondulada em vez de um número. Se o layout incluir uma coluna com alongamento automático, ele sempre preencherá a largura inteira da janela do navegador do visitante.

Nota: A largura especificada para uma coluna é aplicada a todas as células dessa coluna.

É possível fazer com que somente uma coluna de uma determinada tabela de layout seja alongada automaticamente. Um método de layout comum consiste em provocar o alongamento automático da coluna que comporta o conteúdo principal da página, o que define automaticamente todas as outras colunas para uma largura fixa.

Por exemplo: suponha que o layout tenha uma imagem grande à esquerda da página e uma coluna de texto à direita. É possível definir a coluna da esquerda com uma largura fixa e provocar o alongamento automático da área da barra lateral.

Ao provocar o alongamento automático de uma coluna, o Dreamweaver insere imagens espaçadoras nas colunas com largura fixa para assegurar que essas colunas tenham a largura apropriada, a menos que seja especificado que nenhuma imagem espaçadora deva ser utilizada. Uma imagem espaçadora é uma imagem transparente utilizada para controlar o espaçamento, mas não fica visível na janela do navegador. Para obter mais informações, veja Como utilizar imagens espaçadoras.

Nota: Provocar o alongamento automático de uma coluna antes de o layout estar completo pode causar efeitos inesperados sobre o layout da tabela. Para evitar que as colunas se tornem mais largas ou estreitas além do esperado, finalizar o layout e utilizar imagens espaçadoras antes de provocar o alongamento automático de uma coluna (no entanto, se cada coluna



comporta outro conteúdo que mantém a coluna com a largura desejada, não é necessário utilizar imagens espaçadoras).

Às vezes, a largura visual de uma coluna no modo como é exibida na visualização de layout não corresponde à largura especificada no código HTML. Nesse caso, são exibidos dois números na área de cabeçalho da coluna. (Para obter mais informações sobre larguras inconsistentes, veja Definição das propriedades da tabela de layout.)

Para provocar o alongamento automático de uma coluna, seguir um dos procedimentos abaixo:

l Na área de cabeçalho da coluna, na parte superior de uma coluna de largura fixa, selecione Provocar o alongamento automático da coluna no menu do cabeçalho da coluna. É possível alongar automaticamente apenas uma coluna de uma determinada tabela.

l Selecione uma célula da coluna clicando em uma extremidade da c élula ou mantendo a

tecla Control pressionada ou clique em qualquer local da c élula. Em seguida, no inspetor de propriedades, clique em Alongamento automático.

Para definir uma largura fixa para a coluna, seguir um dos procedimentos abaixo:

l Na área de cabeçalho da coluna, na parte superior de uma coluna com alongamento automático, selecione Tornar fixa a largura da coluna no menu do cabeçalho da coluna.

A opção Tornar fixa a largura da coluna especifica uma largura para a coluna (no código) que corresponde à largura visual da coluna.

l Selecione uma célula da coluna clicando em uma extremidade da c élula ou mantendo a tecla Control pressionada e clique em qualquer local da célula. Em seguida, no inspetor de propriedades, clique na opção Fixa e digitar um valor numérico.

Se o usuário inserir um valor numérico menor que a largura do conteúdo da coluna, o Dreamweaver definirá automaticamente a largura para corresponder à largura do conteúdo.

Para definir a largura das células conforme especificado pelo código HTML para corresponder à largura visual das células:

Selecione Tornar consistentes as larguras das c élulas no menu de cabeçalho de qualquer coluna.


Definição das preferências de visualização de layout



Definição das propriedades da tabela de layout

Como utilizar imagens espaçadoras

Uma imagem espaçadora (também conhecida como GIF de espaçamento) é uma imagem transparente utilizada para controlar o espaçamento em tabelas com alongamento automático. Uma imagem espaçadora consiste em uma imagem GIF transparente de um único pixel alongada para ter um número específico de pixels. O navegador não pode desenhar uma coluna da tabela mais estreita do que a imagem mais larga contida em uma c élula daquela coluna, por isso colocar uma imagem espaçadora em uma coluna da tabela requer que os navegadores mantenham a coluna ao menos com a mesma largura da imagem.

O Dreamweaver adiciona automaticamente imagens espaçadoras ao definir uma coluna para alongamento automático, a menos que seja determinado que nenhuma imagem espaçadora deva ser utilizada. É possível inserir e remover imagens espaçadoras manualmente em cada coluna, se preferir. As colunas que contêm imagens espaçadoras têm uma barra dupla na área de cabeçalho da coluna.

Nota: Se preferir não utilizar imagens espaçadoras em tabelas com alongamento automático, as colunas de largura fixa poderão ter seus tamanhos alterados ou mesmo poderão desaparecer completamente da visualização do projeto se não comportarem conteúdo (as colunas continuarão existindo no código, mesmo que não sejam exibidas na visualização do projeto).

Ao inserir uma imagem espaçadora em uma coluna ou definir o alongamento automático para a coluna, é exibida uma caixa de diálogo perguntando como você deseja configurar o arquivo da imagem espaçadora. Se uma imagem espaçadora já tiver sido definida para o site nas preferências do Dreamweaver, a caixa de diálogo não será exibida (veja Definição das preferências de visualização de layout).

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

Para configurar uma imagem espaçadora:

1. Defina uma coluna com alongamento automático ou escolha Adicionar imagem espaçadora no menu de cabeçalho da coluna.

A caixa de diálogo Escolha a imagem espaçadora é exibida.



2. Escolha uma imagem das opções.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Escolha a imagem espaçadora.

3. Clique em OK.

Para inserir uma imagem espaçadora em uma coluna:

Selecione Adicionar imagem espaçadora no menu de cabeçalho da coluna.

A imagem espaçadora é inserida na coluna. A imagem não fica visível, mas a coluna pode apresentar uma pequena mudança de forma; além disso, uma barra dupla é exibida na parte superior para indicar que a coluna contém uma imagem espaçadora.

Para remover uma imagem espaçadora de uma coluna:

Selecione Remover a imagem espaçadora no menu de cabeçalho da coluna.

A imagem espaçadora é removida. A coluna pode mudar.

Para remover todas as imagens espaçadoras de uma tabela:

Siga um dos procedimentos abaixo:

l Selecione Remover todas as imagens espaçadoras do menu de cabeçalho da coluna de qualquer coluna da tabela.

l Clique no botão Remover todos os espaçadores do inspetor de propriedades da tabela de layout.

O layout de toda a tabela pode ser modificado. Se algumas colunas não comportarem conteúdo, elas poderão desaparecer completamente da visualização do projeto.


Utilize a categoria Visualização de layout, na caixa de diálogo Preferências, para especificar informações sobre arquivos de imagens espaçadoras e sobre as cores que o Dreamweaver utiliza para desenhar tabelas de layout e células de layout.

Por padrão, a guia denominada Tabela de layout é exibida na parte superior de cada tabela de layout na visualização de layout e um conjunto de controles de largura de coluna é exibido na parte superior da tabela de layout que está selecionada. Se preferir, é possível ocultar as guias e controles.

Nota: Mesmo quando as guias estão visíveis, a tabela de layout na parte superior da página não exibe uma guia quando selecionada. A guia da tabela de layout na parte superior da página somente é exibida quando a tabela não está selecionada.



Para definir as preferências da visualização de layout:

1. Escolha Editar > Preferências. 2. Selecione Visualização de layout na lista Categoria. 3. Faça as alterações necessárias.

Para obter mais informações, veja Definição das op ções da caixa de diálogo Preferências da visualização de layout.

4. Clique em OK para fechar a caixa de diálogo.

Para desativar as guias da tabela de layout e os controles de largura de coluna na visualização de layout:

Escolha Exibir > Visualização de tabelas > Mostrar as guias da tabela de layout.

Referência


Definição das propriedades da célula de layout

Este inspetor de propriedades permite definir propriedades para as células de layout.

Para definir as propriedades de uma célula de layout:


A opção Fixa define uma largura fixa para a célula. Digite uma largura (em pixels) na caixa de texto adjacente (veja Definição da largura de colunas).

A opção Alongamento automático provoca o alongamento automático da célula (veja Definição da largura de colunas).

A opção Altura indica a altura da c élula (em pixels).

A opção Fundo representa a cor de fundo da célula de layout. Clique na caixa de cores e escolher uma cor no Seletor de cores ou digitar um número hexadecimal correspondente a uma cor na caixa de texto adjacente.

A opção Horiz define o alinhamento horizontal do conteúdo da célula. É possível definir o alinhamento como Esquerda, Centro, Direita ou Padrão.



A opção Vert define o alinhamento vertical do conteúdo da célula. É possível definir o alinhamento como Superior, Intermedi ário, Inferior, Linha de base ou Padrão.

A opção Sem quebra impede a quebra automática de linha. Quando esta opção é selecionada, a célula de layout se expande o suficiente para acomodar o texto em vez de continuar o texto em uma nova linha.


Tópico relacionado


Definição das propriedades da tabela de layout

Este inspetor de propriedades permite definir as propriedades de tabelas de layout.

Para definir as propriedades de uma tabela de layout:


A opção Fixa define uma largura fixa para a tabela. Digite uma largura (em pixels) na caixa de texto adjacente (veja Definição da largura de colunas).

A opção Alongamento automático provoca o alongamento automático da coluna mais à direta (veja Definição da largura de colunas).

A opção Altura indica a altura da tabela (em pixels).

A opção Preench. da célula especifica o espaço entre o conteúdo de uma célula de layout e suas bordas (em pixels).

Se o preenchimento da célula for alterado e um número for exibido entre parênteses no cabeçalho de uma coluna da tabela de layout, utilize a op ção Tornar consistentes as larguras, descrita a seguir.

A opção Espaço entre células define o espaço entre as células de layout adjacentes (em pixels).

Se o espaçamento entre as células for alterado e um número for exibido entre parênteses no cabeçalho de uma coluna da tabela de layout, utilize a opção Tornar consistentes as larguras, descrita a seguir.

A opção Limpar as alturas das linhas remove as defini ções de altura feitas para todas as células da tabela de layout.

O Dreamweaver especifica as alturas de célula para mostrar o layout do modo como foi desenhado, mesmo que algumas células estejam vazias. Portanto, é necessário clique neste botão somente depois de colocar o conteúdo nas células de layout. Caso contrário,



as células vazias poderão se contrair verticalmente.

Nota: Limpar as alturas das linhas pode ter efeitos inesperados em áreas vazias (cinza) na tabela de layout (ou seja, nas áreas que não contêm nenhuma célula). Em especial, algumas linhas vazias podem ser removidas completamente da tabela e a tabela pode parecer se contrair verticalmente.

A opção Tornar consistentes as larguras faz com que as larguras de célula no código HTML correspondam à largura aparente na tela se houver células de largura fixa no layout.

Ao clicar em Tornar consistentes as larguras, o Dreamweaver redefine a largura especificada no HTML para que cada c élula da tabela corresponda à largura do conteúdo dentro daquela célula.

Por exemplo: se a largura de uma célula de layout for definida em 200 pixels (ou se for desenhada uma célula de layout do tamanho de 200 pixels) e se for adicionado conteúdo que estende a largura para 250 pixels for adicionado, serão exibidos dois números na área de cabeçalho na parte superior da coluna dessa célula: "200" entre aspas (a largura especificada no código) e (250) entre parênteses (a largura visual, ou seja, a largura da célula na forma como é exibida na tela). Clique em Tornar consistentes as larguras para alterar a largura especificada no código para 250 de modo a corresponder à largura visual.

A opção Remover todos os espaçadores remove as imagens espaçadoras (imagens transparentes utilizadas para controlar o espaçamento no layout) da tabela de layout (para obter mais informações, veja Como utilizar imagens espaçadoras).

Nota: A remoção das imagens espaçadoras pode fazer com que algumas colunas da tabela fiquem muito estreitas. Geralmente é necessário manter as imagens espaçadoras no lugar, a menos que cada coluna comporte outro conteúdo que mantenha a coluna com a largura desejada.

A opção Remover o aninhamento remove uma tabela de layout que está aninhada em outra tabela de layout sem perder seu conteúdo.

A tabela de layout interna desaparece; as células de layout que ela continha se tornam parte da tabela externa.


Tópico relacionado


Definição das opções da caixa de diálogo Escolha a imagem espaçadora

Quando é ativado o alongamento automático de uma coluna, esta caixa de diálogo permite escolher se uma imagem espaçadora deve ser utilizada e qual imagem utilizar.



Se estiver sendo adicionada uma imagem espaçadora a uma coluna, esta caixa de di álogo permite escolher a imagem espaçadora a ser utilizada.

Para preencher a caixa de diálogo Escolha a imagem espaçadora:

1. Escolha uma das opções a seguir:

A opção Criar um arquivo de imagem espaçadora cria uma imagem GIF para ser utilizada como imagem espaçadora e permite escolher uma pasta para armazenar o arquivo de imagem espaçadora (a pasta de imagens do site, por exemplo). Esta é a opção recomendada, a menos que já tenha sido criado um arquivo de imagem espaçadora para o site.

A opção Utilizar um arquivo existente de imagem espaçadora permite especificar um arquivo de imagem espaçadora para utilização com tabelas de alongamento automático. A imagem espaçadora deve ser uma imagem GIF transparente de um único pixel.

A opção Não utilizar as imagens espaçadoras nas tabelas de alongamento automático especifica que o Dreamweaver não deve adicionar imagens espaçadoras às tabelas de modo automático (esta opção não é exibida se uma imagem espaçadora for inserida sem provocar o alongamento automático da coluna). Se esta opção for selecionada, as colunas de largura fixa no layout podem ser reduzidas a uma largura menor ou mesmo inexistente. As imagens espaçadoras ajudam a manter a estrutura do layout na forma em que foi originalmente criado. Utilize esta opção somente depois de colocar conteúdo suficiente nas colunas de largura fixa para evitar que se retraiam ou depois de inserir imagens espaçadoras manualmente.

2. Clique em OK.

Tópico relacionado

Como utilizar imagens espaçadoras

Definição das opções da caixa de diálogo Preferências da visualização de layout

Esta caixa de diálogo permite definir as preferências da visualização de layout.

Para preencher a caixa de diálogo Preferências da visualização de layout:

1. Especifique qualquer uma das opções a seguir:

A opção Espaçadores de inserção automática especifica se o Dreamweaver deverá ou não inserir automaticamente imagens espaçadoras quando for definido o alongamento automático de uma coluna (veja Definição da largura de colunas).

A opção Imagem espaçadora define o arquivo de imagem espaçadora dos sites. Selecione um site no menu Espaçadores de inserção automática e clique no botão Criar para criar um novo arquivo de imagem espaçadora ou clique no botão Procurar para localizar um arquivo de imagem espaçadora nesse site.



A opção Contorno da célula define a cor do contorno das células de layout.

A opção Realce da célula define a cor assumida pelo contorno da célula de layout ao mover o ponteiro a fim de apontá-lo para uma célula.

A opção Contorno da tabela define a cor do contorno das tabelas de layout.

A opção Fundo da tabela define a cor utilizada nas áreas das tabelas de layout onde não há células de layout.

2. Clique em OK.

Tópico relacionado


Utilização de molduras

As molduras permitem dividir uma janela do navegador em várias regiões, podendo cada uma exibir um documento HTML diferente. Em sua utilização mais comum, uma moldura exibe um documento que contém controles de navegação, enquanto a outra exibe um documento com conteúdo.

Por exemplo: o layout da moldura pode consistir em três molduras: uma moldura estreita lateral que contém uma barra de navegação, outra moldura na parte superior, contendo o logotipo e o nome do site da Web, e uma moldura grande que ocupa o restante da página e acomoda o conteúdo principal. Cada uma dessas molduras exibe um documento HTML distinto.



Neste exemplo, o documento exibido na moldura superior nunca se altera à medida que o visitante navega pelo site. A barra de navegação da moldura lateral contém links. Clique em um desses links altera o conteúdo da moldura principal de conteúdo, mas o conteúdo da própria moldura lateral permanece inalterado. A moldura principal de conteúdo à direita exibe o documento adequado para qualquer link no qual o visitante clicar à esquerda.

Uma discussão detalhada sobre todas as maneiras de projetar e utilizar molduras, bem como o código necessário para a codificação manual, não é abrangida pelo escopo deste capítulo. Se forem necessárias informações detalhadas sobre o código utilizado em layouts de moldura avançados, veja documento sobre molduras e conjuntos de molduras.


l Sobre molduras e conjuntos de molduras l Como decidir se as molduras devem ser utilizadas l Sobre como criar páginas da Web com base em molduras no Dreamweaver l Criação de molduras e conjuntos de molduras l Como selecionar molduras e conjuntos de molduras l Como salvar arquivos de moldura e de conjunto de molduras l Visualização e defini ção das propriedades da moldura l Visualização e defini ção das propriedades de um conjunto de molduras l Como controlar um conteúdo de moldura com links l Como tratar um navegador que não pode exibir molduras l Utilização de comportamentos JavaScript com molduras l Referência



Sobre molduras e conjuntos de molduras

Uma moldura é uma região de uma janela do navegador que pode exibir um documento HTML independentemente do que está sendo exibido no restante da janela do navegador.

Um conjunto de molduras é um arquivo HTML que define o layout e as propriedades de uma série de molduras, incluindo o número de molduras, seu tamanho e posicionamento, bem como a URL da página a ser inicialmente exibida em cada moldura. O próprio arquivo do conjunto de molduras não comporta conteúdo HTML a ser exibido em um navegador, exceto na seção noframes (veja Como tratar um navegador que não pode exibir molduras); o arquivo do conjunto de molduras apenas fornece informações para o navegador sobre como um conjunto de molduras deve ser exibido e quais documentos devem ser exibidos nele.

Para exibir um conjunto de molduras em um navegador, digite a URL do arquivo do conjunto de molduras. O navegador abrir á os documentos relevantes para exibi-los nas molduras. O arquivo do conjunto de molduras de um site geralmente é denominado index.html de forma que ele seja exibido como padrão se um visitante não especificar um nome de arquivo.

Observar que uma moldura não é um arquivo. Pode-se pensar que o documento que está sendo exibido no momento em uma moldura é parte integrante da moldura, mas na realidade o documento não faz parte dela – qualquer moldura pode exibir qualquer documento.

Nota: A palavra página pode ser utilizada livremente para fazer referência a um único documento HTML ou a todo o conteúdo de uma janela do navegador em um determinado momento, mesmo que vários documentos HTML estejam sendo exibidos simultaneamente. A frase “uma página que utiliza molduras”, por exemplo: normalmente se refere a um conjunto de molduras e aos documentos que são exibidos inicialmente nessas molduras.

No Dreamweaver, é possível criar um conjunto de molduras de uma destas maneiras:

l Para criar um conjunto de molduras com o documento atual exibido em uma das molduras, utilizar a categoria Molduras da barra Inserir.

l Para criar um conjunto de molduras com todas as molduras em branco, utilizar a categoria Conjunto de molduras na caixa de diálogo Novo documento.

É possível formatar todas as molduras e conjuntos de molduras utilizando o inspetor de propriedades. É possível definir a rolagem como ativada ou desativada, definir a largura e altura, nomear todas as molduras e muito mais. Para obter mais informações, veja Visualização e definição das propriedades da moldura e Visualização e definição das propriedades de um conjunto de molduras.

Um site que é exibido em um navegador como uma única página formada por três molduras consiste, na verdade, em pelo menos quatro documentos HTML distintos: o arquivo do conjunto de molduras e os três documentos que comportam o conteúdo exibido inicialmente dentro das molduras. Ao projetar uma página utilizando conjuntos de molduras no Dreamweaver, esses quatro arquivos devem ser salvos para que a página funcione corretamente no navegador. Para obter mais informações sobre como criar com êxito páginas da Web que utilizam molduras, veja Sobre como criar páginas da Web com base em molduras no Dreamweaver.



Como decidir se as molduras devem ser utilizadas

A utilização mais comum de molduras é para navegação. Um conjunto de molduras geralmente inclui uma moldura contendo uma barra de navegação e uma outra moldura que exibe as páginas principais de conteúdo.

Entretanto, projetar com molduras pode ser confuso e, em muitos casos, é possível criar uma página da Web sem molduras que atinge muitos dos mesmos objetivos de um conjunto de molduras. Por exemplo: se desejar que a barra de navegação seja exibida no lado esquerdo da página, é possível substituir a página por um conjunto de molduras ou apenas incluir a barra de navegação em cada página do site (o Dreamweaver ajuda a criar várias páginas que utilizam o mesmo layout; veja Sobre os modelos do Dreamweaver). A imagem a seguir mostra um projeto de página com um layout semelhante a moldura, mas que não utiliza molduras.

Muitos designers da Web profissionais preferem não utilizar molduras, e muitas pessoas que navegam na Web não as apreciam. Na maioria dos casos, isso é devido à existência de sites que utilizam molduras de forma inadequada ou desnecessária (como um conjunto de molduras que recarrega o conteúdo das molduras de navegação sempre que um visitante clica em um botão de navegação). Quando as molduras são bem utilizadas (por exemplo: para manter os controles de navegação estáticos em uma moldura enquanto permitem que o conteúdo de outra moldura se altere), elas podem ser muito úteis para alguns sites.

Nem todos os navegadores fornecem bom suporte a molduras, e elas podem representar dificuldade para visitantes que ainda não têm experiência em navegar; portanto, ao utilizar molduras, fornecer sempre uma seção noframes no conjunto de molduras para aqueles visitantes que não podem vê-las. Também é recomendável fornecer um link visível para uma versão do site sem molduras para os visitantes cujos navegadores oferecem suporte a molduras, mas que não gostam de utiliz á-las.

As vantagens de se utilizarem molduras incluem:

l O navegador de um visitante não precisa recarregar imagens relacionadas à navegação para cada página.

l Cada moldura tem sua própria barra de rolagem (se o conteúdo for muito grande para caber em uma janela); portanto, um visitante pode rolar as molduras independentemente (por exemplo: um visitante que tiver efetuado a rolagem para a parte inferior de uma



longa página de conteúdo em uma moldura não precisa rolar de volta para a parte superior para utilizar a barra de navegação, se esta estiver em uma outra moldura).

As desvantagens de se utilizarem molduras incluem:

l O alinhamento gráfico preciso dos elementos em diversas molduras pode ser difícil. l O teste de navegação pode ser muito demorado. l As URLs das páginas com molduras individuais não são exibidas no navegador; portanto,

pode ser difícil para um visitante incluir um marcador em uma página específica (exceto se for fornecido o código do servidor que permite ao visitante carregar uma versão com molduras de determinada página).


Como controlar um conteúdo de moldura com links

Como tratar um navegador que não pode exibir molduras

Sobre como criar páginas da Web com base em molduras no Dreamweaver

O Dreamweaver permite exibir e editar todos os documentos associados a um conjunto de molduras, todos em uma única janela do documento. Essa abordagem permite ver de modo aproximado como as páginas com molduras serão exibidas em um navegador à medida que são editadas. Entretanto, alguns aspectos dessa abordagem podem ser confusos, até que se tornem familiares.

Lembre-se de que cada moldura exibe um documento HTML distinto. Mesmo que os documentos estejam vazios, é necessário salvá-los para poder visualizá-los (porque o conjunto de molduras pode ser visualizado com precisão apenas se contiver a URL de um documento a ser exibido em cada moldura).

Para se certificar de que o conjunto de molduras será exibido corretamente nos navegadores:

1. Crie o conjunto de molduras e especificar um documento para ser exibido em cada



moldura (veja Criação de molduras e conjuntos de molduras). 2. Salve cada arquivo a ser exibido em uma moldura. Lembre-se de que cada moldura exibe

um documento HTML distinto e que cada documento deve ser salvo. Salvar também o arquivo do conjunto de molduras (veja Como salvar arquivos de moldura e de conjunto de molduras).

3. Defina as propriedades de cada moldura e do conjunto de molduras. Isso inclui nomear cada moldura e definir opções fixas e de rolagem, entre outros (veja Visualização e definição das propriedades da moldura e Visualização e definição das propriedades de um conjunto de molduras).

Dica: Também é possível definir o atributo title para uma moldura a fim de melhorar a acessibilidade. (Observar que o atributo title não é igual ao atributo name). Para definir o atributo title, selecionar a moldura e escolher Modificar > Editar a tag e, em seguida, selecionar a categoria Folha de estilos/acesso e digitar um título na caixa de texto T ítulo. Como alternativa, ativar a opção de autorização de acessibilidade para molduras. Para obter mais informações, veja Autoria da acessibilidade.

4. Certifique-se de que foi definida a propriedade Destino no inspetor de propriedades para todos os links para que o conteúdo com links seja exibido na área correta (veja Como controlar um conteúdo de moldura com links).

Criação de molduras e conjuntos de molduras

Há duas maneiras de criar um conjunto de molduras no Dreamweaver: é possível desenhá-lo ou escolher entre vários conjuntos de molduras predefinidos. A seleção de um conjunto de molduras predefinido configura automaticamente todos os conjuntos de molduras e molduras necessários à criação do layout e é a maneira mais fácil de criar rapidamente um layout-com base em molduras. Só é possível inserir um conjunto de molduras predefinido na visualização do projeto da janela do documento.

Como criar um conjunto de molduras predefinido

Os conjuntos de molduras predefinidos facilitam a seleção do tipo de conjunto de molduras a ser criado.

Há duas maneiras de criar um conjunto de molduras predefinido: utilizando a barra Inserir e a caixa de diálogo Novo documento. A barra Inserir permite criar um conjunto de molduras e exibir o documento atual em uma das novas molduras; a caixa de diálogo Novo documento cria um novo conjunto de molduras vazio.

Os ícones do conjunto de molduras predefinido na categoria Molduras da barra Inserir e na categoria Conjuntos de molduras da caixa de diálogo Novo documento fornecem uma representação visual de cada conjunto de molduras conforme aplicado ao documento atual.



Quando se aplica um conjunto de molduras utilizando a barra Inserir, o Dreamweaver automaticamente configura o conjunto de molduras para exibir o documento atual (o documento no qual o ponto de inserção está localizado) em uma das molduras. A área azul de um ícone de conjunto de molduras predefinido representa o documento atual e as áreas brancas representam molduras que exibirão outros documentos.

Para criar um conjunto de molduras predefinido e exibir um documento existente em uma moldura:

1. Coloque o ponto de inserção em um documento. 2. Siga um dos procedimentos abaixo:

¡ Na categoria Molduras da barra Inserir, clique no ícone de um conjunto de molduras predefinido.

¡ Escolha um conjunto de molduras predefinido no submenu Inserir > Molduras.

Para criar um novo conjunto de molduras predefinido vazio:

1. Escolha Arquivo > Novo. 2. Na caixa de diálogo Novo documento, selecionar a categoria Conjuntos de molduras. 3. Selecione um conjunto de molduras na lista Conjuntos de molduras. 4. Clique em Criar.

Como criar e editar um conjunto de molduras

Antes de criar um conjunto de molduras ou de trabalhar com molduras, tornar as bordas das molduras visíveis na visualização do projeto da janela do documento, escolhendo Exibir >Aux ílios visuais > Bordas da moldura.

Para criar um conjunto de molduras:

Escolha um item de divisão (como Dividir a moldura para a esquerda ou Dividir a moldura para a direita) no submenu Modificar > Conjunto de molduras.

A janela será dividida em molduras e o documento iniciado será exibido em uma das molduras.

Para dividir uma moldura em molduras menores, seguir um dos procedimentos abaixo:

l Para dividir a moldura onde está o ponto de inserção, escolher um item de divisão no submenu Modificar > Conjunto de molduras.

l Para dividir uma moldura ou conjunto de molduras vertical ou horizontalmente, arrastar uma borda da moldura da margem da visualização do projeto para o meio da visualização do projeto.

l Para dividir uma moldura utilizando uma borda de moldura que não está na margem da visualização do projeto, manter pressionada a tecla Alt e arrastar a borda da moldura.

l Para dividir uma moldura em quatro molduras, arrastar uma borda da moldura de uma das margens da visualização do projeto para o meio de uma moldura.



Dica: Para criar três molduras, iniciar com duas molduras e, depois, dividir uma delas. Não é fácil mesclar duas molduras adjacentes sem editar o código do conjunto de molduras; portanto, transformar quatro molduras em tr ês é mais difícil do que transformar duas molduras em três.

Para excluir uma moldura:

Arrastar a borda da moldura para fora da página ou até a borda da moldura -mãe.

Se houver conteúdo não salvo em um documento de uma moldura que estiver sendo removida, o Dreamweaver solicitará que o documento seja salvo.

Nota: É imposs ível remover um conjunto de molduras inteiro arrastando as bordas. Para remover um conjunto de molduras, fechar a janela do documento que o exibe. Se o arquivo do conjunto de molduras tiver sido salvo, excluir o arquivo.

Sobre conjuntos de molduras aninhados

Um conjunto de molduras que estiver dentro de outro é denominado um conjunto de molduras aninhado. Um único arquivo do conjunto de molduras pode conter vários conjuntos de molduras aninhados. A maioria das páginas da Web que utilizam molduras na verdade utilizam molduras aninhadas, e a maioria dos conjuntos de molduras predefinidos no Dreamweaver também utilizam o aninhamento. Qualquer conjunto de molduras no qual há números diferentes de molduras em linhas ou colunas distintas requer um conjunto de molduras aninhado.

Por exemplo: o layout de molduras mais comum tem uma moldura na linha da parte superior (onde é exibido o logotipo da empresa) e duas molduras na linha da parte inferior (uma moldura de navegação e uma moldura de conteúdo). Esse layout requer um conjunto de molduras aninhado: um conjunto de molduras de duas linhas, com um conjunto de molduras de duas colunas aninhado na segunda linha.

O Dreamweaver se encarrega do aninhamento de conjuntos de molduras conforme necessário. Se forem utilizadas ferramentas para divis ão de molduras no Dreamweaver, não será necessário se preocupar com os detalhes de quais molduras são aninhadas ou n ão. Para obter mais informações sobre essas ferramentas, veja Como criar e editar um conjunto de molduras.



Há duas maneiras de aninhar conjuntos de molduras em HTML: o conjunto de molduras interno pode ser definido no mesmo arquivo que o do conjunto de molduras externo ou em um arquivo próprio distinto. Cada conjunto de molduras predefinido no Dreamweaver define todos os seus conjuntos de molduras no mesmo arquivo.

Os dois tipos de aninhamento produzem os mesmos resultados visuais; não é fácil diferenciar, sem examinar o código, o tipo de aninhamento que está sendo utilizado. A situação mais provável na qual um arquivo de conjunto de molduras externo seria utilizado no Dreamweaver é quando o comando Abrir na moldura é utilizado para abrir um arquivo do conjunto de molduras dentro de uma moldura; fazer isso pode resultar em problemas ao definir destinos para os links. Em geral é mais simples manter todos os conjuntos de molduras definidos em um único arquivo.

Como selecionar molduras e conjuntos de molduras

Para fazer alterações nas propriedades de uma moldura ou de um conjunto de molduras, começar selecionando a moldura ou o conjunto de molduras que deseja modificar. É possível selecionar uma moldura ou um conjunto de molduras na janela do documento ou utilizando o painel Molduras.

Ao selecionar uma moldura ou um conjunto de molduras, é exibido um contorno da seleção ao redor da moldura ou do conjunto de molduras tanto no painel Molduras quanto na visualização do projeto da janela do documento.

Como selecionar molduras e conjuntos de molduras no painel Molduras

O painel Molduras fornece uma representação visual das molduras em um conjunto de molduras. Pode-se clicar em uma moldura ou em um conjunto de molduras, no painel Molduras, para selecioná-los no documento e, em seguida, no inspetor de propriedades, exibir ou editar as propriedades do item selecionado. Para obter mais informações, veja Visualização e defini ção das propriedades da moldura e Visualização e definição das propriedades de um conjunto de molduras.

O painel Molduras mostra a hierarquia da estrutura do conjunto de molduras de um modo que pode não ser visível na janela do documento. Nesse painel, uma borda muito espessa envolve cada conjunto de molduras; cada moldura é contornada por uma linha fina cinza e é identificada por um nome.



Para exibir o painel Molduras:

Escolha Janela > Outras > Molduras.

Para selecionar uma moldura no painel Molduras:

Clique na moldura, no painel Molduras.

Para selecionar um conjunto de molduras no painel Molduras:

Clique na borda que circunda o conjunto de molduras, no painel Molduras.

Como selecionar molduras e conjuntos de molduras na janela do documento

Na visualização do projeto da janela do documento, quando uma moldura é selecionada, suas bordas são marcadas com uma linha pontilhada; quando um conjunto de molduras é selecionado, todas as bordas das molduras desse conjunto de molduras são marcadas com uma linha pontilhada clara.

Nota: Coloque o ponto de inserção em um documento que é exibido em uma moldura não é o mesmo que selecionar uma moldura. Há várias operações (como definição das propriedades da moldura) nas quais é preciso selecionar uma moldura.

Quando uma moldura ou um conjunto de molduras é selecionado, o inspetor de propriedades exibe as propriedades do item selecionado, permitindo alterar as propriedades (veja Visualização e defini ção das propriedades da moldura e Visualização e definição das propriedades de um conjunto de molduras).

Para selecionar uma moldura na janela do documento:

Pressione a tecla Alt e clique dentro de uma moldura na visualização do projeto.

Para selecionar um conjunto de molduras na janela do documento:



Clique em uma das bordas da moldura interna do conjunto de molduras na visualização do projeto (as bordas da moldura devem estar visíveis para que isso seja possível, escolha Exibir >Aux ílios visuais > Bordas da moldura para tornar as bordas da moldura visíveis, caso não estejam).

Nota: Em geral é mais fácil selecionar conjuntos de molduras no painel Molduras do que na janela do documento. Para obter mais informações, veja Como selecionar molduras e conjuntos de molduras no painel Molduras.

Para selecionar uma outra moldura ou conjunto de molduras, seguir um dos procedimentos abaixo:

l Para selecionar a moldura ou conjunto de molduras anterior ou seguinte no mesmo nível hierárquico que a seleção atual, pressionar a tecla Alt e a seta à esquerda ou Alt e a seta à direita e a seta à esquerda. Ao utilizar essas teclas, é possível alternar entre as molduras e conjuntos de molduras na ordem em que são definidos no arquivo do conjunto de molduras.

l Para selecionar o conjunto-pai de molduras (o conjunto de molduras que contém a seleção atual), pressionar Alt e seta para cima.

l Para selecionar a primeira moldura -filha ou conjunto-filho de molduras do conjunto de molduras atualmente selecionado (isto é, primeiro na ordem em que eles são definidos no arquivo do conjunto de molduras), pressionar Alt e seta para baixo.

Como abrir um documento em uma moldura

Pode-se especificar o conteúdo inicial de uma moldura inserindo o novo conteúdo em um documento vazio em uma moldura ou abrindo um documento existente em uma moldura.

Para abrir um documento existente em uma moldura:

1. Coloque o ponto de inserção em uma moldura. 2. Escolha Arquivo > Abrir na moldura. 3. Selecione um documento a ser aberto na moldura e clique em OK.

O documento é exibido na moldura.

4. Para tornar esse documento o padrão a ser exibido na moldura quando o conjunto de molduras for aberto em um navegador, salve o conjunto de molduras. Para obter mais informações, veja Como salvar arquivos de moldura e de conjunto de molduras.

Como salvar arquivos de moldura e de conjunto de molduras

Para poder visualizar um conjunto de molduras em um navegador, é necessário salvar o arquivo do conjunto de molduras e todos os documentos que serão exibidos nas molduras. É possível



salvar cada arquivo do conjunto de molduras e o documento com moldura individualmente ou salvar o arquivo do conjunto de molduras e todos os documentos que são exibidos em molduras de uma só vez.

Ao utilizar ferramentas visuais no Dreamweaver para criar um conjunto de molduras, cada novo documento que é exibido em uma moldura recebe um nome de arquivo padrão. Por exemplo: o primeiro arquivo do conjunto de molduras é denominado UntitledFrameset-1, enquanto o primeiro documento em uma moldura é denominado UntitledFrame-1.

Ao selecionar um dos comandos de salva, é exibida uma caixa de diálogo, pronta para salvar um documento com o nome de arquivo padrão. Como os nomes de arquivo padrão são muito semelhantes, pode ser difícil determinar qual documento está sendo salvo. Para identificar a moldura que exibe o documento que está sendo salvo, veja o contorno da sele ção da moldura na janela do documento, na visualização do projeto.

Para salvar um arquivo de conjunto de molduras:

1. Selecione o conjunto de molduras no painel Molduras ou na janela do documento. 2. Escolha uma dentre as opções a seguir:

¡ Para salvar o arquivo do conjunto de molduras, escolher Arquivo > Salvar o conjunto de molduras.

¡ Para salvar o arquivo de conjunto de molduras como um novo arquivo, escolha Arquivo > Salvar o conjunto de molduras como.

Caso o arquivo do conjunto de molduras não tenha sido salvo anteriormente, esses dois comandos serão equivalentes.

Para salvar um documento que é exibido em uma moldura:

Clique na moldura e, em seguida, escolher Arquivo > Salvar a moldura ou Arquivo > Salvar a moldura como.

Para salvar todos os arquivos associados a um conjunto de molduras:

Escolha Arquivo > Salvar todas as molduras.

Isso salvará todos os documentos abertos no conjunto de molduras, incluindo o arquivo do conjunto de molduras e todos os documentos com moldura. Se o arquivo do conjunto de molduras ainda não tiver sido salvo, uma borda mais espessa será exibida ao redor do conjunto de molduras na visualização do projeto e uma caixa de di álogo permitirá escolher um nome de arquivo. Em seguida, para cada moldura que ainda não tiver sido salva, será exibida uma borda



mais espessa ao redor da moldura e uma caixa de di álogo permitirá escolher um nome de arquivo.

Nota: Se o comando Arquivo > Abrir na moldura tiver sido utilizado para abrir um documento em uma moldura, ao salvar o conjunto de molduras, o documento aberto na moldura se tornará o documento padrão a ser exibido naquela moldura. Se não desejar que o documento seja o padrão, não salvar o arquivo do conjunto de molduras.

Visualização e definição das propriedades da moldura

Utilize o inspetor de propriedades para exibir e definir a maioria das propriedades da moldura. Para alterar a cor do fundo de uma moldura, definir a cor de fundo do documento na moldura.

Para exibir ou definir as propriedades da moldura:

1. Selecione uma moldura, seguindo um dos procedimentos abaixo: ¡ Mantenha pressionada a tecla Alt e clique em uma moldura na visualização do

projeto da janela do documento. ¡ Clique em uma moldura no painel Molduras.

2. Escolha Janela > Propriedades para abrir o inspetor de propriedades caso ainda esteja fechado.

3. Para examinar todas as propriedades das molduras, clique na seta de expansão, no canto

inferior direito do inspetor de propriedades.

Para obter informações sobre como definir opções específicas no inspetor de propriedades da moldura, veja Definição das op ções do inspetor de propriedades da moldura.

Para alterar a cor do fundo de um documento em uma moldura:

1. Coloque o ponto de inserção na moldura. 2. Escolha Modificar > Propriedades da página. 3. Clique no menu pop-up Fundo para selecionar uma cor.


Visualização e defini ção das propriedades de um conjunto de molduras

Definição das propriedades do documento

Visualização e definição das propriedades de um conjunto de molduras



Utilize o inspetor de propriedades para exibir e definir a maioria das propriedades dos conjuntos de molduras. Para definir o título do conjunto de molduras selecionado, utilizar a caixa de diálogo Propriedades da página ou o campo Título na barra de ferramentas da janela do documento.

Para exibir ou definir propriedades de um conjunto de molduras:

1. Selecione um conjunto de molduras, seguindo um dos procedimentos abaixo: ¡ Clique em uma borda entre duas molduras no conjunto de molduras da visualização

do projeto da janela do documento. ¡ Clique na borda que circunda um conjunto de molduras no painel Molduras.

2. Escolha Janela > Propriedades para abrir o inspetor de propriedades caso ainda esteja fechado.

3. Para examinar todas as propriedades dos conjunto de molduras, clique na seta de expansão, no canto inferior direito do inspetor de propriedade.

Para obter informações sobre como definir opções específicas no inspetor de propriedades do conjunto de molduras, veja Definiçãodas opções do inspetor de propriedades de um conjunto de molduras.

Para definir um título para um documento do conjunto de molduras:

1. Selecione um conjunto de molduras, seguindo um dos procedimentos abaixo: ¡ Clique em uma borda entre duas molduras no conjunto de molduras da visualização

do projeto da janela do documento. ¡ Clique na borda que circunda um conjunto de molduras no painel Molduras.

2. No campo T ítulo da barra de ferramentas do documento, digite um nome para o documento.

Quando um visitante vê o conjunto de molduras em um navegador, o título é exibido na barra de títulos do navegador.


Visualização e defini ção das propriedades da moldura

Definição das propriedades do documento

Utilização da barra de ferramentas do documento

Como controlar um conteúdo de moldura com links

Para utilizar um link de uma moldura para abrir um documento em outra moldura, é necessário definir um destino para o link. O atributo target de um link especifica a moldura ou janela na qual o conteúdo com link será aberto. Por exemplo: se a barra de navegação estiver na moldura esquerda e se desejar que o material com link seja exibido na moldura principal de conteúdo à



direita, será necessário especificar o nome da moldura principal de conteúdo como destino para cada um dos links da barra de navegação. Quando um visitante clica em um link de navegação, o conteúdo especificado é aberto na moldura principal.

Para selecionar uma moldura na qual o arquivo será aberto, utilizar o menu pop-up Destino do inspetor de propriedades. É possível definir um arquivo para substituir o documento que está sendo exibido em outra moldura, para ser exibido no lugar do conjunto de molduras inteiro, para ser exibido na moldura na qual o link estava (não escolhendo um destino) ou para ser aberto em uma nova janela do navegador.

Para utilizar uma moldura como destino:

1. Na visualização do projeto, selecione um texto ou um objeto. 2. No campo Link do inspetor de propriedades, siga um dos procedimentos abaixo:

¡ Clique no ícone de pasta e selecionar o arquivo ao qual será vinculado. ¡ Arraste o ícone Indicar o arquivo para selecionar o arquivo ao qual será vinculado.

3. No menu pop-up Destino, escolha a moldura ou janela na qual o documento vinculado deverá ser exibido.

¡ Se as molduras tiverem sido nomeadas no inspetor de propriedades, seus nomes serão exibidos nesse menu. Selecione uma moldura com nome para abrir o documento vinculado nessa moldura.

Nota: Os nomes de moldura serão exibidos apenas ao editar um documento dentro de um conjunto de molduras. Ao editar um documento na própria janela do documento, fora do conjunto de molduras, os nomes das molduras não serão exibidos no menu pop-up Destino. Se estiver editando um documento fora do conjunto de molduras, será possível digitar o nome da moldura de destino na caixa de texto Destino.

¡ _blank abre o documento vinculado em uma nova janela do navegador e deixa a janela atual inalterada.

¡ _parent abre o documento com link no conjunto-pai de molduras da moldura na qual o link será exibido, substituindo o conjunto de molduras inteiro.

¡ _self abre o link na moldura atual, substituindo o conteúdo desta. ¡ _top abre o documento com links na janela atual do navegador, substituindo todas

as molduras.

Dica: Se estiver vinculando a uma página fora do seu site, utilizar sempre target="_top" ou target="_blank" para garantir que a página não pareça fazer parte do seu site.


Definição das opções do inspetor de propriedades da moldura

Como tratar um navegador que não pode exibir molduras

O Dreamweaver permite especificar o conteúdo a ser exibido em navegadores com base em texto e em navegadores gráficos mais antigos que não contam com suporte a molduras. Esse conteúdo é armazenado no arquivo do conjunto de molduras, contido em uma tag noframes.



Quando um navegador que não conta com suporte a molduras carrega o arquivo do conjunto de molduras, ele exibe apenas o conteúdo delimitado pela tag noframes.

Nota: O conteúdo na área noframes deve ser maior do que apenas uma observação que diz “É necessário fazer upgrade para um navegador que pode lidar com molduras”. Algumas pessoas têm boas razões para utilizar um sistema que não permite a exibi ção de molduras. Tentar tornar o conteúdo o mais acessível possível para tais visitantes.

Para fornecer conteúdo a navegadores que não contam com suporte a molduras:

1. Escolha Modificar > Conjunto de molduras > Editar o conteúdo NoFrames.

O Dreamweaver limpa a visualização do projeto e as palavras “Conteúdo NoFrames” são exibidas na parte superior da visualização do projeto.

2. Para criar o conteúdo NoFrames, siga um dos procedimentos abaixo: ¡ Na janela do documento, digite ou insira o conteúdo da mesma maneira que faria

para um documento comum. ¡ Escolha Janela > Inspetor de código, posicione o ponto de inserção entre as tags

body que são exibidas dentro das tags noframes e digitar o código HTML do conteúdo.

3. Escolha novamente Modificar > Conjunto de molduras > Editar o conteúdo NoFrames para retornar à exibi ção normal do documento do conjunto de molduras.

Utilização de comportamentos JavaScript com molduras

Há vários comportamentos JavaScript e comandos relacionados à navegação que são particularmente apropriados para utilização com molduras.

A ação Definir o texto da moldura substitui o conteúdo e a formatação de determinada moldura pelo conteúdo especificado. O conteúdo pode incluir qualquer HTML válido. Utilize esta ação para exibir informações de modo dinâmico em uma moldura (veja Defina o texto da moldura).

A ação Ir para a URL abre uma nova página na janela atual ou na moldura especificada. Esta ação é particularmente útil para alterar o conteúdo de duas ou mais molduras com um clique (veja Ir para a URL).

O comando Inserir barra de navegação adiciona uma barra de navegação a uma página; após inserir uma barra de navegação, é possível anexar comportamentos às suas imagens e definir qual imagem será exibida com base nas ações de um visitante. Por exemplo: é recomendável mostrar a imagem de um botão no estado Ativo ou Inativo para permitir que o visitante saiba qual página de um site está sendo exibida (veja Inserção de uma barra de navegação).

O comando Inserir menu de salto permite configurar uma lista de menus de links que abrem arquivos em uma janela do navegador quando clicados. É possível ainda designar uma janela ou moldura como destino, na qual o documento é aberto (veja Inserção de um menu de salto).



Referência


Definição das opções do inspetor de propriedades da moldura

Utilize o inspetor de propriedades para nomear uma moldura e definir as bordas e margens.

Dica: Para que um link altere o conteúdo de outra moldura, é necessário nomear a moldura de destino. Para facilitar a posterior criação de links entre molduras, nomear cada uma das molduras ao criá-las.

Para especificar as propriedades da moldura selecionada:

1. Nomear a moldura.

Nome da moldura é o nome utilizado pelo atributo target de um link ou por um script para se referir à moldura.

Nota: O nome de uma moldura deve ser uma só palavra; são permitidos os sinais de sublinhado (_), mas não hífens ( -), pontos (.) e espaços. O nome de uma moldura deve iniciar com uma letra (em vez de um número). Os nomes de molduras fazem distinção entre maiúsculas e minúsculas. Certifique-se de que não foram utilizadas as palavras reservadas do JavaScript (por exemplo: top ou navigator) como nomes de molduras.

2. Altere as opções a seguir, conforme desejado:

A opção Src especifica o documento de origem a ser exibido na moldura. Clique no ícone de pasta para procurar e selecionar um arquivo. Também é possível abrir um arquivo em uma moldura posicionando ali o ponto de inserção e escolhendo Arquivo > Abrir na moldura.

A opção Rolar especifica se as barras de rolagem serão exibidas na moldura. A definição dessa opção como Padrão não determina um valor para o atributo correspondente e permite que cada navegador utilize seu valor padrão. A definição padrão da maioria dos navegadores é Autom., o que significa que as barras de rolagem serão exibidas apenas quando não houver espaço suficiente em uma janela do navegador para exibir o conteúdo completo da moldura atual.

A opção Sem redimens. evita que os visitantes arrastem as bordas da moldura para redimensioná-la em um navegador (sempre é possível redimensionar molduras no Dreamweaver; essa opção aplica-se somente a visitantes que visualizam as molduras em um navegador)



A opção Bordas mostra ou oculta as bordas da moldura atual quando exibida em um navegador. Escolha a opção Bordas para uma moldura anula as definições de borda do conjunto de molduras. As opções são Sim (mostrar bordas), Não (ocultar bordas) e Padrão. A definição padrão da maioria dos navegadores é mostrar as bordas, exceto se o conjunto-pai de molduras tiver a opção Bordas definida como Não. Uma borda fica oculta apenas quando todas as molduras que a compartilham têm a opção Bordas definida como Não ou quando a propriedade Bordas do conjunto-pai de molduras está definida como Não e as molduras que a compartilham têm a opção Bordas definidas como Padrão.

A opção Cor da borda define uma cor para todas as bordas da moldura. Essa cor se aplica a todas as bordas que tocam a moldura e anula a cor da borda especificada do conjunto de molduras.

Nota: Existe uma l ógica subjacente, na qual as bordas das molduras têm determinada cor de borda aplicada a elas, mas essa lógica é complexa; pode ser difícil compreender por que certas bordas mudam de cor quando se especifica uma cor de borda. Para obter informações detalhadas sobre os efeitos da especificação das cores das bordas, veja documento sobre molduras e conjuntos de molduras.

3. Defina as opções de margem a seguir, se desejar (se as opções não estiverem visíveis, clique na seta de expansão, no canto inferior direito do inspetor de propriedades):

A opção Largura da margem define a largura em pixels das margens esquerda e direita (o espaço entre as bordas da moldura e o seu conteúdo).

A opção Altura da margem define a altura em pixels das margens superior e inferior (o espaço entre as bordas da moldura e o seu conteúdo).

Nota: A defini ção da largura e da altura da margem de uma moldura não é o mesmo que a definição das margens na caixa de diálogo Modificar > Propriedades da página.


Visualização e defini ção das propriedades da moldura

Definiçãodas opções do inspetor de propriedades de um conjunto de molduras

Definiçãodas opções do inspetor de propriedades de um conjunto de molduras

Utilize as propriedades dos conjuntos de molduras para definir bordas e tamanhos das molduras de um conjunto de molduras.

A defini ção da propriedade de uma moldura anula a defini ção dessa propriedade em um conjunto de molduras. Por exemplo: a definição das propriedades da borda em uma moldura anula essas mesmas propriedades definidas no conjunto de molduras.

Para definir tamanhos aproximados de molduras, arrastar as bordas da moldura na visualização do projeto da janela do documento. Depois, utilizar o inspetor de propriedades para especificar os tamanhos exatos e o espaço que o navegador alocará para uma linha ou coluna de molduras quando o tamanho da janela do navegador não permitir que as molduras sejam exibidas no tamanho máximo.



Para especificar as propriedades da borda do conjunto de molduras selecionado:

Alterar as opções a seguir, conforme desejado:

A opção Bordas determina se as bordas dever ão ser exibidas ao redor das molduras quando o documento for exibido em um navegador. Para exibir as bordas, selecione Sim; para evitar que o navegador exiba as bordas, selecione Não. Para permitir que o navegador determine como as bordas serão exibidas, selecionar Padrão.

A opção Largura da borda especifica uma largura para todas as bordas no conjunto de molduras.

A opção Cor da borda define uma cor para as bordas. Utilize o seletor de cores para selecionar uma cor ou digitar o valor hexadecimal de uma cor.

Para definir tamanhos de moldura para linhas e colunas do conjunto de molduras selecionado:

1. Clique em uma guia no lado esquerdo da área Seleção de lin./col. para selecionar uma linha ou clique em uma guia na parte superior para selecionar uma coluna.

2. No campo Valor, digite uma altura para a linha selecionada ou uma largura para a coluna

selecionada. 3. Para especificar quanto espaço o navegador aloca para cada moldura, escolha entre as

opções a seguir no menu Unidades:

A opção Pixels define o tamanho da coluna ou linha selecionada como um valor absoluto. Esta é a melhor opção para as molduras que deverão ter sempre o mesmo tamanho, como uma barra de navegação. As molduras com tamanhos especificados em pixels têm espaço alocado antes das molduras com tamanhos especificados como valor percentual ou relativo. A abordagem mais comum para tamanhos de molduras é definir uma moldura esquerda com uma largura fixa em pixels e definir uma moldura direita com um valor relativo, o que permite que a moldura direita seja esticada para ocupar todo o espaço restante após a largura em pixels ter sido alocada.

Nota: Se todas as suas larguras estiverem especificadas em pixels e um visitante vir o conjunto de molduras em um navegador muito largo ou muito estreito para a largura especificada, as molduras alongarão ou diminuirão proporcionalmente a fim de preencher o espaço disponível. O mesmo se aplica a alturas especificadas em pixels. Portanto, geralmente é uma boa idéia especificar pelo menos um valor de largura e de altura como relativos.

A opção Percentagem especifica que a coluna ou linha selecionada deve ser um percentual da largura ou altura total de seu conjunto de molduras. Para as molduras com unidades definidas como Percentagem, o espaço será alocado após o das molduras definidas em pixels, porém antes das molduras com unidades definidas como Relativo.

A opção Relativo especifica que a coluna ou linha selecionada seja alocada com o restante do espaço disponível após as molduras em Pixels e Percentagem terem seu espaço alocado. O espaço restante é dividido proporcionalmente entre as molduras com tamanhos definidos como Relativo.

Nota: Ao escolher Relativo no menu Unidades, qualquer número digitado no campo Valor



desaparecerá; se desejar especificar um número, será necessário redigitá-lo. No entanto, se houver apenas uma linha ou coluna definida como Relativo, não será necessário digitar um número, uma vez que essa linha ou coluna receberá todo o espaço restante após as outras linhas e colunas terem seu espaço alocado. Para ter certeza da compatibilidade total entre os diferentes navegadores, digite 1 no campo Valor, que é equivalente a digitar nenhum valor.

As alocações de espaço para molduras são complicadas. Para obter informações detalhadas, veja documento sobre molduras e conjuntos de molduras.

