Banner propaganda da DevMedia - Cursos de desenvolvimento web

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:

Um retângulo claro claro em fundo escuro, com bordas arredondadas

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:

Mostra as células da tabela ressaltando os quatro cantos arredondados

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:

Mostra o círculo descrito acima

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

 

Mostra a ferramenta cortar sobre um quadrante do círculo

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"

Mostra como cortar o canto superior esquerdo

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

Mostra como cortar o canto superior direito

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".

canto superior esquerdo

sup_esq.gif

canto superior direito

sup_dir.gif

/tutorial/

inf_esq.gif

canto inferior direito

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:

Mostra como definir a cor do fundo

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.

Mostra como inserir uma tabela

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

Mostra a tabela inserida

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:

Mostra os cantos inseridos nas celulas

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:

Mostra como ajustar os cantos na posição

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:

Mostra a tabela pronta

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:

Mostra a tabela com uma texto de 10 linhas escrito

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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo