Manual FrontPage

Julho de 2007 Criado por: José Carlos D. Marques

Guia do FrontPage 2003

Guia de trabalho e apoio à formação

José Carlos Duarte Marques

1

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Guia do FrontPage 2003 Guia de trabalho e apoio à formação

Índice

Conteúdo ÍNDICE ............................................................................................... 1INTRODUÇÃO AO GUIA ............................................................................ 2GESTÃO DE UM SITE ................................................................................ 3

ESTRUTURA DE NAVEGAÇÃO ................................................................... 8ÍNDICES ..........................................................................................12INSERÇÃO DE FUNDOS / CONFIGURAÇÃO DA PÁGINA E CORES. ..........................13INSERÇÃO DE TEXTO; ..........................................................................14OS ESTILOS ......................................................................................15INSERÇÃO DE IMAGENS; ........................................................................17INSERÇÃO DE TABELAS; ........................................................................20INSERÇÃO DE VÍDEOS / APRESENTAÇÕES POWER POINT (EMBEBER) .....................22INSERÇÃO DE FICHEIROS DE SONS DO SEU WEBSITE .........................................24CRIAÇÃO DE BOTÕES ...........................................................................27PÁGINAS COM FRAMES .........................................................................29OUTROS ELEMENTOS DE PÁGINA .............................................................31

TRANSIÇÃO DE PÁGINAS ....................................................................31COMPONENTES WEB ........................................................................31COMPORTAMENTOS .........................................................................32

CRIAÇÃO DE FORMULÁRIOS .....................................................................34FORMULÁRIOS COM RECURSO AO ASSISTENTE ..............................................34

PUBLICAÇÃO DE UM SITE .........................................................................40FRONTPAGE .....................................................................................40SOFTWARE POR FTP ...........................................................................41


2

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Introdução ao guia

Este guia pretende apresentar os aspectos mais importantes referentes ao manuseamento e funções inerentes ao uso do Microsoft FrontPage.

Desenvolvido como ferramenta de apoio, este guia não é um documento exaustivo sobre o uso deste software.

Neste guia, serão abordados dois aspectos cruciais:

• Gestão de um site – principais aspectos inerentes à concepção off-line de um site com recurso ao FrontPage, nomeadamente:

o Inserção de texto; o Inserção de imagens; o Inserção de hiperligações; o Inserção de vídeos (embeber) o Inserção de sons; o Criação de botões; o Páginas com frames; o Entre outros;

• Publicação de um site – Principais passos para a publicação de um site com recurso ao:

o FrontPage; o Transferência de Ficheiros por FTP


3

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gestão de um site

A criação de um Website pode ser feita de várias maneiras. Neste manual pretende-se mostrar uma das maneiras possíveis para produzir um website.

No ambiente de trabalho clique no ícone para abrir o Microsoft FrontPage 2003.

Caso não tenha o ícone referido deverá ir à barra Iniciar > Todos os programas > Microsoft Office > FrontPage.

Quando abrir o Microsoft FrontPage 2003 a janela tipo deverá ter a forma tal como a imagem apresentada a seguir.

Nota: dependendo do modo de instalação e da versão do Windows o caminho pode variar.


4

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

No Menu do lado direito do ecrã “Início” terá várias possibilidades para começar a criar o website.

Permite abrir um website já existente.

Permite abrir uma página já existente.

Poderá optar por criar uma página ou um website de raiz.

Ao clicar aqui vai surgir o seguinte quadro:

Nova Página

Poderá optar por:

• Página em branco; • Ficheiro de texto; • A partir de uma página

já existente;

Novo Web Site

Poderá optar por:

• Web site de uma página; • Site de equipa; • Outras soluções;

Todas estas opções apresentam diferentes modelos.

Ao clicar em Website de uma página abrirá o seguinte quadro.

Modelos disponíveis.

Endereço onde será guardado o website.


5

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Depois de seleccionar um dos modelos, poderá criar o website.

Antes de avançar com a construção da página / website é importante referir como se encontra organizado o MS FrontPage 2003.

Visualização por pastas e ficheiros.

É apresentada a imagem ao lado, onde consta uma pasta de nome _private, Imagens e o índex.html (página de abertura).

Barra de Menus, em tudo semelhantes aos outros softwares do Office, nomeadamente o Word.

Barras de Ferramentas de Padrão, Formatação, Desenho, etc. Para adicionar ou remover barras, clique com o botão direito do rato no espaço livre da zona indicada.

Permite aceder ao site que está on-line e fazer actualização.

Faz um relatório sobre diferentes aspectos do website.

Estrutura de navegação do website.

Mostra as ligações que existem dentro das páginas.

São mensagens que se podem deixar em páginas, imagens, etc. de um website.


6

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Depois de criada a estrutura e a localização de um website abrimos a página index.htm ou índex.html.

A página encontra-se em branco e obtemos assim um layout diferente. As novas ferramentas que surgem são:

• Vistas em: o Estrutura – Visualização através do sistema WYSIWYG; o Dividir – Visualização mista entre o WYSIWYG e código

HTML; o Código – Visualização do código HTML; o Pré-vizualização – Apresenta a página tal como será vista no

Browser (nem sempre acontece);

Outra diferença surge na parte superior do ecrã.


7

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Para além das alterações mencionadas anteriormente, uma outra informação aparece na parte final da janela do lado direito que são informações relativas ao tempo de carregamento da página (simulando velocidades de 56 Kbps) dimensões da página (onde apresentam várias dimensões) Completa, que se refere às tecnologias usadas na página e Personalizado que se refere ao browser da internet. É possível alterar estas opções bastando apenas clicar na respectiva palavra.

Devido ao seu interesse de seguida apresentar-se-á uma imgagem relativa às opções de velocidade e dimensão.

Depois dos dados referidos anteriormente, passamos agora para a estrutura de navegação e inserção de conteúdos na página, nomeadamente:

• Fundos – configurar cores.

• Informação;

• Imagens;

• Botões;

• Tabelas;

• Entre outros.

Separadores que indicam o nome das páginas abertas e indica a raiz do website.

“Body” – é a parte visível da página. (Ver conceitos básicos de HTML)

Recomendado.


8

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Estrutura de navegação

O FrontPage auxilia na concepção de uma estrutura de um website. Para poder utilizar este sistema, deverá, depois de abrir o website, escolher a vista Navegação.

Em cima da página inicial index.htm clique com o botão direito do rato e deverá escolher nova página ou simplesmente ligar a uma página que já exista, e assim sucessivamente criando assim a estrutura da página.

Arraste as páginas para definir a estrutura hierárquica do website.

Para o seu website poderá definir um tema predefinido, mas o ideal é desenvolver o seu próprio website.

Para inserir um tema comum a todo o website deverá solicitar o assistente Tema. Para isso vá ao menu Formatar> Tema

De seguida escolha o tema que mais se adequa ao seu projecto e de seguida escolha Aplicar como tema predefinido.


9

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Depois de criada a estrutura, terá um aspecto do seguinte género.

Para adicionar uma barra de navegação a uma página deverá proceder da seguinte forma:

1. Abrir a página índex.htm; 2. Ir ao menu Inserir> Navegação; 3. Escolher uma das três opções disponíveis (consoante o que pretende);

Nova Página

Link para página já existente

Barra de hiperligações

Páginas da barra de navegação


10

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Outra forma de criar menus de navegação comuns entre páginas é através da opção Limites partilhados do menu Formatar.

De seguida passamos à edição da relação entre páginas. Para isso terá de abrir o modo Navegação.

As opções que surgem são as seguintes:


11

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

• Páginas de nível principal As páginas estão localizadas directamente acima de outra página ou páginas, páginas directamente ligadas à página de nível principal no mesmo nível (com a excepção da homepage).

• Páginas do mesmo nível Páginas que estão no mesmo nível na estrutura e que partilham a mesma página de nível superior.

• Páginas anteriores e seguintes A hiperligação seguinte direcciona o visitante para a página a seguir do mesmo nível. O anterior para a página anterior do mesmo nível.

• Páginas de nível subordinado Trata-se de uma ou mais páginas localizadas directamente abaixo de uma página de nível principal.

• Páginas de nível global Estas páginas estão ao mesmo nível que a página de entrada, mas não a incluem, não estão na mesma estrutura.

• Páginas subordinada à Homepage A primeira página adicionada à estrutura é a index.htm e as que lhe estão ligadas.


12

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Índices

O MS FrontPage permite criar um índice das páginas contidas no website. Para o fazer deverá proceder da seguinte forma.

1. Abra a página onde quer inserir o Índice. 2. Vá ao menu Inserir > Componente da Web > Índice (em tipo de

componente). 3. Surgira o seguinte janela:

4. Escolha Para este Web site.

5. Abrirá uma janela Propriedade do índice. Preencha consoante os seus objectivos.

No final deste manual iremos analisar outras componentes que podemos inserir no nosso website.


13

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Inserção de fundos / configuração da página e cores.

Os primeiros procedimentos a ter em conta na concepção do seu site é mesmo aplicar o layout que definiu aquando da planificação do seu projecto.

Neste ponto iremos inserir fundos e configurar as páginas do website a partir da janela das propriedades da página.

Para o fazer deverá ir a Menu Ficheiro > Propriedades.

Nesta janela temos vários separadores com as referências mais importantes:

Geral

Formatação

Localização: onde a página guardada no seu PC;

Título: o título que deverá dar à sua página;

Descrição da página: resumo do conteúdo da página;

Palavras-chave: Palavras que resumem a sua página;

Frame de destino: Poderá optar por abrir as hiperligações em diferentes frames.

Fundo:

Imagem de fundo – poderá incluir imagens de fundo da sua página configurando-as a seu gosto.

Cores:

Poderá definir as cores de fundo, do texto, das hiperligações, hiperligações activas e já visitadas.


14

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Inserção de texto;

Um dos elementos principais nas páginas de internet é a existência de texto. Para escrever texto numa página Web procede-se da mesma forma que a de um editor de texto do Office da Microsoft.

Neste sentido, iremos analisar neste subcapítulo principalmente as barras de ferramentas, bem como das suas funções.

Na imagem seguinte temos um exemplo de texto e de um WordArt.

Analisando a barra ao pormenor temos as seguintes funções:

• Formatação

• WordArt

Nota: caso a barra não apareça deverá seleccionar o Wordart, clicar com o botão direito do rato e seleccionar Barra de ferramentas do Wordart.

Estilos; Opções do Tipo de letra;

Opções do tamanho de

letra; N – Negrito;

I – Itálico

S - Sublinhado

Orientação do texto:

À esquerda;

Ao centro;

À direita

Aumentar e reduzir o tamanho da letra de forma

proporcional

Marcas e numeração


15

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Os esti los

Os estilos permitem a criação de páginas dentro do mesmo website com uma estrutura coerente e semelhante entre todas as páginas.

Para formatar um estilo, deverá ir à barra de formatação de texto e definir o estilo que deseja.

As Cascade Style Sheets – CSS – são ficheiros que têm essa mesma função, adoptar a todo o site as mesmas características definidas na folha de estilos.

Para configurar uma folha de estilos deverá verificar se a opção de folhas de estilo está activada. Abra o Menu Ferramentas > Opções de Página > Criação de conteúdos e verifique se as opções CSS estão seleccionadas.

De seguida para criar uma Folha de Estilos, abra uma página e coloque no modo Estrutura.

Inserir Wordart.

Editar texto. Permite alterar o texto já escrito.

Galeria do Wordart, serve para alterar o

estilo.

Alterar a forma do WordArt.

Formatar o espaçamento a

posição das letras, a orientação do texto e espaçamento do texto

e letras.

Em cada estilo existente ou criado pelo utilizador poderão ser definidos parâmetros que têm que ver com tipo e cor de letra, alinhamentos, limites e sombreados de parágrafos, tipos de marca e numeração a utilizar, ou ainda posicionamento de gráficos e tabelas.


16

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Abra o menu Formatar > Estilos e aparecerá o seguinte quadro:


17

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Inserção de imagens;

A inserção de imagens resulta de um método muito semelhante a qualquer outro Software do Office.

Poderá inserir imagens a partir de diferentes localizações e de diferentes tipos, nomeadamente:

o ClipArt; o Do Ficheiro; o Do scanner ou da câmara; o Nova galeria de Fotografias; o Filme em formato Flash; o Novo desenho; o Formas automáticas; o Wordart; o Vídeo;

Para inserir uma imagem na página deverá ter o seguinte procedimento:

• Menu Inserir> Imagem> Do ficheiro. (ou outra opção).

Nota: deverá ter as imagens que pretende inserir na sua página numa pasta dentro do seu website.


18

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Poderemos definir diferentes pontos activos numa imagem para que cada um deles abra uma página diferente.

Assim para criar pontos activos podemos recorrer a uma forma ou a texto, que depois de seleccionada e formatada funcionará como hiperligação.

O visitante ao clicar em diferentes pontos de uma imagem irá para um “destino” diferente.

Para realizar este tipo de efeito deverá fazer o seguinte:

• Ponto activo a um gráfico: 1. Insira a imagem na página; 2. Abra a barra de ferramentas da imagem; 3. Seleccione o tipo de forma que quer criar (Rectangular; Oval e

Livre) 4. Ao criar a forma sobre o ponto que pretende ser-lhe-á pedida a

hiperligação correspondente. 5. Clique em OK.

Exemplo:

Na imagem seguinte pretendo que os meus alunos estudem as diferentes formas do corpo destes seres vivos. Para cada ser vivo crio um ponto activo a partir de uma forma.

Nota: Caso a barra de ferramentas não apareça ao seleccionar a imagem deverá clicar com o botão direito do rato sobre a imagem e escolher a opção “Mostrar barra de ferramentas de imagem”

Barra de ferramentas de imagem. Com as formas disponíveis.

Imagem com a forma activa. O rectângulo preto é apenas indicador da forma activa que não ficará visível.


19

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

• Ponto activo de texto a um gráfico: 1. Inserir a imagem pretendida; 2. Abra a barra de ferramentas da imagem;

3. Seleccione a opção “Texto” na Barra de ferramentas de imagem.

4. Escreva o texto que pretende que seja a hiperligação; 5. Faça duplo clique na caixa para fazer a hiperligação. 6. Clique em OK.

Na imagem poderemos ver o texto que fará a hiperligação.

Mais uma vez a forma da caixa não será visível.

Nota: Em ambos os casos irá abrir uma caixa semelhante à da figura seguinte.

A imagem será gravada em .gif. 1 – Opções do menu Ligar a:

- Ficheiro ou página Web – onde optamos por uma ligação a uma outra página do nosso website ou de um outro. Neste caso deveremos colar no ponto 3 o endereço Web da página. Poderemos optar ainda por colocar na mesma página a hiperligação com recurso aos marcadores.

2 – Texto a mostrar:

- Ao passar com o rato sobre o ponto activo, surge uma informação com o nome do ponto activo.

3 – Endereço: onde surge automaticamente o endereço da hiperligação, excepto se for de uma pagine Web.


20

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Inserção de tabelas;

As tabelas podem servir para a organização de dados numa página de internet, mas também para “arrumar” o conteúdo na página para que esta mantenha um aspecto constante entre ecrãs de diferentes dimensões.

Para ver a barra lateral de apoio à concepção da página poderemos fazer de seguinte forma:

• Menu VER > Painel de Tarefas (activar o conteúdo).

Uma das facilidades do MSFP 2003 é a possibilidade de escolher uma estrutura de tabelas pré-definidas que podem tornar o nosso WebSite mais agradável.

Essa escolha pode ser feita a partir da opção “Esquema da tabela” (ver imagem anterior).

Com estes esquemas poderá criar diferentes efeitos na página como o seguinte (com recurso o assistente).


21

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Do quadro lateral seguinte, observe com atenção a opção Cantos sombreados de célula.

Poderá utilizar imagens, definir a largura e altura, a cor e a cor do limite da tabela seleccionada.

Poderá aplicar cantos às camadas, tornando a sua página com um aspecto mais dinâmico.

Para além disso poderá aplicar os sombreados.

Poderá criar as tabelas / camadas a seu gosto com recurso às ferramentas disponibilizadas.

Optando por um dos esquemas de tabelas indicados, reparará que o espaço Body da página fica com a mesma configuração do esquema seleccionado.

Ao seleccionar e clicar na cama superior, terá uma alteração no painel de tarefas, onde surgirá a opção: Formatação de células.

Nota: é possível associar as camadas aos temas predefinidos do MS FrontPage.


22

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Inserção de vídeos / apresentações Power Point (embeber)

É possível inserir vídeos / apresentações no sua website sem que para tal tenha de ocupar muito espaço Web.

Depois de copiado, vá à sua página e coloco no modo de vista Dividir ou Código

Deverá introduzir o código entre as Tags <BODY> e </BODY>.

Depois basta gravar e fazer a pré-visualização para testar.

Para introduzir um vídeo, por exemplo “The Valley of fire” (estudo dos vulcões), na sua página, deverá copiar o código HTML onde se refere a extensão: Embeddable.


23

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Caso pretende inserir uma apresentação em Power Point, o processo é em todo semelhante.

Deverá introduzir o código entre as Tags <BODY> e </BODY>.

Depois basta gravar e fazer a pré-visualização para testar.

Para introduzir uma apresentação, por exemplo “e” (estudo dos vulcões), na sua página, deverá copiar o código HTML onde se refere a extensão: Embeddable.

http://www.slideshare.net/�


24

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Inserir hiperl igações - Links

Poderemos colocar links ou hiperligações a partir de elementos como Botões, Imagens e Palavras (que irá ser analisado de seguida).

O processo de criação dos links é de forma geral semelhante. Para criar um link a partir de palavras deverá seleccionar a palavra-chave. Depois de seleccionada clique com o botão direito sobre a selecção e escolha no menu pendente a opção “hiperligação”. Poderá optar ainda por seleccionar a palavra-chave e solicitar o menu Inserir > Hiperligação.

De seguida deverá preencher o seguinte quadro:

A descrição será uma informação adicional sobre o seu link (recomendado)

Neste espaço deverá seleccionar o documento que deverá ligar a sua hiperligação.

O Marcador, serve para criar links dentro do próprio documento. (Já deverá ter definido anteriormente o marcador através do menu Inserir > Marcador);

A Frame de destino refere-se ao local onde queremos abrir o documento depois de percorrer a hiperligação.

Este endereço preenche-se automaticamente quando selecciona um ficheiro, mas também poderá escrever um URL de uma página.


25

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Inserção de ficheiros de sons do seu website

Poderá inserir um som na sua página, pelo que poderá ir ao menu Ficheiro > Propriedades.

Apenas poderá inserir o tipo de ficheiros acima indicados.

Outra hipótese é inserir um Palyer para controlar a música. Com o código seguinte poderá controlar o player da opção de música.

<embed src="Localização da sua música" controls="volumelever" width=120 height=25 autostart="false" loop="true" name="mymidi pluginspage="http://www.apple.com/quicktime/download/"> </embed>


26

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Notas:

• Chama-se à atenção para os direitos de autor;

• Sites onde pode buscar música: o Ficheiros tipo Midi - http://www.midinet.com.br/ o Ficheiros do tipo .wav - http://www.wavplanet.com/

http://www.midinet.com.br/�

http://www.wavplanet.com/�


27

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Criação de botões

Os botões são elementos importantes para a navegação na sua página Web. No fundo são hiperligações que permitem criar um efeito quando temos uma ligação.

Poderemos inserir botões produzidos em Flash, ou noutro software, mas também poderemos fazê-los com recurso ao FrontPage a partir de modelos já existentes.

Vá ao Menu Inserir> Botão interactivo. Na nova janela poderá definir as características do botão:

No separador Tipo de letra poderá definir o tipo de letra, o estilo e o tamanho da letra. Para além disso poderá definir a cor do botão em diferentes situações bem como o seu alinhamento.

Exemplo do botão seleccionado.

Modelos de botões.

Texto: é o texto apresentar no botão.

Ligação: é a página / ficheiro que o botão levará quando clicado.


28

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

No separador Imagem, tal como diz refere-se à formatação do botão, nomeadamente a largura e altura do mesmo, bem como a criação do botão em Jpeg ou Gif.

Para inserir um botão em Flash deverá fazer da seguinte forma:

Menu Inserir> Imagem> Filme em formato flash.

Nota: Para que o botão fique com fundo transparente, deverá seleccionar a opção Gif.


29

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Páginas com frames

Divisão da janela de seu navegador (browser) em diversas partes de modo que somente uma parte da página necessite ser carregada quando um link for clicado.

O uso de Frames tem sido muito discutido. Existem críticos que os consideram úteis, mas outros as consideram como algo pouco eficiente na navegação, precursora de dificuldades na navegação.

O seu uso depende da finalidade do site. Aparte destas discussões, de seguida irá abordar-se a concepção de páginas com recurso a frames.

Para criar uma página com frames vá a menu Ficheiro> Nova Página.

No painel de tarefas escolha a opção Mais modelos de páginas a partir da opção Nova Página.

Na nova janela escolha a opção Páginas com frames. Escolha o modelo que se adequa ao seu projecto.

O modelo escolhido aparecerá na pré-visualização.

No exemplo da pré-visualização irá criar duas páginas diferentes. A página de topo e uma de maior dimensão.


30

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Na imagem seguinte temos a primeira fase da uma página com frames. A partir deste momento poderemos estipular se queremos Definir página inicial ou Nova Página. A primeira opção significa que poderá ligar a uma página Web que já existem ou, como indica a segunda opção, criar uma nova página.

Ao guardar as páginas irá ser questionado relativamente ao nome da cada frame e da página global (que contém a totalidade das frames). Ao gravar deverá ter em atenção qual a página que está a gravar.

Página global (que contêm as duas frames).

Página Topo (que contém a frame de topo).


31

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Outros elementos de página

Transição de páginas

Um dos componentes disponíveis e de animação do MS FrontPage é a possibilidade de criar transições entre página Web.

Para proceder a uma animação deverá:

Na janela que vai abrir poderá definir os vários parâmetros relativos às transições. Para cada Evento poderá adoptar um efeito de transição. Caso recorra a esta opção de transição, não sature a sua página com transições diferentes. Poderá ainda definir o tempo de duração da animação.

Componentes Web

Para inserir um componente Web deverá ir ao menu Inserir> Componente Web…

Todas as opções da Componente Web não são funcionais em servidores Web gratuitos por questões de segurança ou porque requerem um servidor Web com as extensões de servidor do FrontPage para funcionar.

As componentes a usar sem problemas são os efeitos finâmicos.


32

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Comportamentos

Para inserir um determinado comportamento deveremos solicitar o assistente Painel de Tarefas. Iremos ver apenas dois exemplos.

É a combinação de um evento e de uma acção que pretende que ocorra quando um visitante do site interage com uma página Web ou um elemento de uma página.

Reproduzir um pequeno som quando damos um clique com o rato.

Deverá indicar o som a produzir e o local onde este se encontra no seu website. Atenção, deverá ter sempre a imagem / objecto seleccionado para inserir um comportamento.

Permite alterar uma imagem consoante o efeito por nós indicado. Necessitamos para tal duas imagens para alternar.


33

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Onde diz URL de troca de imagem, deverá colocar a outra imagem para criar o efeito.

Deverá activar o “Pré-carregar imagens” e “Evento restaurar com o rato fora” caso pretenda que a imagem volto à original, depois do efeito.

Como indicamos dois comportamentos na janela anterior, no painel dos comportamentos irá surgir duas Tags para esse efeito.


34

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Criação de Formulários

São ferramentas que permitem recolher informações sobre dados que se considerem relevantes e importantes para melhorar um projecto (por exemplo). Os formulários devem ser claros quanto ao seu objectivo e devem ter em atenção o tipo de informação que é solicitado ao visitante do site.

A sua concepção poder ser feita de forma manual ou recorrendo ao assistente do MS FrontPage.

Neste manual iremos analisar as duas possibilidades, pois os formulários podem ser uma ferramenta de apoio ao trabalho escolar.

Formulários com recurso ao assistente

Para recorrer ao assistente, abra uma nova página Ficheiro> Novo> Página e nos modelos de página seleccione Assistente de página de formulário.

Nota: Para que possa recolher informações através do seu website terá de ter um serviço Web que permita fazer tal recolha. Recomenda-se a criação de um e-mail no site PROF2000 (http://www.prof2000.pt).

http://www.prof2000.pt/�


35

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Na sequência seguinte teremos as seguintes janelas:

Depois de criado o formulário as questões do assistente referem-se à forma de apresentação e de seguida a forma como quer recolher os dados.

Escolha uma destas opções, consoante o seu objectivo.


36

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Depois de concluída a configuração do formulário terá um formulário com o seguinte aspecto.

Num dos últimos passos do assistente de formulário optamos pelo CGI (Common Gateway Interface).

Iremos mais à frente configurar o envio da informação.

Formulários sem recurso ao assistente Apesar dos assistentes facilitarem a concepção de um formulário, é sempre necessário adaptá-lo às nossas necessidades.

Nessa linha, para criar um formulário deverá ir a: Inserir> Formulário> Formulário.

Depois de activar o conteúdo surgirão dois botões

Submeter Repor

Submeter – enviará a informação inserida no formulário;

Repor – apaga todas as informações inseridas.


37

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Todo o formulário deverá estar incluído dentro da tabela (tracejado) para que a informação possa ser enviada.

Na concepção do formulário temos várias opções no menu:

Para poder identificar os diferentes campos inseridos no nosso formulário, teremos de configurar as propriedades dos mesmos. Para aceder às propriedades de cada campo, clique duas vezes no campo ou em alternativa clicar com o botão direito do rato sobre o campo e escolher Propriedade do campo de formulário.

• Caixa de texto

• Área de texto

Serve para inserir uma caixa de texto. O seu uso é ideal para pequenas frases.

Serve para inserir uma área de texto. O seu uso é ideal para grandes frases /comentários.

Quando queremos solicitar o envio de um ficheiro para o servidor. (Não funcional no Prof2000.)

Permite criar um espaço para que o usuário faça uma determinada escolha entre opções.

A caixa de grupo, permite criar um espaço, dentro do formulário, onde poderemos inserir outras referências do formulário.

Esta opção permite criar uma lista de opções, da qual se indica apenas uma.

Inserção de botões específicos.

Permite definir as propriedades do formulário, nomeadamente no envio da informação para o correio electrónico.

Por defeito o computador atribui um Nome à caixa de texto neste caso T1.

Neste exemplo pretendo saber o nome do visitante, logo o Nome do campo é “Nome”.

O Valor inicial deverá ser usado como forma de instrução de preenchimento. Ao preencher este campo no formulário irá aparecer uma mensagem ao visitante.

Poderemos definir parâmetros de preenchimento (em Validar) e o aspecto do botão (em estilo).


38

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

• Área de Texto

• Caixa de verificação

• Botão de opção

O sistema de preenchimento é idêntico ao anterior.

Por defeito o computador atribui um Nome à caixa de texto neste caso S1.

Poderemos definir parâmetros de preenchimento (em Validar) e o aspecto do botão (em estilo).

No exemplo dado, pretendemos saber que canal de televisão é que o visitante prefere. Nesta caixa de verificação poderá seleccionar todas as opções.

O nome da caixa indicada deverá ser Televisao e o valor RTP1.

Depois procedemos de forma semelhante nos outros campos.

No exemplo dado, pretendemos saber que canal de televisão é que o visitante prefere mais. Nesta situação apenas pode escolher uma opção.

O nome do grupo deverá ser Televisao_mais_ preferida e o valor RTP1. O nome do grupo deverá ser igual em todos os botões desta pergunta.

Depois procedemos de forma semelhante nos outros campos.

Poderemos definir se aparece ou não seleccionado.

Nota: Na caixa de verificação e no botão de opção, o NOME não pode conter espaços e acentuação.


39

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

• Propriedades do formulário


40

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Publicação de um site

Depois de realizado seu website deverá testá-lo in loco na Internet. O sistema utilizado para o envio de ficheiros para a Internet é através do serviço de FTP – File Transfer Protocl.

Para proceder à publicação do site, poderá utilizar vários softwares disponíveis no mercado (alguns deles gratuitos).

Neste guia terá a possibilidade de configurar duas formas diferentes de publicar o seu site. Uma é com recurso ao FrontPage e outra a um serviço gratuito de FTP com recurso ao Internet Explorer.

FrontPage;

Solicite o assistente do menu Ficheiro > Publicar site. Na janela que irá surgir deverá seleccionar o FTP.

As configurações seguintes dependem do servidor que vai utilizar. Tal como decidido, as páginas serão publicadas no servido do sapo, pelo que o endereço de FTP será:


41

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

• Localização do website remoto: ftp://ftp.homepages.sapo.pt

• Directório de FTP: não escreva nada aqui.

Na janela seguinte ser-lhe-á pedida uma autenticação para que possa aceder á área

remota do serviço Sapo.

O nome será o endereço do seu site, por exemplo: o URL da minha página será http://nanet.com.sapo.pt, então o nome do site será – nanet.com.sapo.pt

A Palavra-chave será o código secreto que introduziu na criação da sua conta de email.

ftp://ftp.homepages.sapo.pt/�


42

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

Depois de clicar em OK, irá aceder à área remota e em simultâneo ao local onde tem o seu site guardado no PC.

Legenda:

1 – Área que corresponde ao site que se encontra no seu pc;

2 – Área remota no servidor do sapo;

3 – As opções que surgem neste quadro referem-se ao envio (upload e download) da informação de e para o servidor. Salienta-se o botão sincronizar, onde o FrontPage fará a actualização do site remoto reconhecendo s ficheiros alterados ou editados após a ultima actualização.


43

Gui

a do

Fro

ntPa

ge 2

003

| Ju

lho

de 2

007

IE como serviço de FTP

O IE (Internet Explorer) também é uma ferramenta que serve para enviar ficheiros para o servidor. O processo será mais simples, mas a simplicidade não será sinónimo de facilidade. Pois para enviar os ficheiros alterados terá de saber a sua localização e em seguida arrastá-los para a janela e localização específica no site remoto.

Abra o IE e escreva o endereço ftp://[email protected] (no qual o nanet.com.sapo.pt é o próprio endereço da página).

Depois de fazer ENTER, irá surgir uma nova janela onde fará a autenticação do utilizador:

O nome será o endereço do site e a palavra-chave aquela que inseriu quando criou a conta.

De seguida surgirá as pastas e ficheiros do seu site.

Nota: Os utilizadores do Internet Explorer 7.0 deverão solicitar a abertura do site, recorrendo ao menu Página> Abrir site de FTP no Windows Explorer e reescrever o endereço de ftp.

Documents

Manual FrontPage