MANUAL DE FRONTPAGE
1
INDICE 2-INDICE 3-AMBIENTE DE TRABALHO DO FRONTPAGE 6-ALTERAR O FUNDO DA PÁGINA WEB 8-INSERIR UMA IMAGEM DE FUNDO 10-PROPRIEDADES DA IMAGEM 12-MUDAR O TIPO DE LETRA 14-CONFIGURAR A RÉGUA 16-FORMATAR MARCAS E NUMERAÇÃO 17-APLICAR UMA CAIXA AO TEXTO 19-FORMATAR TEMA 21-INSERIR LINHA HORIZONTAL 24-INSERIR CONTADOR 26-ESCOLHER O TAMANHO DA PÁGINA 27-INSERIRUMA CAMADA 30- LIMITES DAS CAMADAS 33-COMPORTAMENTOS DAS CAMADAS 35-INSERIR UM BOTÃO INTERACTIVO 36-O COMPONENTE WEB- PHOTO GALLERY 38-O PAINEL ROLANTE 40-COLOCAR UMA IMAGEM Á ESQUERDA 43-IMAGEM COM HIPERLIGAÇÃO 45-MODELOS 48-IMAGENS ALT 51-COMO INSERIR UM ENDEREÇO DE EMAIL 53-COMPORTAMENTOS 55-A BARRA DE ESTADO 57-AS MENSAGEM DE SOBREPOSIÇÃO 59-O MENU DE LIGAÇÃO 62-PROPRIEDADES TABELAS 65-MARGENS DAS TABELAS 67-DESENHAR UMA TABELA 69-INSERIR IMAGENS NAS TABELAS 70-CONVERTER TEXTO EM TABELAS 73-DIVIDIR CELULAS 75-INSERIR LEGENDA 76-CORES DA CELULA 78-INSERIR CELULA 79-COLOCAR IMAGEM NA CELULA 81-COMO ACRESCENTAR COLUNAS 83-MUDAR COR DE FUNDO DA CELULA 85-FORMULÁRIO CAIXA DE GRUPO 87-CONSTRUÍR ZONAS COMUNS NAS PAGINAS 88-VER HIPERLIGAÇÕES
2
AMBIENTE DE TRABALHO DO FRONTPAGE 1-Para iniciarem o Frontpage vamos a todos os programas e escolhemos a opção assinalada.
2-Vemos aqui o ambiente gráfico do FrontPage.
3
3-Poderemos assim abrir uma página nova a partir da opção que vê na imagem:
4- Depois no final da página vemos as seguintes opções. A primeira opção que é a estrutura é como próprio nome indica o local onde poderemos estruturar o nosso site.
5-No entanto poderão dividir a estrutura com uma parte de código e uma parte sem código.
4
6-Quando clicamos em Dividir vemos a parte do código e a parte sem código.
7-A seguir vê a parte respectiva ao código que mostra a imagem:
8-Esta parte mostra apenas o código.
5
9-Por último o botão Pré-visualização possibilita a execução de todos elementos inseridos na página.
ALTERAR O FUNDO DA PÁGINA WEB 1-Para conseguirem alterar a cor do fundo no FrontPage seleccionam no menu Formatar a opção Fundo.
6
2-Escolhemos por exemplo um fundo cinza e poderemos tambĂŠm escolher uma cor vermelha para a letra.
3-Obteremos entĂŁo uma cor de fundo cinzenta e uma cor do texto vermelha que vemos na imagem seguinte:
7
INSERIR UMA IMAGEM DE FUNDO 1-No menu Formatar seleccione a opção Fundo.
2-De seguida clique em procurar .
8
3-Escolha uma imagem ao seu gosto e quando a inserir v達o obter o seguinte resultado.
9
PROPRIEDADES DA IMAGEM 1-No menu inserir seleccione a opção imagem do ficheiro e insira uma imagem ao seu gosto.
2-De seguida seleccione a imagem e clique no botão direito do rato e escolha a opção Propriedades da imagem.
10
3-No campo Texto preencha o campo com o texto o qual irá surgir na imagem.
4-Seleccione a opção Pré-visualização e quando passar o rato em cima na imagem irá aparecer na imagem o texto a amarelo que colocou no campo acima descrito.
11
MUDAR O TIPO DE LETRA 1-Para alterarmos o tipo de letra que iremos aplicar no nosso site, seleccione no menu Formatar a opção Tipo de letra.
2-Surgirá a seguinte caixa de opções.
12
3-Poderรก por exemplo alterar a cor da letra para vermelha e aumentar o seu tamanho.
4-Obteremos assim o seguinte resultado.
13
CONFIGURAR A RÉGUA 1-Para nos facilitar a construção da nossa página temos alguns auxiliares como sejam por exemplo a Régua e a grelha. Teremos então que no menu seleccionar Régua e grelha.
2-A régua e a grelha irão aparecer. De seguida iremos configurá-la e para isso seleccionamos Régua e grelha e Configurar.
14
3-SurgirĂĄ o seguinte quadro o no qual iremos escolher a cor rosa por exemplo.
4-A rĂŠgua passara para a cor escolhida de forma que nos facilite a sua visibilidade.
15
FORMATAR MARCAS E NUMERAÇÃO 1-Basicamente o FrontPage tem parecenças como Word e aqui podemos ver uma delas. Assim, seleccione o texto pretendido e no menu Formatar escolha a opção Marcas e numeração.
2-Surgirá o seguinte conjunto de opções no qual irá escolher números.
16
3-O efeito conseguido será então o que vemos na imagem:
APLICAR UMA CAIXA AO TEXTO
1-Seleccione um texto ao seu gosto. No menu formatar seleccione a opção Limites e sombreado.
17
2-Clique na opção caixa.
3-Escolha uma cor e a largura.
18
4-Obterá o resultado seguinte, que é uma caixa á volta de todo o seu texto:
FORMATAR TEMA
1-No menu formatar seleccione a opção Tema.
19
2-Do lado direito na caixa de opções escolha a opção que vê na imagem:
3-Conseguiu assim, aplicar um tema á sua página aplicando-lhe novas e formas aos textos nela dispostos.
20
INSERIR LINHA HORIZONTAL
1-Por vezes temos de dividir em partes em diversas partes e para isso poderemos usar réguas. Para conseguir o tal escolhemos a opção inserir disposta no menu Inserir.
2-Conseguimos inserir uma régua horizontal a qual vemos na imagem.
21
3-Seleccionamos a régua e com o botão direito do rato escolhemos no menu : Propriedades da linha horizontal.
4-Surgirá as propriedades da régua listadas na seguinte caixa.
22
5-Alteramos a cor e Altura para 5 Pixéis.
6-Conseguiremos obter o seguinte resultado que é a réguas com um aspecto alterado.
23
INSERIR CONTADOR 1-Para podermos ver quantos visitantes acedem á nossa página poderemos inserir um contador. Escolhemos no menu Inserir a opção Componente Web.
2-De seguida o componente escolhido será o contador de visitas.
24
3-Seleccionamos o contador pretendido.
4-Ele ficarรก desta forma na nossa pรกgina.
25
ESCOLHER O TAMANHO DA PÁGINA 1-No FrontPage podem determinar o tamanho da nossa página que iremos colocar na Internet. Para esse efeito escolha um valor determinado por si clicando na área assinalada.
2-Basta apenas agora determinar o tamanho que pretende que a sua página terá, escolhendo uma das dimensões assinaladas.
26
INSERIR UMA CAMADA
1-As camadas servem para dispormos objectos uns em cima de outros. Para inserirmos uma camada na página escolhemos a opção do menu que vemos na imagem.
2-A camada inserida como podemos ver aqui.
3-Vamos agora buscar uma imagem para colocar dentro da camada.
27
4-Inserimos uma imagem.
5-Inserimos agora outra camada.
6-Inserimos outra imagem que pode ser atĂŠ igual.
28
7-Conseguimos inserir duas imagens iguais e obtemos uma r達 cortada sobreposta.
29
LIMITES DAS CAMADAS 1-Seleccionamos agora a camada e com o botรฃo direito do rato escolhemos propriedades da camada.
2-Surgirรก uma caixa do lado direito.
30
3-Com a camada seleccionamos a opção limites e sombreado
4-Escolhemos as propriedades que pretendemos.
31
5-As imagens ficarĂŁo com um tracejado ĂĄ volta.
32
COMPORTAMENTOS DAS CAMADAS 1-As camadas podem comportamentos e para os conseguirmos escolhemos a camada pretendida e de seguida seleccionamos a opção Comportamentos.
2-Clicamos no botão Inserir e o comportamento a aplicar será Ir para o URL.
33
3-Este comportamento permite-nos que ao clicarmos na imagem irmos para a página do motor de busca Google.
4-De seguida clicamos na opção Pré-visualização. Para que o comportamento seja activado, teremos que clicar na camada que aplicamos o comportamento e isso permitirá acedermos directamente á página do Google.
34
INSERIR UM BOTﾃグ INTERACTIVO 1-Poderemos colocar um botﾃ｣o interactivo no nosso site. Escolhemos o meu Inserir e de seguida Botﾃ｣o interactivo.
2-Escolhemos o tipo de botﾃ｣o.
35
3-Clicamos na Pré-visualização.
4-Poderemos então clicar no botão para ver o efeito que obtemos.
O COMPONENTE WEB- PHOTO GALLERY 1-Poderemos colocar fotografias na nossa página com um aspecto organizado. Clicamos no menu Inserir e escolhemos a Componente Web.
36
2-De seguida Galeria de fotografias.
3-Adicionamos as fotografias que pretendemos.
37
4-Surgirão assim as fotografias que desejamos na nossa páginas:
O PAINEL ROLANTE
1-Dentro deste mesmo tema que estamos a desenvolver, vamos de seguida colocar algum texto com movimento na página. Seleccionamos a opção Componente Web.
38
2-Agora efeitos dinâmicos.
3-Nas propriedades do painel rolante o texto que pretendemos que neste caso ĂŠ :OLA
39
4-Pré-visualizamos e vamos ver que o nosso texto está com movimento:
COLOCAR UMA IMAGEM Á ESQUERDA 1-Por vezes temos a necessidade de colocar uma imagem ao lado do texto num site. Para iniciar essa tarefa escolhemos a opção Inserir imagem do ficheiro.
40
2-Seleccionamos as propriedades da imagem.
3-Escolhemos a opção assinalada.
41
4-A imagem irá se posicionar do lado esquerdo.
5-Poderemos também alterar a posição e coloca-la do nosso lado direito.
42
6-Obteremos assim o seguinte efeito.
IMAGEM COM HIPERLIGAÇÃO 1-Selecione a Inserir, imagem e de seguida escolha a imagem.
43
2-Com a imagem seleccionada terá agora que escolher a opção inserir Hiperligação.
3-Poderemos seleccionar como link o site da Microsoft.
44
4-Assim quando clicarmos na imagem iremos visualizar o site da Microsoft.
MODELOS
1-Existem modelos já prontos para aplicarmos ao site que estamos a desenvolver. Escolhemos a opção Novo.
45
2-De seguida clicamos em Mais modelos de página e escolhemos um modelo, por exemplo Bibliografia.
3-Obteremos o seguinte resultado que é o inicio da construção de uma Bibliografia.
46
4-Poderemos procurar e obteremos mais modelos disponíveis.
5-Por exemplo este que é um formulário:
47
IMAGENS ALT 1-As imagens Alt são imagens que nos ajudam a identificar os elementos da página. Vamos então inserir uma imagem.
2-Será esta imagem que vamos trabalhar.
48
3-Seleccione o menu Ver, Barras de ferramentas e Desenho.
4-Na barra de desenho escolha a o quadrado assinalado.
49
5-Clique em Descrição.
5-Coloque uma palavra ao seu gosto na campo para definir o texto.
50
6-Pré-visualize e ao passar o rato na área onde colocou o quadrado irá surgir a palavra que lá colocou.
COMO INSERIR UM ENDEREÇO DE EMAIL 1-No menu seleccione a opção Hiperligação.
51
2-Na opção texto a mostrar coloque o seu email.
2-Faça uma pré-visualização.
52
COMPORTAMENTOS
1-Vamos analisar de forma mais detalhada a aplicação de comportamentos. No menu Formatar escolhemos a opção Comportamentos.
2-Surgirá a janela onde estão inseridos os comportamentos á nossa direita.
53
3-Digitamos o site desejado.
4-Neste presente caso ĂŠ o site da SIC.
54
A BARRA DE ESTADO 1-Podemos melhorar o aspecto do nosso site em alguns aspectos. Para isso vamos á opção Comportamentos.
2-De seguida Definir texto na barra de estado.
55
3-Colocamos o texto pretendido.
4-Para visualizar no browser teremos que no menu Ficheiro escolher a opção Pré-visualizar no browser.
5-Surgirá assim no canto inferior esquerdo a frase respectiva á barra de estado da sua página.
56
AS MENSAGEM DE SOBREPOSIÇÃO 1-Escolha novamente o menu Formatar.
2-Escolha a selecção assinalada.
57
3-Insira o texto que pretende.
4- SurgirĂĄ a seguinte mensagem quando PrĂŠ-visualizamos.
58
O MENU DE LIGAÇÃO
1-Escolha a opção assinalada comportamentos.
2-De seguida Menu de ligação.
59
3-Coloque o seguinte site nos respectivos campos.
4-Aqui faรงa o mesmo.
60
5-Faça uma Pré-visualização.
6-Conseguiremos assim visualizar o site do Google.
61
PROPRIEDADES TABELAS
1-Poderemos desenhar a partir da seguinte opção:
2-Conseguiremos obter a seguinte tabela.
62
3-Clique no botão direito do rato e escolha a opção Propriedades da tabela.
4-Surgirá a seguinte caixa de opções.
63
5-Altere as cores que pretender.
6-Conseguiremos alterar as margens da nossa tabela para azul.
64
MARGENS DAS TABELAS
1-Poderemos também começar a desenhar uma tabela a partir do botão assinalado.
2-Escolha agora a opção Propriedades da tabela.
65
3-Aumente o tamanho dos limites.
4-Obterรก o seguinte resultado.
66
DESENHAR UMA TABELA 1-Por outro lado existe uma outra forma de criar tabelas, que é desenhar a tabela. Seleccionamos a opção assinalada no menu.
2-Desenhamos a seguinte tabela.
67
3-Inserimos agora uma imagem ao nosso gosto.
4-Assim a nossa tabela ficarรก num lado com uma imagem e no outro com uma รกrea onde podemos escrever o nosso texto.
68
INSERIR IMAGENS NAS TABELAS
1-Podemos construir vรกrias coisas com tabelas, dispondo-as de formas diferentes. Para isso desenhe a seguinte tabela.
2-Insira uma imagem
3-Poderรก desta forma estruturar o comeรงo de uma pรกgina.
69
CONVERTER TEXTO EM TABELAS
1-Neste seguinte caso vamos converter um texto numa tabela e vice-versa. Primeiro escrevemos um texto.
2-De seguida selecciona o texto.
70
3- No menu escolhemos a opção Converter texto em tabela.
4-Obteremos o seguinte resultado:
71
4-Vamos agora fazer o contrรกrio ou seja converter a tabela num texto.
5-Este serรก o resultado e voltaremos ao aspecto inicial.
72
DIVIDIR CELULAS
1-Primeiro fazemos uma tabela com 4 unidades.
2-Seleccionamos o menu dividir cĂŠlulas.
73
3-Surgirá o seguinte quadro.
4-A célula ficará dividida.
5-Poderemos agora unir as células em apenas uma célula.
74
6-Voltaremos ao inicio.
INSERIR LEGENDA 1-Desenhamos primeiro uma tabela com quatro cĂŠlulas:
2-Escolhemos agora Tabela, Inserir e Legenda.
75
3-Conseguiremos colocar uma legenda ao cimo da nossa tabela.
CORES DA CELULA 1-Faça uma com quatro células.
2-Com o botão direito escolha a opção Propriedades da célula.
76
3-Seleccione a seguinte cor.
4-Aplique-lhe mais a cor da imagem e obterรก o seguinte resultado:
77
INSERIR CELULA 1-Desenhe uma tabela com 4 quadrados.
2-Aqui a vemos.
3-No menu seleccione Tabela>Inserir>CĂŠlula.
78
4-Surgirá assim mais uma célula.
COLOCAR UMA IMAGEM NA CELULA 1-Construa a seguinte tabela.
2-Escolha a opção assinalada.
79
3-Insira uma imagem.
4-Vemos aqui do lado direito a imagem que foi inserida.
80
COMO ACRESCENTAR COLUNAS
1-Desenhe uma tabela com 4 quadrados.
2-Vemos aqui a tabela criada.
3-Escolha a seguinte opção.
81
4-Escolha colunas.
5-A tabela ficarรก com mais uma coluna.
82
MUDAR COR DE FUNDO DA CELULA 1-Poderemos ainda pretender colorir apenas uma célula da tabela.
2-Escolha a seguinte opção.
83
3-Seleccione a cor.
4-Aqui vemos a cor aplicada.
84
FORMULร RIO CAIXA DE GRUPO 1-No FrontPage poderemos inserir formulรกrios, jรก feitos. Escolhemos no menu Formulรกrio e depois Caixa de grupo.
2-O formulรกrio foi inserido.
85
3-Seleccionamos de seguida as propriedades do formulário.
4-Alteramos a palavra Caixa de grupo e escolhemos a opção á Direita.
5-Conseguimos assim inserir um formulário.
86
CONSTRUÍR ZONAS COMUNS NAS PAGINAS
1-A próxima opção destina-se a construir zonas partilhadas nos sites. Poderemos sempre incluir os títulos.
2-Seleccionamos as opções.
87
3-Assim sempre que abrimos o FrontPage surgirão as páginas divididas como a seguinte.
VER HIPERLIGAÇÕES
1-Por vezes necessitam de ver todas as hiperligações que a nossa página tem. Para esse efeito escolhemos Novo.
88
2-Se seguida Mais modelos de Web Site.
3-Depois Web site projecto.
89
4-A opção escolhida de seguida será Hiperligações.
5-Surgirão então todas as ligações que a página contem.
90
FIM
91