Estrutura de um site em tabelas

7 Comente abaixo

Veja como e facil criar um site com tabelas

Nesse tutorial você aprenderá a utilizar tabelas.

A tabelas são utilizadas para você organizar sua página, com elas, seu site pode ficar milimetricamente perfeito, sem nenhum erro de alinhamento e de posição das imagens.



Para todos entenderem melhor, vamos montar a estrutura de um layout simples.

- Vamos inserir uma tabela, vamos chama-la de A.

- Clique no menu inserir / tabela ( ctrl+alt+t ).

- Uma janela aparecerá, e você deverá configura-la:



- Linhas: é o numero de linhas que a sua tabela terá,
nesse caso usaremos 3.

- Colunas: é o numero de colunas que a sua tabela terá,
nesse caso usaremos 3.

- Largura: é a largura da tabela (em pixels ou uma
porcentagem da página, ex: 90% da largura da página), nesse caso
usaremos 775px ou 78%.

- Preenchimento da célula: é o espaço
interno das células, nesse caso usaremos 0.

- Espacamento entre as células: é o espaço externo entre as células da tabela ( linhas e colunas ), nesse caso usaremos 0.

- Borda: é a largura da borda, nesse caso usaremos 0.

- Após inserir a tabela, você deverá arrastar a penúltima linha ( denominada linha A ) para baixo como mostra a figura:



- Feito isso, agora você irá arrastar as 2 colunas, a coluna B para a esquerda e a coluna C para a direita, como mostra a figura abaixo:



- Agora vamos fazer a parte do topo do site, para isso você irá unir as 3 células de cima da tabela e arrasta-las um pouco para baixo.

- Selecione as 3 células:



- Vá no menu Inspetor de propriedades ( Ctrl+F3) e clique em Mesclar as células selecionadas utilizando extensões:



- As 3 células se fundiram formando apenas uma célula.

- Faça o mesmo com as 3 células de baixo da tabela.

- Agora arraste-a um pouco para baixo:



Se você fez tudo certo, a estrutura do seu site ficou assim:




por favor comentem para que eu continue postando !

 

Compartilhe com seus amigos:
Mais de DreamWeaver
  • Limpando o Recent Items do Fireworks, Flash e Dreamweaver
    Limpando o Recent Items do Fireworks, Flash e Dreamweaver
  • Configurando um WebSite local no Dreamweaver - Parte II
    Configurando um WebSite local no Dreamweaver - Parte II
  • Configurando um WebSite local (IIS) - Parte I
    Configurando um WebSite local (IIS) - Parte I
  • Vídeo Aula - Criando Imagem Cambiável no DreamWeaver
    Vídeo Aula - Criando Imagem Cambiável no DreamWeaver
  • Como criar aplicações com PHP sem saber PHP parte 03
    Como criar aplicações com PHP sem saber PHP parte 03
Compartilhe com seus amigos:
últimos reviews
  • 8,4
    Review Samsung Galaxy K Zoom
    Nessas 2 últimas semanas passou por nossas mãos o potente Galaxy K Zoom, veja o que achamos dele.
  • 8,6
    Review Moto X - Segunda geração
    O aparelho da Motorola é a prova “viva” que o que está ótimo pode melhorar ainda mais.
  • 8,1
    Review Zenfone 5
    Tela de 5 polegadas, câmera de foto e vídeo superiores aos concorrentes, boa usabilidade e preço baixo. A Asus acertou n...

TOPO