Como fazer uma grade ou matriz

Escrito por cathlene s. baptista | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer uma grade ou matriz
As grades estão disponíveis em praticamente qualquer software (Jupiterimages/Photos.com/Getty Images)

Uma grade ou matriz é feita da interseção de linhas horizontais e verticais e pode ser criada em quase qualquer software; bancos de dados, processadores de textos, planilhas eletrônicas, páginas da web e software de edição gráficos, todos contêm matrizes em alguma forma. Normalmente, elas são usadas para apresentar informações de uma forma específica, por exemplo, em forma de planilhas financeiras e resultados de consultas a um banco de dados. No entanto, também podem ser utilizadas como elementos gráficos em ilustrações ou apresentações e como ferramentas de alinhamento em processadores de texto.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Microsoft Office
  • Adobe Photoshop
  • Adobe Dreamweaver
  • Navegador da web

Lista completaMinimizar

Instruções

    Criar uma grade no Microsoft Word

  1. 1

    Abra o Microsoft Word clicando no ícone correspondente. Crie um novo documento clicando em "Arquivo" e "Novo documento" ou no ícone "Novo". Salve o arquivo com o nome "Grade.doc".

  2. 2

    Exiba a barra de ferramentas de desenho clicando no menu "Exibir", "Barras de ferramentas" e "Desenho". O menu de desenho será exibido. Clique no ícone "Opções de grade" para exibir uma caixa de diálogo.

  3. 3

    Clique no botão "Exibir linhas de grade" na caixa de diálogo. Digite o valor "4" nos campos "Vertical a cada" e "Horizontal a cada". Clique no botão "OK" para exibir a grade de 4 x 4.

  4. 4

    Adicione texto, imagens e outros elementos à página usando a grade como referência de alinhamento. Salve o documento.

    Criar uma grade no Adobe Photoshop

  1. 1

    Abra o Adobe Photoshop clicando no ícone correspondente. Acesse o menu "File" (Arquivo) e selecione "New" (Novo) para criar um novo arquivo. Defina a largura e a altura do arquivo em 400 x 400 pixels. Clique no botão "OK" para criar uma imagem que se tornará o padrão da grade.

  2. 2

    Clique no menu "Window" (Janela) e selecione "Channels" (Canais) para exibir a caixa de diálogo do mesmo nome. Aparecerá uma marca ao lado da etiqueta "Channels" quando a caixa de diálogo estiver ativa. Clique no ícone "Create new channel" (Criar novo canal), localizado na barra inferior da caixa de diálogo "Channels", para criar um canal.

  3. 3

    Clique na ferramenta "Rectangular Marquee" (Marquise retangular) e desenhe uma forma retangular no cruzamento das linhas da imagem.

  4. 4

    Mantenha a seleção retangular ativa e clique no menu "Edit" (Editar). Escolha "Define pattern" (Definir padrão), dê ao padrão o nome "Grade" e clique no botão "OK".

  5. 5

    Crie um novo arquivo clicando no menu "File", "New" e salvando o arquivo como "Grade.psd". Selecione o elemento "Paint Bucket" (Balde de tinta) do menu de ferramentas e use o menu de opções para definir o preenchimento do balde de tinta em "Pattern" (Padrão). Selecione a grade como padrão e clique na nova imagem para aplicá-la ao arquivo "Grade.psd".

    Criando uma grade no Adobe Dreamweaver

  1. 1

    Abra o Adobe Dreamweaver e crie um novo arquivo clicando no menu "New" (Novo) e selecionando "File" (Arquivo). Escolha como tipo "HTML" e salve o novo arquivo como "Grade.html". O novo arquivo conterá um código básico que definirá a página.

  2. 2

    Adicione uma tag de estilo à seção <head> da página XHTML que definirá os estilos para as colunas e linhas que comporão a grade. Defina o atributo "width" (largura) da linha como "100%", o atributo "float" (alinhamento) como "left" (esquerda) e o atributo "border" (borda) como "1px ssolid". Defina a largura da coluna em "20px", o atributo "overflow" (margem) em "auto" e o atributo "border" (borda) em "1px solid":

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css">

    row {width:100%;overflow:auto;border:1px solid;}

    column {width:100px;float:left;border:1px solid;}

    </style> </head> <body> </body> </html>

  3. 3

    Adicione três elementos <div> à seção <body> do arquivo "Grade.html", inserindo dois deles dentro de um terceiro. Dê ao <div> exterior o nome "row" (linha) e aos interiores, o nome "column" (coluna). Coloque o texto "Col A" na primeira coluna e "Col B" na segunda. Salve o arquivo "Grade.html":

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css">

    row {width:100%;overflow:auto;border:1px solid;}

    column {width:100px;float:left;border:1px solid;}

    </style> </head> <body> <div id="row"> <div id="column">Col A</div> <div id="column">Col B</div> </div> </body> </html>

  4. 4

    Clique no menu "File", selecione "Preview in Browser" (Visualizar no navegador) e escolha um navegador da lista configurada. O arquivo "Grade.html" será aberto em um navegador, exibindo a grade em HTML.

Dicas & Advertências

  • O Microsoft Word permite criar tabelas por meio da ferramenta "Tabela". Elas também são grades e podem ser personalizadas de várias formas.
  • Você pode também criar grades no Photoshop usando ferramentas como a seleção horizontal e vertical. Use outras ferramentas, como o balde de tinta e o pincel, para pintar os pixels selecionados se estiver usando as ferramentas de seleção.
  • Usar o atributo "overflow: auto" na folha de estilos CSS força o recipiente a acomodar as colunas flutuantes.
  • O Microsoft Word fornece um objeto SmartArt para criar grades. O objeto está disponível também para os outros produtos do pacote Microsoft Office 2007.
  • Atualizar as opções da grade no Microsoft Word as aplicará à própria ferramenta grade, portanto, aparecerá igual em todos os arquivos. Para desativar essa opção, desmarque "Opções de grade".
  • Diferentes versões do Photoshop, o MS Word ou o Dreamweaver podem ter sequências de comandos ligeiramente diferentes. Leia a documentação da versão que você estiver usando e modifique cada processo apropriadamente.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível