Construção de uma tabela com cantos arredondados

Publicado em: 01/02/2004

Introdução

Este tutorial e uma adaptação do original que escrevi, para publicação no site da DWOnline (uma comunidade Dreamweaver).

Neste artigo abordarei o uso do (FW) Fireworks e (DW) Dreamweaver para obter um efeito de bordas arredondadas em tabelas. O objetivo é "quebrar" aquela apresentação fria, quadrada e padrão do formato retangular das tabelas tão usadas para definir layouts. É uma maneira bastante simples de se obter um visual diferente e o exemplo que vou seguir tem como finalidade apresentar a técnica geral. Com criatividade você conseguirá outros efeitos. ESTE TUTORIAL SUPÕE QUE VOCÊ TEM NOÇÕES BÁSICAS DE MANIPULAÇÃO DAS FERRAMENTAS DO FW e do .

O efeito final que a que nos propomos está ilustrado na figura abaixo:

Uma tabela com os quatro cantos arredondados.

Vamos assumir que o fundo geral da página é na cor cinza escuro (#666666) e o fundo da tabela é na cor cinza claro (#EEEEEE), como mostrado na figura acima.

Observe na figura abaixo uma visão "raio X" da tabela:

Trata-se de uma tabela com 03 linhas e 03 colunas. A célula marcada com o número 1 destina-se ao conteúdo (um texto no caso mais comum ou uma figura ou um formulário, etc..) da tabela. As células marcadas com o número 2 são os quatro cantos arredondados da tabela. Vamos admitir para o nosso exemplo que as células dos cantos têm as dimensões de 25 x 25 pixels.

Vamos ao FIREWORKS, construir os cantos arredondados. Existem várias maneiras de você criar os quatro cantos. Não está em discussão neste tutorial qual a melhor delas. Se você tem uma maneira diferente desta que usei, vá em frente! Use-á.

Parte 1 - FIREWORKS

Abra o FW - (Óbvio!) :-) Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento". Ajuste as dimensões de Canvas (palco, área de trabalho, tela, etc...) para Largura: 50 pixels - Altura: 50 pixels - Cor da Tela: transparente. Tecle OK.

Construa um quadrado de 50 x 50 ocupando todo o palco, sem bordas e com cor do preenchimento #666666. Atenção: o preenchimento do quadrado deve ser com mesma cor do fundo da página. A seguir construa um círculo com 50 px de diâmetro, sem bordas e com cor do preenchimento #EEEEEE. Atenção: o preenchimento do círculo deve ser com mesma cor do fundo da tabela. Você agora está com uma figura igual a mostrada abaixo:

Vamos agora transformar nossa figura em BITMAP. Selecione as duas figuras que você criou abra o menu "Modificar ===> Nivelar seleção" (ou tecle Ctrl+Alt+Shift+Z) e você agora tem uma imagen bitmap.

Ver figura abaixo: 1- Selecione a ferramenta "Cortar". 2- Ajuste suas dimensões para 25 x 25 e seu canto superior esquerdo em cima do canto superior esquerdo do bitmap criado. 3-Vamos cortar o canto arredondado superior esquerdo! Dê duplo clique dentro do "quadradinho" do cortar e Zás. 4- O primeiro canto está pronto. Exporte e salve com o nome sup_esq.gif

 

Vamos a construção dos três cantos restantes. Abra o arquivo recém criado sup_esq.gif Ver figura abaixo: Selecione o desenho e vá no menu "Modificar ===> Transformar ===> Inverter Horizontalmente"

Com essa ação você inverte a figura na horizontal e obtém o canto superior direito. "Salve" a figura como sup_dir.gif A estas alturas você já descobriu como construir as duas que faltam não é mesmo? O procedimento é o mesmo, selecione a figura que você acabou de "salvar" e vá ao menu "Modificar,Transformar,Inverter Verticalmente" você obtém a inf_dir.gif De modo semelhante obtenha inf_esq.gif

Abaixo estão os quatro cantos para você transferir para seu HD, caso não queira construí-los. Clique com botão direito do mouse sobre a figura e "Salvar figura como".

sup_esq.gif

sup_dir.gif

inf_esq.gif

inf_dir.gif

Parte 2 - DREAMWEAVER

Abra o - (Óbvio!) :-) Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento". Abra um novo documento (Página básica-HTML). Tecle OK.

Ajustando a cor do fundo da página; No menu "Modificar" selecione "Propriedades da Página" (ou tecle Ctrl+J), para abrir a caixa das Propriedades da página. Digite o Título da Página e ajuste a cor do fundo para #666666. Tecle OK Ver figura abaixo:

Inserindo a tabela; 1- selecione a aba "Tabelas"; 2- Clique no ícone das tabelas para abrir a caixa "Inserir Tabelas" (ou tecle Ctrl+Alt+T); 3- Ajuste os parâmetros de construção da tabela conforme a figura abaixo e tecle OK.

Selecione a aba "Layout" e a "Visualização padrão", para ter a tabela neste modo, na janela de visualização. Ver figura abaixo:

Vamos inserir as imagens dos cantos arredondados nas células correspondentes: Ver na figura acima: CÉLULA A - figura sup_esq.gif CÉLULA B - figura sup_dir.gif CÉLULA C - figura inf_esq.gif CÉLULA D - figura inf_esq.gif

Para inserir a figura na célula A: Clique dentro da célula; Menu "Inserir", "Imagem" (ou tecle Ctrl+Alt+I) para abrir a caixa de origem do arquivo de imagem. Selecione a imagem sup_esq.gif e tecle OK. Faça o mesmo com os três cantos restantes e você terá uma imagem como a figura abaixo:

Coloque o cursor em cima da linha 1 e arraste para a posição 2. Faça o mesmo de 3 para 4. Sua tabela ficará como na figura abaixo:

2- mude a cor do fundo da tabela digitando a cor #eeeeee no campo correspondente. 3- clique no ícone de tabela e sua tabela assumirá o aspecto abaixo:

Coloque o cursor na célula F e digite seu texto. Nota: Como você já deve ter percebido as células E e G podem ser preenchidas com conteúdo, mas sem ultrapassar sua altura, no caso 25 px. A célula F pode expandir-se a vontade sem interferir com os cantos arredondados. (Faça experiências para analisar!).

Abaixo um exemplo de aplicação de tabela com canto arredondado construido na tabela gerada conforme esta matéria:

E isso pessoal!
E, agora a melhor parte do novo aprendizado. Os exercícios e pesquisas individuais e novas descobertas :-)
Crie outros arquivos e experimente:
...coloque cantos chanfrados na sua tabela;
...construa uma figura para inserir nas células E e G (ver segundo desenho acima), que se integre com os cantos!
...e milhares de outras combinações! ...DESCUBRA A VERSATILIDADE DAS FOLHAS DE ESTILO EM CASCATA. Um abraço e até a próxima.