Estrutura de um site em tabelas
RSS feed do site?
Publicado em: 05/01/2007
Área: DreamWeaver
Visualizações: 9.763
Comentário(s): 10
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 !
- 1992 - O ano em que Bill Gates previu o futuro dos computadores
O computador terá o tamanho que você quiser. Poderá ser do tamanho da .
- Photoshop: Aplicando tatuagem em uma pessoa
Aqui veremos como aplicar uma tatuagem a qualquer pessoa de uma maneir.
- Dicas para tornar seu site conhecido
Público é um item fundamental para se ter um site. De que adianta você.
- Imagens em quebra cabeça
Veja como transformar suas imagens em quebra cabeças de uma maneira be.
- Vídeo Aula Sony vegas - Criando efeito de filme antigo
Olá pessoal, estou aqui para mais uma vídeo aula, desta vez vou mostra.
- Tutorial: Criar álbum de fotos no dreamweaver
Neste tutorial irei mostrar como criar um álbum de fotos no dreamweave.
- Tutorial: Formulário de contato no Dreamweaver
Vamos desenvolver um simples formulário de contato, bem simples mesmo,.
- Aprenda como melhorar seu código
Aprenda com duas ferramentas do Dreamweaver como validar e como organi.
- Criando rapidamente uma String de Conexão em ASP/Dreamweaver
Nesse primeiro artigo eu vou ensinar a criar uma string de conexão par.
- Modo Código ou modo Design?
Veja aqui, nesta coluna a difrença entre os dois modos utilizados pelo.
- Anuncie |
- Cadastro |
- Divulgue-nos |
- Fale Conosco |
- Layouts |
- Links |
- Mapa do site |
- Colunas populares |
- PageRank Checker |
- RSS |
- Vídeos
© 2005 - 2009 - Oficina da Net - v 4.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.
- Publicado em: 03/03/2007 - 20:30
Olha só Guilherme esse tutorial tah bem legal, explica direitinho, gostei, vc fez sua parte, agora a galera tem um pouco de dificuldade e no designer do site depois das tabelas, mais isso agora não e mais problema seu né, valeu pelo tutoria ajudou meu primo que tinhas muitas duvidas sobre o assunto!
- Publicado em: 26/03/2007 - 16:03
Ajudou bastante, agora o meu problema esta justamente em como colocar os dados em cada parte do site e fazer uma~formatação bacana do texto...
Leonardo
- Publicado em: 11/06/2007 - 14:46
pow mtt bom o tuto.. mas qria saber na hr de colocar os links! pq qd eu faço o link ao inves dele abrir na celula "conteudo" ele abre na pagina toda...
Tarcisio de Farias Cladas
- Publicado em: 07/10/2007 - 19:58
broder essa tutorial é muito bom, agradeço muito por vcter posto ele... esse tutorial é muito importante para quem está iniciando agora.. valeu broder...são luis /MA
Tarcisio de Farias Cladas
- Publicado em: 07/10/2007 - 20:05
broder eu so tenho uma duvida para tirar..? ve so: eu fiz uma tabela de ( <table width="427" height="347" ) e centralizei ela... so que eu gostia de colocar algumas fotos do lado esquerdo ou direito dela decendo tipo de cima para baixo.. só que quando eu coloco as imahem do tamanha 100x60 em vez de ficar tudo organizado de cima para baixo ,as imagens vam empurrando a tabela pra baixo...gostaria que se vc soubesse, me respondesse.. fico em espera
Le
- Publicado em: 19/05/2008 - 21:11
Esse tutorial é muito bom, eu que estou iniciando no programa achei desconplicado. Continue postando mais tutoriais...
Anderson
- Publicado em: 23/07/2008 - 13:27
gostei muito, olha vc pode explicar como faço pra diminuir espaço emtre as linhas o maximo possivel! abraço
Márcio
- Publicado em: 13/11/2008 - 11:59
Eu estou iniciando agora no Dreamweaver e esse tutorial esta bem detalhado. Parabens.
Rafinha
- Publicado em: 14/12/2008 - 21:49
Muito bom! Parabens!
Giselle
- Publicado em: 02/01/2009 - 21:09
pow gostei bastante da dica... espero q continue nos ajudando... vlw xauuuuuuuuuuu