Manual FrontPage

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

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

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

Guia do FrontPage 2003 | Julho de 2007

Índice

1

Conteúdo ÍNDICE ............................................................................................... 1 INTRODUÇÃO AO GUIA ............................................................................ 2 GESTÃO DE UM SITE ................................................................................ 3 ESTRUTURA DE NAVEGAÇÃO ................................................................... 8 ÍNDICES ..........................................................................................12 INSERÇÃO DE FUNDOS / CONFIGURAÇÃO DA PÁGINA E CORES. ..........................13 INSERÇÃO DE TEXTO; ..........................................................................14 OS ESTILOS ......................................................................................15 INSERÇÃO DE IMAGENS;........................................................................17 INSERÇÃO DE TABELAS; ........................................................................20 INSERÇÃO DE VÍDEOS / APRESENTAÇÕES POWER POINT (EMBEBER) .....................22 INSERÇÃO DE FICHEIROS DE SONS DO SEU WEBSITE .........................................24 CRIAÇÃO DE BOTÕES...........................................................................27 PÁGINAS COM FRAMES .........................................................................29 OUTROS ELEMENTOS DE PÁGINA .............................................................31 TRANSIÇÃO DE PÁGINAS ....................................................................31 COMPONENTES WEB ........................................................................31 COMPORTAMENTOS.........................................................................32 CRIAÇÃO DE FORMULÁRIOS .....................................................................34 FORMULÁRIOS COM RECURSO AO ASSISTENTE ..............................................34 PUBLICAÇÃO DE UM SITE .........................................................................40 FRONTPAGE.....................................................................................40 SOFTWARE POR FTP ...........................................................................41

José Carlos Duarte Marques

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:

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

• 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

José Carlos Duarte Marques

2

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.

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

Guia do FrontPage 2003 | Julho de 2007

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

3

José Carlos Duarte Marques

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: 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.

Endereço onde será guardado o website.

Modelos disponíveis.

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

4

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

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

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

Guia do FrontPage 2003 | Julho de 2007

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

5

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.

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

Faz um relatório Estrutura de Mostra as sobre diferentes navegação ligações que José Carlos Duarte Marques aspectos do existem do website. website. dentro das páginas.

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

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

• 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ã.

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

6

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)

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.

Recomendado.

Guia do FrontPage 2003 | Julho de 2007

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

7

• Fundos – configurar cores.

• Informação; • Imagens; • Botões; • Tabelas; • Entre outros.

José Carlos Duarte Marques

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 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.

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

8

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

Nova Página

Link para página já existente

Páginas da barra de navegação

Barra de hiperligações

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

Guia do FrontPage 2003 | Julho de 2007

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);

9

José Carlos Duarte Marques

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

As opções que surgem são as seguintes: José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

10

• 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.

Guia do FrontPage 2003 | Julho de 2007

• 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.

11

• 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.

José Carlos Duarte Marques

Í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.

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

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

12

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 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.

 Formatação Fundo:

Guia do FrontPage 2003 | Julho de 2007

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

13

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

José Carlos Duarte Marques

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

Opções do Tipo de letra;

Opções do tamanho de letra;

N – Negrito; I – Itálico

Aumentar e reduzir o tamanho da letra de forma proporcional

S - Sublinhado Orientação do texto:

Marcas e numeração

À esquerda; Ao centro;

• WordArt

À direita

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.

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

Estilos;

14

Inserir Wordart.

Galeria do Wordart, serve para alterar o estilo.

Editar texto.

Alterar a forma Permite alterar o do WordArt. texto já escrito.

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

Os estilos

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.

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

Guia do FrontPage 2003 | Julho de 2007

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

15

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.

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

José Carlos Duarte Marques

16

Inserção de imagens; Nota: deverá ter as imagens que pretende inserir na sua página numa pasta dentro do seu website.

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 o o o o o o o o

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

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

Guia do FrontPage 2003 | Julho de 2007

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

17

José Carlos Duarte Marques

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:

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”

Guia do FrontPage 2003 | Julho de 2007

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.

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

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.

18

• 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.

Guia do FrontPage 2003 | Julho de 2007

1 – Opções do menu Ligar a:

19

- 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. José Carlos Duarte Marques

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:

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).

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

20

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.

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

Guia do FrontPage 2003 | Julho de 2007

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

21

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

Para além disso poderá aplicar os sombreados.

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

José Carlos Duarte Marques

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. 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.

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

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

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

22

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

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.

Guia do FrontPage 2003 | Julho de 2007

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

23

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

José Carlos Duarte Marques

Inserir hiperligaçõ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:

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);

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

José Carlos Duarte Marques

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

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

24

Inserção de ficheiros de sons do seu website

Guia do FrontPage 2003 | Julho de 2007

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

25

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>

José Carlos Duarte Marques

Notas:

Guia do FrontPage 2003 | Julho de 2007

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/

Guia do FrontPage 2003 | Julho de 2007

• •

José Carlos Duarte Marques

26

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:

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.

Guia do FrontPage 2003 | Julho de 2007

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.

27

José Carlos Duarte Marques

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. Nota: Para que o botão fique com fundo transparente, deverá seleccionar a opção Gif.

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

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

Menu Inserir> Imagem> Filme em formato flash.

José Carlos Duarte Marques

28

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.

Guia do FrontPage 2003 | Julho de 2007

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

29

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

José Carlos Duarte Marques

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.

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

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

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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.

30

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á:

Guia do FrontPage 2003 | Julho de 2007

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.

31

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.

José Carlos Duarte Marques

Comportamentos

É 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.

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

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

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

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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.

32

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.

Guia do FrontPage 2003 | Julho de 2007

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

33

José Carlos Duarte Marques

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.

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 email no site PROF2000 (http://www.prof2000.pt).

Formulários com recurso ao assistente

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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.

José Carlos Duarte Marques

34

Na sequência seguinte teremos as seguintes janelas:

Guia do FrontPage 2003 | Julho de 2007

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

35

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.

José Carlos Duarte Marques

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

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.

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

36

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: 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.

Guia do FrontPage 2003 | Julho de 2007

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.

37

• Caixa de texto 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 Áreadodebotão texto Validar)•e o aspecto (em estilo).

José Carlos Duarte Marques

• Área de Texto 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).

• Caixa de verificação 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.

• Botão de 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.

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

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.

José Carlos Duarte Marques

38

Guia do FrontPage 2003 | Julho de 2007

• Propriedades do formulário

39

José Carlos Duarte Marques

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 ;

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á: José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

40

• 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.

Guia do FrontPage 2003 | Julho de 2007

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

41

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

José Carlos Duarte Marques

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.

José Carlos Duarte Marques

Guia do FrontPage 2003 | Julho de 2007

Guia do FrontPage 2003 | Julho de 2007

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

42

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://nanet.com.sapo.pt@ftp.homepages.sapo.pt (no qual o nanet.com.sapo.pt é o próprio endereço da página).

Guia do FrontPage 2003 | Julho de 2007

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

43

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.

José Carlos Duarte Marques