Tutoriais de Webdesigner

Assunto: Tutoriais de Webdesigner Qua Jun 15, 2011 6:23 pm

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.

Por regra geral, a maioria dos internautas dispõe de uma definição de
800x600 ou superior. Por isso, o habitual é desenhar a web 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 web.

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.

O código de uma página seguindo estes conselhos seria o seguinte:

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

~~Creditos~~
DivulgadorDeSiTes