Quando se trabalha com distintas definições, como na web, devemos escolher o público objetivo da página e construí-la para que esse público a veja bem, mas não devemos nos esquecer dos demais, de modo que estes também a visualizem, sendo possível sem nenhum problema.
Participe deixando seu comentário ou sugestão ao Blogão do Design...
Por regra geral, a maioria dos internautas dispõe de uma definição de 800x600 ou superior. Por isso, o habitual é desenhar um site para que esse grupo de usuários a veja corretamente.
Também existem pessoas que acessam a Internet com definições menores, a 640x480, mas cada vez são menos.
Para o caso de 1024x780, esta definição é bastante grande e somente os usuários com telas boas, configuradas de maneira correta, a usam. A definição de 1024x780 deixa muita gente de fora, por isso ainda não devemos utilizá-la, ademais, estes usuários poderão ver também a página com uma definição menor sem muito prejuízo.
Por outro lado, a definição de 640x480 é muito pequena e já muito poucos usuários a utilizam, por isso é melhor desenhar utilizando um espaço maior. No entanto, se a página a desenvolver é muito corporativa, porque pertence a uma empresa importante e tem de ser bem vista em todas as máquinas possíveis, seria razoável utilizar a definição de 640x480, pois esta nos assegura que todo mundo poderá ver bem o site.
Uma vez escolhido o público objetivo, devemos compor as páginas e as imagens para que sejam bem vistas na definição de tela que estes utilizarem, de modo que nunca saiam as feias barras de deslocamento horizontais. Para isso, calcularemos o tamanho dos elementos da página conscientemente.
Outra coisa que se pode fazer é aplicar aos elementos da página os tamanhos (atributo width) utilizando porcentagem, deste modo, se ajustarão ao tamanho da definição do usuário automaticamente. Entretanto, as imagens não suportam o tamanho em porcentagens, ou seja, não podemos ajustá-las assim automaticamente, e em qualquer caso, não desejaremos que a imagem se deforme ao alterar artificialmente seus tamanhos através desses atributos. Sendo assim, para o caso das imagens seguiremos com a necessidade de criá-las sem ultrapassar o espaço disponível na definição horizontal do público objetivo.
Vamos ver qual seria a forma de trabalho para planejar uma página com tabelas.
- Falamos de um desenho com tabelas porque quase sempre é mais adequado do que um desenho com frames ou camadas, mas isto é outra discussão.
- Criar uma tabela ao princípio da página, que inclua toda a página, e lhe atribuímos o tamanho em pixels. Dependendo da resolução do tipo de audiência, o tamanho da tabela variará, mas sempre serão 21 pixels menos que a definição do objetivo. Estes pixels restantes se utilizam para as barras de deslocamento verticais. Por exemplo, se desenhamos para uma resolução de tela de 800x600, o tamanho da tabela será de 779 pixels. Em Windows XP as barras de deslocamento ocupam um pouco mais que em sistemas anteriores. Antes da aparição de Winwdos XP, reservar 20 pixels para as barras de deslocamento já era suficiente. Também se podem criar as tabelas em porcentagens, mas isto fará com que a página se estique e se encolha dependendo da definição. Não é um efeito muito desejável para os web designers, porque o efeito de ver a página mais esticada ou encolhida de como a desenhamos, costuma ser contra-producente, além de significar um esforço extraordinário.
- Incluimos na etiqueta <BODY> da página os atributos: topmargin=0 leftmargin=0 marginheight=0 marginwidth=0. Estes atributos servem para eliminar as margens da página e que as tabelas se situem ocupando todo o espaço da página. Os dois primeiros atributos são para Internet Explorer, os dois seguintes são para Netscape Navigator, temos que colocar os quatro atributos para assegurarmos que se veja bem em todos os navegadores mais importantes.
- Se desejarmos incluir margens nas páginas, podemos jogar com os atributos cellspacing e cellpadding, na tabela principal, para conseguí-los. No caso de que não gostemos deste método, podemos incluir células adicionais na tabela principal, que sejam transparentes (não colocar conteúdo), às que lhes atribuímos os tamanhos desejados para as margens. O método que utilizo habitualmente é este último e quase sempre ponho os atributos cellspacing e cellpadding a zero.
<html>
<head>
<title>Título</title>
</head>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<table width=779 bgcolor=eeeeee cellspacing=0 cellpadinng=0 border=0 align=center>
<tr>
<td width=10></td>
<td>
<h1 align="center">Título da página</h1>
Este é o corpo da página
<p>
Mais página
<p>
E mais..
<p>
<div align="center">
Barra | Navegação | Links
</div>
<br>
</td>
<td width=10></td>
</tr>
</table>
</body>
</html>
Isso é tudo, lembre-se que você sempre poderá ver o código fonte das páginas web que gosta, para ver como fizeram os outros web designers.
0 comentários:
Postar um comentário