Criao de Pginas

Web
Em
FrontPage

Aplicaes Informticas B

Criao de pginas Web em FrontPage

Ficha de trabalho N. 1
3.2. Criao e Gesto de um site
Criao de um web site;
O ambiente de trabalho do FrontPage;
A barra de vistas;
Gesto de pginas: criao;
Gesto de pginas: abertura;
Gesto de pginas: guardar;
Gesto de pginas: impresso;
Gesto de pginas: pr - visualizao;
Gesto de pginas: publicao.

Contedos

1. No Microsoft FrontPage cria um web site pessoal, com o nome PginaPessoal, O web site constitudo por
pastas e ficheiros e deve ser guardado em A:\.

2.

No menu ver, escolhe lista de pastas, para veres as pastas e os ficheiros que foram criados. Devers ver uma
figura como a que se mostra na figura 1. Portanto o web site constitudo pelas pastas _private, imagens e
pelos ficheiros : favorite.htm, index.htm, interest.htm, myfav3.htm e photo.htm.

A primeira pgina que visualizamos quando acedemos a um web site chama-se a home page e dever ser
guardada num ficheiro chamado index.html, index.htm, defalt.html ou default.htm. Repare que neste caso o
ficheiro que contm a home page chama-se index.htm.
3.

Cria uma nova pgina em branco. assim criada uma nova pgina com o nome nova_pagina_1.htm. Guarda
esta pgina na pasta PaginaPessoal com o nome pgina_adicional_1.htm.

4.

Insira, agora, uma nova pgina mas baseada no modelo perguntas frequentes. Insira uma imagem qualquer
nesta pgina que deve guardar com o nome FAQ.htm no mesmo web site. Guarde todas as pginas, tendo o
cuidado de guardar a imagem mudando-lhe o nome para IMG na pasta imagens e escolher guardar ficheiro.

5.

Abra o anterior web site, a pasta PaginaPessoal, e depois o ficheiro FAQ.htm. Proceda impresso desta
pgina: para tal no modo de edio e no menu ficheiro aceda a pr visualizao, imprimindo de seguida
esta pgina.

6. Para garantir a salvaguarda do nosso site vamos publicar o nosso web site mas, por agora, localmente, ou
seja na pasta PaginaPessoal - teste do disco rgido. Acede a ficheiro publicar site web site remoto
utilizar uma pasta no computador.

Fichas de trabalho

Pgina 2

Aplicaes Informticas B

Criao de pginas Web em FrontPage

Ficha de trabalho N. 2

3.3. Formatao de pginas Web

Aplicar temas;
Insero de imagens;
Insero de imagens do Clipart;
Criao de formulrios;
Aplicar frames.

Contedos

1. Entre no Microsoft FrontPage e abra o site que obteve na ficha anterior. Abra depois o
ficheiro FAQ.
2. Relativamente pgina anterior, aplique-lhe o tema blank. Para isso usar o menu
formatar e depois tema. Tenha o cuidado de aplicar o tema apenas pgina FAQ e no s
outras do nosso web site. O fundo da pgina deve ficar como se mostra na figura 1. ou seja
uma grelha.

3. Insira uma nova pgina em branco. Insira uma imagem do Clipart e outra de ficheiro.
Grave-a no mesmo web site com o nome pagina_adicional_2.htm, e tenha o cuidado de
guardar as imagens na pasta imagens.
4. Insira um form simples na pgina pagina_adicional_2.htm ou ento insira uma nova pgina
mas agora escolha o modelo de pgina form page wizard. Siga o assistente para criar o
formulrio.
5. As imagens devem ficar no cimo da pgina, lado a lado, depois aparece, ento o formulrio
pedido.
6. Vais agora usar frames. A vantagem destes, consiste no facto de numa mesma pgina
poder-mos juntar, pginas numa determinada disposio consoante o tipo de frame
escolhida.
No menu ficheiro escolhe nova pgina depois seco frames pages e banner and
contents. Falta agora indicar quais as pginas, inicial e outras a colocar. Na pgina
superior vamos inserir o texto A minha pgina pessoal como se v na figura 2.

Fichas de trabalho

Pgina 3

Aplicaes Informticas B

Criao de pginas Web em FrontPage

Figura 2
7. Formata o texto a teu gosto.
8. Na frame lateral esquerda vais definir a pgina inicial pgina_adicional_1.htm ou ento
caso queiras uma nova pgina.
9. Na frame lateral direita procede de modo semelhante definindo a pgina_adicional_2.htm
ou nova pgina.

Fichas de trabalho

Pgina 4

Aplicaes Informticas B

Criao de pginas Web em FrontPage

Ficha de trabalho N. 3

3.4. Hiperligaes
Criar uma hiperligao;
Criar uma hiperligao para uma pgina ou ficheiro;
Criar uma hiperligao para uma pgina ou ficheiro da www;
Criar uma hiperligao para um endereo de correio electrnico;
Editar uma hiperligao;
Eliminar uma hiperligao.

Contedos

As hiperligaes so instrues de HTML que, ordem de um clique do rato, indicam ao

browser da web que dever ser apresentada outra pgina ou ficheiro.
1.

Abra o web site que obteve nas aulas anteriores. Depois escolha a pgina
pagina_adicional_1.htm para criar uma hiperligao para a pgina photo.htm.

2.

De seguida cria uma hiperligao para um ficheiro tua escolha, por exemplo um ficheiro
de imagem.

3.

Cria uma hiperligao para a home page do IOL, www.iol.pt , que a pgina de entrada
do site (index.htm) do ISP IOL. Cria outra para a pgina http://sapo.pt. No necessrio
escrever como endereo http://www.iol.pt/index.htm

4.

Cria uma hiperligao para o seguinte endereo de correio electrnico:

suporte@acesso.sapo.pt

5.

Vais, agora, mudar esta hiperligao para apoioaocliente@iol.pt que o endereo de

correio electrnico para o apoio ao cliente do IOL.

6.

Para terminar esta ficha de trabalho elimina a hiperligao anterior (neste caso para um
endereo de correio electrnico).

7.

Grava o teu trabalho na disquete ou pasta os meus documentos no disco rgido.

Fichas de trabalho

Pgina 5

Aplicaes Informticas B

Criao de pginas Web em FrontPage

Ficha de trabalho N. 4

3.5. Animao
Inserir um som de fundo;
Inserir um clip de vdeo;

Contedos

1.

Abra o web site com que trabalhou na ficha 3, depois abra a pgina
pagina_adicional_1.htm.

2.

Insira um som de fundo na pgina anterior. Procure um som para inserir faa uma procura
no Windows para obter sons do tipo wav. Proceda da seguinte forma: procure por *.wav
no nome do ficheiro a procurar para encontrar os ficheiros de som existentes no seu PC.

3.

Na mesma pgina vais agora inserir um clip de vdeo. Para tal inserir ficheiro video. Se
no encontrares nenhum vdeo faz uma procura no computador por ficheiros com extenso
mpg.

Fichas de trabalho

Pgina 6

Aplicaes Informticas B

Criao de pginas Web em FrontPage

Ficha de trabalho N. 5

Uso de marquees;
Trabalho com imagens;
Hiperligaes dentro da prpria pgina;
Personalizar botes;
Frames;
Uso de marcadores.

Contedos

Exerccio 1
Acede ao FrontPage e abre a pgina com o nome Jardim. Grava-a com o nome
Jardim_Final.
Efectua as seguintes alneas:
1. Insere o ttulo O Meu Jardim no incio da pgina. Usa uma marquee em slide
alinhado ao centro. Formata - o com o tipo de letra Comic Sans MS, de tamanho 7
e cor a teu gosto.
2. Formata o fundo da pgina com a imagem flor_azul.
3. Formata o texto com o tipo de letra Arial Black, de tamanho 5, cor azul-escuro e
centrado na pgina.
4. Abre a pgina Flores e grava-a com o nome Flores_Final.
5. Insere as imagens rosa, tulipa, malmequer e girassol ao centro, nas respectivas
clulas da 1.a coluna da tabela. No deves alterar o tamanho das clulas da tabela.
6. Na 2.a coluna escreve o nome das flores correspondentes, com a mesma
formatao da pgina Jardim_Final, e uma breve descrio de cada uma.
7. Efectua uma hiperligao do fundo da pgina para o topo.
8. Insere um boto para voltar pgina anterior.
9. Na pgina Jardim_Final, efectua hiperligaes nos nomes das flores para a pgina
Flores_Final.
10. As hiperligaes tm de ir directamente para a descrio da respectiva flor.
Grava o teu trabalho.

Fichas de trabalho

Pgina 7

Aplicaes Informticas B

Criao de pginas Web em FrontPage

Exerccio 2
Usa o FrontPage para efectuar um pequeno web site relacionado com a gua.
Deves ter em considerao as caractersticas abaixo representadas. Todos os ficheiros
devero ser gravados na pasta com os nomes indicados, na disquete ou
eventualmente na pasta os meus documentos do disco rgido.
1. Pgina inicial gua1
Todas as pginas sero acedidas pela pgina gua1 (pgina inicial). Utiliza para
isso as frames. Esta pgina de arranque dever ter o seguinte aspecto:

Figura 3
1.1.Ttulo: gua Bem precioso
1.2.Na rea de menus insere as seguintes palavras que iro ser hiperligaes e que
so as seguintes:
-

Importncia
Estudar
Links

1.3.Na rea principal insere uma frase e uma imagem a teu gosto sobre o tema do
site.
1.4.Na rea principal insere uma marquee com comportamento, dimenso e cor a
teu gosto, com o texto Visite esta pgina !!!
1.5.Formata os fundos das varias reas a teu gosto.
1.6.Em cada uma das palavras efectua uma hiperligao para as pginas seguintes.
2. Pgina A importncia da gua
2.1.Ttulo: A gua e a vida. Usa o Wordart, centrado, com movimento de animao
tua escolha.
2.2.Na rea principal escreve um texto que ilustre a tua opinio sobre a importncia

Fichas de trabalho

Pgina 8

Aplicaes Informticas B

Criao de pginas Web em FrontPage

da gua para a nossa sobrevivncia e de que forma achas que a preservas.

Formata o texto a teu gosto.
2.3.Fundo da rea principal a azul claro.
2.4.Na rea principal, insere:
Um gif animado sobre o tema: (Faz uma pesquisa, no motor google, por
gifs animados)
Uma seta (gif animado) com um link para a pgina inicial.
3. Pgina Estudar a gua
3.1.Ttulo: Estudar a gua. Formata o ttulo e o fundo desta a teu gosto.
3.2.Formata o fundo da rea principal com uma imagem tua escolha usando
marca de gua.
3.3.Efectua uma pesquisa na Internet usando um motor de busca tua escolha e
recolhe informao sobre o consumo da gua, a sua preservao e outros
aspectos que aches interessantes e importantes. (Podes usar a chave de
pesquisa: centro de cincia viva). Efectua um pequeno texto que ilustre as
concluses que retiraste e insere-o na rea principal da pgina.
3.4.Formata o texto a teu gosto.
3.5.Insere uma seta (gif animado) com um link para a pgina inicial.
4. Pgina Hiperligaes
4.1.Na zona inferior direita da rea principal, escreve a palavra Sugestes. Insere a
imagem caixa_postal de apoio e efectua uma hiperligao na frase para uma
caixa postal criada com o objectivo de te poderem enviar sugestes sobre como
preservar a qualidade da gua.
4.2.Na zona inferior esquerda da rea principal, insere uma imagem a teu gosto ou
um boto personalizado, para hiperligao para a pgina inicial.
4.3.Na zona central da rea principal, escreve frases com links para sites
interessantes sobre o tema do teu site.
Grava o teu trabalho

Fichas de trabalho

Pgina 9

Aplicaes Informticas B

Criao de pginas Web em FrontPage

Ficha de trabalho N. 6

3.6. Publicao
Publicao das pginas num servidor web;
Gesto e actualizao do contedo de um website;

Contedos

Vais, agora, publicar o teu web site da ficha 5 num servidor na Internet. Esta operao s deve
ser efectuada depois de editadas todas as pginas para verificao de eventuais erros
ortogrficos. Necessitamos de alojamento para o nosso site a ser desta forma publicado. A
sapo, ISP (Internet Service Provider - Fornecedor de Servio Internet) fornece alojamento de
15MB para alojamento, gratuito, de pginas pessoais dos seus clientes.
Vamos publicar o site inicialmente numa pasta do disco rgido para ficarmos com uma cpia.
Usa o menu ficheiro e depois publicar Utilizar uma pasta no computador ou rede como web
site remoto.
A pgina de entrada, ou ficheiro principal dever chamar-se, obrigatoriamente, index.html
pois caso isto no acontea, os seus ficheiros podem estar devidamente alojados na sua rea,
mas no podero ser acedidos directamente assim que algum digitar o seu endereo.
1.

Acede ao web browser Internet explorer e depois ao site http://www.sapo.pt que o

endereo da home page do SAPO.

2.

A vamos criar um registo e fornecer o endereo do nosso site para posteriormente ser
acedido via internet. Um NetBI (bilhete de identidade da internet) sem qualquer acesso do
SAPO, d-lhe direito a 5 endereos, cada um com 15Mb, num total de 75Mb distribudos
pelos 5 domnios. Cria o seguinte registo:
-

Nome:
Morada:
Endereo do site:
Etc.

3.

Acede pgina http://homepages.sapo.pt. Coloca o respectivo nome de utilizador e

palavra passe para passares zona de edio das pginas pessoais.

4.

Se ainda no definiste o teu endereo cria o endereo do teu site. Uma vez reservado o seu
espao e criado o seu endereo web (xxxxxxxx.no.sapo.pt) pode usar uma de trs formas
para enviar os seus contedos :

Envio de ficheiros via web. No precisa de nenhum programa, basta que v at sua rea de
edio, e clique na opo "webexplorer" no men da esquerda.
Na parte de baixo da pgina tem disponvel a opo "Envio/Upload via Web".
Pode enviar at 5 ficheiros em simultneo, procurando-os no seu disco, e depois de

Fichas de trabalho

Pgina 10

Aplicaes Informticas B

Criao de pginas Web em FrontPage

devidamente seleccionados, clicar em "enviar".

5.

Podes ainda colocar um contador de visitas para saberes o nmero de visitas ao teu site.

6.

Transfere os ficheiros e pastas da tua pasta que contm o web site para o servidor web da
sapo.

7.

No final o teu web site est publicado na web e pode agora ser acedido por qualquer
pessoa que aceda internet em qualquer parte do mundo.

8.

Verifica isso acedendo ao site via Internet escrevendo na barra de endereos o endereo do
site. Neste caso o endereo ser: http://nomedoutilizador.no.sapo.pt

9.

O upload, transferncia de ficheiros do nosso computador para o servidor, foi feito via
web mas tambm poderia ter sido feito usando um programa de FTP ( File Transfer
Protocol), como por exemplo o CUTE FTP ou o FTP commander

Como que fao para promover o meu site?

H vrias formas de promoo do seu site.
A primeira e mais eficaz ter a sua pgina alojada no SAPO, o site portugus
mais visitado.
Invista num site com contedos de qualidade, e mantenha-se atento s notcias
da pgina principal, a sero divulgados concursos e formas de ter a sua pgina
destacada no SAPO. Fale do seu site aos seus amigos, familiares, colegas, etc.
Inscreva o seu site em concursos, mais uma vez, esta forma de promoo s
ser eficaz se o seu site tiver, realmente, qualidade. Submeta o seu site aos
motores de pesquisa mais populares.
Inclua links no seu site, para sites interessantes e de qualidade e cujos temas
sejam complementares do seu. Se enviar um mail aos autores das pginas para
as quais fizer links, informando-os desse facto, ser muito natural que eles
retribuam. Mais uma vez a qualidade dos seus contedos fundamental.
Ateno, no so permitidos no SAPO banners ou qualquer tipo de publicidade,
nem mesmo a que advm de programas de trocas de links.
NUNCA faa spam (envio massivo de mensagens para destinatrios que no a
solicitaram, independentemente do eventual interesse que a sua pgina possa
ter) a anunciar a inaugurao do seu site. No use o mail, nem os newsgroups,
nem os chats, nem os foruns.
A no ser que se tratem de contedos muito especficos, nesse caso, dever
anunci-lo discreta, nica e exclusivamente nos canais que sejam frequentados
apenas pelos interessados nessas matrias.

Fichas de trabalho

Pgina 11