CRIAÇÃO DE UM SITE - 1 -

(1)

C

(2)

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.

(3)

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

Figura 1 - A 1ª Página – Guia de Aves

Descrição Geral:

Esta é a Home Page ou página principal do site. Nela se incluiu o nome do site e os Hiperligaçãos que dão acesso às outras páginas. Todos os elementos foram colocados numa tabela. A linha vertical indica a divisão em duas colunas.

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 pequeno “truque” evitamos que o conteúdo da célula da direita (texto e/ou imagens) apareça sobre a imagem do background da página.

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

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

(4)

• 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 Alinhamento Vertical: Superior Especificar Largura: 81%

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

(5)

• 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.1. 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 5.0.0. 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.

(6)

4.0. A 2ª Página - Localização

Figura 2 – A 2ª Página – Localização

Descrição Geral:

Esta página inclui informações acerca da localização do Parque Natural da Serra de Aire e Candeeiros. Tal como a página anterior, todo o seu conteúdo foi colocado numa tabela. De notar, porém, que dentro desta tabela (na linha 4, na célula da direita), existe uma outra tabela. Todos os textos estão incluídos no ficheiro textos_6.doc, guardado na pasta c:/formacao/.

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 segunda tabela foi colocada na célula da direita 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.

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 nome do concelho de Santarém contém um hiperligação externo.

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:

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

• 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:

(7)

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

2.0.0. 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: Alinhamento Horizontal: Esquerda Alinhamento Vertical: Superior Especificar Largura: 19%

• 3 - Formate a coluna da direita, optando por: Alinhamento Horizontal: Esquerda Alinhamento Vertical: Superior Especificar Largura: 81%

(8)

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

Alinhamento Horizontal: Centro 4.0.0. 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.

(9)

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

5.0.0. 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: Alinhamento Horizontal: Centro Alinhamento Vertical: Superior Especificar Largura: 55% 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:

(10)

http://portal.icn.pt/ICNPortal/vPT/Areas+Protegidas/ParquesNaturais/SerraAire/

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.icn.pt/ICNPortal/vPT/Areas+Protegidas/

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

(11)

• 14 - Crie uma Hiperligações para a página index.html 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

• 15 - Seleccione o nome da página

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

• 17 - Seleccione o nome da página

• 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

(12)

5.0. A 3ª Página - Informações

Figura 3 - A 3ª Página - Informações Descrição Geral:

Esta página contém informações gerais acerca da morfologia das aves. Tal como nas páginas anteriores, todo o seu conteúdo foi colocado numa tabela. As linhas horizontais representam as linhas dessa tabela. Na linha 3, na célula da direita, foi colocada uma segunda tabela.

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 segunda tabela foi colocada na célula da direita 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 segunda tabela foi colocada na célula da direita da tabela principal (3ª linha). Contém a imagem tipos1.jpg

6 - Quarta linha da tabela principal. Não contém quaisquer elementos, servindo apenas para se conseguir uma maior separação. 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.

• 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 Erro! A origem da referência não foi encontrada. da pág. Erro! Marcador não definido.), mas tendo em consideração as seguintes diferenças:

Na Janela de Diálogo Propriedades da Página, no separador Geral: Título: Informações

Na Janela de Diálogo Propriedades da Página, no separador Formatação: Seleccione a opção Imagem de Fundo

(13)

Clique em Procurar e opte por background.jpg 2.0.0. Inserção e formatação da tabela • ACTIVIDADES:

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

Alinhamento Horizontal: Esquerda Alinhamento Vertical: Superior Especificar Largura: 19 in Percent • 3 - Formate a coluna da direita, optando por:

Alinhamento Horizontal: Esquerda Alinhamento Vertical: Superior Especificar Largura: 81 in Percent

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. 4.0.0. A terceira linha da tabela

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: Alinhamento Horizontal: Centro

Alinhamento Vertical: Superior Especificar Largura: 65%

(14)

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

5.0.0. A quinta linha da tabela • ACTIVIDADES:

Preencha a célula da direita:

• 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

6.0.0. A sétima linha da tabela • ACTIVIDADES:

Preencha a célula da direita:

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

(15)

6.0. A 4ª Página – Aves

Figura 4 - A 4ª Página - Aves

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 foi associado um hiperligação que remete para uma

bookmark existente nesta página.

5e - Célula da coluna central da terceira linha da segunda tabela. Contém a imagem melro_mini1.jpg. A esta imagem foi associado um hiperligação que remete para uma bookmark existente nesta página.

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 contém quaisquer elementos. Na célula da direita foi incluída 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

11 - Célula da esquerda da 7ª linha da tabela principal. Não contém quaisquer elementos. Na célula da direita foi incluída 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.

(16)

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 contém a imagem regua.jpg

15 - Célula da esquerda da 9ª linha da tabela principal. Não contém quaisquer elementos. Na célula da direita foi incluída uma quinta tabela com 1 linha e 2 colunas.

16 - Célula da esquerda da quinta tabela. Esta quinta tabela foi colocada na célula da direita da tabela principal (9ª linha). Esta célula contém parte do texto incluído no ficheiro textos_6.doc.

17 - Célula da direita da quinta tabela. Esta quinta tabela foi colocada na célula da direita da tabela principal (9ª linha). Esta célula contém a imagem melro.jpg

18 - Décima linha da tabela principal. Não contém quaisquer elementos, servindo apenas para se conseguir uma maior separação.

19 - Décima primeira linha da tabela principal. Contém a indicação bibliográfica, importada do ficheiro textos_6.doc. 20 - Décima segunda linha da tabela principal. Não contém quaisquer elementos, servindo apenas para se conseguir uma maior separação.

21 - Décima terceira 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.

• 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

Erro! A origem da referência não foi encontrada. da pág. Erro! Marcador não definido.), mas tendo em consideração as seguintes diferenças:

Na Janela de Diálogo Propriedades da Página, no separador Geral: Título: Aves

Na Janela de Diálogo Propriedades da Página, no separador Formatação: Seleccione a opção Imagem de Fundo

Clique em Procurar e opte por index.html 2.0.0. Inserção e formatação da tabela • ACTIVIDADES:

• 1 - Insira uma Tabela com 13 linhas, 2 colunas e uma largura total de 100% • 2 - Formate a coluna da esquerda. Opte por:

• 3 - Formate a coluna da direita, optando por: Alinhamento Horizontal: Esquerda

(17)

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.

4.0.0. A terceira linha da tabela

• 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: Alinhamento Horizontal: Centro Alinhamento Vertical: Superior Especificar Largura: 20%

• 4 - Formate a coluna da direita, optando por: Alinhamento Horizontal: Centro

• 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

(18)

• 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

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

5.0.0. 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 6.0.0. A quinta linha da tabela

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

• 3 - Formate a célula da direita, optando por: Alinhamento Horizontal: Centro Alinhamento Vertical: Superior Especificar Largura: 45% Preenchimento da célula da esquerda:

(19)

• 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 7.0.0. A sexta linha da tabela

• ACTIVIDADES:

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

• 2 - Centre a imagem na célula, clicando o botão respectivo da Barra de Ferramentas 8.0.0. A sétima linha da tabela

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

• 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

(20)

9.0.0. A oitava linha da tabela • ACTIVIDADES:

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

• 2 - Centre a imagem na célula, clicando o botão respectivo da Barra de Ferramentas

10.0.0. A nona linha da tabela

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

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

• 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

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

12.0.0. A décima terceira linha da tabela

• ACTIVIDADES:

(21)

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

(22)

C

O

L

O

C

A

Ç

Ã

O

N

-

L

I

N

E

D

O

S

I

T

E

G

U

I

A

D

E

A

(23)

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…

(24)

3. Publicação do site na Web

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

(25)

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

(26)

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

(27)

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.

(28)

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

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

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

Depois de estabelecida a ligação, o ecrã terá o seguinte aspecto:

Figura 10 - Janela de Diálogo do WS-FTP após a ligação

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

(29)

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.

(30)

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

(31)

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ã:

(32)

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.

(33)

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