Guiadasavesfp2003

1. Início do site
Chegou o momento de produzir um site completo. Propomos-lhe um tema ambiental: as aves
existentes no Parque Nacional das Serras de Aire e Candeeiros. As actividades a realizar ser-lhe-
ão descritas "passo a passo”.

1.1. Criação da Web GuiadeAves
Vai criar agora uma nova FrontPage Web.

• ACTIVIDADES:

• 1 - Crie a Web, fazendo Ficheiro ->Novo, atribuindo-lhe o nome GuiadeAves.
• 2 - Crie uma página (a página index.html). Ficheiro -> Novo -> Página em branco.
• 3 - Crie mais três páginas e renomeie os ficheiros:
localizacao.htm
informacoes.htm
aves.htm

Note que o programa criou uma pasta images, onde poderá guardar todas as imagens a incluir no
site.

• 4 – Volte ao Ambiente de Trabalho. Copie todas as imagens disponibilizadas para a pasta
images criada.

-2-

1.2. A 1ª Página – Guia de Aves

Legenda:
1 – Imagem em Background
(background.jpg)
2 – Imagem com a designação do site e
elementos decorativos (banner.jpg)
3 e 8 – Elementos decorativos (bullet.jpg)
4 – Botão que indica que nos encontramos na
página Home (página principal). O botão tem
a ponta virada e não possui qualquer
Hiperligação (botao_home_activo.jpg).
5 – Botão que dá acesso à página Localização
(botao_localizacao.jpg)
6 – Botão que dá acesso à página
Informações (botao_informacoes.jpg)
7 – Botão que dá acesso à página Aves
(botao_aves.jpg)
9 – Imagem transparente, cuja finalidade é
manter constante a largura da célula da
esquerda (espaco.gif). Utilizando este
Figura 1 - A 1ª Página – Guia de Aves
pequeno “truque” evitamos que o conteúdo
Descrição Geral: da célula da direita (texto e/ou imagens)
Esta é a Home Page ou página principal do site. Nela se incluiu o nome do site e apareça sobre a imagem do background da
os Hiperligaçãos que dão acesso às outras páginas. Todos os elementos foram página.
colocados numa tabela. A linha vertical indica a divisão em duas colunas.

1.2.1.Definição das características gerais da página

• ACTIVIDADES:

• 1 - Edite a página dando dois cliques sobre o ficheiro index.html.
• 2 - Defina as características gerais da página, tendo em consideração as seguintes diferenças:
- O Título da página é Guia de Aves
- A imagem do Background encontra-se na pasta images e tem a designação
background.jpg

1.2.2.Inserção e formatação da Tabela

• ACTIVIDADES:

• 1 - Coloque o cursor no canto superior esquerdo da página
• 2 - Insira uma Tabela com 1 linha, 2 colunas, sem contorno (Tamanho do limite: 0) e com
uma largura (width) de 95%.

É necessário que a célula da esquerda fique bastante mais pequena do que a célula da direita.
Por isso, vai formatar a Tabela:

-3-

• 3 - Seleccione a célula da esquerda e atribua-lhe as seguintes características:
Propriedades da célula:
Alinhamento Horizontal: Esquerda
Alinhamento Vertical: Superior
Especificar Largura: 19%
• 4 - Seleccione a célula da direita e atribua-lhe as seguintes características:
Propriedades da célula:
Alinhamento Horizontal: Centro

1.2.3.Importação das imagens e sua formatação
Nas actividades seguintes indica-se o número atribuído a cada imagem na Figura 1. Convém,
portanto, ir consultando esta figura para compreender bem aquilo que se pretende fazer..
Lembre-se que todas as imagens a importar se encontram na pasta images.

• ACTIVIDADES

Imagem nº 9 - transparente:
• 1 - Insira a imagem no local respectivo (ficheiro espaco.gif)
• 2 - Formate a imagem, atribuindo-lhe as seguintes características:
Desactive a opção Manter relação Largura/ Altura
Largura (Width) de 140 pixels
Altura (Height) de 4 pixels

Imagem nº 2 - designação do site:
• 3 - Insira a imagem no local respectivo (ficheiro banner.jpg)
• 4 - Formate a imagem, atribuindo-lhe o nome: Parque Natural
• 5 - A seguir a esta imagem, insira três quebras de linha, clicando simultaneamente em
SHIFT e em RETURN

Imagem nº 3 - Elemento decorativo:
• 6 - Insira a imagem no local respectivo (ficheiro bullet.jpg)
• 7 - Atribua o nome Bullet à imagem e defina o seu tamanho
• 8 - Insira uma quebra de linha entre esta imagem e as seguintes

Imagem nº 4 - Botão Home
• 9 - Insira a imagem botao_home_activo.jpg
• 10 - Atribua o nome Home à imagem e defina o seu tamanho
• 11 - Desactive a selecção da imagem e coloque o cursor à sua direita

Imagem nº 5 - Botão Localização
• 12 - Insira a imagem botao_localizacao.jpg
• 13 - Atribua o nome Localização à imagem, defina o seu tamanho e retire-lhe a moldura.
• 14 - Insira uma quebra de linha entre esta imagem e as seguintes

Imagem nº 6 - Botão Informações
• 15 - Insira a imagem botao_informacoes.jpg
-4-

• 16 - Atribua o nome Informações à imagem, defina o seu tamanho e retire-lhe a moldura.
• 17 - Desactive a selecção da imagem e coloque o cursor à sua direita

Imagem nº 7 - Botão Aves
• 18 - Insira a imagem botao_aves.jpg
• 19 - Atribua o nome Aves à imagem, defina o seu tamanho e retire-lhe a moldura.
• 20 - Insira uma quebra de linha entre esta imagem e a seguinte

Imagem nº 8 - Elemento Decorativo
• 21 - Copie o elemento decorativo já inserido nesta página, através dos comandos
Copiar/Colar.

1.2.4.Definição dos Hiperligaçãos
Os botões Localização, Informações e Aves vão permitir o acesso às páginas respectivas. Vai
agora definir esses Hiperligaçãos.

• ACTIVIDADES:

Botão Localização
• 1 - Seleccione a imagem
• 2 - Defina uma Hiperligação para a página localizacao.htm.

Botão Informações
• 4 - Defina um Hiperligação para a página informacoes.htm

Botão Aves
• 6 - Defina um Hiperligação para a página aves.htm

1.2.5.Visualização da página no Browser
A primeira página já está completa. Depois de a gravar, verifique se o resultado final está de
acordo com o que se pretende.

-5-

1.3. A 2ª Página - Localização
Legenda:
1 – Primeira linha da tabela principal. Na célula
da esquerda foi colocada a imagem espaco.gif.
Na célula da direita foram colocados os botões
de navegação, a que foram atribuídos os
respectivos hiperligaçãos: imagens
botao_home.jpg,
botao_localizacao_activo.jpg,
botao_informacoes.jpg e botao_aves.jpg.
2 – Segunda linha da tabela principal. Não
contém quaisquer elementos, servindo apenas
para se conseguir uma maior separação.
3 – Terceira linha da tabela principal. Na célula
da direita foi colocada a imagem bullet.jpg e
parte do texto incluído no ficheiro
textos_6.doc.
4 - Célula da esquerda da 4 linha da tabela
principal. Não contém quaisquer elementos. Na
célula da direita desta linha foi incluída uma
tabela.
5 - Célula da esquerda da segunda tabela. Esta
segunda tabela foi colocada na célula da direita
da tabela principal (da 4ª linha). Contém a
imagem bullet.jpg (duas vezes) e parte do
texto incluído no ficheiro textos_6.doc.
6 - Célula da direita da segunda tabela. Esta
da tabela principal (da 4ª linha). Contém a
imagem mapa.jpg e uma indicação
bibliográfica, com um hiperligação externo.
Sobre o mapa foi desenhado um Hotspot, com
um hiperligação externo.
Figura 2 – A 2ª Página – Localização 7 - Quinta linha da tabela principal. A célula da
direita contém a imagem bullet.jpg e parte do
texto incluído no ficheiro textos_6.doc. O
Descrição Geral: nome do concelho de Santarém contém um
Esta página inclui informações acerca da localização do Parque Natural da hiperligação externo.
Serra de Aire e Candeeiros. Tal como a página anterior, todo o seu conteúdo 8 - Sexta linha da tabela principal. Não contém
foi colocado numa tabela. De notar, porém, que dentro desta tabela (na linha 4, quaisquer elementos.
na célula da direita), existe uma outra tabela. Todos os textos estão incluídos 9 - Sétima linha da tabela principal. A célula da
no ficheiro textos_6.doc, guardado na pasta c:/formacao/. direita contém:
- imagem regua.jpg (separador)
- nomes das páginas do site com hiperligaçãos
internos.
- imagem carta_animacao.gif, com um
hiperligação que permite o envio imediato de
uma mensagem via e-mail.
- legenda da imagem anterior.


• ACTIVIDADES:

• 1 – Na Barra Ver clique em Pastas e edite a página (dois cliques sobre o ficheiro
localizacao.htm)
• 2 - Defina as características gerais da página, tendo em consideração as seguintes diferenças:
Na Janela de Diálogo Propriedades da Página, no separador Geral:
Título: Localização
-6-

Na Janela de Diálogo Propriedades da Página, no separador Formatação:
Seleccione a opção Imagem do Fundo
Clique em Procurar e opte por background.jpg

1.3.2.Inserção e formatação da tabela

• ACTIVIDADES:

• 1 - Insira uma Tabela com 7 linhas, 2 colunas, uma largura total de 100% e alinhamento à
esquerda.
• 2 - Formate a coluna da esquerda. Opte por:
• 3 - Formate a coluna da direita, optando por:

-7-

1.3.3.A primeira linha da tabela

• ACTIVIDADES:

Inserção da imagem transparente:

Esta imagem já foi colocada e formatada na página index.html. Por isso, é mais fácil copiá-la
dessa página para esta. Como tem a página index.html aberta, o procedimento é o seguinte:
• 1 – Janela/index.html
• 2 – Seleccione a imagem e faça a sua cópia
• 3 – Para voltar à página localizacao.htm faça Janela/localizacao.htm
• 4 – Coloque o cursor na primeira célula da coluna da esquerda e cole a imagem

Botão Home:
• 5 - Coloque o cursor na primeira célula da coluna da direita
• 6 - Insira a imagem botao_home.jpg
• 7 - Atribua o nome Home à imagem, defina o seu tamanho
• 8 - Verifique se tem a imagem seleccionada
• 9 - Defina uma hiperligação para a página index.html.

Botão Localização:
• 10 - Coloque o cursor à direita do Botão Home
• 11 - Insira a imagem botao_localizacao_activo.jpg
• 12 - Atribua o nome Localização à imagem, defina o seu tamanho

Botões Informações e Aves:
• 13 - Copie estes botões da página index.html e coloque-os no local respectivo

Finalmente, é necessário formatar a célula, de modo a obter um alinhamento central do seu
conteúdo:
• 14 - Formate a célula, escolhendo em:
Propriedades

1.3.4.A terceira linha da tabela

• ACTIVIDADES:

Inserção da image bullet.jpg:
• 1 – Copie esta imagem da página index.html e coloque-a no local respectivo

Inserção do texto:
Todo o texto a incluir neste site está gravado no ficheiro textos_6.doc. A sua importação deverá
ser feita a partir do Word, utilizando o método Copiar/Colar.
• 2 – Insira o texto à direita da imagem Bullet (“O Parque Natural… do nosso país.”)
-8-

Repare que o tamanho da fonte é diferente do original. Vamos corrigir este aspecto:

• 3 – Seleccione todo o texto e formate-o:
Tipo de Fonte: Comic Sans MS
Tamanho: 2 (10pt)
Estilo: Bold

1.3.5.A quarta linha da tabela

Note que esta linha contém, na célula da direita, uma segunda tabela.

• ACTIVIDADES:

• 1 - Coloque o cursor na célula da direita
• 2 - Insira uma Tabela com 1 linha, 2 colunas e com a largura de 100%
• 3 - Formate a célula da esquerda, optando por:
• 4 – Formate a célula da direita, optando por:

Preencha a coluna da esquerda:
• 5 - Copie o Bullet que já tem nesta página
• 6 - A partir do Word, copie o texto do primeiro parágrafo (“A natureza calcária… sua
população”) e formate-o.
• 7 - Insira um parágrafo
• 8 - Copie o Bullet, copie o parágrafo seguinte do texto (“A individualidade… 4 de Maio”) e
formate-o.

Preencha a coluna da direita:
• 9 - Insira três quebras de linha
• 10 - Insira a imagem mapa.jpg
• 11 - Atribua o nome Localização do PNSAC à imagem e defina o seu tamanho
• 12 - Insira um parágrafo e digite a indicação bibliográfica do Mapa: in Áreas Protegidas.
• 13 - Seleccione o texto e utilize as opções da barra de ferramentas para o formatar com a
fonte Comic Sans Ms a bold e reduzir o seu tamanho.

Vai criar um Ponto Activo (Hotspot) com uma Hiperligação externa para o site da Serra de
Aire e Candeeiros.

• 15 - Desenhe o Hotspot sobre a localização da Serra de Aire e Candeeiros e estabeleça o
Hiperligação para o seguinte URL:
-9-

http://portal.icnb.pt/ICNPortal/vPT2007-AP-SerraAiresCandeeiros?res=1440x900

Agora, pretende-se criar uma Hiperligação na expressão Áreas Protegidas (na legenda) que
remeta para o site respectivo.

• 16 - Na legenda, seleccione a expressão Áreas Protegidas
• 17 - Crie a Hiperligação para o seguinte URL:
http://portal.icnb.pt/ICNPortal/vPT2007-AP-SerraAiresCandeeiros?res=1440x900

1.3.6.A quinta linha da tabela

• ACTIVIDADES:

• 1 - Copie o Bullet que já tem nesta página
• 2 - A partir do Word, copie o texto (“Abrange cerca… Aire e Candeeiros”) e formate-o.
• 3 - Utilizando a opção da Barra de Ferramentas, alinhe a indicação bibliográfica à direita.
• 4 - Seleccione a palavra Santarém (concelho de Santarém)
• 5 - Crie uma Hiperligação externa para o seguinte URL:
http://www.ribatejo.com/ecos/santarem/

1.3.7.A sétima linha da tabela

• ACTIVIDADES:

• 1 - Formate a célula da direita, de modo a obter um alinhamento central do seu conteúdo.
• 2 - Insira a imagem regua.jpg
• 3 - Formate a imagem atribuindo-lhe o nome Separador e definindo o seu tamanho
• 4 - Insira uma quebra de linha
• 5 - Digite o nome das páginas do site :
[Home] [Localização] [Informações] [Aves]
• 6 - Seleccione o texto e formate-o escolhendo a fonte Comic Sans MS, Bold e tamanho 2
(10pt)
• 7 - Faça um parágrafo
• 8 - Insira a imagem carta_animacao.gif
• 9 - Formate a imagem atribuindo-lhe o nome Correio e definindo o seu tamanho
• 10 - Insira uma quebra de linha
• 11 - Digite o texto: Contacte-nos!
• 12 - Seleccione o texto e formate-o escolhendo a fonte Comic Sans MS, Bold e tamanho 2
(10pt)

Agora defina as Hiperligações para as páginas do site.

Página Home
• 13 - Seleccione o nome da página
• 14 - Crie uma Hiperligações para a página index.html
- 10 -

Página Localização
Como a página actual é a página Localização, não é necessário estabelecer o Hiperligação

Página Informações
• 16 - Crie um Hiperligação para a página informacoes.htm

Página Aves
• 18 - Crie uma Hiperligação para a página aves.htm

Finalmente, vai criar a Hiperligação para o endereço electrónico

• 19 - Seleccione a imagem carta_animacao.gif
• 20 - Crie a Hiperligação para o seguinte endereço electrónico:
nonio@eses.pt
• 21 - Por último, grave a página e visualize-a no Browser

- 11 -

1.4. A 3ª Página - Informações
Legenda:
1 - Primeira linha da Tabela principal. Na
célula da esquerda foi colocada a imagem
espaco.gif. Na célula da direita foram
colocados os botões de navegação, a que foram
atribuídos os respectivos hiperligaçãos:
imagem botao_home.jpg, com hiperligação
para a 1ª página; imagem
botao_localizacao.jpg, com hiperligação para
a 2ª página; imagem
botao_informacoes_activo.jpg, sem
hiperligação; imagem botao_aves.jpg, com
hiperligação para a 4ª página.
2 - Segunda linha da tabela principal. Não
contém quaisquer elementos, servindo apenas
para se conseguir uma maior separação.
3 - Célula da esquerda da 3ª linha da tabela
principal. Não contém quaisquer elementos. Na
célula da direita foi incluída uma tabela.
4 - Célula da esquerda da segunda tabela. Esta
da tabela principal (3ª linha). Contém a
imagem bullet.jpg (duas vezes) e parte do
texto incluído no ficheiro textos_6.doc.
5 - Célula da direita da segunda tabela. Esta
Figura 3 - A 3ª Página - Informações segunda tabela foi colocada na célula da direita
da tabela principal (3ª linha). Contém a
Descrição Geral: imagem tipos1.jpg
Esta página contém informações gerais acerca da morfologia das aves. Tal 6 - Quarta linha da tabela principal. Não
como nas páginas anteriores, todo o seu conteúdo foi colocado numa tabela. contém quaisquer elementos, servindo apenas
As linhas horizontais representam as linhas dessa tabela. Na linha 3, na célula para se conseguir uma maior separação.
da direita, foi colocada uma segunda tabela. 7 - Quinta linha da tabela principal. Contém a
indicação bibliográfica do texto e da imagem
colocados na segunda tabela.
8 - Sexta linha da tabela principal. Não contém
quaisquer elementos.
9 - Sétima linha da tabela principal. A célula da
direita contém os mesmos elementos que foram
colocados na página Localização: imagem
regua.jpg (separador); nomes das páginas do
site com hiperligaçãos internos; imagem
carta_animacao.gif, com um hiperligação que
permite o envio imediato de uma mensagem
via e-mail; legenda da imagem anterior.


• ACTIVIDADES:

• 1 - Na Barra Ver clique em Pastas e edite a página (dois cliques sobre o ficheiro
informacoes.htm)
• 2 - Defina as características gerais da página (se não se recorda como se faz veja o ponto da
pág. ), mas tendo em consideração as seguintes diferenças:
Título: Informações
Seleccione a opção Imagem de Fundo
- 12 -


• ACTIVIDADES:

• 1 - Insira uma Tabela com 7 linhas, 2 colunas e uma largura total de 100%
Especificar Largura: 19 in Percent
Especificar Largura: 81 in Percent


• ACTIVIDADES:

Célula da Esquerda:
• 1 - Copie a imagem transparente da página localizacao.htm e coloque-a na célula

Célula da Direita:
• 2 - Copie o Botão Home da página localizacao.htm e coloque-o na célula da direita
• 3 - Copie o botão Localização da página index.html e coloque-o à direita do Botão Home
• 4 - Insira a imagem botao_informacoes_activo.jpg , ao lado do Botão Localização
• 5 - Atribua o nome Informações à imagem, defina o seu tamanho e retire-lhe a moldura
• 6 - Copie o Botão Aves da página localizacao.htm e coloque-o ao lado do Botão
Informações
• 7 - Formate a célula, de modo a obter um alinhamento central do seu conteúdo.

Esta linha contém, na célula da direita, uma segunda tabela.

• ACTIVIDADES:

• 1 - Na célula da direita, insira uma tabela com 1 linha, 2 colunas e 100% de largura.
• 2 - Formate a célula da esquerda (da 2ª Tabela), optando por:
• 3 - Formate a célula da direita (da 2ª Tabela), optando por:

- 13 -

Preencha a célula da esquerda:
• 4 - Copie o Bullet da página localizacao.htm
• 5 - A partir do Word, copie o texto do primeiro parágrafo (“Nesta Área… aqui nidificam.”) e
formate-o
• 6 - Insira um parágrafo
• 7 - Copie o Bullet que já colocou nesta página
• 8 - A partir do Word, copie o texto do segundo parágrafo (“No quadro… de uma ave.”) e
formate-o

Preencha a célula da direita:
• 9 - Insira a imagem tipos1.jpg
• 10 - Atribua o nome Morfologia das Aves à imagem, defina o seu tamanho e retire-lhe a
moldura


• ACTIVIDADES:

• 1 - A partir do Word, copie a indicação bibliográfica
• 2 - Para formatar o texto, itálico e com alinhamento à direita, seleccione o texto e clique os
botões respectivos da Barra de Ferramentas


• ACTIVIDADES:

• 1 - Copie todos os elementos da linha sete da página localizacao.htm
• 2 - Se for necessário, formate a célula de modo a obter um alinhamento central do seu
conteúdo
• 3 - Seleccione o texto Localização e atribua-lhe um Hiperligação para a página
localizacao.htm
• 4 - Seleccione o texto Informações e desfaça o Hiperligação
• 5 - Grave a página e visualize-a no Browser.

- 14 -

1.5. A 4ª Página – Aves

- 15 -

Descrição Geral:
Esta página inclui informações acerca de três aves. Todo o
seu conteúdo foi colocado numa tabela com 2 colunas e 13
linhas.

Legenda:
1 - Primeira linha da Tabela principal. Na célula da esquerda
foi colocada a imagem espaco.gif. Na célula da direita foram
colocados os botões de navegação, a que foram atribuídos os
respectivos hiperligaçãos: imagem botao_home.jpg, com
hiperligação para a 1ª página; imagem
botao_localizacao.jpg, com hiperligação para a 2ª página;
imagem botao_informacoes.jpg, com hiperligação para a 3ª
página; imagem botao_aves_activo.jpg, sem hiperligação.
2 - Segunda linha da tabela principal. Não contém quaisquer
elementos, servindo apenas para se conseguir uma maior
separação.
3 - Célula da esquerda da 3ª linha da tabela principal. Não
contém quaisquer elementos. Na célula da direita foi incluída
uma segunda tabela com 3 linhas e 3 colunas.
4 - Células da coluna da esquerda da segunda tabela. Esta
segunda tabela foi colocada na célula da direita da tabela
principal (3ª linha). Estas células foram agrupadas e contêm
parte do texto incluído no ficheiro textos_6.doc.
5a - Célula da coluna central da primeira linha da segunda
tabela. Contém a imagem popa_mini1.jpg. A esta imagem
foi associado um hiperligação que remete para uma
bookmark existente nesta página.
5b - Célula da coluna da direita da primeira linha da segunda
tabela. Contém a legenda da imagem colocada em 5a.
5c - Célula da coluna central da segunda linha da segunda
tabela. Contém a legenda da imagem colocada em 5d.
5d - Célula da coluna da direita da segunda linha da segunda
tabela. Contém a imagem alveola_mini1.jpg. A esta imagem
5e - Célula da coluna central da terceira linha da segunda
tabela. Contém a imagem melro_mini1.jpg. A esta imagem
5f - Célula da coluna da direita da terceira linha da segunda
tabela. Contém a legenda da imagem colocada em 5e.
6 - Quarta linha da tabela principal. A célula da direita
contém a imagem regua.jpg
7 - Célula da esquerda da 5ª linha da tabela principal. Não
uma terceira tabela com 1 linhas e 2 colunas.
8 - Célula da esquerda da terceira tabela. Esta terceira tabela
foi colocada na célula da direita da tabela principal (5ª linha).
Esta célula contém parte do texto incluído no ficheiro
textos_6.doc.
9 - Célula da direita da terceira tabela. Esta terceira tabela foi
colocada na célula da direita da tabela principal (5ª linha).
Esta célula contém a imagem popa.jpg
10 - Sexta linha da tabela principal. A célula da direita
contém a imagem regua.jpg
Figura 4 - A 4ª Página - Aves 11 - Célula da esquerda da 7ª linha da tabela principal. Não
uma quarta tabela com 1 linhas e 2 colunas.
12 - Célula da esquerda da quarta tabela. Esta quarta tabela
foi colocada na célula da direita da tabela principal (7ª linha).
Esta célula contém parte do texto incluído no ficheiro
textos_6.doc.
13 - Célula da direita da quarta tabela. Esta quarta tabela foi
colocada na célula da direita da tabela principal (7ª linha).
Esta célula contém a imagem alveola.jpg
14 - Oitava linha da tabela principal. A célula da direita
- 16 - contém a imagem regua.jpg


• ACTIVIDADES:

• 1 - Na Barra Ver clique em Pastas e edite a página (dois cliques sobre o ficheiro aves.htm)
• 2 - Defina as características gerais da página (se não se recorda como se faz veja o ponto da
pág. ), mas tendo em consideração as seguintes diferenças:
Título: Aves
Seleccione a opção Imagem de Fundo


• ACTIVIDADES:

• 1 - Insira uma Tabela com 13 linhas, 2 colunas e uma largura total de 100%


• ACTIVIDADES:

Célula da esquerda:
• 1 - Copie a imagem transparente da página informacoes.htm e coloque-a na célula.

Célula da direita:
• 2 - Copie o Botão Home da página localizacao.htm
• 3 - Copie os Botões Localização e Informações da página index.html e coloque-os à
direita do Botão Home
• 4 - Insira a imagem botao_aves_activo.jpg , ao lado do Botão Informações
• 5 - Atribua o nome Aves à imagem, defina o seu tamanho e retire-lhe a moldura
• 6 - Formate a célula, de modo a obter um alinhamento central do seu conteúdo.


- 17 -

• ACTIVIDADES:

• 1 - Na célula da direita, insira uma Tabela com 3 linhas, 3 colunas e 100% de largura.
• 2 - Formate a coluna da esquerda, optando por:
• 3 - Formate a coluna central, optando por:
• 5 - Agrupe as células da coluna da esquerda

Para preencher a coluna da esquerda:
• 6 - A partir do Word, copie o texto: “Para fazermos… onde nos encontramos.” e formate-o
• 7 - Seleccione os 4 últimos parágrafos do texto que copiou (“As melhores horas… onde nos
encontramos”)
• 8 - Na barra de ferramentas, clique o botão Bullets

Para preencher as células 5a, 5d e 5e (consulte a Figura 4 da página15)
• 9 - Coloque o cursor na célula 5a
• 10 - Insira a imagem popa_mini1.jpg
• 11 - Atribua o nome Pôpa à imagem, defina o seu tamanho e retire-lhe a moldura
• 12 - Repita os procedimentos anteriores para colocar as imagens nas outras duas células,
tendo em consideração que:
na célula 5d – imagem a colocar: alveola_mini1.jpg – nome a atribuir à imagem:
Alvéola Branca
na célula 5e – imagem a colocar: melro_mini1.jpg – nome a atribuir à imagem: Melro

Para preencher as células 5b, 5c e 5f
• 13 - Digite o texto em cada uma das células, fazendo quebras de linha para obter o efeito
desejado:
na célula 5b:
Pôpa
Upupa epops
Espécie Protegida
na célula 5c:
Alvéola Branca
Motacilla alba
na célula 5f:
Melro
Turdus merulu

- 18 -

• 14 - Formate o texto escolhendo, na barra de ferramentas, a fonte Comic Sans Ms, Bold e
tamanho 2 (10pt).

1.5.5.A quarta linha da tabela

• ACTIVIDADES:

• 1 - Copie a imagem regua.jpg da página informacoes.htm
• 2 - Centre a imagem na célula, clicando o botão respectivo da Barra de Ferramentas


• ACTIVIDADES:

• 1 - Insira uma tabela com 1 linha, 2 colunas e largura de 100%
• 3 - Formate a célula da direita, optando por:

Preenchimento da célula da esquerda:
• 4 - Copie o Bullet da página Informações
• 5 - A partir do Word, copie o texto (“Pôpa… 5-8 ovos.”) e formate-o
• 6 - Formate todo o título: Font Size 3 (12pt)
• 7 - Coloque a segunda parte do título (o nome latino da ave) em Itálico
• 8 - Faça um Marcador na palavra Pôpa do título.

Preenchimento da célula da direita:
• 9 - Insira a imagem popa.jpg
• 10 - Atribua o nome Pôpa à imagem e defina o seu tamanho

1.5.7.A sexta linha da tabela

• ACTIVIDADES:

• 1 - Copie a imagem regua.jpg que já colocou na linha 4


- 19 -

• ACTIVIDADES:

• 1 - Insira uma Tabela com 1 linha, 2 colunas e largura de 100%

• 4 - Copie o Bullet que já inseriu na linha 5
• 5 - A partir do Word, copie o texto (“Alvéola Branca… 5-6 ovos.”) e formate-o
• 6 - Formate o título de modo a que fique igual ao título da Pôpa
• 7 - Faça um Marcador na palavra Alvéola do título
•
Preenchimento da coluna da direita:
• 8 - Insira a imagem alveola.jpg 1
• 9 - Atribua o nome Alvéola Branca à imagem e defina o seu tamanho

1.5.9.A oitava linha da tabela

• ACTIVIDADES:

• 1 - Copie a imagem regua.jpg que já colocou na linha 4

1.5.10.A nona linha da tabela

• ACTIVIDADES:

• 1 - Insira uma tabela com 1 linha, 2 colunas e largura de 100%

• 4 - Copie o Bullet que já inseriu na linha 5

- 20 -

• 5 - A partir do Word, copie o texto (“Melro… 3-5 ovos.”) e formate-o
• 6 - Formate o título de modo a que fique igual ao título da Pôpa
• 7 - Faça um Marcador na palavra Melro do título

Preenchimento da célula da direita:
• 8 - Insira a imagem melro.jpg
• 9 - Atribua o nome Melro à imagem e defina o seu tamanho

1.5.11.A décima primeira linha da tabela

• ACTIVIDADES:

• 1 - A partir do Word, copie a indicação bibliográfica e formate o texto
• 2 - Alinhe o texto à direita e coloque-o em itálico, clicando os botões respectivos da Barra
de Ferramentas

1.5.12.A décima terceira linha da tabela

• ACTIVIDADES:

• 1 - Copie todos os elementos da linha sete da página informacoes.htm
• 2 - Se for necessário, formate a célula de modo a obter um alinhamento central do seu
conteúdo
• 3 - Seleccione o texto Informações e atribua-lhe um Hiperligação para a página
informacoes.htm
• 4 - Seleccione o texto Aves e desfaça o Hiperligação

1.5.13.Realização das hiperligações para os marcadores da página

• ACTIVIDADES:

• 1 - Realize as Hiperligações das imagens em tamanho reduzido para os Marcadores
respectivas.
• 2 - Grave a página e visualize-a no Browser

- 21 -

COLOCAÇÃO ON-LINE DO SITE GUIA DE AVES

- 22 -

2. Preparação do site para publicação na Web

Antes de publicar o seu site na Web, deve verificar duas coisas:

1 - A correcção de todos os hiperligaçãos
Utilize a opção Relatórios da Barra Ver e verifique o estado dos Hiperligações internos. Se
não estiverem correctos, altere-os aí.
Depois, perca algum tempo e "navegue" pelo seu site, testando todas as hiperligações internas.

2 - O tamanho dos ficheiros de imagens
É muito importante que os ficheiros de imagens sejam pequenos: nada mais desagradável do que
estar demasiado tempo à espera que a página seja carregada…

- 23 -

3. Publicação do site na Web

3.1. Onde publicar o seu site?
Para publicar o seu site na Web precisa de possuir uma “morada”, ou seja, um espaço num
servidor a que tenha acesso.
Em Portugal, o Sapo (http://www.sapo.pt) disponibiliza gratuitamente espaço onde poderá
colocar a sua página pessoal. Propomos-lhe que aproveite esta oportunidade!
A inscrição é bastante simples.

• ACTIVIDADES:

• 1 – Aceda ao Sapo: http://www.sapo.pt
• 2 – Na página principal siga o link para Páginas Pessoais para reservar um espaço destinado
à sua página pessoal:

Figura 5 - Página Inicial do Sapo

Depois de clicar na opção indicada na Figura 5, surge-lhe no ecrã a página inicial. É aí que se
deverá registar:
- 24 -

• 3 – Clique na opção indicada na Figura 6

Figura 6 - Página inicial

Depois de clicar na opção indicada na Figura 6, tem acesso à página seguinte:

Figura 7 - 1ª Página para efectuar o registo no Sapo

• 4 – Leia atentamente as regras de funcionamento e efectue o seu registo seguindo as
instruções que lhe são dadas.

- 25 -

3.2. Como publicar o seu site?

Existem numerosos programas que permitem o envio dos ficheiros por FTP1. Sugerimos-lhe
que utilize o WS-FTP: pode ir buscá-lo à Web (http://www1.terravista.pt/util/ws_ftp32.exe) e
usá-lo gratuitamente.
Criámos também um Tutorial que demonstra “passo a passo” como se configura o programa e
como se enviam ficheiros para uma morada do Terràvista. Consideramos que esse Tutorial ajuda
a compreender a descrição de procedimentos que faremos em seguida.

• ACTIVIDADES:

Actividade Única – aceda ao Manual on-line e explore o Tutorial “Enviar ficheiros por FTP
para uma morada no Terràvista” (Sessão nº10, ponto 5.2).

Nota importante:
Nas actividades seguintes vamos simular o envio do site para uma morada do Terràvista que
foi por nós criada. Não envie o seu site para esta morada – ela pertence-nos!
Deve adaptar os procedimentos que se seguem à sua realidade e enviar os ficheiros do seu
site para a sua própria morada no Terràvista.

Quando criou a sua morada no Terràvista, foi-lhe enviada uma mensagem com indicações que, a
partir de agora, lhe vão ser necessárias. Mantenha essa mensagem ao seu lado.
Ela é quase idêntica àquela que também recebemos quando criámos a nossa própria morada. A
Figura 8 mostra um extracto dessa mensagem, onde assinalámos os elementos de que vamos
precisar.

1
FTP = File Transfer Protocol. Serviço da Internet destinado especificamente à transferência de ficheiros entre
computadores.
- 26 -

Figura 8 - Mensagem enviada pelo Terràvista

• ACTIVIDADES:

• 1 - Inicie o programa WS-FTP, através do menu Iniciar do Windows
• 2 - Na Janela de Diálogo Propriedades de Session, digite:
Profile Name – TVISTA (ou outro nome se assim o entender)
Host Name/Adress – 7Mares.terravista.pt
User ID – Deverá colocar neste campo o Nome do Utilizador que lhe foi enviado pelo
Terràvista. No nosso caso é noniomtp
Password – Deverá colocar neste campo a Palavra-chave que lhe foi enviada pelo
Terràvista. No nosso caso é hp123
Save Pwd – Se estiver a trabalhar no seu computador pessoal, active esta opção: desta
forma não será necessário digitar de novo a Palavra-chave da próxima vez que quiser
enviar ficheiros para a sua morada no Terràvista. Se estiver a utilizar um computador da
sua escola, não active esta opção.

- 27 -

Legenda:
Profile Name: Designação da
configuração de acesso
Host Name/Adress: Endereço
do computador remoto
Host Type: Tipo de
computador remoto
User ID: Designação do
utilizador
Password: Password do
utilizador

Figura 9 - Janela de Diálogo do WS-FTP - Propriedades da sessão

• 3 - Saia com OK desta Janela de Diálogo.

Depois de estabelecida a ligação, o ecrã terá o seguinte aspecto:
Legenda:
Conforme verifica, esta
janela está dividida em
duas áreas:
1 - a do lado esquerdo:
representa o Sistema
Local (o seu computador,
que contém o site a
enviar);
2 - a do lado direito:
representa o Sistema
Remoto (para onde
pretende enviar o seu
site).
A seta que existe em
qualquer das áreas
permite subir de nível no
esquema de pastas.
Repare que no Sistema
Remoto já existe um
ficheiro index.html: é a
página que aí é colocada
pelo Terràvista quando se
cria uma nova morada e
que vai ser substituída
Figura 10 - Janela de Diálogo do WS-FTP após a ligação pela nossa.

• 4 - Na área do Sistema Local, clique sucessivamente na seta verde (para subir de nível no
esquema de pastas) até chegar à raiz do disco de trabalho (geralmente C: ou D:)
• 5 – Procure em seguida a pasta que contém o seu site e abra-a. (No nosso caso, e a título de
exemplo, vamos trabalhar com o site GuiadeAves).

No final o ecrã deverá ter um aspecto semelhante ao da Figura seguinte:
- 28 -

Figura 11 - Janela de Diálogo do WS-FTP depois de localizado o site a enviar
Legenda:

Entre a área do Sistema Local e a Área do Sistema Remoto existem duas setas que indicam o sentido da transferência de
ficheiros.
Se quiser transferir ficheiros do seu computador para a sua “morada” no Terràvista, deverá clicar na 2ªseta (depois de
seleccionar os ficheiros a enviar).
Se quiser transferir ficheiros da sua morada do Terràvista para o seu computador, deverá clicar na 1ª seta (depois de seleccionar
os ficheiros a receber).

Vai começar por enviar os ficheiros das páginas do site:
• 6 – Na área do Sistema Local seleccione todos os ficheiros a enviar (aves.htm, index.html,
informacoes.htm e localizacao.htm).
• 7 – Clique na segunda seta existente entre a área do Sistama Local e a área do Sistema
Remoto, para enviar os ficheiros.

Depois de efectuar estes procedimentos, o ecrã deverá ficar com o seguinte aspecto:

- 29 -

Figura 12 - Janela de Diálogo do WS-FTP, após o envio dos 1ºs ficheiros

Pretende-se agora enviar os ficheros de imagens. Repare que é necessário criar uma pasta no
Sistema Remoto com a designação imagens:
• 8 – Na Área do Sistema Remoto clique o botão MkDir
• 9 - Na Janela de Diálogo Input digite: imagens
• 10 - Saia com OK

A pasta foi criada e deverá ver no ecrã o seguinte:

- 30 -

Figura 13 - Janela de Diálogo do WS-FTP depois da criação da pasta imagens no Sistema Remoto

Antes de enviarmos os ficheiros temos que abrir a pasta que os contém (no Sistema Local) e a
pasta para onde os queremos enviar (no Sistema Remoto):

• 11 – Na área do Sistema Local abra a pasta imagens
• 12 – Na área do Sistema Remoto abra a pasta imagens

Deverá agora ver o seguinte no ecrã:

- 31 -

Figura 14 - Janela de Diálogo WS-FTP após a abertura das pastas imagens

Finalmente, vamos enviar os ficheiros de imagens:

• 13 – Na área do Sistema Local seleccione todos os ficheiros a enviar
• 14 – Clique na segunda seta existente entre a área do Sistama Local e a área do Sistema
Remoto, para enviar os ficheiros.

No final deverá ver o seguinte no ecrã:

- 32 -

Figura 15 - Janela do WS-FTP após o envio dos ficheiros de imagens

O site já foi enviado e pode ser consultado na Web. Podemos, portanto, encerrar o WS-FTP.

• 15 - Clique em Close para terminar a ligação
• 16 - Clique em Exit para encerrar o programa
• 17 - Teste o seu site no Browser (consulte a mensagem do Terràvista para ver o endereço)

- 33 -

Guiadasavesfp2003

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (17)

Guiadasavesfp2003