<<<

III - DESENVOLVIMENTO DE UM PROTÓTIPO

Fase 8: Construção do corpo central

É nesta fase que o módulo de aprendizagem vai começar a ganhar corpo e alma. Se até aqui o que o ecrã do monitor nos mostra não dá para fazer arregalar os olhos, porque só temos um título e duas linhas horizontais, a partir de agora vai dar um salto significativo na estatura e no aspecto. É um pouco como nós. Até certa idade, parece que o tempo está parado e não passamos da mesma estatura. De repente, tudo explode em nós, como se alguém nos tivesse gritado: «Está aí a Primavera!» E zás! Novos órgãos entram abruptamente em funções e começamos a ficar esticadinhos, a crescer a olhos vistos, com uma fome danada, que não há nada que nos satisfaça.

	Fig. 35: Aspecto da página com a tabela de 1x5 inserida para construção do corpo central

Pois é! A partir daqui vai acontecer algo de novo ao projecto. Vai dar um pulo considerável. Aos poucos, vai ganhando forma e conteúdos, vai-se tornando mais atraente e apetecido.

Vamos lá a isso, estão vocês a dizer, que estamos a ficar com comichão nas pontas dos dedos e a precisar de teclar no computador.

Com a leitura dos três parágrafos anteriores, certamente que já o computador teve tempo de arrancar, se é que fizeram uma pausa no final da fase anterior e o desligaram.

Abram o ficheiro «Index.htm» que têm na pasta do vosso projecto. Abram-no com o Internet Explorer e apreciem a vossa obra. O que têm neste momento? Uma página enfezadita, com um título e duas linhas horizontais. E entre elas situa-se uma triste de uma célula, completamente vazia e com vontade de engordar. Pois é precisamente nesta terceira linha, nesta célula vazia entre duas linhas separadoras escuras, que vai desabrochar o corpo da página.

Vamos ao trabalho. Passem para o FrontPage, isto é, editem a página utilizando o botão respectivo que encontram na barra de ferramentas do Internet Explorer, para começarmos a implantar a estrutura do corpo central. Sigam as instruções.

1º - Coloquem o cursor dentro da célula da terceira linha.

2º - Como temos de obter uma estrutura idêntica à da figura 13, necessitamos de cinco colunas. Logo, insiram uma tabela de 1x5 e ponham os bordos a zero. Terão de ficar com um aspecto idêntico ao da figura 35. 

A primeira célula será para colocarmos os três botões das opções, uma vez que só teremos três páginas neste protótipo. Em qualquer altura, se quiserem desenvolver o projecto, poderão inserir mais botões e aumentar o número de páginas. As células 2 e 4 ficarão vazias. Servirão para os separadores verticais, utilizando a mesma técnica que adoptámos para os separadores horizontais. Se quisermos que fiquem visíveis na versão impressa, teremos de inserir uma pequena imagem com uma linha vertical no formato GIF. A célula do meio será para o texto ou textos de apresentação do módulo. Na quinta célula serão inseridas miniaturas das imagens dos postais que ilustram as páginas. E poderão também servir de botões, se forem estabelecidas as hiperligações entre elas e páginas correspondentes.

3º - Como queremos que as células 2 e 4 fiquem estreitas, vamos reduzi-las a uma coluna de largura mínima. Comecemos por reduzir a célula dois. Como vamos fazer?

3.1 - Coloquem o cursor do rato entre as células dois e três. Verificarão que ele assume a forma de uma seta horizontal apontando para os dois lados.

3.2 - Mantendo o cursor nesse sítio e pressionando o botão esquerdo do rato, arrastem-no para a esquerda, fazendo com que a célula fique reduzida ao mínimo possível.

3.3 - Coloquem agora o cursor entre as células três e quatro e, arrastando o rato para a direita com o botão esquerdo pressionado, reduzam a célula à largura mínima possível.

4º - Se fizeram tudo certo, deverão ter obtido um resultado idêntico ao da figura 36. Falta apenas tornar visíveis no ecrã do monitor os separadores verticais. Para isso, posicionem o cursor na célula dois e mudem o fundo para azul escuro, recorrendo a «Cell properties» da maneira que já aprenderam. Façam o mesmo para a célula quatro. Salvem o trabalho e mudem para a janela do Internet Explorer. Carreguem na tecla F5 e vejam o aspecto da página. Neste momento, vêem-se três áreas brancas bem delimitadas por dois separadores verticais a azul escuro. São as três áreas centrais, as mais importantes do ponto de vista informativo.

Comecemos agora a preencher o espaço central, progredindo da esquerda para a direita. Como o módulo de aprendizagem é formado por mais três páginas, vamos começar por inserir o menu de opções, situado na coluna da esquerda e constituído por três botões. Uma vez que pretendemos que entre eles haja um espaço, teremos de criar uma tabela com seis linhas e uma coluna. Sigam as instruções.

1º - Posicionem o cursor no interior da primeira célula da tabela de 1x5 que criaram no início desta fase.

2º - Insiram uma tabela de 6x1 e ponham os bordos a zero.

3º - Coloquem o cursor no interior da primeira célula desta tabela de 6x1, ou seja, na célula correspondente à primeira linha.

4º - Insiram uma nova tabela de 1x1 e deixem os bordos visíveis.

5º - Coloquem o cursor dentro da célula desta tabela de 1x1 com os bordos visíveis e cliquem no botão de centrar (CTRL+E).

6º - Escrevam «Página 1» em letra Arial, corpo 12 (12 pt) e letra negrita (Bold).

7º - Posicionem o cursor na célula da terceira linha da tabela de 6x1, criem nova tabela de 1x1 e escrevam «Página 2», repetindo os procedimentos 5 e 6.

8º - Posicionem o cursor na célula da quinta linha da tabela de 6x1, criem nova tabela de 1x1 e escrevam «Página 3», repetindo os procedimentos 5 e 6.

Neste momento têm o menu de opções para acesso directo a qualquer uma das três páginas do módulo. Deverão ter obtido algo idêntico ao representado na figura 37. Salvem o vosso trabalho, não vá suceder algum imprevisto desagradável. Passem à janela do Internet Explorer, carreguem na tecla F5 e apreciem o novo aspecto da página. Neste momento, já começa a ganhar corpo. Regressem depois ao FrontPage, porque vamos proceder ao preenchimento da área central.

A primeira página do módulo é como a primeira página de um jornal. É, por assim dizer, a montra com os elementos mais susceptíveis de captar o interesse do leitor.  Além de uma breve apresentação, de uma espécie de editorial, poderá conter, por exemplo, uma síntese dos conteúdos, uma apresentação dos objectivos, etc.

Como no nosso módulo de aprendizagem vamos apresentar três imagens antigas da terra onde vivemos, será nesta primeira página que incluiremos um texto com uma breve apresentação, indicando a localização, as principais características e os motivos de interesse para quem visita a cidade.

Quanto ao vosso trabalho, se optaram por outra temática, deverão reflectir um pouco sobre aquilo que a primeira página, a chama «homepage», deverá apresentar.

No nosso modelo, além da breve apresentação da cidade, poderemos incluir uma área inferior com a ficha técnica do projecto. Se o fizermos, teremos logicamente de criar uma página suplementar para o efeito, pelo que o conjunto passará de quatro a um total de cinco páginas.

Passemos agora ao preenchimento da área central da página com o texto de apresentação. Sigam as etapas.

1º - Regressem ao FrontPage e coloquem o cursor na terceira linha da célula correspondente à área central destinada ao texto.

2º - Criem aí uma tabela de 3x1 e ponham os bordos a zero.

3º - A primeira célula é destinada ao texto de apresentação ou introdução. Criem o vosso texto e insiram-no. Se não quiserem estar com trabalho e se limitam a acompanhar as nossas propostas, copiem o nosso texto relativo à cidade de Aveiro. Como neste módulo não pretendemos nenhum exercício de produção textual, mas apenas que sejam adquiridos os conhecimentos básicos para produção de páginas para a Internet, vamos socorrer-nos de algum material que nos foi oferecido, em tempos, na Região de Turismo da Rota da Luz. É de um folheto, produzido não sabemos quando nem por quem, porque não encontramos estes elementos, que vamos extrair algumas das ideias.

Passemos então ao texto.

Introduzido o texto, é necessário proceder à sua formatação. Para que seja de apresentação agradável e de fácil leitura, procedam aos seguintes retoques.

3.1 - Seleccionem todo o texto e escolham letra Arial. Dêem-lhe o tamanho 3 (12 pt) e carreguem no botão [B], para que a letra fique em Bold ou negrito.

3.2 - Mantendo todo o texto seleccionado, cliquem no botão «Format» da barra de ferramentas, seguido de «Paragraph...». Na janela que surge, seleccionem «Justify», tal como se mostra na figura 38. Deste modo, o texto ficará perfeitamente alinhado nas duas margens.

4º - Com o texto introduzido, falta apenas preencher a ficha técnica. Coloquem o cursor na segunda linha da tabela de 3x1 e insiram uma linha horizontal, recorrendo a «Insert» e «Horizontal Line». Como aumenta uma linha de espaço, carreguem na tecla «Del», para que a célula onde está a linha fique o mais pequena possível.

5º - Coloquem o cursor na terceira linha da tabela de 3x1 e insiram aí uma nova tabela, deixando os bordos visíveis.

6º - Digitem em maiúsculas, letra 3 (12 pontos) e negrito, «FICHA TÉCNICA» e carreguem no botão de centrar (Center=Ctrl+E).

Têm neste momento a área central da página completa, apenas faltando as três imagens na coluna da direita. Salvem o vosso trabalho e vejam como fica a página passando à janela do Internet Explorer. Observem bem a página e verifiquem se o aspecto vos agrada.

Nós estamos a olhar para a página do módulo e não gostamos. Porquê? Os botões da coluna da esquerda ficaram a meio da página. Será que não ficariam melhor se estivessem encostados à margem superior? Experimentem colocá-los encostados ao cimo da célula. Como é que isso se faz? Seguindo as etapas que passamos a indicar.

7º - Seleccionem a tabela da coluna da esquerda, onde estão colocados os botões.

8º - Cliquem no segundo botão a contar da direita, que se observa na figura 39. Se estes botões não se encontram na barra de ferramentas, deverão lá ser incluídos, utilizando os métodos já anteriormente indicados, ou seja, recorrendo sucessivamente a «Tools», «Customise», «Commands», «Table» e deslocando os botões necessários para a barra de ferramentas.

Neste momento, resta-nos a colocação das imagens pequenas na coluna da direita, para que a «homepage» ou página inicial fique quase concluída. E dizemos quase, porque, depois disso, será ainda necessário estabelecer as ligações com as páginas seguintes e dar os últimos retoques, para melhoria do aspecto gráfico.

Passemos então à colocação de três pequenas imagens de apresentação na coluna da direita. Já efectuámos a digitalização das imagens necessárias para o módulo na fase dois. Temos na pasta das imagens três reproduções de postais ilustrados com a dimensão de 600 píxeis de largura, o que é ainda demasiado para colocação na Internet. Mas é a partir dessas três imagens demasiado largas que vamos obter as ilustrações para o módulo.

Na página de apresentação, iremos colocar três reproduções diminutas dos postais. Será um procedimento idêntico ao que fizemos para os três botões; mas em vez deles, teremos imagens em miniatura. Vamos ao trabalho. Sigam as etapas enumeradas.

1º - Coloquem o cursor na quinta célula da tabela de 1x5, ou seja, na área referente à coluna da direita.

2º - Insiram uma tabela de 6x1 e ponham os bordos a zero.

3º - Como a tabela ficou a meia altura da página, seleccionem a célula da tabela anterior onde esta está inserida e cliquem no botão para posicionamento dos objectos na parte superior da célula.

4º - Na primeira célula da tabela de 6x1 vamos inserir a imagem do primeiro postal. Para que as imagens caibam perfeitamente, teremos de as seleccionar uma a uma no programa Paint Shop Pro e reduzi-las para a dimensão de 146x98 píxeis. Salvaremos as imagens no formato JPG, dando-lhes os nomes de «Aveiro1a.jpg», «Aveiro2a.jpg» e «Aveiro3a.jpg».

5º - Reduzidas as três imagens, vamos inserir cada uma delas respectivamente nas células 1, 3 e 5 da tabela de 6x1, tendo o cuidado de as colocar devidamente centradas. Se já não se recordam como se insere uma imagem, recordem o que aprenderam relativamente à colocação dos botões no rodapé.

Se já colocaram as três imagens no sítio, salvem a página e vejam qual o aspecto mudando para a janela do Internet Explorer. Experimentem variar o tamanho da janela e verifiquem como as células se adaptam sempre à largura. E o que têm a dizer da apresentação?

Se querem a nossa opinião, podemos dizer que não nos agrada. Não gostamos dos espaços em branco que ficam por baixo dos botões. Por isso, vamos aumentar o espaço entre eles. Coloquem o cursor nas células de intervalo e cliquem uma vez em ENTER. Salvem e vejam se o aspecto melhorou.

Nós consideramos que sim, mas há ainda uma certa diferença, se compararmos a altura das células dos botões com as imagens. Talvez melhore se antes e depois do texto inserirmos espaço. Vamos experimentar.

Coloquem o cursor antes do «P» da legenda «Página 1». Apoiando a tecla de «SHIFT», cliquem em ENTER. Coloquem depois o cursor a seguir ao número 1. Apoiando a tecla de SHIFT, cliquem duas vezes seguidas em ENTER. Façam o mesmo em relação aos dois botões seguintes. Salvem e vejam o aspecto mudando para a janela do Internet Explorer.

Então? Que vos parece? Mudou? Passou a agradar mais?

A nós, parece-nos que agora há um melhor equilíbrio entre a coluna da esquerda e a da direita. Há ainda uns retoques a dar à página, quando tivermos  construído todo o módulo. Agora ficamos por aqui. Consideramos esta fase terminada. Salvem o trabalho e façam uma pausa, antes de passarem à fase seguinte.

Observando o módulo na janela do Internet Explorer, a vossa página deverá estar idêntica ao que é mostrado na figura 40, embora aqui a imagem se encontre reduzida à largura de 600 píxeis.

>>>