CRIAÇÃO DE UM SITE - 1 -

Transcrição

1 - 1 - CRIAÇÃO DE UM SITE

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 Criação da Web GuiadeAves Vai criar agora uma nova FrontPage Web. 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 Definição das características gerais da página 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 Inserção e formatação da Tabela 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 -

4 3 - Seleccione a célula da esquerda e atribua-lhe as seguintes características: Propriedades da célula: Alinhamento Horizontal: Esquerda Especificar Largura: 19% 4 - Seleccione a célula da direita e atribua-lhe as seguintes características: Propriedades da célula: Alinhamento Horizontal: Centro Especificar Largura: 81% 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 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 -

5 16 - Atribua o nome Informações à imagem, defina o seu tamanho e retire-lhe a moldura 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 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 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. Botão Localização 1 - Seleccione a imagem 2 - Defina uma Hiperligação para a página localizacao.htm. Botão Informações 3 - Seleccione a imagem 4 - Defina um Hiperligação para a página informacoes.htm Botão Aves 5 - Seleccione a imagem 6 - Defina um Hiperligação para a página aves.htm 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 . - legenda da imagem anterior Definição das características gerais da página 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 -

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 Inserção e formatação da tabela 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 Especificar Largura: 19% 3 - Formate a coluna da direita, optando por: Alinhamento Horizontal: Esquerda Especificar Largura: 81% - 7 -

8 A primeira linha da tabela 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 A terceira linha da tabela 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 -

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 A quarta linha da tabela Note que esta linha contém, na célula da direita, uma segunda tabela. 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: Alinhamento Horizontal: Esquerda Especificar Largura: 45% 4 Formate a célula da direita, optando por: Alinhamento Horizontal: Centro 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 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 Seleccione a imagem 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 -

10 Agora, pretende-se criar uma Hiperligação na expressão Áreas Protegidas (na legenda) que remeta para o site respectivo Na legenda, seleccione a expressão Áreas Protegidas 17 - Crie a Hiperligação para o seguinte URL: A quinta linha da tabela 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: A sétima linha da tabela 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

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 21 - Por último, grave a página e visualize-a no Browser

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 ; legenda da imagem anterior Definição das características gerais da página 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 Inserção e formatação da tabela 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 Especificar Largura: 19 in Percent 3 - Formate a coluna da direita, optando por: Alinhamento Horizontal: Esquerda Especificar Largura: 81 in Percent A primeira linha da tabela 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 A terceira linha da tabela Esta linha contém, na célula da direita, uma segunda tabela. 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: Alinhamento Horizontal: Esquerda Especificar Largura: 35% 3 - Formate a célula da direita (da 2ª Tabela), optando por: Alinhamento Horizontal: Centro 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 A quinta linha da tabela 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 A sétima linha da tabela 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 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 Célula da direita da quarta tabela. Esta quarta tabela foi

16 Definição das características gerais da página 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 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 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 Décima primeira linha da tabela principal. Contém a indicação bibliográfica, importada do ficheiro textos_6.doc Décima segunda linha da tabela principal. Não contém quaisquer elementos, servindo apenas para se conseguir uma maior separação 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 ; 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 Inserção e formatação da tabela 1 - Insira uma Tabela com 13 linhas, 2 colunas e uma largura total de 100% 2 - Formate a coluna da esquerda. Opte por: Alinhamento Horizontal: Esquerda Especificar Largura: 19% 3 - Formate a coluna da direita, optando por: Alinhamento Horizontal: Esquerda

17 Especificar Largura: 81% A primeira linha da tabela 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 A terceira linha da tabela Esta linha contém, na célula da direita, uma segunda 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: Alinhamento Horizontal: Esquerda Especificar Largura: 60% 3 - Formate a coluna central, optando por: Alinhamento Horizontal: Centro Especificar Largura: 20% 4 - Formate a coluna da direita, optando por: Alinhamento Horizontal: Centro Especificar Largura: 20% 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) A quarta linha da tabela 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 A quinta linha da tabela Esta linha contém, na célula da direita, uma segunda tabela. 1 - Insira uma tabela com 1 linha, 2 colunas e largura de 100% 2 - Formate a célula da esquerda, optando por: Alinhamento Horizontal: Esquerda Especificar Largura: 55% 3 - Formate a célula da direita, optando por: Alinhamento Horizontal: Centro 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 A sexta linha da tabela 1 - Copie a imagem regua.jpg que já colocou na linha Centre a imagem na célula, clicando o botão respectivo da Barra de Ferramentas A sétima linha da tabela Esta linha contém, na célula da direita, uma segunda tabela. 1 - Insira uma Tabela com 1 linha, 2 colunas e largura de 100% 2 - Formate a célula da esquerda, optando por: Alinhamento Horizontal: Esquerda Especificar Largura: 55% 3 - Formate a célula da direita, optando por: Alinhamento Horizontal: Centro Especificar Largura: 45% Preenchimento da célula da esquerda: 4 - Copie o Bullet que já inseriu na linha 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 Atribua o nome Alvéola Branca à imagem e defina o seu tamanho

20 A oitava linha da tabela 1 - Copie a imagem regua.jpg que já colocou na linha Centre a imagem na célula, clicando o botão respectivo da Barra de Ferramentas A nona linha da tabela Esta linha contém, na célula da direita, uma segunda tabela. 1 - Insira uma tabela com 1 linha, 2 colunas e largura de 100% 2 - Formate a célula da esquerda, optando por: Alinhamento Horizontal: Esquerda Especificar Largura: 55% 3 - Formate a célula da direita, optando por: Alinhamento Horizontal: Centro Especificar Largura: 45% Preenchimento da célula da esquerda: 4 - Copie o Bullet que já inseriu na linha 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 A décima primeira linha da tabela 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 A décima terceira linha da tabela Preencha a célula da direita:

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 Realização das hiperligações para os marcadores da página 1 - Realize as Hiperligações das imagens em tamanho reduzido para os Marcadores respectivas. 2 - Grave a página e visualize-a no Browser

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

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 ( disponibiliza gratuitamente espaço onde poderá colocar a sua página pessoal. Propomos-lhe que aproveite esta oportunidade! A inscrição é bastante simples. 1 Aceda ao Sapo: 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 FTP 1. Sugerimos-lhe que utilize o WS-FTP: pode ir buscá-lo à Web ( 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. 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 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 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: 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). No final o ecrã deverá ter um aspecto semelhante ao da Figura seguinte:

29 Legenda: Figura 11 - Janela de Diálogo do WS-FTP depois de localizado o site a enviar 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:

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 A pasta foi criada e deverá ver no ecrã o seguinte:

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. No final deverá ver o seguinte no ecrã:

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