Usando tabelas no Dreamweaver

 

Quando pensamos numa tabela, a primeira coisa que vem a nossa cabeça são dados tabulares, uma tabela como mostrado abaixo:

 

 

Numa página web o uso de uma tabela é muito mais abrangente, usamos tabelas também para exibir dados tabulares, mas principalmente para diagramar nosso site, veja o exemplo deste site fictício que desenhei como demonstração para este tutorial.

 

 

Este site foi criado a partir de uma tabela assim:

 

 

Para os primeiros exemplos de aprendizado, usaremos dados tabulares, mas é sempre bom lembrar que o principal uso de tabelas será a criação do layout do site.

 

Vamos montar uma tabela do primeiro exemplo acima.

 

1. Crie um novo arquivo no Dreamweaver.

 

2. Clique no Menu Insert/Table.

 

 

3. Após configurar como na imagem acima, clique em OK.

 

4. Preencha os dados como no exemplo do início da página.

 

Mesclando células

 

Vamos criar uma tabela como a do exemplo abaixo:

 

 

1. Crie uma tabela com 4 linhas e 4 colunas, 500 pixels de largura.

 

2. Selecione as 4 células da primeira linha.

 

3. Clique no botão “Merge selected cells using spans”, como mostrado na próxima figura.

 

 

4. Selecione a primeira e a segunda célula da segunda linha e mescle-as também.

 

5. Faça a mesma coisa com a terceira e a quarta células da segunda linha.

 

6. Preencha os dados e use os botões de alinhamento da barra de propriedades para fazer o mesmo alinhamento do exemplo.

 

Modificando largura e a altura de células

 

Vamos ver neste tópico como alterar a largura e a altura de linhas e colunas de uma tabela.

 

Crie uma tabela com 4 linhas e 5 colunas.

 

 

Vamos modificar a altura das linhas usando pixels de a largura das células usando porcentagem, cada linha vai ter 40 pixels de altura e cada coluna terá 20% de largura, para que todas fiquem iguais.

 

Modificando a altura das linhas

 

Para modificar a altura de uma linha selecione-a toda, posicionando o mouse a esquerda da linha como mostrado na figura abaixo e digite o valor 40 em H no lugar apontado pela seta vermelha na próxima imagem.

 

 

Para modificar a largura de uma célula, selecione-a toda, posicionando o mouse no topo da célula como mostra a figura abaixo e digite 20% no lugar apontado pela seta vermelha.

 

 

Alterando a margem interna da célula e o espaçamento entre as células.

 

Podemos configurar o espaçamento entre células (cellspacing) e a margem interna da célula (cellpadding) quando criamos inserimos a tabela e depois da tabela pronta usando a barra de propriedades.

 

Para configurar estes dois valores depois de inserida a tabela, devemos selecionar a tabela clicando na linha de borda como mostrado abaixo. No exemplo vou configurar o espaçamento entre células para 5 (o valor default é 2) e a margem interna da cela para 5 também.

 

 

Usando tabelas para criar o layout de um site

 

Vamos montar dois tipos de layouts bem básicos:

 

 

 

Os dois modelos tem em comum a largura de 760 pixels e a altura total de 420 pixels, isto faz com que o site caiba cheio num monitor de 15 polegadas com resolução de 800x600 (argh!!!!!), que é o que a maioria ainda usa.

 

Modelo 1

 

Insira uma tabela com as configurações abaixo, note que inicialmente só podemos configurar a largura.

 

 

Selecione a primeira linha inteira e mescle as células, e modifique sua altura para 60.

 

Selecione a 2ª linha e modifique sua altura para 360, clique na 1ª célula da segunda linha e modifique sua largura para 160, a segunda célula deve ter sua largura configurada para 600.

 

Você vai notar que quando aumentamos a altura de uma célula, o seu alinhamento vertical padrão é centralizado (middle), o ideal seria que este alinhamento fosse na parte superior (top) para colocar ai um menu por exemplo, para modificar o alinhamento para o topo observe a próxima figura.

 

 

Nos próximos tutoriais veremos como fazer os links e como usar a tag <IFRAME> para que as páginas internas sejam exibidas na célula grande da tabela.

 

Modelo 2

 

Insira uma tabela com as configurações da próxima figura.

 

 

Selecione a primeira linha, mescle suas células e modifique sua altura para 60.

 

Selecione a 2ª linha, modifique sua altura para 340.

 

Configure a largura da primeira coluna da segunda linha para 130, a segunda coluna para 500 e a terceira para 130. Selecione as 3 células da segunda linha e modifique seu alinhamento para Top.

 

Selecione a terceira linha, mescle suas células e modifique sua altura para 20.

 

FRONTPAGE - BÁSICO Criação de Páginas para Internet - Introdução Criando o Primeiro Arquivo HTML DREAMWEAVER - BÁSICO Introdução ao Dreamweaver MX 2004 Projeto Web – Parte 01 Projeto Web – Parte 04 Projeto Web – Parte 03 Criação de Tabelas no Dreamweaver Dreamweaver Basico - Começando a usar o DreamWeaver Dreamweaver Basico - Configurações de Definição de Sites Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 1 Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 2 Dreamweaver Basico - Definição Básica do Design e Inserção de Conteúdo Dreamweaver Basico - Criação de Links Dreamweaver Basico - Configuração de Links Usando Tabelas no DreamWeaver Usando Imagens no Dreamweaver Usando Modelos no Dreamweaver Conhecendo o Dreamweaver 8 Usando comportamentos para criar um menu pop up no Dreamweaver Usando a paleta Behaviors do Dreamweaver - Parte 1 Usando Camadas Para Exibir Dicas de Formulários Fazendo um Site com Templates Prontos no Dreamweaver HTML BÁSICO HTML Básico - Introdução à Internet HTML Básico - Alinhamento de Texto HTML Básico - Cabeçalhos e Formatação de Texto HTML Básico - Formatação de Texto HTML Básico - Criação e configuração de links HTML Básico - Criando Listas Ordenadas e Listas de Definição HTML Básico - Criação de Links Internos e Externos HTML Básico - Criação de Links Externos E Links de E-mail HTML Básico - Inserindo Imagens na Página HTML Básico - Introdução à Tabelas HTML Básico - Criação de Formulários - Parte 1 HTML Básico - Criação de Formulários - Parte 2 DREAMWEAVER - PROGRAMAÇÃO PHP Galeria de Fotos com Efeito Lightbox Dinâmica Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 1) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 2) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte Final) Alternando Cores da Tabela no Resultado de uma Consulta Como Criar um Contador de Visitas (Acessos) Criando Galeria de Fotos (Tiny SlideShow) Criando Ícone para URL Criando Recurso Imprimir Criando Sites Auto-Ajustáveis de Acordo com a Resolução Formulário de Contato com Envio de Dados por Email Galeria de Fotos com Efeito Lightbox e Upload Múltiplo de Imagens

CRIANDO UM APLICATIVO PARA UMA ACADEMIA Criando Aplicativo Para Academia - Parte 1 Criando Aplicativo Para Academia - Parte 2 Criando Aplicativo Para Academia - Parte 3 Criando Aplicativo Para Academia - Parte 4 Criando Aplicativo Para Academia - Parte 5 Criando Aplicativo Para Academia - Parte 6 Criando Aplicativo Para Academia - Parte Final WEBSPHERE Apresentando o WebSphere Application Server da IBM Instalação do WebSphere Application Server Configurando uma aplicação no WAS Configurando a segurança no WAS SISTEMA DE SALÃO DE BELEZA Sistema Salão de Beleza - Parte 1 Sistema Salão de Beleza - Parte 2 Sistema Salão de Beleza - Parte 3 Sistema Salão de Beleza - Parte 4 Sistema Salão de Beleza - Parte 5 Sistema Salão de Beleza - Parte 6 Sistema Salão de Beleza - Parte 7 Sistema Salão de Beleza - Parte 8 Sistema Salão de Beleza - Parte 9 Sistema Salão de Beleza - Parte 10 Sistema Salão de Beleza - Parte 11 Sistema Salão de Beleza - Parte 12 Sistema Salão de Beleza - Parte 13 Sistema Salão de Beleza - Parte 14 SISTEMA PARA GERENCIAMENTO DE IMÓVEIS Sistema Para Gerenciamento de Imóveis - Parte 01 Sistema Para Gerenciamento de Imóveis - Parte 02 Sistema Para Gerenciamento de Imóveis - Parte 03 Sistema Para Gerenciamento de Imóveis - Parte 04 Sistema Para Gerenciamento de Imóveis - Parte 05 Sistema Para Gerenciamento de Imóveis - Parte 06 Sistema Para Gerenciamento de Imóveis - Parte 07 Sistema Para Gerenciamento de Imóveis - Parte 08 Sistema Para Gerenciamento de Imóveis - Parte 09 Sistema Para Gerenciamento de Imóveis - Parte 10 Sistema Para Gerenciamento de Imóveis - Parte 11