Instituto Politcnico de Tomar

Escola Superior de Gesto rea Interdepartamental de Tecnologias de Informao e Comunicao

Microsoft Office FrontPage 2003

Microsoft Office FrontPage 2003

O Microsoft FrontPage uma aplicao que permite: A criao de pginas HTML (HyperText Markup Language) num ambiente WYSIWYG (What You See Is What You Get) (O que v, o que obter). Criar, gerir e publicar Web sites num computador local ou atravs de uma ligao a um servidor Web (acessvel atravs de uma rede local ou atravs da Internet).

Criar pginas de informao (Web) no Frontpage

Para criar uma FrontPage Web, aceda ao menu Ficheiro, escolha a opo Novo No lado direito, escolha a opo Web site de uma pgina.

Criar pginas de informao (Web) no Frontpage

De seguida, apresentada uma caixa de dilogo com uma lista de modelos (templates), a partir dos quais pode criar uma nova web. Se nenhum deles se adequar s suas necessidades, deve comear a partir de Web site de uma pgina ou Web site vazio. Ainda nesta caixa de dilogo, tem de especificar a pasta onde vai ser criada a nova web, por exemplo, c:\websites\novaweb:

Criar pginas de informao (Web) no Frontpage

O FrontPage cria, assim, uma web, com a estrutura indicada, sobre a qual podemos comear a trabalhar imediatamente. A janela do FrontPage fica dividida em duas janelas essenciais: a Lista de Pastas, onde podemos criar, mover, copiar, alterar o nome ou apagar novas pastas ou pginas HTML, e, direita, a vista de pginas HTML habitual do FrontPage:

Nota: Caso no veja a Lista de Pastas, aceda ao menu Ver e seleccione Lista de Pastas

Criao de uma pgina HTML em FrontPage

Existem vrias maneiras de criar uma pgina HTML no FrontPage. Podemos utilizar o boto criar uma nova pgina normal na barra de ferramentas, a opo Novo do menu Ficheiro (seleccionado posteriormente a opo Pgina em branco), ou fazendo um clique com o boto direito do rato em qualquer uma das janelas de visualizao (excepto no modo de visualizao Tarefas) e escolher Nova -> Pgina no menu.

Opes de visualizao de Webs em FrontPage

O FrontPage dispe de quatro opes essenciais de visualizao de pginas Web. O modo Estrutura, onde podemos criar o contedo de uma pgina HTML de uma forma muito semelhante a outros programas, como o Word, por exemplo. Este o modo de edio wysiwyg de pginas HTML do FrontPage. Para alm deste modo de visualizao, o FrontPage dispe tambm do modo Cdigo, onde podemos ver, alterar, apagar ou adicionar cdigo ao cdigo HTML da nossa pgina, o modo Dividir, onde podemos visualizar ao mesmo tempo o modo Estrutura e o modo Cdigo, e o modo Pr-visualizao, que permite ver como a pgina se comporta num browser e o seu aspecto.

Vistas para as Webs em FrontPage

O FrontPage disponibiliza ainda um conjunto de vistas para as Webs (para tal deve seleccionar-se a opo Web Site):

Em baixo, as opes de visualizao iro ser substitudas pelas diversas opes de vistas.

Vistas para as Webs em FrontPage

Pastas -Permite ver as pastas e ficheiros existentes numa web, de um modo muito semelhante ao Windows Explorer. Permite criar, copiar, mover, alterar o nome e apagar ficheiros ou pastas de um modo simples. Website Remoto - Permite publicar ficheiros a partir de um web site remoto para um web site local. Relatrios - Esta vista disponibiliza um conjunto de relatrios para nos facilitar a manuteno de uma web. Navegao - A maioria dos Web Sites tm o seu contedo organizado numa estrutura hierrquica, como um organigrama. No topo da estrutura temos a home page (pgina principal), e a partir desta temos vrias ramificaes, dependendo do tipo de contedo de cada pgina. Este modo de visualizao permite ver a estrutura de navegao da web, num esquema 9 grfico, e permite-nos visualizar ou alterar a estrutura do site.

Vistas para as Webs em FrontPage

Hiperligaes o Permite-nos analisar a estrutura de hiperligaes de uma pgina HTML, atravs de um esquema. Tarefas - Este modo de visualizao permite-nos ver uma lista de tarefas pendentes relativas web. As tarefas podem ser criadas manualmente medida que forem surgindo, ou automaticamente, como resultado de outros processos. Pgina - Esta a vista onde podemos visualizar e editar as pginas HTML. Esta composta pelos quatro modos de visualizao j referidos (Estrutura, Dividir, Cdigo, Pr-visualizao). Est est presente sempre que estamos a editar um ficheiro (clicar em cima do nome do ficheiro na lista de pastas por exemplo).
10

Visualizao em Browser
O FrontPage permite que uma pgina seja pr-visualizada num browser, atravs da opo Pr-visualizar no browser, no menu Ficheiro, ou do boto correspondente, na barra de ferramentas (pode-se tambm escolher qual o browser onde queremos pr-visualizar):

Pr-visualizar no browser

11

Editar uma pgina

Aps criar uma nova pgina, temos, no FrontPage, uma pgina HTML em branco, que podemos agora preencher com o contedo que temos em mente. Podemos criar e alterar o contedo da pgina, o ttulo, esquema de cor, ou outras caractersticas da nossa pgina. Se criou uma web, pode simplesmente fazer um clique com o rato sobre a pgina que quer editar, atravs da janela Lista de Pastas:

12

Gravar uma pgina

Para gravar uma pgina, pode escolher uma das vrias maneiras possveis. Se est a editar uma pgina que nunca tenha gravado anteriormente, pode escolher a opo Guardar ou Guardar como do menu Ficheiro. Pode tambm utilizar a combinao de teclas CTRL + G, ou ainda fazer um clique sobre o boto Guardar na barra de ferramentas. Se a pgina j foi gravada anteriormente, basta apenas fechar a pgina e confirmar a gravao. O FrontPage grava as alteraes automaticamente.

Guardar

13

Eliminar uma pgina

Se estivermos a trabalhar sobre uma Web, podemos, atravs da janela Lista de Pastas seleccionar um ou mais ficheiros da nossa web, e remov-los. Depois de seleccionado(s), basta escolher a opo Eliminar do menu Editar:

Ou clicar com o boto direito sobre um item seleccionado e escolher a opo Eliminar do menu, ou carregar na tecla Eliminar. Em qualquer dos casos, o FrontPage mostra uma caixa de dilogo a pedir a confirmao da remoo dos ficheiros:

14

Definir as propriedades de uma pgina

Atravs da caixa de dilogo Propriedades da pgina podemos modificar a aparncia global da nossa pgina, alterando a cor ou imagem de fundo, margens, ttulo, cor das hiperligaes, e outras. Para abrir a caixa de dilogo Propriedades da pgina, pode escolher a opo Propriedades no menu Ficheiro, ou, fazer um clique sobre a pgina com o boto direito do rato, e escolher, no menu, a opo Propriedades da pgina:

15

Insero de texto, imagens e outros elementos

O FrontPage permite inserir texto e outros objectos, a partir de ficheiros externos. Atravs do menu Inserir podemos inserir entre outros: Formulrios, Ficheiros (HTML, Word, Excel, e outros), vdeo, imagens e grficos externos de diferentes formatos, como GIF, JPEG, PNG, WMF, AVI, TIFF, e outros.

16

Alinhamento e espaamento de linhas

A barra de ferramentas dispe de botes para alinhar o pargrafo esquerda, direita, ou ao centro, semelhana do Word. Adicionalmente, no menu Formatar, escolhendo a opo Pargrafo, exibida uma caixa de dilogo, com variadas opes de configurao do pargrafo actual, e na seco inferior da janela, uma pr-visualizao do aspecto do pargrafo medida que as alteraes so efectuadas:

17

Inserir imagens
Para inserir imagens no FrontPage, existem vrias tcnicas disponveis : Arrastar uma imagem da janela do Windows Explorer para a pgina; Arrastar uma imagem do Internet Explorer para a pgina; Copiar imagens de outros programas (Adobe Photoshop, Paint, ou outros) para o clipboard utilizando a opo copiar no menu editar do respectivo programa, e, de seguida, escolher a opo paste do menu editar no FrontPage; Arrastar imagens de uma pgina aberta no FrontPage para uma outra pgina; Arrastar uma imagem de um local para outro, dentro da mesma pgina; Atravs da opo Imagem -> Do Ficheiro no menu Inserir.

18

Propriedades gerais de uma imagem

Para aceder s propriedades gerais de uma imagem, clique com o boto direito do rato sobre a imagem, e escolha a opo Propriedades da imagem:

19

Propriedades gerais de uma imagem

Na caixa de propriedades Picture Properties podemos configurar vrios aspectos da imagem, como a sua localizao, representaes alternativas, hiperligao, formato de imagem, tamanho, e outros:

20

Incluso de vdeo
Podemos incluir ficheiros de vdeo numa pgina HTML. Para o fazer escolha a opo Imagem -> Vdeo... no menu Inserir.

21

Hiperligaes
Para criar uma hiperligao no FrontPage: 1. 2. Seleccione o texto ou imagem para o qual deseja criar uma hiperligao; Escolha, no menu Inserir a opo Hiperligao, ou clique no boto Hiperlink na barra de ferramentas. Aparece a caixa de dilogo Inserir Hiperligao; Especifique o endereo de destino no campo Endereo; Clique em OK.

3. 4.

22

Hiperligaes
Para apagar uma hiperligao no FrontPage: 1. 2. 3. 4. Clique com o boto direito sobre o texto ou imagem que contm a hiperligao que deseja apagar; Seleccione do menu a opo Propriedades da Hiperligao; O endereo aparece seleccionado no campo URL, carregue em Remover a ligao para apagar o endereo; Clique em OK.

23

Criao de Marcadores (Bookmarks)

Por vezes, especialmente quando temos uma pgina longa, conveniente utilizar hiperligaes para saltar para um ponto da mesma pgina. Os marcadores oferecem essa funcionalidade. Permitem que se faa uma ligao de um ponto de uma pgina para outro ponto da mesma, ou at para uma outra pgina relativamente extensa, num ponto que seja ou no no topo da pgina. Para definir um marcador: 1.Abra a pgina de destino no FrontPage (se no for a mesma que a pgina de origem); 2.Seleccione o elemento que vai possibilitar o salto para a seco da pgina de destino (imagem, texto, etc). Este elemento ser o marcador; 3.Escolha, no menu Inserir a opo Marcador. Aparece uma caixa de dilogo; 4.Escreva o nome que deseja dar a este marcador no campo Nome do Marcador. Utilize um nome diferente para cada marcador na mesma pgina: 5.Clique em OK.
24

Criao de Marcadores (Bookmarks)

Para criar uma hiperligao cujo destino um marcador: 1. 2. 3. 4. Abra a pgina que vai conter a hiperligao; Crie uma hiperligao normal, especificando no campo URL o endereo da pgina; Seleccione a opo Marcador e escolha um marcador; Clique em OK.

25

Criao de imagem de mapa (image maps)

Os Image Maps, tambm chamados de hotspots, permitem que vrias partes de uma mesma imagem estejam associadas a diferentes hiperligaes. Para adicionar um hotspot a uma imagem no FrontPage: 1. 2. Clique uma vez sobre a imagem para a seleccionar; Seleccione a ferramenta de hotspot rectangular, circular ou poligonal na barra de ferramentas Imagens;

3.

Com a ferramenta de hotspot rectangular ou circular, clique no ponto de origem, e arraste o rato at definir a rea que pretende para o hotspot. Com a ferramenta de hotspot poligonal, clique com o rato em cada canto da rea que deseja criar. Para fechar o polgono, faa duplo clique no ponto mais prximo do ltimo ponto, e a linha final ser criada at ao ponto inicial;

26

Tabelas
1. Posicione o ponto de insero no local onde a tabela deve aparecer; 2. Escolha a opo Inserir->Tabela no menu Tabela. Aparece a caixa de dilogo Inserir Tabela;

27

3. Especifique as caractersticas da nova tabela; 4. Clique em OK.

28

Frames ou Molduras
Para alm da utilizao de tabelas, existe um outro mtodo para dispor o contedo das pginas no browser, as Frames. Uma pgina especial, chamada Frameset, define o desenho (layout) dos frames, e as pginas correspondentes ao contedo de cada um dos frames. Mais tarde, recorrendo s Hiperligaes podemos carregar outras pginas numa frame em resposta s seleces dos utilizadores. Para criar um Frameset: Escolha Nova no menu Ficheiro, e escolha, Mais Modelos de pgina (no lado direito do ecr). Na caixa Modelos de Pgina, escolha dos tipos de pginas Pginas com Frames, aquela que mais se adapta ao Frameset que pretende criar:

29

Frames ou Molduras

Para dividir um frame em dois, seleccione o frame que pretende dividir, e escolha, no menu Frames a opo Dividir Frames. Se pretender apagar um frame, seleccione o frame, e escolha a opo Eliminar Frames no menu Frames.
30

Frames ou Molduras
Criar hiperligaes em Framesets Uma vez definidos e criados o Frameset e os frames, as hiperligaes de qualquer um dos frames podem mostrar uma nova pgina na mesma frame, numa frame diferente, ou numa janela diferente. Esta aco indicada pelo atributo Frame de Destino, que especifica o nome da frame onde a pgina de destino da hiperligao deve ser exibida.

31

Formulrios
No FrontPage podemos criar formulrios facilmente. Para criar um formulrio: 1. Posicione o ponto de insero no local onde dever aparecer o primeiro elemento do Formulrio; Escolha, no menu Inserir a opo Formulrio -> Formulrio. Ser criado o formulrio, indicado no FrontPage por um rectngulo tracejado, contendo apenas um boto Submeter e um boto Repor; Para cada elemento que queira no formulrio, posicione o ponto de insero dentro deste, escolha no menu Inserir a opo Formulrio, e escolha, do menu resultante, o tipo de elemento a inserir.

2.

3.

32

Formulrios
No Interior do formulrio, tambm pode adicionar outros elementos para alm destes. Quer sejam imagens, tabelas, texto, hiperligaes ou outros. Criar o aspecto visual do formulrio apenas uma parte da tarefa. Ter tambm de configurar as propriedades, tanto do formulrio em si, como de cada um dos elementos que dela fazem parte. Para ver ou modificar as propriedades do formulrio, clique com o boto direito sobre este e escolha a opo Propriedades do Formulrio. Para ver ou modificar as propriedades de um elemento do formulrio, clique sobre este com o boto direito e escolha Propriedades do Campo de Formulrio.

33