Manual FrontPage 98

Santarém, Junho de 1998
Teresa Pacheco
Programa de TIC na Educação
Da Escola para o Mundo com o FrontPage 98
Nuno Pacheco
Teresa Pacheco/Nuno Pacheco -2- Centro de Competência Nónio Século XXIda ESES
Índice
ÍNDICE.........................................................................................................................................................................3
SOBRE ESTE MANUAL............................................................................................................................................2
O ESSENCIAL DO FRONTPAGE 98.......................................................................................................................3
1. O QUE É FRONTPAGE 98.....................................................................................................................................4
2. EXPLORAÇÃO INICIAL DO FRONTPAGE......................................................................................................4

2.1. DEFINIÇÃO DE UMA NOVA FRONTPAGE WEB ..............................................................................................................4
2.2. O AMBIENTE DO FRONTPAGE EXPLORER.....................................................................................................................7
2.3. CRIAÇÃO DE PÁGINAS..............................................................................................................................................7
2.4. EDIÇÃO DE PÁGINAS................................................................................................................................................9
2.4.1. O ambiente do FrontPage Editor...............................................................................................................9
2.4.2. Definição das características gerais da página.......................................................................................10
2.4.3. Digitação e formatação de texto. Listas...................................................................................................11
2.4.4. Inserção e formatação de uma tabela.......................................................................................................12
2.4.5. Inserção de quebras de linha e de linhas horizontais...............................................................................16
2.4.6. Inserção e formatação de imagens...........................................................................................................17
2.4.7. Criação de Hyperlinks para Bookmarks numa mesma página................................................................18
2.4.7.1. Criação da Bookmark........................................................................................................................................18
2.4.7.2. Criação do Hyperlink para a Bookmark ............................................................................................................18
2.4.8. Visualização de uma página no Browser..................................................................................................19
2.4.9. Criação de outros Hyperlinks Internos (entre páginas)...........................................................................20
2.4.10. Criação de Hyperlinks externos..............................................................................................................20
2.4.11. Criação de Links para endereços electrónicos.......................................................................................20
2.4.12. Criação de Hotspots...............................................................................................................................21
2.5. POTENCIALIDADES DO FRONTPAGE EXPLORER...........................................................................................................21
2.6. DESIGNAÇÃO DE FICHEIROS E DE PASTAS..................................................................................................................22
CRIAÇÃO DE UM SITE..........................................................................................................................................24
3. INÍCIO DO SITE....................................................................................................................................................25
3.1. CRIAÇÃO DA WEB GUIADEAVES.............................................................................................................................25
3.2. IMPORTAÇÃO DA PASTA DE IMAGENS PARA A WEB......................................................................................................25
3.3. A 1ª PÁGINA – GUIA DE AVES...............................................................................................................................26
3.3.2. Inserção e formatação da Tabela.............................................................................................................26
3.3.3. Importação das imagens e sua formatação..............................................................................................27
3.3.4. Definição dos Hyperlinks..........................................................................................................................28
Botão Localização................................................................................................................................................28
Botão Informações...............................................................................................................................................28
Botão Aves..........................................................................................................................................................28
3.3.5. Visualização da página no Browser ........................................................................................................28
3.4. A 2ª PÁGINA - LOCALIZAÇÃO................................................................................................................................29
3.4.2. Inserção e formatação da tabela..............................................................................................................30
3.4.3. A primeira linha da tabela........................................................................................................................30
3.4.4. A terceira linha da tabela.........................................................................................................................31
3.4.5. A quarta linha da tabela...........................................................................................................................31
3.4.6. A quinta linha da tabela............................................................................................................................33
3
Teresa Pacheco/Nuno Pacheco - Centro de Competência Nónio Século XXI da ESES
3.4.7. A sétima linha da tabela...........................................................................................................................33

3.5. A 3ª PÁGINA - INFORMAÇÕES.................................................................................................................................35
3.5.5. A quinta linha da tabela ...........................................................................................................................37
3.5.6. A sétima linha da tabela ..........................................................................................................................37
3.6. A 4ª PÁGINA – AVES............................................................................................................................................38
3.6.7. A sexta linha da tabela..............................................................................................................................42
3.6.9. A oitava linha da tabela............................................................................................................................43
3.6.10. A nona linha da tabela............................................................................................................................43
3.6.11. A décima primeira linha da tabela.........................................................................................................44
3.6.12. A décima terceira linha da tabela...........................................................................................................44
3.6.13. Realização dos hyperlinks para as bookmarks da página......................................................................44
COLOCAÇÃO ON-LINE DO SITE GUIA DE AVES..........................................................................................45
4. PREPARAÇÃO DO SITE PARA PUBLICAÇÃO NA WEB............................................................................46
5. PUBLICAÇÃO NA WEB.......................................................................................................................................47
ÍNDICE DE IMAGENS............................................................................................................................................50
ÍNDICE.......................................................................................................................................................................52
4
Sobre este Manual

O Manual "Da Escola para o Mundo com o FrontPage 98" destina-se a apoiar as Accções de
Formação realizadas pela Escola Superior de Santarém no âmbito do FOCO e promovidas pelo
seu Centro de Competência Nónio Séc. XXI.
Está organizado em três capítulos:
O Essencial do FrontPage 98 - conjunto de actividades que têm como finalidade a aquisição por
parte dos formandos de alguma autonomia na utilização do software e a aprendizagem de um
conjunto de procedimentos básicos necessários à construção de um site e gestão de uma Web.
Criação do site "Guia de Aves" - neste capítulo os formandos são solicitados a realizar um site
completo, a partir de um conjunto de ficheiros de texto e de imagem previamente seleccionados.
Colocação on-line do site "Guia de Aves" - finalmente, propõe-se a colocação on-line do site
Guia de Aves.
Como é evidente, este Manual não tem como objectivo a exploração exaustiva do FrontPage 98.
Pretende-se, isso sim, que os professores adquiram as técnicas necessárias à realização e
dinamização da Home Page da sua Escola.
2
O ESSENCIAL DO FRONTPAGE 98
3
1. O que é FrontPage 98
Um site1 WWW2 envolve dois tipos de tarefas: a sua criação (tarefa do Web Designer -
desenhador das páginas WWW) e a sua gestão (tarefa do Webmaster - gestor de servidor
WWW).
A criação de uma página individual é uma tarefa relativamente simples, que pode ser feita sem
dificuldade com outros produtos existentes no mercado (por exemplo o Word97). Porém, um site
pressupõe a existência de uma estrutura de ficheiros com hyperlinks 3 internos e externos. Como
por definição um site está sempre "em construção", a estrutura dos ficheiros, a sua designação,
etc., também está sempre a sofrer alterações. Assim, é fácil prever-se que uma gestão pouco
efectiva pode levar à perda de links internos. Por outro lado, e dada a natureza da própria WEB
(sempre em constante mutação), é necessário verificar com regularidade os links externos
existentes no nosso site.
O FrontPage 98 é actualmente uma das ferramentas que permite realizar as funções descritas
com maior simplicidade e eficácia.
Gera automaticamente páginas em HTML4, a linguagem utilizada para publicação de
documentos na Word Wide Web, constituindo um bom exemplo do princípio WYSIWYG 5.
2. Exploração inicial do FrontPage

Nesta primeira abordagem ao programa, vamos propor-lhe a realização de um conjunto de
tarefas que têm como objectivo aprender procedimentos básicos. Por isso, não nos vai preocupar
de momento a estética do produto final nem, tão pouco, a sua utilização prática.
2.1. Definição de uma nova FrontPage Web

Uma FrontPage Web é todo o conjunto de ficheiros (de imagens, em código HTML, de sons…)
que constituem um site.
• ACTIVIDADES:
• 1 - Inicie o programa FrontPage, através do menu Iniciar do Windows.
1
SITE = É um conjunto coerente e estruturado de páginas, residente num computador e disponibilizado no serviço
WWW da Internet a que se pode aceder através de um endereço.
2
WWW = World Wide Web
3
HYPERLINK ou LINK = Ligação.
4
HTML = HyperText Markup Language
5
WYSIWYG = What You See Is What You Get
4
• 2 - Na Janela de Diálogo Getting Started, opte por:
Legenda:
Open an Existing FrontPage Web - para abrir uma Web já existente.
A Root Web corresponde à raiz do servidor (esta web existe sempre).
Create a New FrontPage Web - para criar uma nova Web.
Always open last web - para que a última web em que se esteve a
trabalhar seja aberta logo que se entra no programa.
Figura 1 - Janela de Diálogo Getting Started
• 3 - Saia com OK
• 4 - Na Janela de Diálogo New FrontPage Web, opte por:
Legenda:
Grupo 1 - Choose the kind of FrontPage web to create.
Aqui podemos optar por criar uma Web só com uma página, importar
um conjunto de ficheiros que vão incorporar a nova Web ou, então,
optar por um dos padrões (Templates) já existentes.
Grupo 2 - Choose a title for your FrontPage web.

Nome que se pretende dar à nova Web.
Figura 2 - Janela de Diálogo New FrontPage Web
• 5 - Saia com OK
5
Legenda:
Através desta Janela de Diálogo somos informados que o FrontPage
está a criar a nova Web.
Figura 3 - Janela de Diálogo Create a New FrontPage Web
• 6 - Na Janela de Diálogo Name and Password Required, digite o seu nome de utilizador e
password, conforme as instruções que lhe foram dadas pelo seu formador.6
Legenda:
O nome do utilizador e a password são introduzidos na altura de
instalação do software. Desta forma, garante-se a inviolabilidade das
Webs criadas.
Figura 4 - Janela de Diálogo Name and Password Required
• 7 - Saia com OK
A Web já está criada e, neste momento, tem à sua frente o ecran do modo de edição Navigation
do FrontPage Explorer.
6
Como o Nome e a Password são introduzidos na altura da instalação do software, dependem do contexto de
utilização. Se está a utilizar este manual no seu computador, adapte-os ao seu contexto.
6
2.2. O ambiente do FrontPage Explorer

Legenda:
1 - Barra de Menus
2 - Barra de Ferramentas
3 - Modo de visualização e
nome da Web
4 - Área de visualização das
páginas, em modo gráfico (no
modo Navigation)
5 - Barra de Visualizações
possíveis da Web:
Folders - para ver as pastas e
ficheiros, em árvore
AllFiles - para ver todos os
ficheiros
Navigation - permite desenhar
uma estrutura base da Web.
Hyperlinks - mostra
graficamente os hyperlinks entre
páginas, para outros ficheiros da
FontPage Web, e para outros
sites da WWW.
Hyperlink Status - para ver os
hyperlinks existentes e o seu
estado
Themes - para escolher
conjuntos gráficos a utilizar na
Web
Figura 5 - O ambiente do FrontPage Explorer Tasks - Lista de tarefas a
realizar.
6 - Área de visualização do
conteúdo da Web (pastas,
ficheiros, tamanhos, data da
última modificação…)
7 - Barra de Status
Note que na Barra de Visualizações possíveis (com o nº5 na legenda), está pressionado o botão
"Navigation". Mais adiante exploraremos outras opções desta Barra. Por agora, veja o conjunto
de pastas que foi criado: uma pasta _private e uma pasta images. Como optámos por criar uma
Web vazia, não temos ainda nenhum ficheiro.
2.3. Criação de páginas

Vai começar por criar a página principal do seu site, ou seja, a Home Page7.
• ACTIVIDADES:
• 1 - Na Barra de Ferramentas clique o botão New Page.
Note que na parte principal do ecran já aparece a página criada (em modo gráfico) e, na janela
que se encontra em baixo, aparece o nome do ficheiro criado: index.htm. (se não lhe aparecer o
nome do ficheiro, faça Refresh no Menu View).
Vai agora mudar o nome (título) da página criada:
7
HOME PAGE = A primeira página de um site. Normalmente, este ficheiro tem a designação index.htm ou
index.html.
7
• 2 - Seleccione o ícone que a representa (o rectângulo com a designação Home Page)

• 3 - Edit/Rename
• 4 - Altere o nome para Página Inicial
Agora, vai criar mais duas páginas e renomeá-las, utilizando os procedimentos já descritos, mas
tendo o cuidado de não ter nenhuma página seleccionada no momento em que criar outra:
• 5 - Crie as duas páginas

• 6 - Renomeie as páginas, dando-lhes os nomes: Página 1 e Página 2
• 7 - Para ver a sua Web actualizada (na janela inferior), faça View/Refresh
Na área de conteúdo da Web, observe as alterações que foram feitas. Existem dois novos
ficheiros com os nomes toppage1.htm e topage2.htm, correspondentes às páginas que criou.
Agora, vai alterar o nome desses dois ficheiros:
• 8 - Seleccione o nome do primeiro ficheiro (toppage1.htm) com um clique.

• 9 - Edit/Rename
• 10 - Digite pagina1.htm
• 11 - Altere o nome do segundo ficheiro (toppage2.htm) para pagina2.htm
No final, o seu trabalho deverá ter o seguinte aspecto:
Figura 6 - Estrutura do site criado
8
2.4. Edição de Páginas

Até ao momento, esteve apenas a criar uma estrutura mínima do site. Chegou a altura de editar as
páginas, para nelas colocar informação (texto, imagens…) e para estabelecer Hyperlinks
internos8 e Hyperlinks externos9.
• ACTIVIDADES:
• 1 - Dê um duplo clique sobre o ícone da Página Inicial
Note que passou para o Editor do FrontPage. É nesta ferramenta do programa que as páginas
são feitas.
2.4.1. O ambiente do FrontPage Editor

Legenda:
1 - Barra do Título - Note
que, entre parêntises, é
mostrado o nome atribuído a
esta página.
2 - Barra de Menus
3 - Barra Standard
4 - Barra de Formatação
5 - Área de trabalho (a
página)
6 - Modos de visualização
da página:
Normal - é o modo activo.
Permite a construção da
página, utilizando as diversas
ferramentas e opções
disponíveis.
Figura 7 - Ambiente do FrontPage Editor
HTML - permite ver e alterar
o código HTML da página.
Preview - Permite ver a
página, tal como será
mostrada num Browser.
7 - Barra de Status.
Para além das Barras que são mostradas na figura, existem outras que têm funções mais
específicas.
• ACTIVIDADES:
• 1 - No Menu View, opte por mostrar todas as Barras (toolbars). Note que muitas delas não
têm activas, de momento, as suas diferentes opções. Por agora, veja apenas o seu aspecto:
serão utilizadas mais tarde, à medida que forem sendo necessárias…
• 2 - Esconda todas as Barras de Ferramentas, excepto a Standard, a de Formatação, a de
Formatação de Imagens e a de Status.
8
Hyperlinks internos = Hyperlinks para páginas do site.
9
Hyperlink externo = Hyperlink para um site com outro endereço.
9
2.4.2. Definição das características gerais da página

Uma das primeiras tarefas a realizar numa página é a definição geral das suas características: o
background10, margens, cor dos hyperlinks, cor do texto, etc.
• ACTIVIDADES:
• 1 - File/Page Properties…
• 2 - Na Janela de Diálogo Page Properties, no separador General, em Title, pode alterar o
nome da página.
• 3 - No separador Background:
Clique em Background Image (para escolher uma imagem que apareça em Background)
Clique em Browse…
Na Janela de Diálogo Select Background Image, seleccione Clip Art…
Na Janela de Diálogo Clip Gallery, no separador Clip Art, opte na coluna da esquerda
por Web Background. Na janela da direita escolha o Background que entender.
Saia com Insert
• 4 - Novamente na Janela de Diálogo Page Properties, ainda no separador Background:
Em Background seleccione: White (para que o fundo da página apareça branco,
enquanto a imagem do Background está a ser carregada).
Em Text seleccione: default (o texto terá a cor que definirmos em cada página).
Em Hyperlink seleccione: Green (a cor com que deverão aparecer os Hyperlinks que
fizermos na página)
Em Visited Hyperlink seleccione: Silver (a cor que os hyperlinks já visitados mostrarão)
Em Active Hyperlink seleccione: Yellow (a cor que o hyperlink mostrará quando o
clicarmos).
• 5 - Ainda na Janela de Diálogo Page Properties, no separador Margins:
Especifique 0 pixels para as margens do topo e esquerda.
• 6 - Saia da Janela de Diálogo Page Properties com OK
Agora, convém gravar a página:
• 7 - File/Save
Conforme verifica, é necessário gravar na sua Web a imagem que escolheu para o Background.
A Janela de Diálogo Save Embedded Files permite fazê-lo na pasta que entendermos (vamos
colocar todas as imagens na pasta images) e atribuir outro nome ao ficheiro.
• 8 - Clique em Rename
• 9 - Altere o nome do ficheiro para background.gif
• 10 - Clique em Change Folder
• 11 - Na Janela de Diálogo Change Folder, clique em images e saia com OK
• 12 - Saia da Janela de Diálogo Save Embedded Files com OK
10
Background = é o "fundo" da página. Normalmente, coloca-se uma imagem em background.
10
2.4.3. Digitação e formatação de texto. Listas

Vamos começar por digitar algum texto e formatá-lo. Para procedermos à sua formatação, vamos
utilizar as opções da Barra de Formatação, muito semelhantes às de um processador de texto.
No entanto, refira-se que também se pode utilizar as opções Font… e Paragraph… do Menu
Format.
• ACTIVIDADES:
• 1 - Faça dois parágrafos e digite este texto (ou outro, se o entender):
Tempo virá em que a investigação diligente, cobrindo longos períodos, esclarecerá coisas
que hoje estão escondidas.
O tempo de uma vida, mesmo que totalmente dedicado ao estudo do céu, não seria suficiente
para a investigação de tão vasto tema (…). Por isso, esse conhecimento terá de desenvolver-
se ao longo de gerações sucessivas.
Tempo virá em que os nossos descendentes se surpreenderão por não sabermos coisas que
são tão óbvias para eles (…) Muitas descobertas estão reservadas às gerações vindouras,
quando a lembrança da nossa existência já estiver apagada. O nosso universo seria uma coisa
insignificante se não houvesse sempre nele algo a ser investigado por todas as gerações que
vão surgindo (…)
A natureza não revela os seus mistérios de uma só vez.
(Séneca. Questões Naturais, livro 7. Séc. I)
• 2 - Seleccione todo o texto e, em Format/Font…, altere a fonte e o tamanho (escolha o tipo

de letra que entender)
• 3 - Utilize os ícones da Barra de Formatação para aumentar ou reduzir o tamanho da Fonte.
• 4 - Seleccione apenas algumas partes do texto e explore as opções Bold, Itálico e
Sublinhado da Barra de Formatação
• 5 - Seleccione um dos parágrafos e experimente os diferentes tipos de alinhamento existentes
na Barra de Formatação
Vai agora transformar o texto numa lista e colocar uma imagem antes de cada parágrafo:
• 6 - Seleccione todos os parágrafos

• 7 - Format/Bullets and Numbering…
• 8 - Na Janela de Diálogo Bullets and Numbering, no separador Image Bullets, active a
opção Specific Image e clique em Browse.
• 9 - Na Janela de Diálogo Select Image, opte por Clip Art… e em seguida por Web
Buttons
• 10 - Escolha um ícone adequado para uma lista.
• 11 - Saia com Insert da Janela Microsoft Clip Gallery
• 12 - Saia com OK da Janela de Diálogo Bullets and Numbering
11
• 13 - Grave a página, colocando o ficheiro da imagem na pasta images da sua Web e

renomeando-o para lista.gif (se não se recorda como deve proceder , consulte o ponto 2.4.2
da pág. 10, actividades 8 a 12).
• 14 - Faça outros tipos de formatação de texto, utilizando as restantes opções da Barra de
Formatação, incluindo a alteração da cor de várias palavras.
No final, o seu trabalho deverá apresentar um aspecto semelhante a este:
Figura 8 - Lista
2.4.4. Inserção e formatação de uma tabela

Na construção de páginas WWW utilizam-se frequentemente tabelas, visto que estas permitem
um alinhamento mais rigoroso do texto e uma distribuição mais harmoniosa e normalizada das
imagens e do texto.
• ACTIVIDADES:
• 1 - Coloque o cursor por baixo do texto e faça dois parágrafos

• 2 - Table/Insert Table…
12
• 3 - Na Janela de Diálogo Insert Table opte por:

Legenda:
Secção Size: para definir o tamanho da tabela.
Rows - Número de linhas da tabela
Columns - Número de colunas da tabela
Secção Layout: para definir a formatação da tabela.

Aligment - No menu rolante é possível escolher o alinhamento da
tabela na página.
Border size - Permite definir o contorno da tabela, em pixels.
Cell Padding - Permite definir o espaço entre o conteúdo e as margens
interiores da célula.
Cell Spacing - Permite definir o espaço entre as células de uma tabela.
Secção Width: para definir a largura geral da tabela.

In Pixels - Tamanho definido em pixels
In Percent - Tamanho definido em percentagem, relativamente à
página.
Figura 9 - Janela de Diálogo Insert Table
• 4 - Saia da Janela de Diálogo Insert Table com OK
Deverá ter obtido uma tabela com este aspecto:
Figura 10 - Inserção de uma Tabela
Vai agora fazer algumas alterações à formatação que definiu para a tabela. Pretende-se que a
tabela não ocupe toda a largura da página, que tenha um contorno maior e pretende-se ainda que
este contorno seja colorido (por defeito, o contorno é cinzento).
• 5 - Coloque o cursor numa das células da tabela.

• 6 - Dê um clique no botão direito do rato e opte por Table Properties… (em alternativa
escolha a mesma opção no menu Table).
13
• 7 - Na Janela de Diálogo Table Properties, opte por:
Legenda:
Para além das opções comuns à Janela de
Diálogo Insert Table, esta possui ainda as
seguintes:
Custom Background: permite escolher uma

imagem para Background da tabela
Custom Colors: permite escolher as cores

para o contorno da tabela.
Figura 11 - Janela de Diálogo Table Properties
• 8 - Saia da Janela de Diálogo Table Properties com OK
Pretende-se agora reduzir a coluna da esquerda para cerca de metade da largura actual:
• 9 - Coloque o cursor sobre a linha divisória da coluna, até que este se tranforme numa seta
com duplo sentido (veja a Figura 12).
• 10 - Arraste a linha divisória da coluna um pouco para a esquerda.
Figura 12 - Formatação da Tabela (redução de uma coluna)
Os procedimentos anteriores constituem uma forma rápida de efectuar esta formatação. Porém,
por vezes é necessário definir com maior precisão a largura de cada uma das colunas da tabela.
Vamos então formatar novamente a coluna, utilizando um conjunto maior de opções:
• 11 - Coloque o cursor numa das células da coluna a formatar (a da esquerda).

14
• 12 - Table/Select Column
• 13 - Table/Cell Properties…
• 14 - Na Janela de Diálogo Cell Properties opte por:
Legenda:
Secção Layout: Permite definir a posição do conteúdo

de uma célula
Horizontal alignment - No menu rolante existem
opções para escolher o alinhamento horizontal
Vertical Alignment - No menu rolante existem opções
para escolher o alinhamento vertical
Header Cell - Para colocar o texto da célula a Bold
No Wrap - Para que o texto existente na célula apareça
todo na mesma linha
Secção Minimum Size - Nesta secção define-se o

tamanho da célula, em relação à tabela. No caso
presente, estamos a definir que a coluna vai ocupar
10% do total da tabela.
Secção Cell Span - Permite alterar o tamanho de uma

célula
Number of Rows Spanned - Número de linhas pelas
Figura 13 - Janela de Diálogo Cell Properties
quais uma célula se pode estender
Number Columns Spanned - Número de colunas
pelas quais uma célula se pode estender
As restantes secções são identicas às existentes na

Janela de Diálogo Table Properties, descrita
anteriormente.
• 15 - Saia da Janela de Diálogo Cell Properties com OK
A tabela deverá ter ficado com este aspecto:
Figura 14 - Formatação de uma tabela (características de uma coluna)
Imaginando que se pretende que a primeira linha da tabela não esteja dividida em colunas (para
conter um título, por exemplo), faça o seguinte:
• 16 - Coloque o cursor numa das células da primeira linha

• 17 - Table/Select Row
• 18 - Table/Merge Cells
15
A tabela deverá ter ficado com o seguinte aspecto:
Figura 15 - Formatação de uma Tabela (Merge Cells)
Pretende-se agora dividir a célula central da segunda linha em duas células:
• 19 - Coloque o cursor nessa célula

• 20 - Table/Split Cells…
• 21 - Na Janela de Diálogo Split Cells opte por:
Legenda:
Split into Columns - Para dividir a célula em colunas

Split into Rows - Para dividir a célula em linhas
Number of Columns/Rows - Número de Colunas/Linhas em que a célula deverá
ser dividida.
Figura 16 - Janela de Diálogo Split Cells
• 22 - Saia da Janela de Diálogo Split Cells com OK
A Tabela deverá ter ficado com o seguinte aspecto:
Figura 17 - Formatação de uma Tabela (Split Cells)
• 23 - Finalmente, introduza algum texto na tabela
2.4.5. Inserção de quebras de linha e de linhas horizontais

No Front Page existem duas opções diferentes quando se pretende "mudar" de linha: podemos
fazer um parágrafo ou uma quebra de linha. Vai introduzir uma quebra de linha por baixo da
tabela.
16
• ACTIVIDADES:
• 1 - No menu View, active a opção Format Marks

• 2 - Coloque o cursor no local onde pretende introduzir a quebra de linha
• 3 - Clique simultaneamente nas teclas SHIFT e RETURN. (em alternativa, podia optar por
Insert/Line Break… )
Agora introduza uma linha horizontal de separação e formate-a de modo a que não ocupe toda a
largura da página:
• 4 - Insert/Horizontal Line
• 5 - Seleccione a linha
• 6 - Clique o botão direito do rato e, no menu rolante, opte por Horizontal Line Properties…
• 7 - Na Janela de Diálogo Horizontal Line Properties, em With, opte por 80 Percent of
window
• 8 - Saia com OK da Janela de Diálogo Horizontal Line Properties
2.4.6. Inserção e formatação de imagens

Vai agora inserir uma imagem na página e formatá-la.
• ACTIVIDADES:
• 1 – Introduza dois parágrafos por baixo da tabela e digite um título: Inserção de uma
imagem.
• 2 - Faça um parágrafo.
• 3 – Insert/Image… (em alternativa, clique o botão respectivo da Barra Standard)
• 4 – Na Janela de Diálogo Image, opte por ClipArt…
• 5 - Na Janela de Diálogo Microsoft Clip Gallery, no separador Clip Art, escolha uma
imagem e insira-a na página.
• 6 - Grave a página, colocando a imagem na pasta images
• 7 – Seleccione a imagem
• 8 – Clique o botão direito do rato
• 9 – No Menu rolante, opte por Image Properties…
• 10 – Na Janela de Diálogo Image Properties…, opte por:
No separador General:
Em Text, digite: Imagem 1 (esta designação aparecerá quando, no Browser, passar com
o rato sobre a imagem).
No separador Appearance:
Em Size:
Active a opção Specify Size11
Em Border Thickness: 1 (para colocar uma moldura em volta da imagem)
11
Se definirmos o tamanho da imagem, o Browser “guarda” o lugar para a sua inclusão na página e carrega primeiro
o texto. Assim, o utilizador pode ir consultando o texto, o que dá a sensação de maior rapidez de acesso.
17
• 11 - Saia da Janela de Diálogo Image Properties… com OK
2.4.7. Criação de Hyperlinks para Bookmarks numa mesma página

Muitas vezes as páginas de um site contêm no início um índice com hyperlinks que remetem o
leitor para textos ou imagens que se encontram nessa mesma página. O processo envolve duas
etapas: a criação da Bookmark (no texto para onde o Hyperlink nos remete) e a criação do
Hyperlink.
2.4.7.1. Criação da Bookmark

Vai fazer uma Bookmark no título que criou para a imagem (Inserção de uma Imagem).
• ACTIVIDADES:
• 1 - Seleccione o texto
• 2 - Edit/Bookmark…
• 3 - Na Janela de Diálogo Bookmark, aceite o nome que lhe é sugerido e saia com OK
Legenda:
Bookmark Name - O nome a atribuir à Bookmark (pode ser
alterado pelo utilizador).
Other Bookmarks on this Page - Listagem das Bookmarks
existentes na página
Clear - Para apagar uma Bookmark existente na lista de
Bookmarks.
Goto - Para ir directamente para uma Bookmark existente na
página.
Figura 18 - Janela de Diálogo Bookmark Name
O texto deverá aparecer agora a tracejado: é a marca da existência de uma Bookmark. Note que
o tracejado não vai ser mostrado no Browser.
2.4.7.2. Criação do Hyperlink para a Bookmark

Vai agora colocar no início da página um texto com um hyperlink para a bookmark que acabou
de criar.
• ACTIVIDADES:
• 1 - Vá para o início da página e introduza dois parágrafos

• 2 - Digite: Ir para a imagem
18
• 3 - Seleccione o texto que escreveu

• 4 - Edit/Hyperlink… (em alternativa, clique o botão correspondente na Barra Standard)
• 5 - Na Janela de Diálogo Create Hyperlink seleccione o ficheiro index.htm (a página em
que está a trabalhar) e, em Bookmark, opte por Inserção de uma imagem (nome atribuído à
Bookmark).
Legenda:
1 - Os botões permitem: subir um nível em
relação ao local onde está armazenado o
ficheiro em que estamos a trabalhar, criar
uma nova pasta, ver os ficheiros sem
informação detalhada, ver os ficheiros com
informação detalhada.
2 - Estrutura de ficheiros e pastas da Web
em que estamos a trabalhar. Em cima, são
mostrados os ficheiros que estão abertos no
Editor do FrontPage (no caso presente,
apenas a página Inicial - ficheiro
index.htm)
3 - URL do Hyperlink criado
4 - Permite navegar no Browser até à
página para onde se pretende realizar o
hyperlink.
5 - Estabelece um hyperlink para um
ficheiro existente no computador
6 - Permite realizar um hyperlink para um
endereço de correio (e-mail)
7 - Cria uma nova página e um hyperlink
para ela
Figura 19 - Janela de Diálogo Create Hyperlink 8 - Bookmarks existentes na página
seleccionada Note-se que as bookmarks só
são mostradas quando a página
seleccionada está aberta no FrontPage
Editor. As páginas que estão abertas são
mostradas em primeiro lugar nesta Janela e
aparecem assinaladas a vermelho.
9 - Frame12 onde deverá ser mostrada a
página para a qual se está a estabelecer o
hyperlink.
• 6 - Saia da Janela de Diálogo Create Hyperlink com OK

• 7 - Grave a página
2.4.8. Visualização de uma página no Browser

Convém agora testar o hyperlink no Browser. Para isso, basta clicar no botão respectivo
(Preview in Browser) existente na Barra Standard. Note que deve gravar a página antes de a
ver no Browser: só assim poderá testar as últimas alterações feitas.
12
A janela do Browser pode ser dividida em diversos ecrans lógicos: as Frames. Neste manual não são propostas
actividades com Frames.
19
2.4.9. Criação de outros Hyperlinks Internos (entre páginas)

Pretende-se agora criar, dois hyperlinks no início desta página: para a Página 1 e outro para a
Página 2.
• ACTIVIDADES:
• 1 - No início da página, escreva: [Página 1] [Página 2]

• 2 - Seleccione o texto [Página 1]
• 3 - Na Barra Standard, clique o Botão Create or Edit Hyperlink
• 4 - Na Janela de Diálogo Create Hyperlink, seleccione o ficheiro pagina1.htm
• 5 - Saia com OK da Janela de Diálogo Create Hyperlink
• 6 - Seleccione o texto [Página 2]
• 7 - Na Barra Standard, clique o Botão Create or Edit Hyperlink
• 9 - Saia com OK da Janela de Diálogo Create Hyperlink
• 11 - Texte os Hyperlinks que criou (utilize o botão Back do Browser para voltar à Página
Inicial - a única que contém links)
Nota: Sempre que fizer alterações numa página, deverá utilizar o Botão Refresh do Browser
para que essas alterações fiquem activas.
2.4.10. Criação de Hyperlinks externos

Imagine que agora pretendia criar um Hyperlink para o site do Centro de Competência Nónio da
ESE de Santarém.
• ACTIVIDADES:
• 1 - Num local qualquer da sua página escreva: Centro de Competência Nónio da ESE de
Santarém
• 2 - Seleccione o texto e clique o Botão Create or Edit Hyperlink da Barra Standard
• 3 - Na Janela de Diálogo Create Hyperlink, em URL, digite: http://www.eses.pt/nonio/
• 4 - Saia com OK
• 5 - Grave a página e visualize-a no Browser. Note que só poderá testar o Hyperlink se a
ligação à Internet estiver estabelecida.
2.4.11. Criação de Links para endereços electrónicos

Finalmente, vai criar um Hyperlink para o envio de mail, por exemplo para o Centro de
Competência Nónio da ESE de Santarém.
20
• ACTIVIDADES:
• 1 - Num local qualquer da página, digite: Contacte o Centro de Competência Nónio da ESE
de Santarém
• 2 - Seleccione o texto que digitou e clique o Botão Create or Edit Hyperlink da Barra
Standard
• 3 - Na Janela de Diálogo Create Hyperlink clique o botão Make a hyperlink that sends
E-mail (o envelope)
• 4 - Na Janela de Diálogo Create E-mail Hyperlink digite: nonio@eses.pt
• 5 - Saia da Janela de Diálogo Create E-mail Hyperlink com OK
2.4.12. Criação de Hotspots13

Decerto que já encontrou na Web páginas onde existem imagens com Hyperlinks diferentes,
consoante a área em que se clica. Esta técnica é muito simples e vai agora experimentá-la na
imagem que importou anteriormente.
• ACTIVIDADES:
• 1 - Verifique se tem visível a Barra de Ferramentas das Imagens.

• 2 - Na Barra de Ferramentas das Imagens, clique o botão Rectangle
• 3 - Desenhe sobre a imagem um pequeno rectângulo (só em parte da sua área)
• 5 - Saia com OK
• 7 - Verifique, no Browser, se o Hotspot funciona
2.5. Potencialidades do FrontPage Explorer

Como neste momento já tem um site com três páginas e uma delas contém diversos tipos de
Hyperlinks, convém ver algumas das potencialidades que o FrontPage Explorer oferece a um
gestor de uma Web.
• ACTIVIDADES:
• 1 - Vá para o FrontPage Explorer

• 2 - View/refresh (para que todas as alterações sejam actualizadas no Explorer).
• 3 - Na Barra Views, clique o Botão Hyperlinks
• 4 - Na área da esquerda seleccione a Página Inicial
• 5 - Observe, na área da direita, os Hyperlinks que essa página contém
• 6 - Verifique igualmente os Hyperlinks das outras duas páginas
13
Hotspot = área gráfica definida numa imagem e que contém um hyperlink. Nos browers, os hotspots são
invisíveis. Os utilizadores apercebem-se da sua existência porque o apontador se transforma numa mão.
21
• 7 - Clique o Botão Hyperlink Status e leia a mensagem que lhe é dada na Barra de Status
• 8 - Dê um duplo clique no Hyperlink externo (que remete para o Centro de Competência
Nónio)
• 9 - Observe atentamente a Janela da Diálogo Edit Hyperlink. Repare que, caso o
Hyperlink estivesse mal feito, poderia corrigí-lo aqui e, optando por Change in all pages,
essa alteração seria efectuada em todas as páginas da sua Web em que ele existisse (as
vantagens são muitas…).
• 10 - Na Barra Views, clique o botão Folders
• 11 - Na área da direita seleccione o ficheiro pagina1.htm
• 12 - Renomeie o ficheiro para pagina01.htm. Na Janela Rename, que entretanto lhe foi
apresentada, clique em Yes, para que os Hyperlinks não sejam desfeitos, apesar da alteração
realizada.
• 13 - Volte a clicar o Botão Hyperlinks e constate que os Hyperlinks continuam correctos.
• 14 - Clique o Botão Folders
• 15 - File/New/Folder (para criar uma nova pasta)
• 16 - Renomeie a Pasta para paginas
• 17 - Seleccione os ficheiros pagina01.htm e pagina2.htm e arraste-os para dentro da pasta
que criou
• Clique novamente no Botão Hyperlinks
• Verifique que todos os Hyperlinks continuam correctos, apesar das alterações…
Resumindo, deverá utilizar o FrontPage Explorer sempre que tiver necessidade de:
- renomear ficheiros
- alterar a localização de ficheiros
- verificar a correcção dos hyperlinks existentes numa página ou na Web
- alterar hyperlinks que existam em diversas páginas da sua Web
- etc., etc.
2.6. Designação de Ficheiros e de Pastas

Apesar de o Windows95 suportar designações de ficheiros e de pastas com caracteres
portugueses e espaços entre palavras, não os utilize em circunstância alguma. Se tentar enviar
por FTP14 ficheiros nestas circunstâncias, o resultado é bastante desanimador: não são admitidos.
Pode, no entanto, utilizar designações com mais de oito caracteres e várias palavras, desde que
unidas por um traço deste tipo_ (por exemplo: pagina_um.htm).
As extensões dos ficheiros em HTML podem ser do tipo htm ou html: é indiferente (por
exemplo, pagina_um.htm ou pagina_um.html).
A Página Inicial (ou Home Page) deve ter a designação index.htm ou index.html, porque assim o
URL do site pode ser simplificado (por exemplo: http://www.eses.pt/nonio/ se a página inicial
tiver a designação index.htm, em vez de http://www.eses.pt/nonio/pagina_inicial.htm se a página
inicial tiver a designação pagina_inicial.htm).
Finalmente, é aconselhável utilizar sempre letras minúsculas nas designações de pastas e
ficheiros. É frequente os programas de desenho atribuírem uma extensão aos ficheiros em letra
14
FTP = File Transfer Protocol
22
maiúscula. Corrija essa situação antes de incluir a imagem no seu site: evitará assim alguns
dissabores com hyperlinks que não funcionam…
23
CRIAÇÃO DE UM SITE
24
3. Início do site
Chegou o momento de produzir um site completo. Propomos-lhe um tema ambiental: as aves
existentes no Parque Nacional das Serras de Aire e Candeeiros. As actividades a realizar ser-lhe-
ão descritas "passo a passo", embora se remeta frequentemente para procedimentos que já
executou no capítulo anterior.
Antes de iniciar o seu trabalho, observe o resultado final que irá obter e que está gravado em:
C:\formacao\index.html. 15
3.1. Criação da Web GuiadeAves

Vai criar agora uma nova FrontPage Web.
• ACTIVIDADES:
• 1 - Crie a Web, conforme os procedimentos descritos no ponto 2.1 da pág. 4, mas atribuindo-
lhe o nome GuiadeAves.
• 2 - Crie uma página (a página index.htm), conforme os procedimentos descritos no ponto 2.3
da pág. 7, mas não lhe atribua nenhum título.
• 3 - Crie mais três páginas, renomeie os ficheiros e os títulos:
localizacao.htm - Guia de Aves - Localização
informacoes.htm - Guia de Aves - Informações
aves.htm - Guia de Aves - Aves
• 4 - Clique o Botão Folders para visualizar a estrutura de pastas e ficheiros criadas.
Note que o programa criou uma pasta images, onde poderia guardar todas as imagens a incluir
no site. Porém, não vamos precisar dela.
• 5 - Apague a pasta images (seleccione-a na janela do lado direito e clique em Delete)
3.2. Importação da pasta de imagens para a Web

Todas as imagens que vão ser utilizadas neste site já estão feitas e encontram-se guardadas em
C:\formacao\imagens, prontas a serem importadas para a sua Web.
• ACTIVIDADES:
• 1 - File/Import…
• 2 - Na Janela de Diálogo Import File to FrontPage Web, opte por Add Folder…
• 3 - Na Janela de Diálogo Procurar Pasta, opte por C:\formacao\imagens
• 4 - Saia com OK da Janela de Diálogo Procurar Pasta
• 5 - Saia com OK da Janela de Diálogo Import File to FrontPage Web
Conforme verifica, a pasta e todo o seu conteúdo foi importada para a Web.
15
Caso tenha obtido este manual através da Internet, sugerimos que coloque todos os ficheiros na pasta proposta.
25
3.3. A 1ª Página – Guia de Aves
Legenda:
1 – Imagem em Background
(background.jpg)
2 – Imagem com a designação do site e
elementos decorativos (banner.jpg)
3 e 8 – Elementos decorativos (bullet.jpg)
4 – Botão que indica que nos encontramos na
página Home (página principal). O botão tem
a ponta virada e não possui qualquer
Hyperlink (botao_home_activo.jpg).
5 – Botão que dá acesso à página Localização
(botao_localizacao.jpg)
6 – Botão que dá acesso à página
Informações (botao_informacoes.jpg)
7 – Botão que dá acesso à página Aves
(botao_aves.jpg)
9 – Imagem transparente, cuja finalidade é
manter constante a largura da célula da
esquerda (espaco.gif)
Figura 20 - A 1ª Página – Guia de Aves
Descrição Geral:
Esta é a Home Page ou página principal do site. Nela se incluiu o nome do site e
os Hyperlinks que dão acesso às outras páginas. Todos os elementos foram
colocados numa tabela. A linha vertical indica a divisão em duas colunas.
• ACTIVIDADES:
• 1 - No Front Page Explorer, edite a página (dois cliques sobre o ficheiro index.htm)
• 2 - Defina as características gerais da página, conforme os procedimentos descritos no ponto
2.4.2 da pág. 10, mas tendo em consideração as seguintes diferenças:
- O Título da página é Guia de Aves
- A imagem do Background encontra-se na pasta imagens e tem a designação
background.jpg
3.3.2. Inserção e formatação da Tabela
• ACTIVIDADES:
• 1 - Coloque o cursor no canto superior esquerdo da página

• 2 - Insira uma Tabela com 1 linha, 2 colunas, sem contorno (border 0) e com uma largura
(with) de 95%. Se já não se recordar como é que se procede, consulte o ponto 2.4.4 da página
12 (actividades 1 a 4)
26
É necessário que a célula da esquerda fique bastante mais pequena do que a célula da direita. Por
isso, vai formatar a Tabela:
• 3 - Seleccione a célula da esquerda e atribua-lhe as seguintes características (se não se

recordar como se faz, consulte o ponto 2.4.4 da página 12 - actividades 13 a 15):
Em Layout:
Horizontal Alignment: Left
Vertical Alignment: Top
Em Size:
Specify With: 19 in Percent
• 4 - Seleccione a célula da direita e atribua-lhe as seguintes características:
Em Layout:
Horizontal Alignment: Center
Em Size:
Specify With: 81 in Percent
3.3.3. Importação das imagens e sua formatação

Nas actividades seguintes indica-se o número atribuído a cada imagem na Figura 20. Convém,
portanto, ir consultando esta figura para compreender bem aquilo que se pretende fazer. Se já
não se recordar dos procedimentos para a inserção de imagens e sua formatação, consulte o
ponto 2.4.6 da página 17. Lembre-se que todas as imagens a importar se encontram na pasta
imagens.
• ACTIVIDADES
Imagem nº 9 - transparente:
• 1 - Insira a imagem no local respectivo (ficheiro espaco.gif)
• 2 - Formate a imagem, atribuindo-lhe as seguintes características:
Desactive a opção Keep Aspect Ratio
Largura (Width) de 140 pixels
Altura (Height) de 4 pixels
Imagem nº 2 - designação do site:

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

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

27
• 9 - Insira a imagem botao_home_activo.jpg

• 10 - Atribua o nome Home à imagem e defina o seu tamanho
• 11 - Desactive a selecção da imagem e coloque o cursor à sua direita
Imagem nº 5 - Botão Localização

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

• 15 - Insira a imagem botao_informacoes.jpg
• 16 - Atribua o nome Informações à imagem, defina o seu tamanho e retire-lhe a moldura.
• 17 - Desactive a selecção da imagem e coloque o cursor à sua direita
Imagem nº 7 - Botão Aves

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

• 21 - Copie o elemento decorativo já inserido nesta página, através dos comandos Copy/Paste
3.3.4. Definição dos Hyperlinks

Os botões Localização, Informações e Aves vão permitir o acesso às páginas respectivas. Vai
agora definir esses Hyperlinks.
• ACTIVIDADES:
Botão Localização
• 1 - Seleccione a imagem
• 2 - Defina um Hyperlink para a página localizacao.htm (se já não se recordar dos
procedimentos a efectuar, consulte o ponto 2.4.9 da pág. 20 - actividades 2 a 5).
Botão Informações
• 4 - Defina um Hyperlink para a página informacoes.htm
Botão Aves
• 6 - Defina um Hyperlink para a página aves.htm
3.3.5. Visualização da página no Browser

A primeira página já está completa. Depois de a gravar, verifique se o resultado final está de
acordo com o que se pretende.
28
3.4. A 2ª Página - Localização

Legenda:
1 – Primeira linha da tabela principal. Na célula
da esquerda foi colocada a imagem espaco.gif.
Na célula da direita foram colocados os botões
de navegação, a que foram atribuídos os
respectivos hype rlinks: imagens
botao_home.jpg,
botao_localizacao_activo.jpg,
botao_informacoes.jpg e botao_aves.jpg.
2 – Segunda linha da tabela principal. Não
contém quaisquer elementos, servindo apenas
para se conseguir uma maior separação.
3 – Terceira linha da tabela principal. Na célula
da direita foi colocada a imagem bullet.jpg e
parte do texto incluído no ficheiro
textos_6.doc.
4 - Célula da esquerda da 4 linha da tabela
principal. Não contém quaisquer elementos. Na
célula da direita desta linha foi incluída uma
tabela.
5 - Célula da esquerda da segunda tabela. Esta
segunda tabela foi colocada na célula da direita
da tabela principal (da 4ª linha). Contém a
imagem bullet.jpg (duas vezes) e parte do
texto incluído no ficheiro textos_6.doc.
6 - Célula da direita da segunda tabela. Esta
da tabela principal (da 4ª linha). Contém a
imagem mapa.jpg e uma indicação
bibliográfica, com um hyperlink externo.
Sobre o mapa foi desenhado um Hotspot, com
um hyperlink externo.
Figura 21 – A 2ª Página – Localização 7 - Quinta linha da tabela principal. A célula da
direita contém a imagem bullet.jpg e parte do
texto incluído no ficheiro textos_6.doc. O
Descrição Geral: nome do concelho de Santarém contém um
Esta página inclui informações acerca da localização do Parque Natural da hyperlink externo.
Serra de Aire e Candeeiros. Tal como a página anterior, todo o seu conteúdo 8 - Sexta linha da tabela principal. Não contém
foi colocado numa tabela. De notar, porém, que dentro desta tabela (na linha 4, quaisquer elementos.
na célula da direita), existe uma outra tabela. Todos os textos estão incluídos 9 - Sétima linha da tabela principal. A célula da
no ficheiro textos_6.doc, guardado na pasta c:/formacao/. direita contém:
- imagem regua.jpg (separador)
- nomes das páginas do site com hyperlinks
internos.
- imagem carta_animacao.gif, com um
hyperlink que permite o envio imediato de
uma mensagem via e-mail.
- legenda da imagem anterior.
• ACTIVIDADES:
• 1 - No Front Page Explorer, edite a página (dois cliques sobre o ficheiro localizacao.htm)
29
• 2 - Defina as características gerais da página (se não se recorda como se faz veja o ponto
2.4.2 da pág. 10), mas tendo em consideração as seguintes diferenças:
Na Janela de Diálogo Page Properties, no separador Background:
Seleccione a opção Get Background and Colors from Page
Clique em Browse e opte por index.htm
Desta forma evita ter que definir novamente as cores do Texto, do Background e dos Links e de
escolher a imagem para o Background: a página vai ter as mesmas características da página
index.htm. Para além de evitar trabalho, esta técnica tem ainda a seguinte vantagem: se, por
exemplo, resolvesse alterar a imagem do Background do seu site, bastava alterá-lo na página
index.htm. Todas as outras seriam alteradas automaticamente.
3.4.2. Inserção e formatação da tabela
• ACTIVIDADES:
• 1 - Insira uma Tabela com tem 7 linhas, 2 colunas e uma largura total de 100%
• 2 - Formate a coluna da esquerda (se já não se recorda dos procedimentos a efectuar, consulte
o ponto 2.4.4 da pág. 12, actividades 11 a 15). Opte por:
Minimum with: 19 in Percent
• 3 - Formate a coluna da direita, opatndo por:
Agora, escolha a fonte a utilizar nesta página:

• 4 - Selecione toda a tabela
• 5 - Format/Font…
• 6 - Na Janela de Diálogo Font, no separador Font, opte por:
Font: Comics Sans MS
Font Style: Bold
Size: 2 (10 pt)
Color: Default
3.4.3. A primeira linha da tabela
• ACTIVIDADES:
Inserção da imagem transparente:

Esta imagem já foi colocada e formatada na página index.htm. Por isso, é mais fácil copiá-la
dessa página para esta. Como tem a página index.htm aberta no FrontPage Editor, o
procedimento é o seguinte:
30
• 1 – Window/Guia de Aves
• 2 – Seleccione a imagem e faça a sua cópia
• 3 – Para voltar à página localizacao.htm faça Window/Guia de Aves – Localização
• 4 – Coloque o cursor na primeira célula da coluna da esquerda e cole (Paste) a imagem
Botão Home:
• 5 - Coloque o cursor na primeira célula da coluna da direita
• 6 - Insira a imagem botao_home.jpg
• 7 - Atribua o nome Home à imagem, defina o seu tamanho e retire-lhe a moldura
• 8 - Verifique se tem a imagem seleccionada
• 9 - Defina um Hyperlink para a página index.htm (se já não se recordar dos procedimentos a
efectuar, consulte o ponto 2.4.9 da pág. 20, actividades 2 a 5).
Botão Localização:
• 10 - Coloque o cursor ao lado direito do Botão Home
• 11 - Insira a imagem botao_localizacao_activo.jpg
• 12 - Atribua o nome Localização à imagem, defina o seu tamanho e retire-lhe a moldura
Botões Informações e Aves:

• 13 - Copie estes botões da página index.htm e coloque-os no local respectivo
Finalmente, é necessário formatar a célula, de modo a obter um alinhamento central do seu

conteúdo:
• 14 - Formate a célula, escolhendo em:
Layout
3.4.4. A terceira linha da tabela
• ACTIVIDADES:
Inserção da image bullet.jpg:

• 1 – Copie esta imagem da página index.htm e coloque-a no local respectivo
Inserção do texto:
Todo o texto a incluir neste site está gravado no ficheiro textos_6.doc. A sua importação deverá
ser feita a partir do Word, utilizando o método Copy/Paste.
• 2 – Insira o texto à direita da imagem Bullet (“O Parque Natural… do nosso país.”)
3.4.5. A quarta linha da tabela
Note que esta linha contém, na célula da direita, uma segunda tabela.
31
• ACTIVIDADES:
• 1 - Coloque o cursor na célula da direita

• 2 - Insira uma Tabela com 1 linha, 2 colunas e com a largura de 100%
• 3 - Formate a célula da esquerda, optando por:
Minimun with: 45%
• 4 – Formate a célula da direita, optando por:
Minimum with: 55%
Preencha a coluna da esquerda:

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

• 9 - Insira três quebras de linha
• 10 - Insira a imagem mapa.jpg
• 11 - Atribua o nome Localização do PNSAC à imagem e defina o seu tamanho
• 12 - Insira um parágrafo e digite a indicação bibliográfica do Mapa: in Áreas Protegidas.
• 13 - Seleccione o texto e utilize as opções da barra de ferramentas para o formatar com a
fonte Comic Sans Ms a bold e reduzir o seu tamanho.
Vai criar um Hotspot com um Hyperlink externo para o site da Serra de Aire e Candeeiros.
• 15 - Desenhe o Hotspot sobre a localização da Serra de Aire e Candeeiros e estabeleça o
Hyperlink para o seguinte URL:
http://www.icn.pt/parques/pnsac/pnsac.html
(se já não se recorda como se faz (Hotspot), consulte o ponto 2.4.12 da página 21)
(se já não se recorda como se faz (Hyperlink) consulte o ponto 2.4.10 da página 20
actividades 3 a 5)
Agora, pretende-se criar um Hyperlink na expressão Áreas Protegidas (na legenda) que remeta
para o site respectivo.
• 16 - Na legenda, seleccione a expressão Áreas Protegidas

• 17 - Crie o Hyperlink para o seguinte URL:
http://www.icn.pt/areasp.html
32
(se já não se recorda como se faz, consulte o ponto 2.4.10 da página 20, actividades 3 a 5)
3.4.6. A quinta linha da tabela
• ACTIVIDADES:
• 1 - Copie o Bullet que já tem nesta página

• 2 - A partir do Word, copie o texto do primeiro parágrafo (“Abrange cerca… Aire e
Candeeiros”)
• 3 - Utilizando a opção da Barra de Ferramentas, alinhe a indicação bibliográfica à direita.
• 4 - Seleccione a palavra Santarém (concelho de Santarém)
• 5 - Crie um Hyperlink externo para o seguinte URL:
http://www.ribatejo.com/ecos/santarem/
(se já não se recorda como se faz (Hyperlink) consulte o ponto 2.4.10 da página 20
actividades 3 a 5)
3.4.7. A sétima linha da tabela
• ACTIVIDADES:
• 1 - Formate a célula da direita, de modo a obter um alinhamento central do seu conteúdo.

• 2 - Insira a imagem regua.jpg
• 3 - Formate a imagem atribuindo-lhe o nome Separador e definindo o seu tamanho
• 4 - Insira uma quebra de linha
• 5 - Digite o nome das páginas do site :
[Home] [Localização] [Informações] [Aves]
• 6 - Seleccione o texto e formate-o escolhendo a fonte Comic Sans MS e Bold
• 7 - Faça um parágrafo
• 8 - Insira a imagem carta_animacao.gif
• 9 - Formate a imagem atribuindo-lhe o nome Correio e definindo o seu tamanho
• 10 - Insira uma quebra de linha
• 11 - Digite o texto: Contacte-nos!
• 12 - Seleccione o texto e formate-o escolhendo a fonte Comic Sans MS e Bold
Agora é necessário definir os Hyperlinks para as páginas do site.
Página Home
• 13 - Seleccione o nome da página
• 14 - Crie um Hyperlink para a página index.htm
33
Página Localização
Como a página actual é a página Localização, não é necessário estabelecer o Hyperlink
Página Informações
• 16 - Crie um Hyperlink para a página informacoes.htm
Página Aves
• 18 - Crie um Hyperlink para a página aves.htm
Finalmente, vai criar o Hyperlink para o endereço electrónico
• 19 - Seleccione a imagem carta_animacao.gif

• 20 - Crie o Hyperlink para o seguinte endereço electrónico:
nonio@eses.pt
(se já não se recorda como se faz, consulte o ponto 2.4.11 da página 20.
• 21 - Por último, grave a página e visualize-a no Browser
34
3.5. A 3ª Página - Informações

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

Font Style: Bold
Size: 2 (10 pt)
Color: Default
• ACTIVIDADES:
• 1 - Copie a imagem transparente da página Localização e coloque-a na célula da esquerda

• 2 - Copie o Botão Home da página Localização e coloque-o na célula da direita
• 3 - Copie o botão Localização da página Guia de Aves e coloque-o à direita do Botão Home
• 4 - Insira a imagem botao_informacoes_activo.jpg , ao lado do Botão Localização
• 5 - Copie o Botão Aves da página Localização e coloque-o ao lado do Botão Informações
• 6 - Formate a célula, de modo a obter um alinhamento central do seu conteúdo.

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

Minimun with: 35%
• 3 - Formate a célula da direita (da 2ª Tabela), optando por:
Minimum with: 65%
Preencha a célula da esquerda:

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

• 9 - Insira a imagem tipos1.jpg
• 10 - Atribua o nome Morfologia das Aves à imagem, defina o seu tamanho e retire-lhe a
moldura
• ACTIVIDADES:

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

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

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

textos_6.doc.
13 - Célula da direita da quarta tabela. Esta quarta tabela foi
Esta célula contém a imagem alveola.jpg
14 - Oitava linha da tabela principal. A célula da direita
uma quinta tabela com 1 linha e 2 colunas.
16 - Célula da esquerda da quinta tabela. Esta quinta tabela
textos_6.doc.
17 - Célula da direita da quinta tabela. Esta quinta tabela foi
Esta célula contém a imagem melro.jpg
18 - Décima linha da tabela principal. Não contém quaisquer
elementos, servindo apenas para se conseguir uma maior
separação.
19 - Décima primeira linha da tabela principal. Contém a
indicação bibliográfica, importada do ficheiro textos_6.doc.
20 - Décima segunda linha da tabela principal. Não contém
quaisquer elementos, servindo apenas para se conseguir uma
maior separação.
21 - Décima terceira linha da tabela principal. A célula da
direita contém os mesmos elementos que foram colocados na
página Localização: imagem regua.jpg (separador); nomes
das páginas do site com hyperlinks internos; imagem
carta_animacao.gif, com um hyperlink que permite o envio
imediato de uma mensagem via e-mail; legenda da imagem
anterior.
• ACTIVIDADES:
• 1 - No Front Page Explorer, edite a página (dois cliques sobre o ficheiro aves.htm)
• ACTIVIDADES:
39


Font Style: Bold
Size: 2 (10 pt)
Color: Default
• ACTIVIDADES:
• 1 - Copie a imagem transparente da página Informações e coloque-a na célula da esquerda

• 2 - Copie o Botão Home da página Localização
• 3 - Copie os Botões Localização e Informações da página Guia de Aves e coloque-os à
direita do Botão Home
• 4 - Insira a imagem botao_aves_activo.jpg , ao lado do Botão Informações
• 5 - Formate a célula, de modo a obter um alinhamento central do seu conteúdo.

• ACTIVIDADES:
• 1 - Na célula da direita, insira uma Tabela com 3 linhas, 3 colunas e 100% de largura.
• 2 - Formate a coluna da esquerda, optando por:
Minimun with: 60%
• 3 - Formate a coluna central, optando por:
Minimum with: 20%
• 4 - Formate a coluna da direita, optando por:
40

Minimum with: 20%
• 5 - Agrupe as células da coluna da esquerda (se já não se recorda como proceder, consulte o
ponto 2.4.4 da página 12 - actividades 16 a 18)
Para preencher a coluna da esquerda:

• 6 - A partir do Word, copie o texto: “Para fazermos… onde nos encontramos.”
• 7 - Seleccione os 4 últimos parágrafos do texto que copiou (“As melhores horas… onde nos
encontramos”)
• 8 - Na barra de ferramentas, clique o botão Bulleted List
Para preencher as células 5a, 5d e 5e (consulte a Figura 23 da página 38)

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

• 13 - Digite o texto em cada uma das células, fazendo quebras de linha para obter o efeito
desejado:
na célula 5b:
Pôpa
Upupa epops
Espécie Protegida
na célula 5c:
Alvéola Branca
Motacilla alba
na célula 5f:
Melro
Turdus merulu
• 14 - Formate o texto escolhendo, na barra de ferramentas, a fonte Comic Sans Ms, Bold e
tamanho reduzido.
3.6.5. A quarta linha da tabela
• ACTIVIDADES:
• 1 - Copie a imagem regua.jpg da página Informações
41
• 2 - Centre a imagem na célula, clicando o botão respectivo da Barra de Ferramentas

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

Minimun with: 55%
• 3 - Formate a célula da direita, optando por:
Minimun with: 45%
Preenchimento da célula da esquerda:

• 4 - Copie o Bullet da página Informações
• 5 - A partir do Word, copie o texto (“Pôpa… 5-8 ovos.”)
• 6 - Formate todo o título: Bold e Font Size 3 (12pt)
• 7 - Coloque a segunda parte do título (o nome latino da ave) em Itálico
• 8 - Faça uma Bookmark no título (se não se recorda como proceder, consulte o ponto 2.4.7.1
da página 18)
Preenchimento da célula da direita:

• 9 - Insira a imagem popa.jpg
• 10 - Atribua o nome Pôpa à imagem e defina o seu tamanho
3.6.7. A sexta linha da tabela
• ACTIVIDADES:
• 1 - Copie a imagem regua.jpg que já colocou na linha 4


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

Minimun with: 55%
Minimun with: 45%

• 4 - Copie o Bullet que já inseriu na linha 5
• 5 - A partir do Word, copie o texto (“Alvéola Branca… 5-6 ovos.”)
• 6 - Formate o título de modo a que fique igual ao título da Pôpa
• 7 - Faça uma Bookmark no título
Preenchimento da coluna da direita:

• 8 - Insira a imagem alveola.jpg 1
• 9 - Atribua o nome Alvéola Branca à imagem e defina o seu tamanho
3.6.9. A oitava linha da tabela
• ACTIVIDADES:
• 1 - Copie a imagem regua.jpg que já colocou na linha 4

3.6.10. A nona linha da tabela

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

Minimun with: 55%
Minimun with: 45%

• 4 - Copie o Bullet que já inseriu na linha 5
43
• 5 - A partir do Word, copie o texto (“Melro… 3-5 ovos.”)

• 6 - Formate o título de modo a que fique igual ao título da Pôpa
• 7 - Faça uma Bookmark na palavra Melro do título
Preenchimento da célula da direita:

• 8 - Insira a imagem melro.jpg
• 9 - Atribua o nome Melro à imagem e defina o seu tamanho
3.6.11. A décima primeira linha da tabela
• ACTIVIDADES:
• 1 - A partir do Word, copie a indicação bibliográfica

• 2 - Alinhe o texto à direita e coloque-o em itálico, clicando os botões respectivos da Barra
de Ferramentas
3.6.12. A décima terceira linha da tabela
• ACTIVIDADES:

• 1 - Copie todos os elementos da linha sete da página Informações
• 2 - Se for necessário, formate a célula de modo a obter um alinhamento central do seu
conteúdo
• 3 - Seleccione o texto Informações e atribua-lhe um Hyperlink para a página Informações
• 4 - Seleccione o texto Aves e desfaça o Hyperlink
3.6.13. Realização dos hyperlinks para as bookmarks da página
• ACTIVIDADES:
• 1 - Realize os Hyperlinks das imagens em tamanho reduzido para as Bookmarks

respectivas (se não se recordar como se faz, consulte o ponto 2.4.7.2 da página 18)
• 2 - Grave a página e visualize-a no Browser
44
COLOCAÇÃO ON-LINE DO SITE GUIA DE AVES
45
4. Preparação do site para publicação na Web

Antes de publicar o seu site na Web, deve verificar duas coisas:
A correcção de todos os hyperlinks

Utilize o FrontPage Explorer e verifique o estado dos Hyperlinks internos. Se não estiverem
correctos, altere-os aí.
Depois, perca algum tempo e "navegue" pelo seu site, testando todos os hyperlinks internos.
O tamanho dos ficheiros de imagens

É muito importante que os ficheiros de imagens sejam pequenos: nada mais desagradável do que
estar demasiado tempo à espera que a página seja carregada…
Existem no mercado alguns programas que compactam estes ficheiros. Os autores deste manual
utilizam o Lview Pro. Pode ir buscá-lo à Web, mas actualmente só está disponível uma versão de
demonstração que pode ser utilizada gratuitamente por 24 dias.
Endereço: http://mirrors.telepac.pt/tucows/imgedit95.html
46
5. Publicação na Web
Existem numerosos programas que permitem o envio dos ficheiros por FTP. Vamos utilizar o
WS_FTP95. Pode ir buscá-lo à WEB em http://mirrors.telepac.pt/tucows/ftp95.html
É de utilização gratuita.
NOTA IMPORTANTE: Na realização deste manual considerou-se que o site deveria ser enviado
para o domínio eses.pt. Como é evidente, deverá adaptar os procedimentos descritos nas
actividades seguintes à sua realidade.
• ACTIVIDADES:
• 1 - Inicie o programa WS_FTP95, através do menu Iniciar do Windows

• 2 - Na Janela de Diálogo Propriedades de Session opte, em Profile Name, por ESES
Legenda:
Profile Name: Designação da
configuração de acesso
Host Name/Adress: Endereço do
computador remoto
Host Type: Tipo de computador
remoto
User ID: Designação do utilizador
Password: Password do utilizador
Figura 24 - Janela de Diálogo Propriedades da Sessão
• 3 - Saia com OK
47
Depois de estabelecida a ligação, o ecran terá o seguinte aspecto:

Legenda:
Conforme verifica, esta janela está
dividida em duas áreas: a do lado
esquerdo representa o Sistema Local (o
seu computador, que contém o site a
enviar); a do lado direito representa o
Sistema Remoto (para onde pretende
enviar o seu site).
Figura 25 - Janela de Diálogo do WS_FTP95 após a ligação
• 4 - Na área do Sistema Local, procure a pasta que contém o site GuiadeAves.

• 5 - Ná área do Sistema Remoto, abra a pasta public-html (duplo clique) e, em seguida, a
pasta nonio
No final o ecran deverá ter um aspecto semelhante ao da Error: Reference source not found.
Podem existir diferenças na área do Sistema Remoto, dependendo dos ficheiros e pastas que,
entretanto tiverem sido aí colocados. No entanto, é no Menu rolante que se encontra na parte
superior desta área que pode verificar a sua localização. Esta deve ser, neste caso, a seguinte:
/public_html/nonio
Figura 26 - Janela de Diálogo do WS_FTP95 (2)
48
Comece por criar uma pasta no Sistema Remoto (que irá conter o seu site):
• 6 - Clique o botão MkDir
• 7 - Na Janela de Diálogo Input digite: guiadeaves
• 8 - Sai com OK
Conforme verifica, a pasta já foi criada.
• 9 - Dê um duplo clique sobre a pasta guiadeaves
O path do Sistema Remoto deverá ser o seguinte:

/public_html/nonio/guiadeaves/
Vai começar por enviar todos os ficheiros de imagens. No entanto, é necessário criar primeiro
uma pasta com a designação imagens:
• 10 - Na área do sistema Remoto, clique o botão MkDir
• 11 - Na Janela de Diálogo Input digite: imagens
• 12 - Sai com OK
• 13 - Dê um duplo clique sobre a pasta imagens

/public_html/nonio/guiadeaves/imagens/
• 14 - Na área do Sistema Local, abra a pasta imagens

• 15 - Seleccione todos os ficheiros de imagens que ela contém
• 16 - Clique o Botão que lhe permite enviar os ficheiros
Agora, vai enviar os restantes ficheiros (as páginas do site).

• 17 - Na área do Sistema Local, clique a seta verde para subir um nível na estrutura de pastas
• 18 - Na área do Sistema Remoto, clique a seta verde para subir um nível na estrutura de
pastas
• 19 - Verifique o path em ambas as áreas

/public_html/nonio/guiadeaves/
• 20 - Na área do Sistema Local, seleccione os 4 ficheiros a enviar

• 21 - Clique o Botão que lhe permite enviar os ficheiros
• 22 - Confirme se todos os ficheiros foram enviados
• 23 - Clique em Close para terminar a ligação
• 24 - Clique em Exit para encerrar o programa
• 25 - Teste so seu site no Browser:
http://www.eses.pt/nonio/guiadeaves/
49
Índice de Imagens
FIGURA 1 - JANELA DE DIÁLOGO GETTING STARTED................................................................................5
FIGURA 2 - JANELA DE DIÁLOGO NEW FRONTPAGE WEB.........................................................................5
FIGURA 3 - JANELA DE DIÁLOGO CREATE A NEW FRONTPAGE WEB...................................................6
FIGURA 4 - JANELA DE DIÁLOGO NAME AND PASSWORD REQUIRED..................................................6
FIGURA 5 - O AMBIENTE DO FRONTPAGE EXPLORER................................................................................7
FIGURA 6 - ESTRUTURA DO SITE CRIADO.......................................................................................................8
FIGURA 7 - AMBIENTE DO FRONTPAGE EDITOR...........................................................................................9
FIGURA 8 - LISTA....................................................................................................................................................12
FIGURA 9 - JANELA DE DIÁLOGO INSERT TABLE.......................................................................................13
FIGURA 10 - INSERÇÃO DE UMA TABELA.......................................................................................................13
FIGURA 11 - JANELA DE DIÁLOGO TABLE PROPERTIES..........................................................................14
FIGURA 12 - FORMATAÇÃO DA TABELA (REDUÇÃO DE UMA COLUNA).............................................14
FIGURA 13 - JANELA DE DIÁLOGO CELL PROPERTIES.............................................................................15
FIGURA 14 - FORMATAÇÃO DE UMA TABELA (CARACTERÍSTICAS DE UMA COLUNA).................15
FIGURA 15 - FORMATAÇÃO DE UMA TABELA (MERGE CELLS).............................................................16
FIGURA 16 - JANELA DE DIÁLOGO SPLIT CELLS.........................................................................................16
FIGURA 17 - FORMATAÇÃO DE UMA TABELA (SPLIT CELLS).................................................................16
FIGURA 18 - JANELA DE DIÁLOGO BOOKMARK NAME.............................................................................18
FIGURA 19 - JANELA DE DIÁLOGO CREATE HYPERLINK.........................................................................19
FIGURA 20 - A 1ª PÁGINA – GUIA DE AVES......................................................................................................26
FIGURA 21 – A 2ª PÁGINA – LOCALIZAÇÃO....................................................................................................29
FIGURA 22 - A 3ª PÁGINA - INFORMAÇÕES.....................................................................................................35
FIGURA 23 - A 4ª PÁGINA - AVES.........................................................................................................................38
FIGURA 24 - JANELA DE DIÁLOGO PROPRIEDADES DA SESSÃO............................................................47
FIGURA 25 - JANELA DE DIÁLOGO DO WS_FTP95 APÓS A LIGAÇÃO....................................................48

50
FIGURA 26 - JANELA DE DIÁLOGO DO WS_FTP95 (2)..................................................................................48
51
Índice
ÍNDICE.........................................................................................................................................................................3
SOBRE ESTE MANUAL............................................................................................................................................2
O ESSENCIAL DO FRONTPAGE 98.......................................................................................................................3
1. O QUE É FRONTPAGE 98.....................................................................................................................................4
2. EXPLORAÇÃO INICIAL DO FRONTPAGE......................................................................................................4

2.1. DEFINIÇÃO DE UMA NOVA FRONTPAGE WEB ..............................................................................................................4
2.2. O AMBIENTE DO FRONTPAGE EXPLORER.....................................................................................................................7
2.3. CRIAÇÃO DE PÁGINAS..............................................................................................................................................7
2.4. EDIÇÃO DE PÁGINAS................................................................................................................................................9
2.4.1. O ambiente do FrontPage Editor...............................................................................................................9
2.4.3. Digitação e formatação de texto. Listas...................................................................................................11
2.4.4. Inserção e formatação de uma tabela.......................................................................................................12
2.4.5. Inserção de quebras de linha e de linhas horizontais...............................................................................16
2.4.6. Inserção e formatação de imagens...........................................................................................................17
2.4.7. Criação de Hyperlinks para Bookmarks numa mesma página................................................................18
2.4.7.1. Criação da Bookmark........................................................................................................................................18
2.4.7.2. Criação do Hyperlink para a Bookmark ............................................................................................................18
2.4.8. Visualização de uma página no Browser..................................................................................................19
2.4.9. Criação de outros Hyperlinks Internos (entre páginas)...........................................................................20
2.4.10. Criação de Hyperlinks externos..............................................................................................................20
2.4.11. Criação de Links para endereços electrónicos.......................................................................................20
2.4.12. Criação de Hotspots...............................................................................................................................21
2.5. POTENCIALIDADES DO FRONTPAGE EXPLORER...........................................................................................................21
2.6. DESIGNAÇÃO DE FICHEIROS E DE PASTAS..................................................................................................................22
CRIAÇÃO DE UM SITE..........................................................................................................................................24
3. INÍCIO DO SITE....................................................................................................................................................25
3.1. CRIAÇÃO DA WEB GUIADEAVES.............................................................................................................................25
3.2. IMPORTAÇÃO DA PASTA DE IMAGENS PARA A WEB......................................................................................................25
3.3. A 1ª PÁGINA – GUIA DE AVES...............................................................................................................................26
3.3.2. Inserção e formatação da Tabela.............................................................................................................26
3.3.3. Importação das imagens e sua formatação..............................................................................................27
3.3.4. Definição dos Hyperlinks..........................................................................................................................28
Botão Localização................................................................................................................................................28
Botão Informações...............................................................................................................................................28
Botão Aves..........................................................................................................................................................28
3.3.5. Visualização da página no Browser ........................................................................................................28
3.4. A 2ª PÁGINA - LOCALIZAÇÃO................................................................................................................................29
52

3.5. A 3ª PÁGINA - INFORMAÇÕES.................................................................................................................................35
3.5.5. A quinta linha da tabela ...........................................................................................................................37
3.5.6. A sétima linha da tabela ..........................................................................................................................37
3.6. A 4ª PÁGINA – AVES............................................................................................................................................38
3.6.7. A sexta linha da tabela..............................................................................................................................42
3.6.9. A oitava linha da tabela............................................................................................................................43
3.6.10. A nona linha da tabela............................................................................................................................43
3.6.11. A décima primeira linha da tabela.........................................................................................................44
3.6.12. A décima terceira linha da tabela...........................................................................................................44
3.6.13. Realização dos hyperlinks para as bookmarks da página......................................................................44
COLOCAÇÃO ON-LINE DO SITE GUIA DE AVES..........................................................................................45
4. PREPARAÇÃO DO SITE PARA PUBLICAÇÃO NA WEB............................................................................46
5. PUBLICAÇÃO NA WEB.......................................................................................................................................47
ÍNDICE DE IMAGENS............................................................................................................................................50
ÍNDICE.......................................................................................................................................................................52
53

Manual FrontPage 98

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Manual FrontPage 98

Încărcat de

Drepturi de autor:

Formate disponibile

Santarém, Junho de 1998

Da Escola para o Mundo com o FrontPage 98

Da Escola para o Mundo com o FrontPage 98

SOBRE ESTE MANUAL............................................................................................................................................2

O ESSENCIAL DO FRONTPAGE 98.......................................................................................................................3

1. O QUE É FRONTPAGE 98.....................................................................................................................................4

2. EXPLORAÇÃO INICIAL DO FRONTPAGE......................................................................................................4

Da Escola para o Mundo com o FrontPage 98

3.4.7. A sétima linha da tabela...........................................................................................................................33

4. PREPARAÇÃO DO SITE PARA PUBLICAÇÃO NA WEB............................................................................46

Da Escola para o Mundo com o FrontPage 98

Sobre este Manual

Está organizado em três capítulos:

Da Escola para o Mundo com o FrontPage 98

Da Escola para o Mundo com o FrontPage 98

2. Exploração inicial do FrontPage

2.1. Definição de uma nova FrontPage Web

• 1 - Inicie o programa FrontPage, através do menu Iniciar do Windows.

Da Escola para o Mundo com o FrontPage 98

• 2 - Na Janela de Diálogo Getting Started, opte por:

Figura 1 - Janela de Diálogo Getting Started

Grupo 2 - Choose a title for your FrontPage web.

Figura 2 - Janela de Diálogo New FrontPage Web

Da Escola para o Mundo com o FrontPage 98

Figura 3 - Janela de Diálogo Create a New FrontPage Web

Figura 4 - Janela de Diálogo Name and Password Required

Da Escola para o Mundo com o FrontPage 98

2.2. O ambiente do FrontPage Explorer

2.3. Criação de páginas

• 1 - Na Barra de Ferramentas clique o botão New Page.

Da Escola para o Mundo com o FrontPage 98

• 2 - Seleccione o ícone que a representa (o rectângulo com a designação Home Page)

• 5 - Crie as duas páginas

• 8 - Seleccione o nome do primeiro ficheiro (toppage1.htm) com um clique.

No final, o seu trabalho deverá ter o seguinte aspecto:

Figura 6 - Estrutura do site criado

Da Escola para o Mundo com o FrontPage 98

2.4. Edição de Páginas

• 1 - Dê um duplo clique sobre o ícone da Página Inicial

2.4.1. O ambiente do FrontPage Editor

Da Escola para o Mundo com o FrontPage 98

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

Agora, convém gravar a página:

Da Escola para o Mundo com o FrontPage 98

2.4.3. Digitação e formatação de texto. Listas

• 1 - Faça dois parágrafos e digite este texto (ou outro, se o entender):

(Séneca. Questões Naturais, livro 7. Séc. I)

• 2 - Seleccione todo o texto e, em Format/Font…, altere a fonte e o tamanho (escolha o tipo

• 6 - Seleccione todos os parágrafos

Da Escola para o Mundo com o FrontPage 98

• 13 - Grave a página, colocando o ficheiro da imagem na pasta images da sua Web e

No final, o seu trabalho deverá apresentar um aspecto semelhante a este:

2.4.4. Inserção e formatação de uma tabela

• 1 - Coloque o cursor por baixo do texto e faça dois parágrafos

Da Escola para o Mundo com o FrontPage 98

• 3 - Na Janela de Diálogo Insert Table opte por:

Secção Layout: para definir a formatação da tabela.

Secção Width: para definir a largura geral da tabela.

Figura 9 - Janela de Diálogo Insert Table

• 4 - Saia da Janela de Diálogo Insert Table com OK

Deverá ter obtido uma tabela com este aspecto:

Figura 10 - Inserção de uma Tabela

• 5 - Coloque o cursor numa das células da tabela.

Da Escola para o Mundo com o FrontPage 98