Início

3.2 Organize as suas páginas com tabelas As tabelas são o elemento de formatação mais importante numa página web. Nas páginas web, as tabelas não são só utilizadas para apresentar conjuntos interrelacionados de dados. Uma página web típica possui inúmeras tabelas invisíveis que dividem a página em áreas bem definidas. Por exemplo, a página típica com uma barra de links à esquerda e um logotipo no topo, pode ser definida simplesmente com recurso a uma tabela de 2 linhas por 2 colunas: Logo do Site Aqui Nome do Site Aqui Barra de Links Página Inicial Produtos Link 1 Link 2 Link 3 Link 4 Link 5 Contacte-nos Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto No exemplo acima os limites da tabela foram deixados visíveis apenas para exemplificar. Baseado numa estrutura como esta, poderá adicionar imagens e outros elementos para construir uma página com design apelativo. Em páginas web pode colocar tabelas dentro de outras tabelas. Não há limite no número de tabelas que pode usar. Como exemplo vamos colocar uma nova tabela na zona do conteúdo para adicionar alguns anúncios: Logo do Site Aqui Nome do Site Aqui Barra de Links Página Inicial Produtos Link 1 Link 2 Link 3 Link 4 Link 5 Contacte-nos Anúncio 1 Aqui Anúncio 2 Aqui Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Agora vamos aprender a trabalhar com tabelas, reproduzindo a última imagem passo a passo.   Nota Importante: Deverá desactivar qualquer bloquador de janelas pop-up que tenha instalado enquanto edita as suas páginas. No bloqueador que vem incluído com o Internet Explorer poderá ser desactivado apenas para o seu site. Outros bloqueadores, como por exemplo o do Google poderão ter de ser completamente desactivados enquanto edita as suas páginas. Se possuir um bloqueador activo, as janelas de propriedades da página, imagens, links, tabelas e pré-visualização podem não ser apresentadas.   Para comecar, crie uma nova página em branco com o seu Easy Web Site Creator.   Clique no botão de tabelas na barra de ferramentas do editor de páginas:   Na janela de propriedades da tabela, seleccione as opções de acordo com a imagem abaixo:   Por enquanto vamos deixar os limites da tabela visíveis (Tamanho do Limite = 1). Deverá obter uma página semelhante à figura seguinte: Note que a sua página vai começar por ter 700 pixeis de altura, mas não ficará limitada a essa dimensão. À medida que adicion mais texto ou imagens ele alargará automaticamente.   A seguir, clique com o botao direito do rato no centro da célula do topo esquerdo da sua tabela e escolha Cell > Propriedades da Célula. Preencha a Largura e Altura como na imagem abaixo:     Deverá obter uma tabela como na figura seguinte:   Altere o alinhamento vertical do texto nas duas células inferiores para Topo, fazendo click com o botão direito do rato em cada uma das células e seleccionando Cell > Propriedades da Célula.     Escreva algum texto nas quatro células de modo a ficar parecido com:   Logo do Site Aqui Nome do Site Aqui Barra de Links Página Inicial Produtos Link 1 Link 2 Link 3 Link 4 Link 5 Contacte-nos Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Agora vamos adicionar a nosa tabela para anúncios. Coloque o cursor no início da primeira linha de texto da célula inferior direita e prima o botão de tabelas . Preencha a janela que aparece de acordo com a figura seguinte: Deverá obter algo como:   Logo do Site Aqui Nome do Site Aqui Barra de Links Página Inicial Produtos Link 1 Link 2 Link 3 Link 4 Link 5 Contacte-nos Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto   Faça clique com o botão direito do rato em cada uma das células da tabela de anúncios e seleccione Cell > Propriedades da Célula     Clique no botão Seleccione... ao lado do campo Cor do Fundo e escolha uma cor:     Escreva 'Anúncio 1 Aqui' e 'Anúncio 2 Aqui' nas células da tabela de anúncios. Deverá obter algo parecido com:   Logo do Site Aqui Nome do Site Aqui  Barra de Links Página Inicial Produtos Link 1 Link 2 Link 3 Link 4 Link 5 Contacte-nos Anúncio 1 Aqui Anúncio 2 Aqui Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto   Finalmente pode fazer clique com o botão direito do rato sobre a tabela principal e seleccionar Propriedades da Tabela. No campo Tamanho do Limite coloque 0. Os limites da tabela principal deixarão de ser visíveis para os visitantes do seu site. Prima Gravar & Pré-visualizar e uma nova janela se abrirá mostrando como a sua página irá aparecer para os visitantes. Logo do Site Aqui Nome do Site Aqui  Barra de Links Página Inicial Produtos Link 1 Link 2 Link 3 Link 4 Link 5 Contacte-nos Anúncio 1 Aqui Anúncio 2 Aqui Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto Conteúdo Texto      Conteúdo Texto A estrutura da página está completa! Para terminar a sua página formatada com tabelas basta substituir os textos actuais pelos conteúdos definitivos: coloque uma imagem com o logotipo na célula superior esquerda, coloque os seus links reais, coloque imagens e links para os anúncios e escreva o texto principal.   Na secção 3.4 e na secção 3.5 continuaremos a desenvolver esta página modelo colocando links e imagens.   Seguinte: Utilize modelos

Anterior  Seguinte

Veja também:

Utilize modelos Ligando as páginas Inserindo imagens O editor de páginas

Início

Copyright © AWE Editions, Lda. 2006

This page was created with AWE Easy Web Site Creator