Construção de uma Tabela com cantos arredondados
Autor: Tutoriais Photoshop | Publicado: 2010-04-22T22:04:00-03:00

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 - FIREWORKSAbra o FW - (Óbvio!)&nbsp;&nbsp;Tecle Ctrl + N ou selecione, Arquivo ===&gt; 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 ===&gt; 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.gifVamos 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 ===&gt; Transformar ===&gt; 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.gifAbaixo 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.gifsup_dir.gifinf_esq.gifinf_dir.gifParte 2 - DREAMWEAVERAbra o - (Óbvio!)&nbsp;&nbsp;Tecle Ctrl + N ou selecione, Arquivo ===&gt; 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.gifPara 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: