FrontPage 2000

Autor: Professor Radamés Igor Manosso

Sumário FrontPage 2000

A criação de sites 4
Etapas para criar um site 4
Planejando o site 4
O que é html 5
Os formatos de arquivos da Internet 6
Endereços de páginas 7
O que faz o FrontPage 2000 7
Webs do FrontPage 8
A interface do FrontPage 8
Modos de exibição 9
Obtendo ajuda 11
A primeira web 12
Texto 14
Imagens 15
Links 17
Tabelas 21
Propriedades da página 23
Salvando uma página 24
Nomes de arquivos na web 25
Imagens 25
Gif 26
Gif animado 28
Jpeg 29
Png 29
Imagens mapeadas 30
Atividade 1 - Web corporativa 31
Gerenciando a Web 36
Modelos e assistentes 36
Temas 38
Bordas compartilhadas 39
Estrutura de navegação 41
Barra de navegação 43
Faixas 44
Quadros 45
2
Formulários 48
Inserindo um formulário 49
Inserindo campos 49
Inserindo texto e formatando o formulário50
Definindo propriedades dos campos 51
Definindo propriedades do formulário 53
Página de confirmação 54
Campo de confirmação 54
Componentes do FP 55
Letreiro digital 56
Anúncio em faixa 57
Botões em foco 59
Contador 60
Figura programada 62
Página de inclusão 64
Página de inclusão programada 65
Componentes do Office 66
Índices 67
Busca interna no site 68
Fórum de discussão 70
Plug-ins 71
Atividade 2 – Web pessoal 73
Componentes externos 82
Serviços para webmasters 82
Recomendação de página 82
Estatísticas de acesso 83
Livro de visitas 84
Enquetes 85
Anéis 86
Troca de banners 87
Publicação 88
Personal Web Server 89
FrontPage Server Extensions 91
Internet Information Sever 92
Hospedagem de sites 92
Endereço do site 94
Upload de arquivos 95
Cadastramento em serviços de busca 97
Atividade 3 – Web de serviços 98

3
A criação de sites
Neste capítulo veremos os
conceitos básicos sobre criação de
sites e conheceremos a interface
do FrontPage 2000.

Etapas para criar um site

Atualmente quase todas as empresas e organizações
têm site na Internet. Muitas pessoas também
desenvolvem sites pessoais. Criar um site não é
difícil. Veja quais são os passos a seguir:
1.Planeje o site e recolha material (textos,
imagens, informações) para o conteúdo das
páginas.
2. Planeje a navegação do site. Quais serão as
seções do site? Use os links corretamente para que
o internauta consiga navegar com facilidade.
3.Com algum conhecimento da linguagem HTML
ou com o auxílio de um editor de HTML crie as
páginas do site.
4. Defina o endereço do site e um servidor de
Internet para hospedá-lo.
5. Publique o site, ou seja, armazene as páginas no
servidor de Internet para deixá-las disponíveis aos
internautas.
4
 6. Divulgue o site nos serviços de busca para que
os internautas fiquem sabendo que ele existe.
Na seqüência, veremos como realizar cada etapa do
desenvolvimento.

Planejando o site
O planejamento é a etapa mais importante, pois, as
falhas cometidas nessa fase prejudicam todas as
etapas seguintes. Procure responder perguntas
como:
 Qual o objetivo do site?
 Que pessoas terão interesse de visitar o site?
 Que informações serão colocadas no site?
Lembre-se que é preciso facilitar a vida do
internauta. Não crie páginas muito pesadas e
carregadas de informação. Divida a informação em
partes, uma parte em cada página. Crie bastante
links nas páginas para facilitar a navegação. O ideal
é que o internauta possa chegar a qualquer parte do
site com no máximo três cliques de mouse.
A home page é a porta de entrada do site. Capriche
para deixá-la atraente. A partir dela o usuário deve
ter acesso às principais partes do site.

O que é html
As páginas de Internet são criadas usando uma
linguagem de descrição de páginas chamada HTML
(Hyper Text Markup Language). Até pouco tempo
atrás, quem quisesse criar sites tinha que entender
bem a linguagem HTML. Hoje isso só é necessário
5
 para quem quer produzir sites mais sofisticados. É
que surgiram os editores de HTML, ou seja,
programas que permitem a criação de páginas sem
conhecimento de HTML.

Se você tiver curiosidade de ver que

código HTML foi usado numa página, é
simples. Com a página aberta no
navegador, clique no menu Exibir e na
opção Código fonte. Será aberto o bloco de
notas com o texto em HTML daquela
página.

Os formatos de arquivos da Internet

Uma página de Internet geralmente é o resultado de
uma montagem com vários arquivos. Temos um
arquivo principal e vários arquivos auxiliares
contendo as imagens, as animações e os sons da
página.
html: ou htm é o formato do arquivo principal de uma
página. Contém o código em HTML da página. Nos
arquivos htm (ou html) ficam gravados o texto e
informações sobre a formatação da página. Para
criá-los usaremos o FrontPage.
gif:É um formato de arquivo de imagem. O formato
gif (Graphics Interchange Format) é o mais popular
na Internet para imagens. Arquivos gif podem ser
criados na maioria dos programas gráficos, como
Paint, Photo Editor, Corel, etc.
6
 gif animado:É uma seqüência de imagens trocadas na
tela em intervalos de tempo definidos, dando a
ilusão de movimento. Os gifs animados são
montados com vários arquivos gif estáticos. Para
criar gifs animados é necessário primeiramente
produzir os gifs estáticos. Depois, devemos usar um
programa como o Microsoft Gif Animator para juntar
os gifs estáticos e definir a seqüência de animação.
jpg:ou jpeg é outro formato para imagens muito
usado na Internet. É o preferido para imagens
fotográficas. Arquivos jpg são criados em vários
programas gráficos como o Photo Editor, o Corel e o
PhotoShop.
wav:ou wave é um formato de arquivos de som. O
problema dos arquivos wave é o tamanho. São
sempre grandes, por isso devem ser usados com
economia.
mid:ou midi é um formato para arquivos de música.
Sua grande vantagem é o tamanho reduzido dos
arquivos. O som da música gravada em midi lembra
os órgãos eletrônicos.
avi:
é o formato mais usado para vídeos. Os arquivos
de vídeo consomem muita memória. Devem ser
usados com economia.

Endereços de páginas
Antes de começar a criar sites você precisa entender
como funcionam os endereços de páginas e
arquivos, pois, vai precisar deles para criar os links.

7
 Observe o exemplo de endereço de página colocado
a seguir:
www.uol.com.br/paralamas/index.htm
O endereço de uma página é montado assim:
Identificação do domínio:
(www.uol.com.br). .Informa em
que domínio da Internet a página está armazenada.
Identificação das pastas:
(/paralamas/) Informa em que
pasta do domínio a página está armazenada. Pode
haver sub-pastas também.
Nome do arquivo:(index.htm) Identifica o nome do
arquivo com sua extensão.
Resumindo: o arquivo index.htm está na pasta
paralamas que fica armazenada no domínio
www.uol.com.br.

O que faz o FrontPage 2000

O FrontPage é parte integrante do pacote Office
2000 Professional. O FrontPage tem duas funções
principais: editor de páginas e gerenciador de webs.
O que diferencia o FrontPage de outros editores é
justamente sua capacidade de gerenciamento de
sites, o que permite, por exemplo, revisar e atualizar
links automaticamente, criar barras de navegação
automaticamente, adicionar componentes nativos
que se integram facilmente ao IIS (Internet
Information Server).
Com o FrontPage é possível desenvolver sites de
razoável complexidade.
8
Webs do FrontPage
Embora o FrontPage possa ser usado para editar
páginas isoladas, sua máxima funcionalidade á
alcançada quando as páginas estão inseridas numa
web.
Uma web do FrontPage é um conjunto de páginas,
pastas e arquivos que em juntos formam uma
unidade gerenciada pelo FrontPage. Ao criar uma
web no FrontPage você vai observar que além dos
arquivos criados por você, existem várias pastas e
arquivos de controle, gerados pelo FrontPage para
fazer o gerenciamento da web.

A interface do FrontPage
Para iniciar o FrontPage, clique em Programas/Microsoft
FrontPage.

9
 Figura 1 Janela do FrontPage

Até a versão 98, o FrontPage tinha duas interfaces

distintas: uma para edição de páginas e outra para
gerenciamento de webs. A partir da versão 2000, a
interface é única para edição e gerenciamento.
Vejamos os principais itens da interface do
FrontPage.
Lista de pastas.Na parte esquerda da janela do
FrontPage temos a lista de pastas e arquivos
organizada em forma de árvore hierárquica. Com a
lista gerenciamos a hierarquia de arquivos da web.
Janela de edição.
Localizada no lado direito da área de
trabalho, permite editar a web e seus componentes.
Nesta área editamos as páginas, a estrutura de
navegação, os links e as tarefas da web.

10
Modos de exibição
O FrontPage tem seis modos de exibição para
gerenciamento que podem ser alternados a partir do
menu Exibir:

Figura 2 Menu Exibir

 Página: este é o modo para editar as páginas da web no

estilo wyswyg (what you see is what you get. O que você
vê é o que você tem).
 Pastas: este é o modo para gerenciar a estrutura de
pastas da web.
 Relatórios: É o modo para visualizar os vários tipos de
relatórios da web, fornecidos pelo FrontPage.
 Navegação: É o modo para visualizar e editar a estrutura
de navegação da web.
 Hyperlinks: É o modo que exibe dados sobre os links que
remetem a uma página e os que existem nela apontando
para outras páginas.
 Tarefas: É o modo para controlar as tarefas pendentes da
web.

11
 Quando editamos uma página, temos os modos de
exibição para edição de páginas. Você pode vê-la de
três modos. Basta clicar numa das três abas do
rodapé da janela de edição.

Figura 3 Guia de modos de exibição para edição

 Normal: é o modo indicado para editar a página no estilo

wyswyg. A página fica com uma aparência razoavelmente
próxima do que o usuário verá no navegador.
 HTML: Exibe o código fonte da página. Use este modo
para alterar diretamente o código HTML.
 Visualização: Exibe a página com um aspecto bem
próximo do que aparecerá no navegador.

Obtendo ajuda
O FrontPage tem muitas opções de ajuda. Para
aprender ou resolver problemas você pode usar
material escrito, digital ou da Internet. As principais
fontes de ajuda são:

Manuais impressos e digitais

O FrontPage é fornecido com um manual impresso.
Utilize o manual para aprender as tarefas mais
comuns de um escritório. Além do manual, a
Microsoft edita várias obras, que podem ser
adquiridas nas livrarias. Para saber o que a
Microsoft publica consulte o site da Internet:
www.microsoft.com/brasil/mspress/. Nas livrarias,
você também encontrará publicações sobre o
FrontPage, tanto em papel, como em CD-ROM.

12
 Ajuda do programa
Use também o botão Clique no menu Ajuda e em Ajuda do
Oque é isto? que Microsoft FrontPage.
aparece na barra de
título das caixas de
diálogo.

Na janela de Ajuda há três guias, cada uma com um

modo diferente de consulta. Clique numa das guias:
Conteúdo, Assistente de resposta ou Índice.

Dê um duplo clique sobre um conteúdo para

visualizar suas sub-divisões.

O que é isto?
O botão O Que é isto? aparece em muitas caixas de
diálogo do Windows. Sua função é explicar o
funcionamento dos elementos da caixa. Se você quer
saber, por exemplo, o que faz um botão da caixa de
diálogo faça assim:
1. Clique no botão O que é isto? O botão muda de
forma para uma seta com uma interrogação
ao lado.
2. Clique no item da tela que você deseja
informações.
3. Surgirá uma etiqueta de texto explicando a
função do item clicado.
13
 4. Depois de ler a etiqueta clique em qualquer
lugar da tela para continuar trabalhando.

Na Internet
Clique em Ajuda e em Office na Web. Se o computador
estiver conectado à Internet será aberto um
endereço da Microsoft sobre o Office.

Figura 4. Menu Ajuda.

A primeira web
Neste capítulo veremos como criar
uma web com recursos básicos de
texto, imagens, links, tabela e
backgrund.
Para criar uma web, inicie o FrontPage e então:
1. Clique em Arquivo/Novo/Web.

2. Escolha um modelo de web. Para iniciar é

melhor escolher web vazia.
3. Especifique um caminho para a web. Uma
boa idéia é usar o caminho c:\meus
documentos\minhas webs\nomedaweb. A

14
 última pasta do caminho define o nome da
web.
4. Clique em OK.

Figura 5 Caixa de diálogo Novo

Pronto. A web está criada. Observe que duas pastas

são criadas automaticamente: a pasta images e a
pasta _private. Além delas, outros arquivos e pastas
de controle são criados, mas não são visíveis no
FrontPage. Você pode vê-los usando o Windows
Explorer.
O próximo passo é criar as páginas da web. Para
começar, clique em Arquivo/Novo/Página. Surgirá uma
página em branco na janela de edição. A partir de
agora, você pode começar a adicionar conteúdo na
página.
15
 Mas que conteúdo? Bem, nesta fase você já deve ter
uma idéia do que deseja, pois, fez um planejamento
prévio da sua web. Os elementos que você pode
pensar em usar de imediato numa página são texto,
imagens e links. Vamos falar um pouco sobre cada
item.

Texto
Para formatar o texto produzido você pode usar o
menu Formatar e escolher as opções Fonte, Parágrafo,
Marcadores e numeração ou Bordas e sombreamento.

Figura 6 Caixa de diálogo Fonte

16
A inserção de texto numa página usando FrontPage
é muito semelhante ao uso de um processador de
texto, mas você deve observar algumas
características específicas da linguagem HTML Veja
algumas dicas.

17
 Dicas sobre texto em páginas HTML

Prefira fontes básicas como Arial, Courier, Times

NewRoman e Verdana, pois estas fontes estão
instaladas em todos os computadores. Se você utilizar
fontes pouco comuns, muitos internautas não verão a
página do jeito que você a criou. Quando o computador
do internauta não tem a fonte correta instalada, o
navegador a substitui por uma fonte básica.
Se for importante criar texto com fontes pouco
comuns, prefira inseri-lo na página como arquivo de
imagem. Use um programa gráfico para criar o texto e
então grave-o como imagem no formato .gif.
Para criar texto com efeitos especiais, como
sombreado, aura ou efeito 3D, use um programa
gráfico. Crie a imagem e salve-a no formato .gif.
Prefira formatar os parágrafos usando os estilos pré
definidos da linguagem HTML. O texto ficará mais
uniforme.
O sistema de atribuir tamanho às fontes no HTML usa
um conjunto de números, em que a cada número
corresponde um tamanho de fonte em pontos.
Imagine o seu texto para ser visualizado num
navegador configurado em fontes médias, pois é o que
a maioria das pessoas usa e é quase impossível acertar
um texto para ficar bom em qualquer tamanho de fonte
no navegador.

Imagens

18
 As imagens usadas numa página são
Use somente imagens arquivos separados do documento
no formato .gif ou jpg.
html., mas vinculados a ele e podem ser
criadas em programas gráficos como Microsoft
Paint, Corel Draw ou Adobe PhotoShop. Você
também pode procurar imagens na Internet, em CDs
de clipart, pode escanea-las ou captura-las a partir
de uma câmera. Para inserir uma imagem na página
faça assim:
1. No menu Inserir clique em Figura.

2. Selecione uma fonte de imagens: o Clip

Gallery ou, então, do arquivo.

Use também o botão Ao escolher a opção arquivo o

Inserir figura de FrontPage permite buscar a imagem na
arquivo. própria web, ou então em outro local,
seja numa pasta do computador, da
rede, ou na Internet.

19
 Figura 7 Caixa de diálogo Figura

Ao salvar a página deve-se salvar também

as imagens vinculadas. Uma boa idéia é
salvá-las na pasta images.

20
 Dicas sobre imagens em páginas HTML

As imagens são arquivos separados da página HTML.

Na página HTML fica registrado apenas o endereço do
arquivo de imagem.
Prefira arquivos de imagem pequenos. A Internet é
lenta e arquivos grandes demoram em chegar ao
computador do internauta.
Para fotos o formato ideal é o JPEG. Para outros tipos
de imagens, como fundos, logomarcas e desenhos,
prefira o formato GIF.
Não exagere na quantidade de imagens. Evite
principalmente muitos gifs animados, pois a página
ficará confusa para o internauta.

Os gifs animados só ganham movimento

quando visualizados no navegador de
Internet. No FrontPage você verá apenas o
primeiro quadro do gif animado.

No próximo capítulo estudaremos as imagens com

mais detalhamento.

Links
Depois de criar o texto e inserir as imagens na
página, você pode pensar nos links. Primeiramente,
vamos distinguir entre links internos e externos.

21
 Link interno: Normalmente os links de um site
apontam para páginas do próprio site. Neste caso o
link é interno.
Link externo:
Quando o link aponta para uma página
localizada em outro site, dizemos que o link é
externo.
Os links podem ser criados de dois modos: como
links de texto ou como links de imagem.
Links de texto: O link de texto é ligado a uma palavra
ou frase do texto. Normalmente, os links
Use também o botão de texto têm cor diferente do texto
Criar ou editar normal e aparecem sublinhados.
Hyperlink.

Links de imagem:
É um link ligado a uma imagem da
página. Para reconhecê-lo é preciso passar o mouse
sobre a imagem. Se o mouse assumir a forma de
mão, o internauta saberá que se trata de um link.
Para criar um link faça assim:
1. Selecione a palavra ou frase que será
convertida em link. Se for o caso, selecione a
imagem que funcionará como link.
2. Clique em Inserir e no comando Hyperlink...
Surgirá a caixa de diálogo Criar hyperlink.
3. Digite o endereço da página para onde o link
deve apontar, ou se o link for interno, apenas
selecione o arquivo na lista de arquivos da
web.

22
 4. Clique em OK.

Figura 8 Caixa de diálogo Criar hyperlink

Endereços relativos
Na hora de fornecer o endereço para um link interno
não é preciso entrar com o endereço completo.
Basta fornecer a parte final do endereço. O
computador vai entender que a página que contém o
link e a página para onde o link aponta estão
armazenadas no mesmo site.
Por exemplo: você quer criar um link na página de
endereço
http://www.geocities.com/Paris/3004/index.html
apontando para a página
http://www.geocities.com/Paris/3004/fotos.html.
Como as duas páginas estão armazenadas no mesmo
local, na hora de criar o link basta endereçar o link
23
 para fotos.html. O computador vai entender que o
link é para uma página ‘ao lado’.

Indicadores
Indicador ou bookmark é uma instrução HTML que
marca um local específico dentro da página. Assim
podemos criar links para este local.
Um exemplo: na web da empresa Vapt Vupt existe
uma página chamada produtos.htm, que descreve
vários produtos da empresa. Podemos criar um
indicador para cada produto descrito na página.
Deste modo podemos levar o
Link que apontam
internauta diretamente ao texto de
para indicadores tem o
caractere # no fim do cada produto. Veja como os
endereço e, em indicadores são descritos num
seguida, o nome do endereço observando os exemplos
indicador. abaixo:
http://www.vaptvupt.com.br/produtos.htm#produto1
http://www.vaptvupt.com.br/produtos.htm#produto2
http://www.vaptvupt.com.br/produtos.htm#produto3
Para criar um indicador numa página faça assim:
1. Posicione o cursor no local da página em que
deseja inserir o indicador.
2. Clique em Inserir/Indicador.

3. Digite um nome para o indicador.

4. Clique em OK

24
 Figura 9 caixa de diálogo Indicador

Use indicadores para facilitar a navegação

dentro de uma página longa. Por exemplo:
crie no início da página o indicador topo.
No final da página coloque um link
apontando para topo.

Tabelas
As tabelas são ótimas para organizar os dados na
página. Para criar uma tabela na página faça assim:
1. Posicione o cursor no local onde iniciará a
tabela.
2. No menu Tabela escolha Inserir/tabela.

25
 3. Defina as propriedades da tabela na caixa de
diálogo Inserir tabela.
4. Clique em OK.

Figura 10 Caixa de diálogo Inserir tabela

Você pode formatar a tabela inteira ou apenas uma

célula. Para isso clique no menu Tabela e escolha
Propriedades da tabela... ou Propriedades da célula... Será
possível definir cor de fundo, largura das bordas,
espaçamento entre células, alinhamento do texto,
etc..
As propriedades que podem ser ajustadas são:
 Número de linhas.
 Número de colunas
 Alinhamento: da tabela em relação ao que a contém,
seja a página, um quadro ou outra tabela.
 Tamanho da borda: define a espessura da borda.
 Enchimento da célula: define a distância interna
entre o conteúdo da célula e sua borda.

26
  Espaçamento das células: define a distância entre as
bordas de células próximas.
 Largura: pode ser definida em pixels ou porcentagem do
que contém a tabela, seja a página, um quadro ou outra
tabela.
 Altura: pode ser definida em pixels ou porcentagem do
que contém a tabela, seja a página, um quadro ou outra
tabela.
 Cor da borda: pode-se definir a cor da borda clara e da
borda escura para simular um efeito de relevo iluminado.
 Cor de fundo: define uma cor para o fundo da célula ou
da tabela.
 Imagem de fundo: define uma imagem para ladrilhar
o fundo da tabela ou da célula.
 Número de linhas da célula. No mínimo uma.

Deve-se definir a largura da tabela em

pixels ou em porcentagem? Não existe
regra geral. Tudo ficaria simples se todos
os usuários usassem apenas uma resolução
de vídeo. Como isso não acontece, visualize
a tabela em várias resoluções de vídeo:
640x480, 800x600, 1024x728. Este teste
vai ajudá-lo a decidir o melhor modo de
definir a largura da tabela. O mesmo vale
para a altura.

Propriedades da página
No menu Arquivo, clique em Propriedades. Surgirá a
caixa de diálogo Propriedades da página.

27
 Figura 11 Caixa de diálogo Propriedades da página

Na configuração de página é possível definir entre

outras coisas:
Título da página:
é o texto que aparece na barra de
título do navegador quando a página é exibida.
Som de fundo: o arquivo de som definido será
executado no computador do internauta durante a
exibição da página. Defina quantas vezes o áudio
será executado: uma vez ou loop contínuo.
Cor de fundo:
é a cor exibida por trás do texto e das
imagens da página.
Imagem de fundo: um arquivo de imagem pode ser
definido para ladrilhar o fundo da página. A imagem
de fundo sobrepõe a cor de fundo.
Cores dos hyperlinks de texto:
as cores sugeridas são azul,
cinza escuro e vermelho. Os internautas estão
28
 acostumados com estas cores. Só as altere se for
necessário para melhorar o visual da página.
Margens: a margem da página define o afastamento
do texto e das imagens em relação às bordas da tela.

Salvando uma página

O método para gravar uma página HTML no
FrontPage é parecido com a gravação de qualquer
outro documento em aplicativos para Windows.
1. No menu Arquivo clique no comando Salvar
como... Surgirá a caixa de diálogo Salvar como.

2. Digite um nome para o arquivo e selecione

uma pasta para armazená-lo.
3. Digite um título para a página.
4. Clique em OK.

5. Salve também as imagens vinculadas.

Figura 12 Caixa de diálogo Salvar como

29
Nomes de arquivos na web
Vejamos algumas regras para dar nomes a arquivos
para Internet.
 A extensão dos arquivos HTML pode ser htm ou html.
Padronize sua web usando apenas uma das alternativas,
pois assim você evita confusão.
 Tenha em mente qual é o sistema operacional do servidor
que vai hospedar o site. Cada sistema tem regras próprias
para nomes. Os sistemas Unix, por exemplo, são case
sensitive, ou seja, fazem distinção entre maiúsculas e
minúsculas, logo no Unix o nome index.htm é diferente de
Index.htm.
 Em princípio, o arquivo da home page pode ter qualquer
nome, mas os servidores web reconhecem
automaticamente certos nomes como arquivo da home
page. Estes nomes costumam ser index.htm, index.html,
default.htm ou default.html. Informe-se sobre qual é o
nome padrão para arquivo de home page do seu servidor
e utilize-o. Assim, o usuário não precisará digitar o nome
do arquivo da home para acessa-la.
 Para uma maior compatibilidade use apenas caracteres
alfanuméricos. Evite usar espaço, cedilha e vogais
acentuadas. Em vez do espaço prefira o caractere
underline. ( _ )

Imagens
Neste capítulo falaremos com mais
detalhes do assunto imagens, um
dos mais importantes para o
sucesso da sua web.
Talvez você prefira usar imagens prontas na sua
web, mas nem sempre a imagem desejada está
disponível. Nessa hora, você terá que criar sua
30
 própria imagem usando um programa gráfico. Para
isso você precisa conhecer um pouco sobre os
formatos de imagens para Internet e suas
características.
Os navegadores de Internet reconhecem alguns
formatos de imagem, em especial gif, gif animado,
jpg e png.

O FrontPage tem filtros de importação que

possibilitam importar imagens em vários
formatos como wmf, tif, bmp, eps e pcx.
Ao salvar a imagem para web, porém, o
FrontPage as converte para um dos
formatos ideais para Internet.

Gif
O formato Graphic interchange format foi
desenvolvido originalmente pela Compuserve, uma
das primeiras empresas a operar na Internet
comercialmente. Este formato trabalha com até 256
cores e uma delas pode ser escolhida como cor
transparente. O formato gif é indicado para imagens
onde predominam as cores sólidas.
Os programas que geram imagens gif variam
bastante nos recursos que oferecem para controlar
as características da imagem. Uns oferecem menos
opções, outros são mais completos. Ao gerar um gif
num programa mais completo você poderá definir
características como:
31
Cor transparente:
esta cor aparece no programa de
edição do gif, mas não aparece no navegador. É ideal
para criar imagens que ficarão sobre fundos
coloridos.

Figura 13 Gif Figura 14 Gif

sem cor com cor
transparente transparente
sobre fundo sobre fundo
colorido colorido

Cores da paleta ou cores indexadas:

arquivos gif com
poucas cores ficam menores se forem gravados com
cores indexadas. Para entender o que é uma cor
indexada pense no seguinte: cada cor da tela do
navegador tem um número que a identifica. Se o seu
gif usa apenas cinco cores não vale a pena designá-
las usando números grandes. Basta usar os números
1,2 3,4 e 5, que consomem menos bits na memória.
No gif de cores indexadas as cores são designadas
por números pequenos, o que economiza espaço em
memória.
Gif entrelaçado:
Os gifs entrelaçados permitem que o
internauta visualize rapidamente a imagem antes
mesmo dela ser completamente descarregada no
navegador. Percebemos quando o gif é entrelaçado,

32
 pois ele surge no browser inicialmente em baixa
resolução e a qualidade da imagem vai melhorando
à medida que mais bits do arquivo chegam ao
navegador.
Suavização de serrilhado:
O serrilhado é o efeito que se
percebe no encontro de duas cores e que nos dá a
impressão que a imagem é um mosaico de pequenos
quadrados. Alguns softwares que geram arquivos gif
fazem suavização de serrilhado. Este recurso
consiste em adicionar alguns pontos de tons
intermediários na área de fronteira entre duas cores.
Desta forma o serrilhado fica menos visível e a
imagem fica mais suave.

Aura: A aura, ou aliasing, é um defeito de

imagens gif formado por pontos coloridos
que contornam um gif e nos a dão
impressão que o contorno da imagem está
sujo.

A aura é na verdade formada pelos pontos

que suavizam o serrilhado. Para evitar a
aura, a regra é muito simples: a cor
transparente do gif deve ser a mesma do
fundo sobre o qual o gif será aplicado.

Gif animado
A maioria dos efeitos de animação de páginas de
Internet são criados com gifs animados. Um gif
animado é um arquivo com extensão .gif, que
33
contém vários arquivos gif estáticos e instruções
sobre a ordem, o tempo e a posição em que os gifs
estáticos serão exibidos na tela do navegador.
A criação de gifs animados é semelhante à produção
de desenhos animados. Para começar, você precisa
dos gifs estáticos que vão compor a animação.
Depois, você deve definir como os gifs estáticos
serão exibidos: em que ordem, quanto tempo ficam
expostos e em que posição dentro do quadro do gif
animado eles aparecerão.
Uma boa idéia é usar o Microsoft Gif Animator para
criar seus gifs animados. Mas lembre-se: este
programa serve apenas para organizar a exibição
dos gifs estáticos, que devem ser criados em algum
programa gráfico.

Os gifs estáticos que compõe um gif

animado não precisam ser do mesmo
tamanho e podem se sobrepor. Vejamos um
exemplo da grande utilidade dessa
característica: você pode usar um gif maior
para compor o fundo da animação. Sobre
este fundo use um gif pequeno que muda
de posição sobre o fundo. Com isso você
cria a ilusão de que o gif menor está
andando sobre o maior.

34
Jpeg
O formato jpeg, ou jpg, criado pelo Joint
Photographic Experts Group, trabalha com sistema
de cores de 24 bits, o que o torna ideal para imagens
com muitos tons de cores, como fotografias.
O formato jpeg utiliza algoritmo de compressão
variável, ou seja, o usuário escolhe o fator de
compressão na hora de criar o arquivo. Quanto
maior o fator de compressão, menor o arquivo
gerado e pior a qualidade da imagem.
O usuário deve fazer alguns testes ao criar arquivos
jpeg para determinar o fator de compressão ideal
para sua necessidade. A idéia é usar a compressão
máxima que não compromete a qualidade da
imagem.

Png
O formato png é pouco utilizado e funciona como
uma alternativa ao gif. O formato png é de domínio
público, ao contrário do gif que é patenteado.

Na Internet o tamanho dos arquivos é uma

preocupação constante. Como as imagens
são vilãs na questão do consumo de banda
é fundamental ter controle do tamanho dos
arquivos de imagem. Se você mesmo cria
as imagens que utiliza nas suas páginas,
use com inteligência recursos como cores

35
 indexadas para gif e fator de compressão
para jpg e você verá que suas páginas
ficarão mais leves e rápidas.

Imagens mapeadas
Uma imagem pode ser associada a um endereço, ou
seja, a imagem pode ser um link da página. Além
disso, podemos estabelecer que uma parte
específica da imagem funcione como link. Isso se
chama mapear a imagem.
Para converter uma área específica da imagem em
link no FrontPage é muito simples.
1. Clique na imagem para selecioná-la. Surge a
barra de figura.
2. Clique num dos botões de área interativa da
barra: o retangular, o circular ou o polígono
livre.
3. Desenhe sobre a figura a área que será
mapeada. Ao soltar o mouse surge a caixa de
diálogo para definir o endereço associado
àquela área.
4. Defina o endereço e clique em OK.
Pronto. A área da figura está mapeada como link.
Você pode inserir numa figura quantas áreas
mapeadas quiser

36
 As áreas mapeadas são identificadas pelo usuário
quando passa o mouse sobre ela.

Atividade 1 - Web corporativa

Este é um roteiro de atividade que
reforça os conteúdos vistos até
aqui.
Para saber na prática como se cria uma web, vamos
a um exemplo. Criaremos uma web simples de uma
fábrica de microcomputadores, a Vapt Vupt
Informática Ltda. Se você quiser, pode escolher uma
outra empresa, mas procure colocar na sua web os
mesmos elementos que usaremos aqui.

Planejamento
Antes de começar sua web é preciso fazer um
planejamento e reunir as informações necessárias.
Nossa web tem função de divulgar a Vapt Vupt
Informática na Internet. Precisamos ter as seguintes
páginas no site:
 Homepage
 Quem somos (informações gerais sobre a empresa)
 Linha de produtos (informações gerais sobre os produtos
da empresa)
 Páginas de produtos (uma página para cada produto da
empresa)
 Compras (Informações sobre preços e condições de
pagamento)
 Página de créditos (quem fez o site e fonte das
informações usadas)

37
Criação da web
Inicie o FrontPage, clique em Arquivo/Novo/Web...

Crie uma web vazia. A sugestão de caminho é c:\Meus

documentos\Minhas Webs\Primeira Web.

Pronto a web foi criada. Agora vamos à criação das

páginas.

Criação das páginas

Clique em Arquivo/Novo/Página... para criar a home page
da sua web. O nome deve ser index.htm.
Agora você pode criar a home page da empresa. Não
esqueça de definir as propriedades da página para
que ela tenha um título. Observe o exemplo
seguinte.

38
 Figura 15 Home page da Vapt Vupt Informática Ltda.

Depois de criar a home page, você pode criar as

demais páginas do site. Lembre-se de voltar à home
page depois, para incluir os links para as páginas
que ainda não estão prontas.
Veja os exemplos de páginas criadas.

39
Figura 16 Página de créditos da Vapt Vupt Informática Ltda.

Figura 17 Página Quem somos da Vapt Vupt Informática Ltda.

40
 Figura 18 Linha de produtos da Vapt Vupt Informática Ltda.

Figura 19 Página de produto da Vapt Vupt Informática Ltda.

Gerenciando a Web
Neste capítulo veremos como
gerenciar webs com o FrontPage e
que recursos podem acelerar a
criação de páginas. Trataremos de
modelos, estilos, temas, estruturas
de navegação e quadros.

Modelos e assistentes
O FrontPage traz algumas web modelo para agilizar
nosso trabalho. São elas:

41
 Web vazia: como o nome diz, cria apenas a estrutura
básica da web. Escolha este modelo quando quiser criar a
sua web do zero.
 Web de uma página: além da estrutura básica, cria
uma página vazia.
 Web de presença corporativa: cria uma web para
divulgação institucional de uma empresa.
 Web de discussões: cria um espaço para pessoas
discutirem virtualmente, usando o mecanismo de fórum
de discussão.
 Web pessoal: cria uma web para pessoa física.
 Web de suporte técnico: web para empresas que dão
suporte on-line aos seus clientes.
 Web de projeto: web para uma equipe acompanhar um
projeto.
Para criar uma web a partir de um modelo, ou com o
auxílio de um assistente faça assim:
1. No menu Arquivo selecione Novo/Web.

2. Selecione um modelo ou um assistente

disponível na caixa de diálogo Novo.
3. Clique em OK

4. Defina os detalhes da web no caso de ter

optado por um assistente.

42
 Figura 20 Caixa de diálogo Novo

Modelos podem agilizar nosso trabalho,

mas muitas vezes nossas necessidades são
bem diferentes da solução que o modelo
propõe, por isso, veja se compensa usar os
modelos disponíveis no FrontPage.

Temas

43
Se você se arrependeu Se você já usou os temas para área de
de ter usado um tema, trabalho do Windows está acostumado
não se preocupe. É só com o conceito, que no FrontPage
voltar na caixa de funciona de modo semelhante. Tema é
diálogo Temas e um conjunto de definições gráficas que
escolher outro. aplicado numa web dá uma coerência
de design para as páginas.
Para aplicar um tema a uma web faça assim:
1. No menu Formatar clique em Tema....

2. Selecione um tema disponível.

3. Defina se o tema será aplicado em toda web
ou apenas nas páginas selecionadas.
4. Clique em OK.

Figura 21 Caixa de diálogo Temas

Pronto o tema será aplicado a toda a web ou a uma

página apenas, dependendo do que você definiu. O
tema define vários itens como: estilos de texto,

44
 imagem de fundo, botões de navegação, faixas,
réguas, marcadores de numeração e cores dos links
de texto.
Observe que ao aplicar um estilo vários arquivos
novos surgirão, em especial arquivos gráficos, que
são usados pelo FrontPage para criar os elementos
gráficos do tema.

Para modificar um tema ou criar um tema

novo a partir de um tema existente, clique
em Modificar na caixa de diálogo Temas.
Edite cores, texto e elementos gráficos. Em
seguida, clique em Salvar para modificar o
tema atual ou em Salvar como... para gravar
um novo tema.

Bordas compartilhadas
É comum visitarmos sites que
O conceito de borda apresentam uma mesma barra
compartilhada lembra
superior, ou um mesmo rodapé em
os cabeçalho e rodapé
do Word. todas as páginas. Em sites desse
tipo recomenda-se o uso de bordas
compartilhadas.
Uma borda compartilhada do FrontPage é uma área
reservada na página cuja estrutura se repete em
todas as páginas da web que estão com o recurso de
bordas ativo. Veja bem: o conteúdo da borda
compartilhada não precisa ser igual em todas as

45
páginas do site. A estrutura da borda é que se repete
em todas as páginas que a utilizam.
O FrontPage permite definir quatro bordas
compartilhadas: a superior, a inferior, à esquerda e a
direita.
Para criar uma borda compartilhada é simples.
1. Clique em Formatar/Bordas compartilhadas.

2. Dedina se as bordas serão aplicadas a toda

web ou à página selecionada.
3. Selecione quais bordas compartilhadas serão
aplicadas.
4. Clique em OK.

O recurso de bordas compartilhadas será

mais bem aproveitado se o utilizarmos em
todas as páginas do site. Nada impede,
porém que uma ou mais páginas fiquem de
fora do padrão.

46
 Figura 22 Caixa de diálogo Bordas compartilhadas

Quando definimos uma borda compartilhada,

automaticamente, o FrontPage inclui na borda
alguns componentes, considerados típicos para
aquela borda. Você pode utilizá-los ou simplesmente
apagá-los.
Na borda superior o FrontPage inclui
automaticamente uma faixa e uma barra de
navegação horizontal.
Na borda esquerda o FrontPage inclui
automaticamente uma barra de navegação vertical.
Na borda direita o FrontPage inclui
automaticamente um campo de comentário.
Na borda inferior o FrontPage inclui
automaticamente um campo de comentário.

47
 Alterando um item da borda compartilhada todas as
páginas que utilizam a borda serão alteradas.

Estrutura de navegação
Todo site de qualidade tem uma estrutura de
navegação clara e fácil de ser entendida pelo
usuário. Quando a estrutura de navegação é bem
pensada o usuário não se perde dentro do site e
chega rapidamente onde quer.

Regra dos três cliques.

Lembre-se que em sites
bem planejados pode-se ir de um ponto a
outro com no máximo três cliques.

O FrontPage tem duas ferramentas bem evoluídas

para tornar a navegação pela web consistente e
prática. Uma delas é o modo navegação, onde
definimos a estrutura de navegação da web. A
segunda é o componente barra de navegação, que
pode ser incluído nas páginas.
Vamos falar sobre os recursos do modo navegação:
Ao abrir o modo de exibição navegação pela
primeira vez você verá apenas um ícone da home
page no centro da tela. É a partir dele que criamos a
estrutura de navegação.
O ideal é criar a estrutura de navegação depois que
as páginas da web estiverem prontas. Digamos que
fizemos a web de uma loja de artigos de Informática.

48
Nessa web temos cinco seções: quem somos,
computadores, software, insumos e pedidos.
Para começar a criar a estrutura de navegação desta
web arraste os arquivos que estão na barra
esquerda do FrontPage para baixo do ícone da home
page. Por exemplo: arraste o arquivo
quemsomos.htm para baixo da home. Depois arraste
o arquivo computadores.htm para baixo da home.
Em seguida arraste também os arquivos
software.htm, insumos.htm e pedidos.htm para
baixo da home.
Perceba que vai se formando uma estrutura
parecida com um organograma. Temos a home page
no topo da estrutura e uma linha com cinco arquivos
formando o primeiro nível da estrutura de
navegação.

Figura 23 Modo navegação do FrontPage

49
 O
Mas para que serve a estrutura de navegação?
FrontPage a utiliza para criar as barras de
navegação, que vamos estudar em seguida.

Barra de navegação
As barras de
navegação usam as
informações da
estrutura de
navegação da web.
Uma barra de navegação é uma lista de links criada
automaticamente pelo FrontPage para facilitar a
navegação pela web. Você pode criar rapidamente
vários tipos de barras de navegação. Faça assim:

1. Clique no local da página onde deve entrar a

barra.
2. No menu Inserir escolha Barra de navegação....

3. Defina as propriedades na caixa de diálogo

Propriedades da barra de navegação

4. Clique em OK.

50
 Figura 24 Caixa de diálogo Propriedades da barra de
navegação

Pronto. A barra está criada. Quando você está

usando um tema na web, a barra poderá ser criada
com botões do tema.

Mas qual é a vantagem de usar barras de navegação?

Imagine uma web com centenas de
páginas. Em todas, você quer uma barra
de navegação que leve o usuário às seções
principais da web. Criar manualmente
centenas de barras não é uma idéia
prática.Imagine então, se você resolver
acrescentar uma seção nova no site e tiver
que mudar centenas de barras
manualmente. Com as barras do
FrontPage, você altera a estrutura de
navegação e todas as barras da web são
alteradas automaticamente.

51
Faixas
Você gostaria de colocar um título nas páginas da
sua web? Faça isso rapidamente usando uma faixa.
Faça assim:
1. Posicione o mouse no local da página em que
será incluída a faixa.
2. Clique em Inserir/Faixa de página...

3. Defina os detalhes da faixa e clique em OK.

Figura 25 Caixa de diálogo Propriedades da faixa de página

Pronto. A faixa será incluída na página. Se você está

usando um tema na web a faixa pode ser criada
como uma imagem gif.

Quadros
Com certeza você já visitou endereços em que a
janela do navegador fica dividida em áreas
independentes. Algumas áreas da janela apresentam
barras de rolagem próprias e se comportam como se
fossem janelas dentro da janela do navegador.
Endereços assim são formados por quadros, ou
frames.
52
Endereços com quadros são produzidos por um tipo
especial de arquivo html chamado página de
quadros, ou frame set. Podemos criar frame sets no
FrontPage facilmente.
A função do frame set é dividir a janela do
navegador em duas ou mais áreas retangulares. Em
cada uma das áreas retangular será carregada uma
página html. Se você criar um frame set com três
quadros, você terá que produzir quatro arquivos.
Um deles é o frame set e os outros três são as
páginas html carregadas em cada quadro.
Para criar um frame set faça assim:
1. Crie e grave as páginas html que serão
carregadas em cada quadro do frame set.
2. Clique em Arquivo/Novo/Página...

3. Selecione a guia Página de quadros e escolha um

modelo de frame set.
4. Clique em OK.

5. O frame set aparece na janela do editor com

botões para definir as páginas html
associadas a cada quadro.
6. Clique no botão Definir página e defina a página
que será carregada naquele quadro.
7. Repita a operação para definir a página dos
demais quadros.
8. Clique num quadro e em seguida clique no
menu Quadro/Propriedades do quadro.

53
9. Defina as propriedades do quadro. As
medidas serão definidas em pixels ou em
porcentagem? O quadro poderá ser
redimensionado pelo usuário? O quadro
exibirá barras de rolagem se necessário?
Quais as medidas das bordas entre quadros?
10. Repita a operação para definir as
propriedades dos demais quadros do frame
set.
11. Clique em Arquivo/Salvar para gravar o frame
set.

Figura 26 Caixa de diálogo Novo

54
 Figura 27 Página de quadros

A regra é bem simples:

Quando usar quadros?
só em último caso. Se você observar os
sites profissionais vai notar que eles
raramente utilizam frames. Quadros, em
geral, deixam a navegação confusa, pioram
o design da página e são um problema
quando o usuário usa uma resolução de
vídeo diferente daquela que você
recomenda. Antes de usar quadros pense
bem se não existe uma solução equivalente
que dispensa seu uso.

55
Formulários
Neste capítulo estudaremos a
criação de formulários com o
FrontPage.
Formulários adicionam interatividade à página. Um
formulário é um componente que coleta dados
inseridos pelo usuário e os envia ao servidor web
para processamento. O servidor web devolve ao
usuário uma resposta, que pode ser desde uma
simples confirmação de recebimento até o resultado
de um processamento complexo com acesso a banco
de dados.
O estudo dos formulários é um assunto muito amplo
e aqui vamos nos limitar aos formulários mais
simples e mais comuns para os quais o FrontPage
oferece suporte, pois, um estudo mais aprofundado
envolveria a discussão, inclusive, de aspectos de
programação.

Criando um formulário com FrontPage

Vamos exemplificar criando um formulário para livro
de visitas, que é um dos casos mais simples, pois
envolve apenas o envio dos dados ao servidor para
armazenamento, seguido do retorno de uma página
de confirmação para o usuário.
Imagine que você quer criar um livro de visitas no
seu site onde o usuário digita nome, endereço
eletrônico, diz se gostaria de ser informado das
novidades do site e tem um campo para digitar um
56
 comentário. No final do formulário o usuário tem o
botão de envio e o botão para limpar campos.
Quando clica no botão de envio os dados são
remetidos ao servidor e armazenados num arquivo
txt ou html. Uma página de agradecimento é
apresentada ao usuário após o envio com sucesso
dos dados.

Inserindo um formulário
Para começar o formulário faça o seguinte:
1. Posicione o cursor no local onde o formulário
será inserido.
2. No menu Inserir clique em Formulário/Formulário.

Pronto. O formulário foi iniciado. Graficamente

percebemos que o formulário fica contido num
retângulo tracejado visível no editor. Os itens que o
FrontPage adiciona automaticamente num
formulário são o botão Submeter, para envio dos
dados, e o botão Redefinir, par limpar os campos.

Figura 28 Novo formulário

57
Inserindo campos
O próximo passo é adicionar campos ao formulário.
Vamos continuar o exemplo. Faça assim:
Posicione o cursor no início do formulário.
1. Clique em Inserir/Formulário/Caixa de texto de uma
linha. Esse campo é para o nome do visitante.

2. Clique novamente em Inserir/Formulário/Caixa de

texto de uma linha. Este campo é para digitar o
endereço eletrônico do visitante.
3. Clique em Inserir/Formulário/Botão de opção. Repita
a operação para criar mais um botão de
opção. O visitante usará estes dois botões
para informar se quer receber e-mails.
4. Clique em Inserir/Formulário/Caixa de texto de
rolagem. O visitante usará este campo para
fazer um comentário.

Inserindo texto e formatando o formulário

Agora vamos acrescentar o texto e distribuir os
campos para acertar a apresentação do formulário.
Posicione o cursor no formulário e digite os textos.
Use marcas de parágrafos para organizar a
apresentação. Procure deixar o formulário como
apresentado na figura seguinte.

58
 Figura 29 Formulário com campos

Definindo propriedades dos campos

Agora que os campos estão criados podemos definir
suas propriedades Clique com o botão direito sobre
um campo e escolha Propriedades do campo do formulário...
Surgirá uma caixa de diálogo para definir as
propriedades daquele campo.
Cada tipo de campo tem suas características. Para
caixas de texto, por exemplo, podemos definir o
número máximo de caracteres, regras de validação,
texto padrão, se o campo é de senha, etc.

59
 Figura 30 Propriedades da caixa de texto

Botões de opção funcionam em grupos. O FrontPage

assume que botões de opção próximos pertencem a
um mesmo grupo. Você pode definir a que grupo um
botão de opção pertence, se estará previamente
selecionado no navegador e em que ordem ele será
tabulado no grupo.

Figura 31 Propriedades de botões de opção

Nos menus suspensos precisamos definir os textos

que serão listados. Além disso, definimos quantas
60
 linhas terá o menu, se serão aceitas seleções
múltiplas, etc.

Figura 32 Propriedades de menu suspenso

Definindo propriedades do formulário

Chegou a hora de definir como o formulário será
processado. O FrontPage dá suporte para
formulários simples de envio de dados, como é o
caso do nosso livro de visitas.
Clique com o botão direito em algum ponto do
formulário e selecione Propriedades do formulário...
Na caixa de diálogo que surge podemos definir o
endereço de um arquivo para armazenar os dados
enviados ao servidor. O FrontPage nos dá uma
sugestão. Se a aceitarmos será criado um arquivo txt
61
na pasta _private que receberá os dados enviados
pelos visitantes da página. Outra opção é enviar os
dados para um endereço de e-mail. Clique no botão
opções para poder definir esta alternativa.
Clicando no botão Opções acessamos uma caixa de
diálogo que nos permite configurar com mais
detalhes o processamento do formulário. Podemos
definir o formato do arquivo de destino dos dados e
o endereço da página de confirmação, que será vista
pelo visitante depois de enviar os dados.

Formulários criados seguindo o roteiro

acima só funcionarão corretamente se o
servidor web possuir as extensões para
FrontPage. Caso contrário, será necessário
modificar alguns itens do código html do
formulário para adaptá-lo a um servidor
não compatível com FrontPage Server
Extensions.

Formulários que executam um processamento mais

complexo que o envio simples de dados podem ser
criados com o auxílio do FrontPage, mas na maioria
dos casos será preciso escrever diretamente no
código html do formulário.

62
 Figura 33 Propriedades de formulário

Página de confirmação
Quando os dados de um formulário são enviados
com sucesso o usuário recebe uma página de
confirmação. Ao definir as propriedades do
formulário você deve fornecer o endereço desta
página.
No nosso exemplo do livro de visitas a página de
confirmação deve ter um texto como: “Obrigado por
ter assinado nosso livro de visitas”.

63
Campo de confirmação
Talvez você queira sofisticar um pouco sua página de
confirmação. Imagine que o José da Silva assinou
seu livro de visitas. Que tal dizer a ele após o envio
dos dados:
“José da Silva, obrigado por ter assinado nosso livro
de visitas”.
Isso é possível usando um campo de confirmação.
Faça assim:
1. Crie a página de confirmação.
2. Digite o texto ‘obrigado por ter assinado
nosso livro de visitas.
3. Posicione o cursor no início do texto.
4. Clique em Inserir/Componente/Campo de
confirmação.

5. Digite o nome do campo correspondente ao

nome do visitante no formulário do livro de
visitas. Se você manteve o padrão do
FrontPage este nome será T1.
Pronto. Toda vez que uma página de confirmação for
enviada ao usuário o texto do campo T1 será
adicionado na página.

64
Componentes do FP
Neste capítulo veremos como
adicionar componentes do FP nas
páginas, como: letreiro digital,
contador, arquivos do Ofice,
anúncio em faixa, figuras
programadas, botão em foco e
página de inclusão.
No FrontPage chamamos de componentes uma série
de recursos que dão mais vida às páginas html. São
soluções variadas que vão além do código html
básico, algumas utilizam linguagem Java, mas para o
usuário não apresentam maiores dificuldades, pois é
o FrontPage que se encarrega de implementar todos
os detalhes técnicos. Vamos ver alguns componentes
úteis.

65
 Figura 34 Menu componentes

Letreiro digital
Letreiros digitais são aqueles textos que se movem
na tela da direita para a esquerda, ou da esquerda
para a direita, como acontece nos letreiros
comerciais eletrônicos.
A inclusão de um letreiro digital na página é muito
simples.
1. Posicione o cursor no ponto em que o letreiro
será inserido.

66
 2. No menu Inserir escolha Componente/Letreiro
digital...

3. Digite o texto da frase do letreiro.

4. Defina os detalhes como o sentido em que o
texto vai correr, a velocidade, o alinhamento,
etc.
5. Clique em OK.

Pronto. O letreiro digital está criado. Para vê-lo em

funcionamento salve a página e visualize-a no
navegador.

Figura 35 Propriedades de letreiro digital

Anúncio em faixa
O anúncio em faixa lembra um gif animado. Você
seleciona algumas imagens e define uma ordem de
67
apresentação. O usuário que visita a página vê as
imagens sendo trocadas na tela seguindo a ordem e
a velocidade que você definiu. O anúncio em faixa é
um recurso que utiliza Java. Ao criar um anúncio no
FrontPage observe que dois arquivos .class são
criados na web para gerenciar o anúncio no
navegador do usuário.
Criar um anúncio em faixa é bem simples. Observe:
1. Posicione o cursor na posição em que o
anúncio vai entrar na página.
2. No menu Inserir clique em
Componente/Gerenciador de anúncios em faixa...

3. Defina o tamanho do retângulo que vai

conter as imagens.
4. Defina o estilo da transição entre as imagens.
5. Defina o tempo que cada imagem será
exposta.
6. Defina opcionalmente uma URL se quiser que
o anúncio funcione como link.
7. Adicione as imagens na lista da caixa de
diálogo.
8. Clique em OK.

Pronto. O anúncio foi criado. Salve a página e

visualize-a no navegador para testar o resultado.

68
 Figura 36 Gerenciador de anúncio em faixa

Botões em foco
Os botões em foco executam uma ação mouse over,
ou seja, quando o ponteiro aponta sobre eles algo
acontece. Os botões em foco do FP permitem vários
efeitos mouse over, como dar a impressão que o
botão foi iluminado ou que foi pressionado.
Ciar um botão em foco é simples. Veja:
1. Posicione o cursor na posição em que o botão
em foco vai entrar na página.
2. No menu Inserir clique em Componente/Botão em
foco...

3. Defina o texto do botão em foco.

4. Defina URL para o botão funcionar como link.

69
 5. Defina os demais detalhes do botão.
6. Clique em OK.

Pronto. O botão está criado. Salve a página e

visualize-a no navegador para testar o efeito.

Figura 37 Propriedades de botão em foco

Observe que os botões em foco são recursos que

utilizam Java. Dois arquivos .class são criados na
web para dar suporte ao efeito no navegador.

Contador
Contadores de acesso são uma das maneiras mais
práticas de controlar a visitação de um site. Os
contadores são recursos suportados no servidor, ou
seja, o servidor web deve incrementar o contador
toda vez que a página com o contador for entregue a
um usuário.
70
Antes de usar o contador do FrontPage certifique-se
que o servidor de Internet onde a página ficará
hospedada dá suporte a este componente. O
servidor web deve ter FrontPage Extensions
instaladas para que o contador funcione
corretamente.
Incluir um contador do FrontPage na página é bem
simples.
1. Posicione o cursor na posição onde o
contador vai entrar.
2. No menu Inserir, selecione Componente/Contador
de acesso...

3. Defina os detalhes do contador.

4. Clique em OK.

Pronto. O contador foi incluído. Para testa-lo será

necessário fazer o upload da página no servidor
web.

71
 O contador só vai
funcionar em um
servidor web que dê
suporte para
componentes do
FrontPage.

Figura 38 Propriedades de contador de acessos

Observe que o FrontPage cria um arquivo

de texto na pasta _private, que registra a
contagem. Não esqueça de fazer o upload
desse arquivo para o servidor.

72
Figura 39 Contador visto no
FrontPage Editor

Figura 41 Contador
Figura 40 Contador visto num servidor com
num servidor que não dá suporte para o
suporte ao componente. componente

Se o servidor web que você utiliza não dá suporte a

componentes do FrontPage, informe-se que solução
técnica para contagem de acessos ele aceita.

Figura programada
Com este componente você agenda o horário em que
uma imagem será exibida na sua página. Você pode
programar duas imagens: uma para ser carregada
durante os acessos que aconteçam num intervalo de
horário definido e outra opcional para ser carregada
nos demais horários.
Imaginemos que você produz o site de uma empresa
que faz promoções relâmpago tipo ligue agora e
ganhe um brinde sensacional. Para anunciar as
promoções, você pode usar uma figura agendada.
Crie uma imagem com o texto da promoção e
agende o horário em que ela será exibida. Só os
usuários que acessarem a página no horário
agendado serão informados da promoção.
Para incluir uma figura agendada na página faça
assim:
1. Posicione o cursor no ponto em que a figura
agendada vai entrar.

73
 2. No menu Inserir clique em Componente/Figura
agendada...

3. Defina o endereço da figura a ser carregada

no horário agendado.
4. Opcionalmente defina a figura a ser
carregada fora do horário agendado.
5. Defina o início e o término do horário de
exibição.
6. Clique em OK.

Pronto. A figura já está agendada. Salve a página e

visualize o efeito no navegador.

Figura 42 Propriedades de figura programada

74
Página de inclusão
A idéia da página de inclusão é simples, mas muito
útil. Você inclui uma página html dentro de outra.
Com isso podemos desmembrar um conteúdo em
partes.
Qual é a utilidade das páginas de inclusão? Digamos
que no seu site você usa um texto que se repete em
muitas páginas. Este texto sofre mudanças com
freqüência e você não quer o serviço de mudá-lo o
em muitas páginas. A solução é criar esse texto
numa página html separada e depois inseri-lo nas
demais páginas usando página de inclusão.
Para inserir uma página html em outra faça assim:
1. Posicione o cursor no ponto onde entrará a
página de inclusão.
2. No menu Inserir, clique em Componente/Página de
inclusão...

3. Digite o endereço da página a ser incluída.

4. Clique em OK.

Pronto. A página foi incluída. Toda vez que a página

incluída sofrer alterações a página que a inclui
também será exibida diferente para o usuário.

75
 Figura 43 Propriedades de página de inclusão

Página de inclusão programada

A página de inclusão programada segue a mesma
idéia da figura programada. A página é incluída
durante um intervalo de tempo definido por você. Se
a página for solicitada num horário fora do intervalo
definido não acontece a inclusão.
Para incluir uma página programada faça assim:
1. Posicione o cursor no ponto onde entrará a
página de inclusão.
2. No menu Inserir, clique em Componente/Página de
inclusão programada...

3. Digite o endereço da página a ser incluída.

4. Digite opcionalmente o endereço de uma
página a ser exibida fora do intervalo.
5. Difina o intervalo de horário da inclusão.
6. Clique em OK.

Pronto. A inclusão está agendada.

76
 Figura 44 Propriedades de página de inclusão programada

Componentes do Office
A Microsoft parte do princípio que os aplicativos
Office serão muito usados para criação de páginas
de Intranets empresariais. Em função disso, foram
criados os Microsoft Office Web Components.
Através do FrontPage podemos incluir esses
componentes numa página html. Os componentes
são: planilha eletrônica (spreadsheet), gerador de
gráficos (chart) e tabela dinâmica (pivot table).
Estes componentes trazem para dentro da página
html uma área com os recursos típicos do Excel. É
como se uma planilha fosse instalada dentro da
página web.
Observe que os Microsoft Office Web Components só
funcionam no navegador Internet Explorer 5.0 ou
superior.

77
 Figura 45 Planilha do Excel (spreadsheet) incluída na página
web

Figura 46 Tabela dinâmica do Excel (pivot table) incluída

numa página web

Índices
Um dos serviços interessantes que você pode ofertar
aos visitantes do seu site é o mapa do site. No
78
mapa, ou índice, o usuário encontra links para todas
as páginas do site. O FrontPage cria índices
rapidamente graças ao componente índice.
Para criar um índice faça assim:
1. Posicione o cursor no ponto onde começará o
índice.
2. No menu Inserir clique em Componente/Índice
analítico...

3. Defina as características do índice.

4. Clique em OK.

Pronto. Visualize o índice no navegador para

conferir os resultados. O índice é montado
respeitando a estrutura de navegação do site. Você
pode configurar o componente para ele ser
atualizado toda vez que uma página do site for
alterada. Faça isso para manter o índice sempre
atualizado. E não esqueça de fazer o upload da
página de índice toda vez que seu site sofrer alguma
alteração de páginas.

79
 Figura 47 Propriedades do índice analítico

Busca interna no site

O FrontPage tem um componente processado no
servidor que faz busca por palavras chave em todas
as páginas do site. O que você precisa fazer é inserir
o formulário de busca na página. Para inserir um
formulário de busca interna no seu site faça assim:
1. Posicione o cursor no ponto onde o
formulário será incluído.
2. No menu Inserir clique em Componente/formulário
de pesquisa...

3. Defina os parâmetros do formulário de busca.

4. Clique em OK.

Pronto. O formulário ficará disponível para o usuário

localizar palavras chave no site. O resultado da
busca é uma página html com links para todas as
80
 páginas do site que têm a palavra-chave usada na
pesquisa. Vale lembrar que este componente só vai
funcionar se o servidor web tiver instaladas as
FronPage Server Extensions.

Figura 48 Propriedades de formulário de pesquisa

Fórum de discussão
Os fóruns de discussão estão a cada dia mais
populares na Internet. Incluindo um fórum no seu
site, você pode dinamizar a visitação, além de
conhecer melhor a opinião dos visitantes.
Um fórum é uma coleção de mensagens redigidas
pelos participantes organizadas hierarquicamente a
partir da raiz do fórum. O participante pode postar
uma mensagem na raiz do fórum, ou então, postá-la
como resposta a uma mensagem enviada
anteriormente.

81
A postagem como respostas a uma mensagem
anterior cria o ambiente de discussão do fórum, pois
os participantes podem fazer a réplica de uma
mensagem.
Você pode criar um fórum de discussão no seu site
com auxílio do FrontPage. O caminho é o seguinte:
1. Abra a web em que vai conter o fórum.
2. No menu Arquivo, clique em Novo/Web...
3. Selecione o Assistente de web de discussões.
4. Marque a opção Adicionar à web atual.
5. Clique em OK.

Com isto, inicia-se o assistente de criação do fórum

de discussão. O assistente criará uma sub-web
dentro da web atual. Você deve definir passo a passo
as características do fórum. Uma das escolhas a
fazer é em que pasta serão colocados os arquivos do
fórum. O FrontPage sugere uma pasta oculta (inicia
com underline). Depois de todas as definições feitas,
clique em concluir. As páginas html do fórum serão
criadas na sua web.
Fóruns de discussão criados no FrontPage são
gerenciados por FrontPage Server Extensions. É
preciso tê-las no servidor web para que o fórum
funcione.

82
 Figura 49 Assistente de web de discussões

Plug-ins
Certos componentes não são suportados pelos
navegadores de Internet, mas funcionam na página
graças à instalação de recursos adicionais no
computador. Esses programas que adicionam
recursos ao navegador são chamados plug-ins.
Os plug-ins mais populares são os que acrescentam
recursos multimídia à página como o Flash Player, o
Shockwave Player e o Real Player.
Você pode incluir arquivos de plug-ins na sua web.
Vamos exemplificar incluindo numa página um
arquivo para Flash Player. Os arquivos para Flash
Player têm extensão .swf. Faça assim:
Posicione o cursor no ponto em que será incluída a
área destinada ao Flash.
1. Clique em Inserir/Avançado/Plug-in...
83
Representação de um
plug-in no editor do
FrontPage
2. Defina o caminho onde está o arquivo .swf.
3. Defina as medidas da área retangular onde
será exibido o Flash.
4. Clique em OK.

Ao Salvar a página você será chamado a indicar um

local para armazenar o arquivo swf na sua web.

Figura 50 Propriedades do plug-in

Pronto. O Flash está incluído na página. Visualize a

página no navegador para ver se tudo está

84
 funcionando bem e se o Flash está enquadrado
corretamente na área de exibição.

Gravando arquivos Flash da Internet.

Quando você
encontra um Flash interessante na
Internet e quer gravá-lo, a pergunta é
como fazer isso? Não adianta clicar com o
botão direito no Flash, pois o menu que
aparece não apresenta opção de gravação.

O macete é o seguinte: Abra o gerenciador

de arquivos do micro e na pasta
Temporary Internet Files, procure o
arquivo swf do Flash. Este arquivo pode
ser copiado para outra pasta.

Atividade 2 – Web pessoal

Nesta atividade você reforça os
conhecimentos de gerenciamento
de webs e de inclusão de
componentes do FrontPage.
Nessa atividade, criaremos uma web pessoal. O
tema escolhido para exemplo é história do rock’n
roll. Você pode escolher outro assunto, mas o
importante é que a web tenha os seguintes itens:
 Tema
 Estrutura de navegação
 Bordas compartilhadas
 Faixas de página
 Barras de navegação
85
 Página de livro de visitas (formulário)
 Componentes do FrontPage (letreiro digital, contador,
etc.)
 Mapa do site (índice)
 Plug-in Flash

Planejamento
O nome da web será Dinossauros do rock. As
páginas da web serão:
 Homepage.
 Beattles
 Rolling Stones
 Pink Floyd
 Livro de visitas
 Mapa do site
 Créditos

Criação da web
Inicie o FrontPage e no menu Arquivo clique em
Novo/Web...

Escolha uma web vazia. O caminho recomendado é

c:/Meus documentos/Minhas Webs/Segunda Web.

Pronto. Agora, vamos para a criação das páginas.

Criação das páginas

Você pode criar as páginas e deixá-las em branco
por hora, para mais tarde trabalhar no conteúdo. No
momento, precisamos dos arquivos criados, para
desenvolver os outros itens como a estrutura de
navegação e barras de navegação.

86
 Figura 51 Páginas de Web Dinossauros do rock

Tema
Com a web criada você pode escolher o tema. O
tema do exemplo foi Artes.

Estrutura de navegação
Com as páginas principais criadas, você pode definir
a estrutura de navegação da web. Faça isso no modo
de exibição Navegação.

87
 Figura 52 Estrutura de navegação

Bordas compartilhadas, faixas e barras de

navegação
Com a estrutura de navegação definida podemos
criar as faixas e as barras de navegação.
Na home page, formate uma borda compartilhada
superior. Nas demais páginas, formate uma borda
compartilhada superior e uma lateral esquerda.
Na home page incluiremos uma barra de navegação
horizontal na parte superior da tela. Nas demais
páginas, incluiremos uma barra de navegação na
lateral esquerda.

88
 Figura 53 Faixa e barra de navegação da home page

Figura 54 Faixa e barra de navegação da página Beatles

Livro de visitas

89
 Vamos supor que a web será
Não esqueça de criar a armazenada num servidor com
página de
extensões para FrontPage. Assim,
confirmação.
poderemos usar os recursos para
formulários do FrontPage. Os dados enviados para o
servidor pelos visitantes da web ficarão
armazenados num arquivo de texto da web, criado
automaticamente pelo FrontPage.
Siga o modelo:

Figura 55 Livro de visitas

Para que o usuário receba uma página de

confirmação após o envio dos dados do formulário é
preciso fazer duas coisas.s: criar uma página de
confirmação como no exemplo seguinte e depois

90
incluir o caminho para esta página nas propriedades
do formulário.

Figura 56 Página de confirmação do livro de visitas

91
 Figura 57 Opções do formulário

Componentes FrontPage
Escolha um ou mais componentes do FrontPage e
inclua na sua web. Pode ser um contador, um
letreiro digital, um anúncio em faixa. O exemplo
abaixo é o letreiro digital.

Figura 58 Letreiro digital no editor do FrontPage

92
Mapa do site
Na página mapa do site, inclua um índice, como no
exemplo seguinte:

Figura 59 Mapa do site

Plug-in Flash
Para incluir um Flash na sua web, primeiro obtenha
o arquivo swf. Informe-se com seu professor sobre
isso, ou então, procure na Internet um Flash
interessante.
Depois de ter o caminho do arquivo swf, você pode
incluí-lo na página. Não esqueça de dimensionar a
caixa do plug-in para um tamanho que permita a
correta visualização do Flash.

93
Figura 60 Página com plug-in

94
Componentes externos
Neste capítulo veremos como
melhorar a web adicionando
componentes processados por
terceiros, como troca de banners,
estatística de acessos, livro de
visitas, etc...

Serviços para webmasters

Os webmasters de sites pequenos nem sempre tem
acesso às funcionalidades disponíveis nos grandes
sites, pois serviços mais sofisticados processados no
servidor não costumam ser ofertados a pequenos
clientes pelos mantenedores de servidores web.
Uma alternativa é usar os serviços para webmasters
disponíveis na Internet, fazendo o processamento de
dados em servidores especializados. Estatística de
acessos, por exemplo, é um serviço que seu
provedor de acesso e os sites de hospedagem
gratuita não costumam oferecer. Nesse caso, é
melhor usar um serviço gratuito de estatísticas.
Existem muitos serviços para webmasters na
Internet. Em geral, são gratuitos e se mantém
através da publicidade que veiculam junto com o
serviço. Vejamos alguns:

Inserindo código html numa página:

a maior parte
dos serviços para webmasters envolve
inserção de código html na sua página.
95
 Use o modo de exibição html do editor do
FrontPage para fazer isso.

Recomendação de página
A recomendação de páginas funciona assim: o
usuário visita o seu site, gosta e quer recomendá-lo a
um amigo. Você não pode perder esta oportunidade
de divulgar o site. Existem serviços que o ajudam
nessa tarefa. Você insere um trecho de código html
na sua página e quando o usuário visita a página vê
um anúncio sugerindo a recomendação da página.
Ao clicar no anúncio, o usuário recebe um
formulário para enviar um e-mail com o endereço da
página ao amigo do usuário.

96
 Figura 61 Formulário de recomendação de página

Para recomendação de páginas visite

www.recomenda.com.br.

Estatísticas de acesso
Quando você inclui um contador de acessos na sua
página passa a ter uma idéia básica da visitação,
mas não obtém resposta para perguntas como: em
que horas a página é mais acessada? Qual a
configuração de vídeo mais usada pelos visitantes?
As visitas chegam ao site a partir de qual endereço?
Se você quer conhecer melhor o público que visita o
site é preciso usar um serviço de estatísticas de
97
acesso. Para sites pequenos, a melhor opção é
utilizar um serviço de estatísticas gratuito
processado externamente. Funciona assim:
Você inclui um trecho de código html fornecido pelo
serviço de estatísticas na sua página. Este código
html envia uma requisição de processamento ao
serviço de estatísticas toda vez que alguém acessa a
página no seu servidor web. Esta requisição
encaminha vários dados do usuário para o serviço de
estatísticas. Lá, os dados são armazenados num
banco de dados. Quando você quiser, vai ao serviço
de estatísticas e faz uma consulta aos dados. Desta
forma, você fica conhecendo o perfil dos usuários da
sua página.
Os serviços de estatística oferecem várias opções
interessantes como não contar os acessos à página
feitos por você mesmo, ocultar a contagem para os
usuários ou deixar públicas as estatísticas para os
usuários.

Para estatísticas de acesso gratuitas visite

www.thecounter.com, ou então, o
brasileiro www.acessos.com.br

98
Livro de visitas
O livro de visitas é um dos componentes com
processamento no servidor mais populares. O
usuário preenche o formulário do livro de visitas. Os
dados são remetidos ao servidor web que os grava e
devolve ao usuário a página html com os dados mais
recentes lançados no livro.
Para incluir na sua web um livro de visita
processado externamente vá até um site
especializado para criar o livro. Cada serviço tem
sua própria rotina para criação de livros. O
formulário para assinar o livro geralmente fica
hospedado no site que presta o serviço. No seu site
você coloca links para o formulário. O banco de
dados com as assinaturas também fica armazenado
no servidor do serviço.

Para criar um livro de visitas externo visite

www.theguestbook.com, ou então, o
brasileiro Lemon Guest book.
http://lemon.trendnet.com.br/guestbook/

Enquetes
Enquetes são ferramentas para fazer pesquisa de
opinião no seu site. O usuário responde a uma
pergunta do tipo múltipla escolha. O formulário é
remetido ao servidor de enquetes que processa a
99
 resposta e devolve uma página de resultados com
estatísticas da votação.
Para incluir uma enquete no seu site vá até um site
que preste o serviço para gerar o código html do
formulário da enquete. Depois de obter o código,
inclua-o na sua página.

Figura 62 Resposta de enquete modelo

Para criar enquetes no seu site, visite

www.pergunta.com.br.

Anéis
Anéis são uma tática de divulgação de sites. A
proposta dos anéis é facilitar o acesso do usuário a
sites com um tema comum. Por exemplo: você criou

100
uma web sobre cães de raça e quer que todos os
interessados no assunto venham visitar o seu site.
Uma boa idéia é inscrever o site num anel sobre
cães de raça.
O anel é uma lista de sites que cooperam entre si
para aumentar os acessos a suas páginas. Em cada
site do anel, há links para outros sites do anel, por
sorteio ou por lista.
No seu site o anel é divulgado através de alguns
links que remetem a outros sites do anel,
aleatoriamente, ou a partir de uma lista onde o
usuário vê todos os sites integrantes do anel.
Na operação de um anel há duas figuras: o provedor
do serviço e o coordenador do anel.
Provedor do anel é a empresa que mantém a
infraestrutura de Informática para criação e
operação dos anéis. Ao provedor interessa a criação
do maior número possível de anéis, pois seu objetivo
é faturar com publicidade.
Mediadoré a pessoa que cria um anel específico e atua
aceitando novos sites, no anel, definindo as regras
de inclusão e controlando se os sites participantes
exibem os links do anel corretamente. O mediador é
a pessoa que coordena uma cooperativa de
webmasters unidos pelo desejo de aumentar a
visitação dos seus sites.
Você pode se inscrever num anel, ou então, criar um.

101
 Para se inscrever num anel ou criar um
visite www.webring.com.

Troca de banners
Uma forma prática de divulgar sites pequenos na
Internet é pela troca de banners. A idéia é simples: o
banner publicitário do seu site é divulgado em
outros sites. Em troca, você também exibe banners
publicitários de terceiros no seu site. O
gerenciamento da troca de banners fica a cargo de
um serviço especializado.
Você pode entrar em acordo direto com outros
webmasters para colocar seu banner em outros
sites, mas se você não quer ter o trabalho da
negociação utilize um serviço de troca de banners.
Funciona assim:
Você se inscreve no serviço de troca de banners e
envia seu banner para divulgação em outros sites.
Em contrapartida, você insere na sua página um
código html que carrega um html de terceiro no seu
site, toda vez que alguém o visita.
O gerenciamento da troca de banners fica a cargo
do serviço, que controla quantas exibições do seu
banner serão feitas, a partir de um sistema de
créditos. Quanto mais banners de terceiros forem
102
 exibidos no seu site, mais créditos de exibição você
recebe.

Para fazer troca de banners visite

www.bannerlink.com.br.

Publicação
Neste capítulo veremos como se
faz a publicação de um site e que
ferramentas podem nos ajudar
nesse trabalho, entre elas o PWS e
o IIS da Microsoft.
Antes de publicar um site, a primeira providência é
testar se tudo está funcionando corretamente. Para
fazer isso, uma boa idéia é contar com o auxílio do
Personal Web Server da Microsoft.

Personal Web Server

O PWS também pode Durante a criação de um site você
ser usado para criar armazena as páginas numa pasta
uma pequena Intranet do seu computador. Quando as
na sua rede local.páginas estiverem prontas faça um
teste de navegação para ver se tudo está
funcionando corretamente. Depois dos testes, o site
pode ser publicado na Internet.
O problema é que algumas propriedades só podem
ser testadas se a página estiver armazenada num
103
 servidor de Internet. Para facilitar os testes, o
Windows tem o Personal Web Server. É um recurso
que faz com que seu computador funcione como um
servidor de Internet.
O Personal Web Server é ideal para
fazer testes em sites, pois cria um
O ícone do PWS é o
terceiroa partir da servidor de Internet local que
esquerda. apresenta vários recursos dos
servidores web corporativos.
O PWS inicia automaticamente com o Windows.
Quando está ativo, seu ícone aparece na área de
programas residentes da barra de tarefas indicando
seu status de atividade.
Para iniciar o gerenciador do PWS clique em
Programas/Internet Explorer/Personal Web Server/Gerenciador do
Personal Web. O gerenciador permite configurar o
PWS.

104
 Figura 63 Janela do gerenciador do Personal Web Server

Instalando o Personal Web Server

O programa de instalação do PWS pode ser
encontrado no CD de instalação do Windows 98 no
caminho x:\add-ons\pws\instalar.exe, onde x é o seu
drive de CD.
Você pode encontrar o programa também no site da
Microsoft para download. Durante a instalação, são
criadas algumas pastas no caminho c:/inetpub. A
pasta wwwroot é a que armazena as páginas web do
PWS.
A instalação do PWS é composta por vários itens. Se
você ainda não está familiarizado com eles escolha a

105
instalação típica, que vai atender à maioria das suas
necessidades.

Publicando páginas no servidor local

Para testar uma web com o Personal Web Server
você deve gravar as páginas na pasta padrão do
servidor local (c:/inetpub/wwwroot). Desta forma o
navegador de Internet poderá localizar as páginas
quando você digitar endereços começando com:
http://servidorlocal.
Em vez da palavra servidorlocal, você deve usar o
nome da sua máquina.
Para publicar uma web no servidor local da sua
máquina com auxílio do FrontPage faça assim:
1. Abra a web no FrontPage.
2. No menu Arquivo clique em Publicar web...

3. Na caixa de diálogo digite o endereço do

servidor local. Use uma sub-pasta se não
quiser publicar a web diretamente na pasta
raiz do servidor local. Por exemplo:
http://servidorlocal/teste.
4. Clique em Publicar.

106
 Lembre-se que a Os arquivos serão copiados para o
publicação gerenciada servidor local na pasta indicada. Várias
pelo FrontPage só é verificações serão feitas para garantir a
possível se o servidor consistência da operação.
tiver instaladas as
extensões para
FrontPage.
Para acessar uma página da web abra o seu
navegador de Internet e digite o endereço da
página.
O endereço terá a forma:
http://servidorlocal/teste/nomedoarquivo.htm.

FrontPage Server Extensions

Para um servidor web tratar corretamente os
componentes do FrontPage que você inclui nas
páginas são necessárias as FrontPage Extensions. A
Microsoft desenvolve FrontPage extensions para o
PWS (Personal Web Server), para o IIS (Internet
Information Server) e para servidores web que não
operam com Windows.
Para seu servidor local que usa PWS se comunicar
corretamente com o FrontPage, será preciso instalar
as FrontPage Extensions. Elas são um dos itens da
instalação típica do PWS.
Se você pretende publicar sua web num servidor
web que não usa Windows informe-se sobre a
existência de FrontPage Extensions na máquina.

107
Internet Information Sever
O IIS é a solução profissional da Microsoft para
servidores web. O Internet Information Server é um
componente padrão do Windows NT e 2000. É um
conjunto de implementações que transformam a
máquina NT, ou 2000, em servidor web corporativo.
O IIS tem recursos avançados que permitem o
gerenciamento de sites de grande porte, dando
suporte inclusive a páginas asp (active server
pages).

Hospedagem de sites
Depois de criar e testar um site no próprio micro,
chega a hora de publicá-lo. Só quando ele estiver
armazenado num servidor de Internet os usuários da
rede poderão visitá-lo. Para publicar um site é
preciso pensar em duas coisas: em que servidor
hospedá-lo e que endereço terá o site.
Há várias maneiras de encontrar hospedagem para
um site na Internet. Vejamos algumas:
No seu provedor:Muitos provedores de acesso
oferecem serviço de hospedagem de sites aos
cientes. Entre em contato com o seu provedor para
saber o que ele diz a respeito.
Hospedagem paga: Existem empresas na Internet que
oferecem serviço de hospedagem paga de sites. Esse
serviço é indicado quando se deseja um serviço mais
completo. Normalmente, a hospedagem paga tem

108
recursos e serviços extras, não disponíveis nos
serviços de hospedagem mais simples.
Hospedagem grátis: Algumas empresas da Internet
hospedam sites gratuitamente. É a hospedagem
mais indicada para pequenos sites. O serviço de
hospedagem pioneiro e mais famoso é o Geocities Se
o site está pronto e revisado, conecte-se à Internet,
acesse o site Geocities e siga as instruções. Você
deve fazer um cadastramento, enviar suas páginas
ao servidor via Internet e no final do processo seu
site estará no ar, disponível para o mundo inteiro. Há
vários outros serviços de hospedagem grátis, além
do Geocities. Sugerimos mais três: o americano
Angelfire, o português Terra à Vista e o brasileiro
HPG.

www.angelfire.com www.terravista.p
t

www.geocities.com

www.hpg.com.br

109
 Todos os serviços de hospedagem têm suas
regras de funcionamento. Os serviços de
hospedagem gratuita vivem da publicidade
que fazem, por isso, quando você visita os
sites que estão lá recebe junto as
propagandas dos patrocinadores.

Cada serviço de hospedagem tem suas

regras sobre conteúdo. Não são permitidos
conteúdos proibidos por lei, como
incentivo ao uso de drogas, ao racismo, ao
terrorismo ou divulgação de pornografia
infantil. Alguns serviços de hospedagem
não aceitam pornografia adulta.

Endereço do site
Há duas soluções para o endereço de um site. A
primeira é mais simples e indicada para sites
pequenos. A segunda é mais profissional e indicada
para sites que querem ter uma presença mais forte
na Internet.
Sistema simples:
Digamos que você criou um site para
a Pizzaria Pasta Nostra e resolveu hospeda-lo no
Geocities. Você fez todo o cadastramento do site e
no final do processo recebeu do Geocities um
endereço parecido com este:
www.geocities.com/Paris/3323/. Veja que neste caso
o endereço do seu site aparece ligado ao endereço
do Geocities. É como se você fosse ‘hóspede’ do
110
 registro.fapesp.br
Geocities. A vantagem do sistema simples é que você
não precisa se preocupar com questões burocráticas
e nem gasta dinheiro.
Sistema profissional:
Imagine que a Pizzaria Pasta
Nostra cresceu e está abrindo franquias. O dono
quer uma presença mais forte na Internet.
Provavelmente ele vai querer um endereço como
este: www.pastanostra.com.br. Para obter um
endereço assim, dá mais trabalho. Provavelmente
você terá que recorrer a uma hospedagem paga. Em
seguida, terá que registrar o domínio
pastanostra.com.br no órgão oficial de registro da
Internet brasileira que é a FAPESP. Você só
conseguirá registrar este domínio se ninguém teve a
mesma idéia antes. O registro é pago e deve ser
renovado anualmente. Faça uma visita ao site da
FAPESP e obtenha mais informações.

Upload de arquivos
Para publicar um site na Internet, você deve enviar
os arquivos para o servidor web. Esse processo
chama-se upload.. Como, em geral, o número de
arquivos e pastas que devem ser enviados é grande,
o melhor é usar um software de gerenciamento de
upload.
O protocolo mais usado para transferir arquivos pela
web é o FTP (File Transfer Protocol). Informe se o
seu servidor web aceita upload por FTP.
111
Há vários programas de gerenciamento de upload.
Vamos exemplificar o processo utilizando o WS_FTP,
que está disponível na Internet.

Perfil e logon
Ao iniciar o WS_FTP, você deve criar um perfil
(profile) com os dados do servidor FTP que você
pretende acessar. As informações mais importantes
para a criação do perfil são:
 Endereço do servidor ftp na Internet
 Seu ID de acesso à área de upload
 Seu password (senha) para liberar o acesso à área de
upload.
Essas informações você obtém junto ao serviço de
hospedagem que você utiliza.

112
 Figura 64 Caixa de diálogo de logon do WS_FTP

Depois de criar o perfil, clique em OK. O programa

se comunica com o servidor FTP, faz a autenticação
do usuário e, em seguida, libera a conexão para
fazer o upload de arquivos.

Upload
Depois que você se conecta ao servidor, o processo
de upload é simples. Na janela de arquivos locais
você seleciona os arquivos e pastas que serão
enviados para upload.
Na janela da direita aparecem os arquivos que estão
no servidor.
Basta clicar no botão > para que os arquivos locais
selecionados sejam enviados para o servidor remoto.
O processo pode demorar dependendo da
quantidade de arquivos e da qualidade da conexão.
O andamento do processo aparece na parte inferior
da tela

113
 Figura 65 Janela do WS_FTP

Cadastramento em serviços de busca

O seu site tem endereço, está publicado, mas não
recebe visitas. O que estará faltando? Divulgação é
claro. A divulgação mais simples que existe é o
cadastramento nos serviços de busca. A partir da
hora que você se cadastra num serviço de busca o
seu site começa a aparecer nas listas e nas consultas
do serviço. O cadastramento é grátis e pode ser feito
pela Internet. Vamos ver como cadastrar o site da
Pizzaria Pasta Nostra no Cadê?
1. Acesse o site do Cadê? (www.cade.com.br)
2. Clique no link Inclusões.

3. Escolha em qual assunto gostaria que o site

fosse classificado.
114
 4. Escolha um título para divulgar o site no
Cadê? Por exemplo: Pizzarias Pasta Nostra.
5. Digite uma descrição do site. Por exemplo:
Franquia Nacional. Temos forno a lenha,
serviço de entrega e aceitamos pedidos pela
Internet. Uma boa descrição é a chave do
negócio. Escolha cuidadosamente as
palavras. Dê preferência àquelas palavras
chave que tem a ver com o seu site e que o
internauta usa na hora de fazer consultas.
6. Forneça os demais dados que o Cadê? pede.
O cadastramento não é imediato e fica sujeito a uma
análise para aprovação. Os serviços de busca
conferem as informações antes de cadastrar um
endereço.
O cadastramento em serviços de busca internacional
só é necessário se você tem interesse em ser
visitado a partir de outros paises.

Atividade 3 – Web de serviços

Nesta atividade vamos reforças os
conhecimentos de componentes
externos e publicação de webs.
Nesta atividade vamos criar uma web com o tema
voluntariado e publicá-la na Internet. Você pode
escolher outro tema de interesse social, mas inclua
na sua web os seguintes componentes externos:
 Recomendação de página
 Estatística de acesso
115
 Livro de visitas
 Enquete

Planejamento
O Web se chamará Jovens voluntários e terá os
seguintes itens:
 Home page
 Enquete na home page (gerenciada por
www.pergunta.com.br )
 Estatística de acesso (gerenciada por
www.acessos.com.br )
 Recomendação de página na homepage
(gerenciada por www.recomenda.com.br )
 Livro de visitas externo (gerenciado por www.hpg.com.br
)
 Página sobre como se tornar um voluntário
 Página sobre Atividades que um voluntário pode fazer
 Página de Links recomendados
 Página sobre o Ano Internacional do voluntariado
 Página de créditos

Criação da web
Inicie o FrontPage. Clique em Arquivo/Novo/Web...

Selecione o modelo Web vazia.

O caminho recomendado é c:/Meus documentos/Minhas
Webs/Terceira Web.

Pronto. O passo seguinte é a criação das páginas.

Criação das páginas

Vamos criar os arquivos das páginas da web para
podermos fazer o gerenciamento logo em seguida. O

116
conteúdo das páginas pode ser adicionado mais
tarde. Crie os arquivos como no exemplo seguinte.

Figura 66 Páginas da Web Voluntariado

Gerenciamento da web
Com as páginas principais criadas, podemos fazer o
gerenciamento da web, adicionando tema, estrutura
de navegação, bordas compartilhadas, faixas e
barras de navegação.
Tema:Adicione um tema na sua web. No exemplo foi
usado o tema cápsulas.
Estrutura de navegação:
Defina a estrutura de navegação
da web como no exemplo seguinte:

117
 Figura 67 Estrutura de navegação

Bordas compartilhadas:
Defina na home page uma borda
compartilhada superior e nas demais páginas uma
borda superior e outra na lateral esquerda.
Faixa de página:
Inclua faixas de páginas em todas as
páginas da web.
Barras de navegação:
Na home page defina uma barra
de navegação superior horizontal.

118
Inclusão de conteúdo
Inclua a partir de agora o conteúdo formado por
textos, imagens, tabelas, etc. da web. Assim que esta
parte ficar pronta poderemos publicar a web no
Personal Web Server.

Publicação no PWS
Para fazer os testes da sua web num servidor web
que simula condições reais de publicação, use o
Personal Web Server. Publique sua web no PWS do
seu micro da seguinte maneira:
No menu Arquivo clique em Publicar Web...

119
 Figura 68 Caixa de diálogo Publicar Web

Digite o caminho onde publicar a web.. O caminho

terá a forma
http://nomedamaquina/nomedapasta onde a palavra
nomedamáquina deve ser substituída pelo nome da
sua máquina e a palavra nomedapasta deve ser
substituída pelo nome da pasta em que você deseja
armazenar sua web.
Clique em Publicar e a web será publicada no seu
servidor local. Para acessá-la no navegador é só
digitar o endereço acima.

Publicação na Internet
Antes de concluir a web você deve
publicá-la, pois os itens que vem na

120
seqüência só podem ser criados se a web tiver um
endereço definido na Internet.
Em nosso exemplo, a web foi publicada no site
gratuito HPG (www.hpg.com.br ). O endereço do site
é www.jovensvoluntarios.hpg.com.br

Recomendação de página
Acesso o site
www.recomenda.com.br e copie o
código para a inclusão do gif
animado que envia para a
recomendação de página.
Cole o código na homepage da web. Não esqueça
que o código deve ser colado no modo de
visualização HTML.

Estatística de Acesso
Acesse o site www.acessos.com.br e
copie o código para fazer
estatísticas de acesso. Em seguida,
cole o código na homepage da web.
Não esqueça que o código deve ser colado no modo
de exibição HTML.
Para ver as estatísticas de acesso da web, clique no
ícone que aparece na homepage.

121
Livro de visitas
Acesse www.hpg.com.br e faça logon. Na página
inicial de usuários logados há um link para a criação
de livros de visitas.
Copie os códigos fornecidos pelo site HPG e, em
seguida, cole-os na sua página de livro de visitas.
São dois códigos: um para assinar o livro e outro
para ler o livro. Não esqueça que o código deve ser
colado no modo de visualização HTML.

Figura 69 Página Assinar livro de visitas

122
 Figura 70 Página Ler o livro de visitas

Enquete
Acesse o site www.pergunta.com.br e preencha o
formulário para criar uma nova enquete.
Copie o código html fornecido pelo site e, em
seguida, cole-o na home page da sua web. Não
esqueça que o código deve ser colado no modo de
visualização HTML.

123
 Figura 71 Formulário de enquete

Cadastramento em serviços de busca

A última etapa da construção de um site é a
divulgação nos serviços de busca da Internet. Não
esqueça de cadastrar seu site nos serviços mais
usados como Cadê, RadarUOL, Yahoo Brasil e Achei.
Observe como ficaram algumas páginas da web.

124
Figura 72 Home page

Figura 73 Janela Ano do voluntariado

125
Figura 74 Janela Atividades

126
Figura 75 Janela Livro de visitas

www.microplus.com.br