FrontPage XP

Antnio F. Silva

FrontPage XP
sobre o prograna...
O FrontPage uma ferramenta que permite realizar com toda a facilidade pginas em HTML, a linguagem utilizada para publicao de

documentos na World Wide Web. Este programa um bom exemplo do princpio WYSIWYG: utilizando-o,

vamos vendo em cada momento o resultado final do nosso trabalho e, por outro lado, no precisamos de conhecer programao publicarmos INTERNET. HTML Language WYSIWYG = What You See Is What You Get Antes de comearmos deve criar uma pasta no Ambiente de = HyperText Markup a linguagem HTML informao de para na

trabalho com o seguinte nome WEB.

Antnio F. Silva

FrontPage XP
sobre o prograna...

1
1 - Barra de menus
2 - Barra de cones de atalho

3 - Tipo de letra

4 - Tamanho da letra

6
5 - rea de trabalho 6 Formas de visualizao (Normal, cdigo HTML e visualizao em pgina Web).

Antnio F. Silva

FrontPage XP
Propriedades da pgina
1 Clique com o boto direito do rato sobre a rea de trabalho (no pode ser sobre

nenhum objecto... Abre um

menu de contexto). Na janela que se abre sobre o ecr escolha pgina. 2 No separador Geral Propriedades da

digite em Ttulo Pgina de

entrada. 3 No separador Fundo pode escolher uma imagem, uma cor de fundo, a cor de letra, a cor das hiperligaes,

3
4

etc.
4 No separador Margens opte por colocar zero pixels para a margem superior e zero para a margem

esquerda. Clique no boto

Antnio F. Silva

OK.

FrontPage XP
Guardar a primeira pgina

1 Abra o menu Ficheiro e

escolha Guardar como.... 2 Na janela seguinte digite em nome do ficheiro index.html. No se esquea que o deve fazer na pasta WEB...

IMPORTANTE: No confunda o nome de ficheiro com o ttulo da pgina enquanto o ttulo de pgina pode ser qualquer nome (convm que referencie o assunto de que trata a pgina) e ter acentuao, maisculas e vrias palavras, o nome de ficheiro s pode (s deve) ter 8 caracteres (todos em minsculas e sem acentuao). A primeira pgina do nosso site/stio deve sempre ter o nome de index.html. Isto serve para que quando se abre o nosso stio na Internet, a nossa pgina de entrada abra automaticamente Com estes procedimentos criou a sua pgina de entrada.

Antnio F. Silva

FrontPage XP
Inserir tabela

1 Abra o menu tabela e escolha

Inserir e Tabela 2 na janela que se abre digite 8 linhas e quatro colunas pode sempre e em qualquer altura aumentar ou diminuir o nmero de colunas ou de linhas...

A largura a especificar para a tabela

de 600 pixels a maior parte dos ecrs esto na resoluo de 800 colunas por 600 linhas ou seja 800 de largura x 600 de altura, se colocarmos a largura da nossa tabela (neste caso 600) abaixo

desse valor, esta ser sempre visvel na

sua totalidade, qualquer que seja a resoluo que o computador tenha. Em Tamanho da linha digite zero assim no aparecem as linhas da tabela, isto , elas so visualizadas no

modo de edio (FrontPage) mas no

na visualizao de Internet.
Antnio F. Silva

FrontPage XP
Propriedades da tabela

1 Eis como fica a nossa tabela...

2 Clique com o boto direito do rato sobre a tabela. Na janela que se abre sobre o ecr, escolha Propriedades da Tabela. 3 Na janela Propriedades da tabela

e em Alinhamento, escolha Centro e

clique no boto OK.

2 3

Antnio F. Silva

FrontPage XP
Propriedades da tabela

1 Eis como fica a nossa tabela...

Centrada na horizontal.

Antnio F. Silva

FrontPage XP
Propriedades da clula

1 Seleccione toda a sua tabela e

clique com o boto direito do rato sobre a rea de trabalho. Na janela que se abre escolha agora Propriedades da Clula. 2 Em Alinhamento horizontal

escolha Centro. E em Alinhamento

vertical escolha Meio. Clique sobre o boto OK.

Antnio F. Silva

FrontPage XP
Propriedades da clula centrar nas clulas

10

1 Digite na primeira linha o seguinte

(cada ttulo em sua coluna e em maisculas) ESCOLA, SERVIOS,

PROFESSORES E ALUNOS. 2- Seleccione toda a tabela, v s propriedades da clula.

3 coloque agora 150 pixels na largura

de cada uma das clulas (quatro colunas a 150 coincide com os 600 da largura da tabela...). Clique sobre o boto OK.

Antnio F. Silva

FrontPage XP
DIGITAR TEXTO NAS CLULAS

11

1 Eis como ficou...

2 Digite agora na primeira coluna da esquerda (deixe uma em branco...) os seguintes ttulos: LIGAES, PROJECTOS, ACTIVIDADES,

DEPARTAMENTOS, D.TURMA E C. EXECUTIVO.

Antnio F. Silva

FrontPage XP
Cor da letra

12

2
1 Seleccione toda a tabela e escolha o
cone de cor de texto (clique sobre o tringulo ao lado do texto). 2 Abre-se a janela da cor de texto... Escolha mais cores. 3 Na janela seguinte escolha uma cor

para as suas letras. E clique sobre o boto

OK. 4 V agora ao tipo de letra e escolha Arial, 8 pontos e Negrito

Antnio F. Silva

FrontPage XP
Propriedades da clula altura das clulas

13

1 Seleccione toda a tabela e v s

propriedades da clula. 2 Na janela Propriedades da clula digite 40 pixels em Especificar altura (cada clula ter 40 pixels de altura, assim 8 linhas x 40 pixels = 320 pixels de altura

para a tabela...).
3 Eis como ficou...

2
3

Antnio F. Silva

FrontPage XP
Propriedades da clula formatar linhas

14

1 Seleccione toda a primeira linha e v

s propriedades da clula. 2 Na janela Propriedades da clula escolha o boto Estilo . 3 Na janela seguinte Modificar o estilo escolha o boto Formato e no menu que

se abre a opo Limites.

2
3 3
Antnio F. Silva

FrontPage XP
Propriedades da clula formatar linhas

15

4 Na janela Limites e sombreado

escolha Caixa, em Estilo Duplo e na Cor a mesma que deu para as letras... Clique no boto OK sucessivamente at acabarem as janelas... 5 Eis como ficou...

Antnio F. Silva

FrontPage XP
Propriedades da clula formatar linhas

16

6 Seleccione agora a coluna da

esquerda (mas s as que tm texto...) e proceda como anteriormente. 7 Eis o resultado final...

Antnio F. Silva

FrontPage XP
Propriedades da clula formatar linhas alterar a cor

17

8 Seleccione agora as clulas com texto

(Ctrl + boto do rato) e v at s Propriedades da tabela Proceda como anteriormente, abra a caixa Cor e escolha a cor dos seus limites.

Antnio F. Silva

FrontPage XP
Propriedades da clula sombreado

18

1 Seleccione agora as clulas com texto

e v at s Propriedades da tabela Proceda como anteriormente Estilo, Formato, Limites e escolha o separador Sombreado. 2 Em Cor de fundo escolha Mais

cores.

Antnio F. Silva

FrontPage XP
Propriedades da clula sombreado

19

1 Na janela que se abriu (Mais

cores) escolha a cor que utilizou para a letra e depois Personalizar 2 Abre-se uma nova janela (Cor), desloque a pequena seta do lado direito da janela para cima (mais

branco). Quando achar que o tom

da cor escolhida j est como deseja clique em OK. 3 Voltou janela inicial verifique se est como deseja e clique em OK.

Antnio F. Silva

FrontPage XP
Propriedades da clula sombreado

20

1 Eis como ficou

Antnio F. Silva

FrontPage XP
Inserir hiperligao /Hiperlink

21

1 Seleccione a palavra ESCOLA e

clique sobre o cone Inserir

hiperligao. 2 Na janela que se abre sobre o ecr digite em Endereo escola.html. 3 Clique no boto Descrio e

digite Patrono e historial. Clique no

botoOK. Quando voltar janela Inserir hiperligao, clique no boto OK.

2 3

Antnio F. Silva

FrontPage XP
Inserir hiperligao /Hiperlink
1 Repare que a palavra escola ficou sublinhada para retirar o sublinhado,

22

apenas precisa de seleccionar a palavra e clicar no cone de sublinhado. Realize as mesmas operaes para todas as outras palavras/ttulos no se esquea de que o nome das pginas a que vai ligar no devem ultrapassar os oito dgitos e no devem ter caracteres acentuao. IMPORTANTE: ainda no criou as pginas a que vai ligar os botes mas no esquea os seus nomes, pois de seguida ir criar estas pginas. 2 Criou os botes necessrios para aceder a outras pginas do seu stio agora tem de criar as respectivas pginas. Claro que poderia ter realizado esta em maisculas ou com

operao de forma inversa, isto , podia ter comeado por criar as pginas e depois, fazer as respectivas hiperligaes
Antnio F. Silva

FrontPage XP
criar novas pginas

23

Vamos

criar

pgina

escola.html. Seleccione toda a tabela e escolha copiar. Clique sobre o cone Criar uma pgina normal. 2 Abre-se uma pgina em branco Clique com o boto direito sobre ela e

escolha colar.
3 Repare que a tabela foi copiada mas est alinhada esquerda Para resolver esta situao tem de ir s Propriedades da tabela e escolher Centro. A pgina ainda no tem

ttulo

sendo

assim,

Propriedades da pgina e coloque o seguinte ttulo: Patrono e historial. No separador margens, no se esquea de colocar a zeros

Antnio F. Silva

FrontPage XP
criar novas pginas

24

Seleccione o boto ESCOLA e clique no

boto de Inserir hiperligao. Abre-se uma janela Inserir hiperligao, clique sobre o boto

Remover hiperligao e OK: Removeu a hiperligao pois no necessitava dela lgico, no necessita desta ligao porque

quando

aceder

esta

pgina

ela

ficaria

redundante 2 Abra o menu Ficheiro e escolha Guardar como d agora o nome de escola.html ao seu ficheiro e no se esquea de o guardar na pasta WEB:

Ter de repetir estes passos para todas as

pginas em cada pgina (redundncia) ter de desactivar o respectivo boto Remover

hiperligao. No se esquea de dar ttulos s pginas, de guardar os ficheiros como *****.html na pasta WEB e de colocar as margens a zero

Bom trabalho!

Antnio F. Silva

FrontPage XP
criar novas pginas

25

Reapre

que

as

pginas que vai criando aparecem separadores FrontPage Para alternar entre as como no

pginas,
sobre o

basta

clicar

separador

copiar a tabela da pgina index.html e colar nas pginas que vai criando.

Separador da pgina index.html

Antnio F. Silva

FrontPage XP
criar novas pginas

26

Pode realizar a operao anterior de outra forma, isto , as pginas que vai criar so todas

iguais (em quase tudo), para isso, aceda ao menu Ficheiro e escolha Guardar como.
Esta operao, tal como noutros programas (por exemplo: o Word quando quer criar uma cpia com outro nome de um ficheiro em que est a trabalhar) muito simples e realiza uma cpia integral da pgina com tudo o que ela contm, apenas temos de dar outro nome de ficheiro (ESCOLA, SERVIOS, PROFESSORES E ALUNOS, etc. no esquecer que so em minsculas e de extenso - html) e outro ttulo. Na fase anterior criou uma pgina e copiou a tabela para cada pgina nova que criava e gravava ou guardava, neste caso criamos pginas iguais, substituindo a pgina inicial, atravs de um novo nome. S que agora no aparecem todas as pginas no separador, pois, cada pgina que guarda substitui a anterior, mas elas esto l abra a pasta Web e ver todas as pginas que criou. Para continuar a trabalhar ter de abrir todas as pginas que esto na pasta, uma a uma, menos, claro, a que j est aberta (a ltima que guardou).
Antnio F. Silva

FrontPage XP
criar a pgina com botes

27

1
Abandone a WEB

anterior isto , vamos criar novas pginas, mas agora com botes criados especialmente para o efeito. Abra uma nova pgina e crie uma tabela

idntica s anteriores, mas

agora sem nada de texto 2 Abra o Paint Shop Pro. 3 Abra o menu File e escolha New.

3 2

Antnio F. Silva

FrontPage XP
Criar um boto

28

1
1 Na janela de dilogo
New image coloque em Width - largura 150 e em Heigth - altura 40 (estas sero as

dimenses dos botes).

Em Background colour
escolha White Branco. 2 Aparece uma

pequena janela sobre o ecr que ser o nosso boto.

3 Clique sobre o boto

de texto na barra de cones lateral

3
Antnio F. Silva

FrontPage XP
Criar um boto

29

1
1 Abre-se uma janela Text
Entry, digite o texto ESCOLA na caixa de texto no se esquea de assinalar o boto Floating 2 Clique sobre o boto Fill e

escolha a cor do texto na janela

Color e clique sobre o boto OK. 3 Voltou janela de texto clique no boto OK. Nota No se esquea que vai

criar

mais

botes

com

as

mesmas caractersticas, assim o tamanho do texto (fonte) deve ser de forma a caber em cada um dos botes boto ESCOLA; PROFESSORES, etc.

Antnio F. Silva

FrontPage XP
Criar um boto

30

1
1 Posicione o seu texto
no meio da janela, para isso basta arrastar com o rato a seleco de texto. 2 Abra e o menu escolha

2 2 3

Selections

Select All, a sua janela

ficou seleccionada 3 Abra agora o menu Effects e escolha 3D Effects e Buttonize

Antnio F. Silva

FrontPage XP
Criar um boto

31

1
1 Abre-se a janela Buttonize,
aqui escolha os valores arrastando o cursor de cada opo at ficar como quer verifica visualizando na janelinha ao lado. Clique no boto OK.

2 Eis como ficou o seu boto

claro que os valores so os meus!!! 3 Abra agora o menu File e escolhaExportar Optimizer. e JPG

2 3

3 Leia-a com ateno as

janelas seguintes e digite os valores necessrios. 4 Guarde a sua imagem (boto) com o nome escola na pasta que considerou

4
os restantes dos

onde

tem

ficheiros (pasta WEB):

Antnio F. Silva

FrontPage XP
Criar um boto

32

1 Proceda do mesmo modo

para os restantes botes

Antnio F. Silva

FrontPage XP
Criar um boto inserir boto na clula

33

1 Volte sua tabela no Front

Page coloque o cursor no local onde vai inserir o primeiro boto (1 clula do lado esquerdo). Abra o menu Inserir e escolha Imagem/Do ficheiro.

2 Insira a imagem escola.jpg,.

Eis o resultado Proceda de igual modo para os outros botes.

Antnio F. Silva

FrontPage XP
criar botes a partir de uma imagem

34

1 Abra uma nova pgina e

guarde-a como index2.html 2 Insira uma tabela com 5 colunas e 5 linhas. 3 seleccione as clulas do centro como mostra a figura, abra

1 2

o menu Tabela e escolha Unir

clulas. 4 - Todas estas clulas ficaram uma s

3 4
Antnio F. Silva

FrontPage XP
criar botes a partir de uma imagem
1 Abra o Paint Shop Pro 2 Insira uma imagem que lhe agrade para a ligao PROFESSORES.

35

1 3

3 Abra o menu Image e escolha

Resize. Em Whidth coloque 120 e em Height 50, no se esquea de seleccionar Pixels na caixa em frente (se a tabela tem 600 pixels de comprimento e 5 colunas, cada coluna

ter 120, assim a imagem manipulada

estar com as dimenses certas para a coluna onde se insere o boto PROFESSORES). Desmarque a caixa Lock aspect ratio de forma a possibilitar a alterao das

propores entre o comprimento e a

altura da imagem. 4 Eis o resultado final a imagem ficou um pouco deformada, mas

utilizvel.

Antnio F. Silva

FrontPage XP
criar botes a partir de uma imagem
1 Abra o menu File e escolha Export e JPEG Optimizer. 2 Leia-a com ateno as janelas

36

seguintes e digite os valores que

considerou necessrios, por

exemplo para Set compression value to: digite 40 e OK. 3 - Guarde a sua imagem (boto) com o nome professores na

pasta

onde

tem

os

restantes

ficheiros (pasta WEB):

3
Antnio F. Silva

FrontPage XP
criar botes a partir de uma imagem
1 Abra agora o FrontPage, coloque o cursor na clula onde vai inserir a imagem e abra o menu

37

Inserir e Imagem Do ficheiro.

2 V at pasta As minhas imagens clique sobre professores e no boto Abrir

Antnio F. Silva

FrontPage XP
criar botes a partir de uma imagem

38

A imagem ir aparecer na clula onde inseriu o cursor. Se a tabela ficar desalinhada ter de seleccionar as clulas na horizontal da clula da imagem e clicar com o boto direito, escolher Propriedades da clula e na caixa da dimenso horizontal da clula (Largura) colocar 120 pixels. Agora basta-lhe seleccionar a imagem e inserir a hiperligao pgina professores.html. Ainda no Paint Shop Pro poderia ter escrito sobre a imagem a palavra PROFESSORES com uma cor que fizesse contraste com o fundo ou ainda alterar o fundo como pode ver no exemplo abaixo! Bom Trabalho!

Antnio F. Silva

FrontPage XP
criar uma tarja / banner da disciplina

39

No FrontPage insira uma tabela de 2 colunas e 11 linhas 600 pixels. Una as clulas da 1 , 2 e 3 linhas. Seleccione a coluna da esquerda, clique com o boto direito, escolha Propriedades da clula e digite um valor de 120 pixels em Especificar largura.

Antnio F. Silva

FrontPage XP
criar uma tarja / banner da disciplina

40

1 Abra o menu File e escolha Open. V para a pasta Exemplos de imagens e escolha Pr do sol e clique no boto Abrir. 2 Do lado esquerdo do ecr do Paint Shop Pro seleccione a ferramenta de seleco.

Antnio F. Silva

FrontPage XP
criar uma tarja / banner da disciplina

41

3 Abra uma seleco como mostra a figura seguinte. 4 Abra o menu Image e escolha Crop to Selection. 5 Eis como ficou a imagem

3 4

5
Antnio F. Silva

FrontPage XP
criar uma tarja / banner da disciplina

42

6
6 Abra o menu Image e escolha Resize. Digite os valores para o comprimento e para a altura de 600X40 pixels e clique no boto OK. 7 A imagem ficou reduzida aos valores em pixels que digitmos 8 Seleccione a ferramenta borracha para operar sobre a imagem. Escolha valores baixos para a densidade e opacidade da borracha e experimente passar sobre a imagem depois de seleccionar a cor conveniente. 9 Se no gostar, inverta o processo e digite o nome da sua disciplina sobre a imagem. 10 Exporte a imagem tal como fez anteriormente quando criou os botes. abra o FrontPage e insira a imagem como mostra a figura da pgina seguinte.

9
Antnio F. Silva

FrontPage XP
criar uma tarja / banner da disciplina

43

Depois

de

inserida

tarja

pode

adicionar os restantes botes na coluna da esquerda. Bom trabalho!

Antnio F. Silva

FrontPage XP
trabalhar com frames

44

1
1 - Abandone tudo o que fez Abra o FrontPage e escolha no lado direito do ecr, escolha Modelos de pgina. Abre-se uma janela clique sobre o separador Pginas com frames. 2 Seleccione Cabealho, rodap e contedo e clique no boto OK.

Antnio F. Silva

FrontPage XP
trabalhar com frames

45

Eis

que

aparece

Apareceram 4 pginas para as criar clique sobre o boto Nova pgina. O resto j sabe, proceda sobre cada pgina como lhe

aprouver. No se esquea que as deve gravar sempre na pasta que criou para isso

Antnio F. Silva

FrontPage XP
trabalhar com frames

46

No se esquea, cada pgina trabalhada individualmente..

Antnio F. Silva

FrontPage XP
trabalhar com frames

47

1
Se quiser editar um uma dos seleccione

hiperligao,

botes e clique sobre o cone Editar hiperligao. 2 Clique de seguida no boto Frame de destino e escolha Frame principal se quiser que a nova pgina abra no centro. Se por outro lado quiser que abra uma nova janela, escolha Nova janela.

Pgina inteira, substitui a pgina de frames por uma nica janela. Experimente e bom trabalho!

Antnio F. Silva