Parte IV Como projetar um layout de página

Parte IV Como projetar um layout de página Parte IV Utilize as ferramentas de projetos visuais do Dreamweaver para criar layouts de página sofisticados. Esta seção contém os seguintes capítulos: Capítulo 16, Apresentação do conteúdo com tabelas Capítulo 17, Definição do layout de páginas na visualização de layout Capítulo 18, Utilização de molduras

CAPÍTULO 16 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: Adicionar conteúdo Adicionar, excluir, dividir e mesclar linhas e colunas Modificar propriedades de tabelas, linhas ou células para adicionar cor e alinhamento Copiar e colar células Observação: 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 Capítulo 17, Definição do layout de páginas na visualização de layout, na página 257). Este capítulo contém as seções a seguir: Como inserir uma tabela, na página 242 Como adicionar conteúdo a uma célula da tabela, na página 242 Como importar dados tabulares, na página 243 Como selecionar elementos da tabela, na página 243 Formatação de tabelas e células, na página 245 Como redimensionar tabelas, na página 249 Como alterar a largura da coluna e a altura da linha, na página 249 Como adicionar e remover linhas e colunas, na página 250 Como aninhar tabelas, na página 253 Como recortar, copiar e colar células, na página 253 Como ordenar tabelas, na página 255 Como exportar dados da tabela, na página 256 241

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, na página 363. 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. Observação: 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, clique no botão Ajuda da caixa de diálogo. 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 Capítulo 19, Como inserir e formatar texto, na página 291 e Capítulo 20, Como inserir imagens, na página 319. 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: Pressione a tecla Tab para passar à célula seguinte. Ao pressionar Tab na última célula de uma tabela, outra linha é adicionada automaticamente à tabela. Pressione Shift+Tab para voltar à célula anterior. Pressione as teclas de seta para mover para cima, para baixo, esquerda ou direita. 242 Capítulo 16

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-eví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, clique no botão Ajuda da caixa de diálogo. Tópicos relacionados Capítulo 34, Como exibir os registros de bancos de dados, na página 569 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: Modificar a aparência das células selecionadas ou do texto ali contido. Veja Formatação de tabelas e células, na página 245. Copie e colar as células. Veja Como recortar, copiar e colar células, na página 253. 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. Apresentação do conteúdo com tabelas 243

Para selecionar uma tabela inteira, seguir um dos procedimentos abaixo: Clique no canto superior esquerdo da tabela ou em qualquer ponto da extremidade direita ou inferior. 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. Clique em uma célula da tabela e selecione Modificar > Tabela > Selecionar a tabela. 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: Clique na célula e, em seguida, selecione a tag td no seletor de tags, no canto inferior esquerdo da janela do documento. 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. Clique em uma célula da tabela e selecione a tag td no inspetor de tags. 244 Capítulo 16

Para selecionar uma linha ou um bloco retangular de células, seguir um dos procedimentos abaixo: Arrastar de uma célula a outra. 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, na página 246, Exibição e definição das propriedades de célula, linha e coluna, na página 247 e Como utilizar um esquema de desenho para formatar uma tabela, na página 248. Para formatar o texto nas tabelas, é possível aplicar formatação ao texto selecionado ou utilizar estilos. Consulte o Capítulo 19, Como inserir e formatar texto, na página 291. 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. Observação: Quando se definem propriedades em uma coluna, o Dreamweaver modifica os atributos da tag td correspondente a cada célula da coluna. Apresentação do conteúdo com tabelas 245

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, na página 243. 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, clique no botão Ajuda do inspetor de propriedades. Tópicos relacionados Como utilizar um esquema de desenho para formatar uma tabela, na página 248 246 Capítulo 16

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. Observação: 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, na página 243. 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, clique no botão Ajuda do inspetor de propriedades. Tópicos relacionados Como selecionar elementos da tabela, na página 243 Apresentação do conteúdo com tabelas 247

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. Observação: 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, clique no botão Ajuda da caixa de diálogo. 3 Clique em Aplicar ou em OK para formatar a tabela com o estilo selecionado. 248 Capítulo 16

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. Observação: 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. Tópicos relacionados Como selecionar elementos da tabela, na página 243 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, na página 246. Para redimensionar uma coluna ou uma linha visualmente, siga um dos procedimentos abaixo: 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. 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, clique no botão Ajuda do inspetor de propriedades. Apresentação do conteúdo com tabelas 249

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. Tópicos relacionados Como selecionar elementos da tabela, na página 243 Como redimensionar tabelas, na página 249 Codificação no Dreamweaver, na página 201 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, clique no botão Ajuda da caixa de diálogo. 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. 250 Capítulo 16

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. Observação: O Dreamweaver não avisa quando as linhas ou colunas que contêm dados estão sendo excluídas. Tópicos relacionados Como selecionar elementos da tabela, na página 243 Como inserir uma tabela repetitiva, na página 481 Como exibir diversos registros, na página 576 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. Apresentação do conteúdo com tabelas 251

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, clique no botão Ajuda da caixa de diálogo. 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. 252 Capítulo 16

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. Apresentação do conteúdo com tabelas 253

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. Observação: 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). 254 Capítulo 16

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. Observação: 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, na página 251). 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, clique no botão Ajuda da caixa de diálogo. Apresentação do conteúdo com tabelas 255

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, clique no botão Ajuda da caixa de diálogo. 4 Clique em Exportar. 5 Na caixa de diálogo que for exibida, digite um nome para o arquivo e clique em Salvar. 256 Capítulo 16