Na hora de desenhar uma página web, é muito cômodo fazer as provas de criatividade utilizando um programa de desenho gráfico, no lugar de realizar a montagem diretamente em HTML.

Um dos programas mais úteis para realizar o desenho da página é Adobe Photoshop, que oferece muitas utilidades para o retoque fotográfico, mas também para o desenho gráfico em geral. As últimas versões do programa ademais dispõem de ajudas muito interessantes para desenhar as páginas web, como os setores ou a opção Salvar para web.

Nota: Já explicamos algumas coisas das quais vamos utilizar neste exercício em um artigo anterior: Setores de Photoshop

Vamos ver neste artigo uma amostra sobre como podem ser utilizados os setores para montar uma página web em HTML.

Por exemplo, em Photoshop poderíamos ter desenhado a seguinte imagem que vamos utilizar para o cabeçalho da página:


Podemos partir esta imagem em setores. Os setores são áreas da imagem que logo vamos salvar em arquivo independente, otimizado para se visualizar na Internet. Realizamos os setores ao nosso gosto. Possivelmente nos interesse que o logotipo ou o banner principal se encontrem em uma imagem separada, ou possivelmente temos pensado colocar uma barra de navegação que desejamos que esteja em um mesmo setor, que logo vamos encher com o texto da barra.

Os setores podem ter ficado de forma similar a como aparece nesta imagem:


Uma vez realizados os setores, selecionamos a opção "Salvar para web" do menu de arquivo. Isto nos permite acessar uma janela onde se podem escolher as opções de otimização das imagens, selecionando as características de todos os setores ou então definindo umas propriedades específicas para cada setor.

Uma vez selecionadas todas as opções necessárias, salvamos o trabalho, com o que obteremos um arquivo HTML com uma tabela, que contem por sua vez as distintas imagens geradas a partir de cada setor e salvas com as opções de otimização selecionadas previamente.


Eliminar uma imagem de um setor e substituí-la por um texto

Possivelmente alguma das partes ou setores gerados, onde temos uma imagem, queremos que disponha um texto, para poder escrever o que se deseja, ao invés de visualizar uma imagem, que sempre é muito mais estática.

Por exemplo, pode haver um espaço para o título da página e, já que o título pode mudar em cada página do web, pode ser que seja interessante que esse título seja um texto, que possa ser editado, ao invés de uma imagem. Ou também, pode ser que tenhamos um espaço para situar o endereço da empresa dona do site web, tal como fizemos no desenho que estamos trabalhando, e desejamos que o endereço apareça como um texto no lugar de uma imagem, já que os textos são indexados pelos buscadores e queremos que possam se indexar as palavras do endereço da empresa como palavras-chave da página.

Então, necessitamos substituir a etiqueta da imagem por um texto. Para isso, simplesmente há que localizar a etiqueta que corresponde à imagem que desejamos substituir e apaga-la, mudando-a pelo texto que tem que ir, no lugar da imagem. Porém atenção, porque isto pode mudar o desenho da tabela e deslocar as imagens que vão dentro. Para evitar isso, simplesmente ajustamos os valores width e height da célula onde estava a imagem, aos que tinha a própria imagem que desejamos substituir.

Por ejxmplo, este é o código HTML gerado por Photoshop para a composição anterior. Cada setor está em uma imagem independente.

<TABLE WIDTH=697 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=214 HEIGHT=1></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=233 HEIGHT=1></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=34 HEIGHT=1></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=1></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=215 HEIGHT=1></TD>
<TD></TD>
</TR>
<TR>
<TD ROWSPAN=3>
<IMG SRC="imagens/cabeçalho-original_01.gif" WIDTH=214 HEIGHT=85></TD>
<TD ROWSPAN=2>
<IMG SRC="imagens/cabeçalho-original_02.gif" WIDTH=233 HEIGHT=25></TD>
<TD COLSPAN=2>
<IMG SRC="imagens/cabeçalho-original_03.gif" WIDTH=35 HEIGHT=16></TD>
<TD>
<IMG SRC="imagens/cabeçalho-original_04.gif" WIDTH=215 HEIGHT=16></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=16></TD>
</TR>
<TR>
<TD>
<IMG SRC="imagens/cabeçalho-original_05.gif" WIDTH=34 HEIGHT=9></TD>
<TD COLSPAN=2>
<IMG SRC="imagens/cabeçalho-original_06.gif" WIDTH=216 HEIGHT=9></TD> <TD>
<IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=9></TD>
</TR>
<TR>
<TD COLSPAN=4 ROWSPAN=2>
<IMG SRC="imagens/cabeçalho-original_07.gif" WIDTH=483 HEIGHT=87></TD>
<TD>
<IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=60></TD>
</TR>
<TR>
<TD>
<IMG SRC="imagens/cabeçalho-original_08.gif" WIDTH=214 HEIGHT=27></TD> <TD>
<IMG SRC="imagens/espaço.gif" WIDTH=1 HEIGHT=27></TD>
</TR>
</TABLE>

Observamos que está em negrito a célula e a imagem onde aparece o endereço da suposta empresa que encarregou o projeto. Esta imagem é a que vamos substituir pelo texto do endereço:

<TD width=215 height=16>
<font size=1 face=verdana>C/ Mayor nº 23, 3B - 28230 Madrid</font></TD>
<TD>

Cabe remarcar que aplicamos à célula a mesma largura e altura da imagem que ia dentro. Ademais, colocamos o texto em uma fonte de tamanho pequeno porque se o texto superasse o espaço reservado para a tabela se desenquadraria o desenho.