CriarWeb.com > Manuais > Desde zero

Como vimos anteriormente, o desenho de uma página web implica a criação de um arquivo em código HTML, mas não é o único que devemos criar. Na maioria dos casos também desejaremos incluir imagens e para isso será necessário criar os correspondentes arquivos gráficos.

O processo para incluir uma imagem em uma página começa pela criação da imagem com um programa de desenho gráfico ou mediante sua digitalização com um escaner. Será necessário que conheçamos algum dos programas de desenho gráfico que existem no mercado. São muito interessantes Photoshop, Paint Shop Pro ou Fireworks. À princípio poderemos nos contentar em manejá-los por alto e isso nos resultará muito fácil, mas conforme avancemos no caminho como web designers será mais necessário dominá-los para obtermos resultados mais profissionais.

Os tipos de arquivo gráficos que a Internet tolera são o JPG e o GIF. Estes têm características distintas e portanto usos distintos. Podemos conhecer mais isto nao artigo Formatos gráficos para páginas web.

Uma vez que tivermos os arquivos gráficos, colocaremos no mesmo diretório que os arquivos HTML ou em um subdiretório deste, e no código da página HTML colocaremos uma tag especial para incluir a imagem ou a incluímos com nosso programa editor de HTML.

O importante de tudo isso é percebermos que o site web está composto por arquivos HTML, GIFs, JPGs e inclusive, os correspondentes arquivos que contenham vídeos, animações Flash, programas Java, etc. Temos que ter bem localizados todos estes arquivos dentro de nosso disco rígido e dentro de um mesmo diretório. Certamente é indiferente a ordem como estão os arquivos dentro do diretório, mas poderá ser interessante incluirmos subdiretórios para que fique tudo melhor ordenado e para que seja mais fácil sua conservação. Por exemplo, uma técnica muito habitual é colocar todas as imagens dentro de um subdiretório chamdo imagens.

O objetivo de tanta ordem e conhecimento da localização de todos os arquivos é que logo teremos que subi-los ao servidor sem esquecermos de nenhum deles. Nos capítulos posteriores veremos como se faz este passo.

Um problema típico com as imagens e outros arquivos externos consiste em que quando vemos as páginas em nosso computador se vêem corretamente e não falta nenhuma imagem nem outros possíveis elementos. Entretanto, quando subimos os arquivos ao servidor e vemos a página na internet, esta se mostra com erros nas imagens e em outros elementos, de modo que não se pode ver bem. Isto costuma se chamar ter uma imagem "quebrada". O motivo pelo qual está quebrada é que não pode ser localizada no servidor e portanto não consegue mostrá-la. Isto pode ser devido a várias razões.

• A imagem não subiu ao servidor
• A posição relativa da imagem em relação à página não é a mesma em nosso computador (local) e no servidor (remoto). Por exemplo, as imagens em local poderiam estar no diretório imagens enquanto que em remoto poderiam estar no mesmo diretório que a página, o que seria um erro. Sempre se deve respeitar a estrutura de diretórios que está em local e criá-la exatamente igual em remoto.
• A imagem que se tenta acessar tem um caminho dirigido a um diretório de nosso disco rígido, como ao ver a página na internet não se tem acesso ao seu disco rígido, os usuários não poderão ver as imagens. Quando trabalhamos com um editor de HTML e colocamos imagens, em algumas ocasiões, o editor coloca caminhos em nosso disco rígido no lugar de caminhos relativos. Os caminhos relativos são rotas que começam no lugar onde está a página que estamos desenhando.

Há uma forma muito útil de obter pistas a cerca da falha de uma imagem, consiste em clicar com o botão direito do mouse sobre ela e selecionar propriedades. Isto nos mostra informações sobre a imagem e nos informa sobre o lugar onde se está tentando encontrá-la.