front page front page expressexpress - minerva.uevora.pt · 1. Cri e um aP sta/Foldr dentro d p “O sMeu Documentos/My Documents”, com o seguinte nome “WWW”. Énesta pasta

11

MCT MINISTÉRIO DA CIÊNCIA E DA TECNOLOGIA

http://www.uarte.mct.pt

http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

front page front page front page expressexpressexpress

construção de páginas para a construção de páginas para a webweb ............................................................................................................................................................... ................................. pagpag. 2. 2obter e instalar o programa ....................................obter e instalar o programa ........................................................................................................................................................................... ....... pagpag. 3 e 4. 3 e 4barra de ferramentas .................................... barra de ferramentas .................................... ........................................................................................................................................... ........... pagpag. 5 e 6. 5 e 6o que fazer antes de iniciar o trabalho ........................o que fazer antes de iniciar o trabalho .......................................................................................................................................................... .. pagpag. 7. 7inserir texto inserir texto –– formatar texto ................................................formatar texto ........................................................................................................ ........................................................ pagpag. 8. 8obtenção de uma imagem .........................................obtenção de uma imagem ............................................................................................................................................................................. .... pagpag. 9. 9inserir imagem .................................................inserir imagem .............................................................................................................................................................................................. ............. pagpag. 10 e 11. 10 e 11inserir texto para a ligação às próximas páginas ...............inserir texto para a ligação às próximas páginas ........................................................................... ............................................................ pagpag. 12. 12inserir texto para a ligação ao endereço de correio electrónico inserir texto para a ligação ao endereço de correio electrónico .................................................... .................................................... pagpag. 13. 13guardar/salvar a primeira página ...............................guardar/salvar a primeira página ................................................................................................................................................................... .... pagpag. 14. 14criar novas páginas ............................................criar novas páginas ........................................................................................................................................................................................ ............ pagpag. 15. 15guardar a página ...............................................guardar a página ............................................................................................................................................................................................ ............. pagpag. 16. 16ligar a página actividades à página de início ..................ligar a página actividades à página de início ................................................................................. ............................................................... pagpag. 17 e 18. 17 e 18ligar a página inicial à página das actividades ................ligar a página inicial à página das actividades ............................................................................... ............................................................... pagpag. 19. 19criar as páginas alunos e professores e as respectivas ligações criar as páginas alunos e professores e as respectivas ligações ..................................................... ..................................................... pagpag. 20. 20visualizar as páginas no visualizar as páginas no internet explorer internet explorer ...................................................................................................................................................... ...................... pagpag. 21 e 22. 21 e 22transferir as páginas com o wstransferir as páginas com o ws--ftp ftp ................................................................................................................................................................. ................................. pagpag. 23 a 28. 23 a 28editar novamente a página inicial ..............................editar novamente a página inicial .................................................................................................................................................................. .... pagpag. 29 e 30. 29 e 30

22



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESS

CONSTRUÇÃO DE PÁGINAS PARA A WEB

O FrontPage Express é um editor de páginas Web (podemos construir um site www) que dá completo acesso ao poder do HTML (Hypertext Markup Language, linguagem de marcação de hipertexto – linguagem da maioria das páginas da Internet). Pode-se usar o FrontPage Express para criar e formatar páginas da Web, visualizando as páginas no modo WYSIWYG ("what you see is what you get“ - o que se vê é o que obtém), para que possa ver como aparecerão na realidade as nossas páginas (como a formatação e o layout).

Quando estiver preparado para construir páginas para a Web mais avançadas, será muito fácil passar do Microsoft FrontPageExpress para o Microsoft FrontPage ou outro editor mais complexo.

Ícone de programa e Ecrã do “FrontPage Express”.

33



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESS

OBTER E INSTALAR O PROGRAMA - 1

O programa FrontPage Express é de distribuição gratuita e livre (freeware).

FreewareSoftware distribuído gratuitamente e que permite o ilimitado número de cópias, além de não exigir nenhum tipo de registo. Diferente do software de domínio público, o autor do freewaremantém os direitos autorais sobre o produto e pode impedir a sua modificação, comercialização ou inclusão num pacote de programas.

Pode obter o programa realizando o seu download a partir do site http://www.uarte.mct.pt/ajuda/software/ .

http://www.uarte.mct.pt/ajuda/software/





44



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESS

OBTER E INSTALAR O PROGRAMA - 2

Siga as instruções para o download e instalação do programa descritas na página da uARTE.

Após cumprir estas instruções o programa fica aberto e pronto a ser utilizado.

IMPORTANTE:

Maximize a janela do programa de forma a visualizá-lo a todo o ecrã.

De seguida iremos ver de forma suncinta as ferramentas mais importantes do FPE...

55



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSBARRA DE FERRAMENTAS - 1

Barra de MenusBarra de Menus

Barra de Formatação de TextoBarra de Formatação de Texto

Barra de FerramentasBarra de Ferramentas

66



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSBARRA DE FERRAMENTAS - 2

Tipo de letra ou fonteTipo de letra ou fonte

Escolher a cor da letraEscolher a cor da letra

Ligar as páginas através de ligações Ligar as páginas através de ligações -- linkslinks

Inserir uma imagemInserir uma imagem

Aumentar ou diminuir o tamanho da letraAumentar ou diminuir o tamanho da letra

Nova páginaNova página

77



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSO QUE FAZER ANTES DE INICIAR O TRABALHO...

1. Crie uma Pasta/Folder dentro da pasta “Os Meus Documentos/My Documents”, com o seguinte nome “WWW”.

É nesta pasta que vai guardar todos os seus ficheiros ou páginas da internet realizadas com este programa e também todas as imagens que vai inserir nas páginas respectivas.

IMPORTANTE: Tem que ter todas as imagens nesta pasta, pois este programa não aceita o “Copiar e Colar ou Copy and Paste”. Todas as imagens terão de ser inseridas através do menu “Inserir” ou do ícone respectivo.

Para Criar a pasta proceda da seguinte forma:

2. Abra a pasta “Os Meus Documentos/My Documents”.

3. Dê um clique com o botão direito do rato sobre uma área livre da pasta “Os Meus Documentos/My Documents”.

4. Clique sobre “Novo” e no menu seguinte escolha “Pasta”.

5. Aparece uma pasta com o nome “Nova Pasta”.

6. Escreve o novo nome da pasta: “WWW” e pressione a tecla “ENTER”.

88



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSINSERIR TEXTO – FORMATAR TEXTO

Vamos iniciar o trabalho…

Inserir texto:

1. Digite (tal como no Word) o título do seu projecto, o nome da sua escola ou outro… Depois de seleccionar o texto:

2. Centre o texto

3. Aumente o tamanho da letra

4. Escolha a cor

5. Realce a palavra utilizando o “Negrito/Bold”

(Recorra aos ícones da barra de ferramentas do FontPage Express).

99



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSOBTENÇÃODE UMA IMAGEM

Posicione o cursor logo abaixo do texto que escreveu… Pode obter imagens para as suas páginas através de um scanner/digitalizador, máquina fotográfica digital ou obtê-las na Internet

1. Abra o Internet Explorer

(http://www.uarte.mct.pt/)

2. Clique na imagem central que se encontra na página de entrada da uARTE

3. Clique com o botão direito do rato sobre a imagem central

4. No menu que é apresentado, escolha Guardar Imagem Como/Save Picture As

5. Escolha a Pasta/Folder “WWW” e guarde a imagem…pode alterar o nome da imagem (no caso estabelecemos o nome “inicio.jpg”).

http://www.uarte.mct.pt/

1010



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSINSERIR IMAGEM - 1

6. Clique no botão “Inserir Imagem”

7. Na janela seguinte clique em “Procurar…”

8. Escolha a pasta “WWW”

9. Clique sobre o ficheiro e escolha “Abrir/Open”

1111



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSINSERIR IMAGEM - 2

10. Dimensione a imagem, reduzindo o seu tamanho, para isso:

Clique sobre a imagem e arraste uma “pegas” de canto para dentro da imagem

Eis o resultado…

IMPORTANTE: Se “pegar” num dos outros pontos para redimensionar a imagemesta irá aparecer distorcida. Só fica proporcional quando “pegar” num dos cantos

1212



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSINSERIR TEXTO PARA A LIGAÇÃO ÀS PRÓXIMAS PÁGINAS

Inserir texto para as ligações às próximas páginas:

1. Coloque o cursor de texto depois da imagem

2. Alinhe o texto à esquerda

3. Escreva os seguintes itens: Actividades, Alunos e Professores

4. Seleccione as palavras que escreveu e dimensione o texto de forma a que fique mais pequeno

1313



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSINSERIR TEXTO PARA A LIGAÇÃO À CONTA DE CORREIO ELECTRÓNICO

1. Coloque o cursor de texto depois da última palavra que escreveu e abra uma linha (ENTER)

2. Alinhe o texto à direita

3. Escreva o seguintes: Sugestões…

1414



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSGUARDAR/SALVAR A PRIMEIRA PÁGINA

1. Abra o menu “Ficheiro/File” e escolha “Guardar Como…/Save As…

2. Na janela seguinte em título da página escreva “A minha escola”

3. e clique no botão “ Como ficheiro…”

4. Na janela seguinte digite o nome de ficheiro “index.html”

IMPORTANTE: Não confunda o nome de ficheiro com o título da página… enquanto o título de página pode ser qualquer nome (convém que referencie o assunto de que trata a página) e ter acentuação, maiúsculas e várias palavras, o nome de ficheiro só pode ter 8 caracteres (todos em minúsculas e sem acentuação). A primeira página do nosso “site/sítio” deve sempre ter o nome de “index.html”. Isto serve para que quando se abre o nosso “sítio” na Internet, a nossa página de entrada abra automaticamente… Com estes procedimentos criou a sua págima de entrada.

5. Clique no Botão Guardar/Save

1515



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSCRIAR NOVAS PÁGINAS

1. Clique sobre o ícone de “Nova página”

2. Aparece uma janela vazia doFrontPage Express…

3. Tal como fez para a página de início “A minha escola”, digite “ACTIVIDADES e alinhe ao centro

4. No final da página digite “VOLTAR”, diminua a letra e alinhe à esquerda

1616



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSGUARDAR A PÁGINA

1. Abra o menu “Ficheiro/File” e escolha “Guardar Como…/Save As… na pasta “WWW”

2. Na janela seguinte em título da página escreva “Actividades da minha escola”

3. e clique no botão “ Como ficheiro…”

4. Na janela seguinte digite o nome de ficheiro “activida.htm”

Atenção: não confunda o nome de ficheiro com o título da página… enquanto o título de página pode ser qualquer nome (convém que referencie o assunto de que trata a página) e ter acentuação, maiúsculas e várias palavras, o nome de ficheiro só pode ter 8 caracteres (todos em minúsculas e sem acentuação). Esta página tem o nome de ficheiro “activida.htm” para que se possa sempre saber qual o assunto de que trata…

5. Clique no Botão Guardar/Save

1717



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSLIGAR A PÁGINA ACTIVIDADES À PÁGINA DE INÍCIO

1. Seleccione a palavra “Voltar”

2. Clique sobre o ícone “Criar ou Editar Hiperligação”

3. Na janela seguinte clique sobre o separador “Abrir página”

4. Neste separador clique sobre “A minha escola” e “OK”. Aparece uma pequena janela, leia o texto e clique sobreo botão “Sim/Yes”. A ligação entre esta página e a página de início está feita…

1818



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSLIGAR A PÁGINA ACTIVIDADES À PÁGINA DE INÍCIO

Eis o resultado…

5. A ´palavra “VOLTAR” ficou sublinhada o que significa que a ligação com a página inicial “index.html” ficou estabelecida

6. Grave as alterações

7. Volte agora à página de início “A minha escola”. Abra o menu “Janela/Window” e no final do menu clique sobreo nome do ficheiro (index.html)

1919



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSLIGAR A PÁGINA PÁGINA INICIAL À PÁGINA DAS ACTIVIDADES

1. Vamos ligar a página inicial à página das actividades, para isso basta proceder como na ligação anterior:

2. Seleccione a palavra “Actividadesr”

3. Clique sobre o ícone “Criar ou Editar Hiperligação”

4. Clique sobre “Actividades da minha escola” e “OK”.Aparece uma pequena janela, clique sobre o botão“Sim/Yes”. A ligação entre esta página e a página das actividades está feita…

5. Não se esqueça de guardar o trabalho já realizado… para isso abra o menu “Ficheiro/File” e escolha “Guardar Tudo/Save All”. Esta opção permite gravar todos os ficheiros com que está de momento a trabalhar, use sempre que fizer alterações naspáginas…

6. A palavra “Actividades” também ficou sublinhada, tal como a “Voltar”…

2020



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSCRIAR AS PÁGINAS ALUNOS E PROFESSORES E AS RESPECTIVAS LIGAÇÕES

1. ´Repita o procedimento que realizou para a página “Actividades”, agora com as páginas “Alunos” e “Professores”

2. Não se esqueça de colocar a palavra “Voltar” e estabelecer as respectivas ligações à página “Index.html” (A minha escola - título)

3. Guarde cada página assim que ficar pronta na pasta “WWW”:

• Para a página “Alunos” o título será o seguinte “Os alunos da minha escola” e o nome de ficheiro “alunos.htm”

• Para a página “Professores” o título será o seguinte “Os professores da minha escola” e o nome de ficheiro “professo.htm”

4. Volte à página inicial através do menu “Janela/windows” e estabeleça as ligações entre esta e as páginas dos “Alunos” e “Professores”

5. Guarde tudo através da opção do menu “Ficheiro” “Guardar Tudo/Save All”

6. Finalmente teremos as nossas páginas prontas para “preencherr” com a informação que nos interesse…

7. Com este procedimenbto criou mais três páginas “filhas” da primeira (unicamente dependentes da página designada “index.html” e “irmanadas” entre si, pois ocupam o mesmo nível na hierarquia

2121



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSVISUALIZAR AS PÁGINAS NO INTERNET EXPLORER - 1

1. Abra o Internet Explorer

2. Abra o menu “Ficheiro/File”

3. Escolha “Abrir/Open”

4. Escolha “Procurar/Browse”

5. Na janela seguinte procure a pasta “WWW”

6. Escolha o ficheiro “index” e clique no botão “Abrir/Open”

7. E eis a sua página... Verifique se está tudo a funcionar (não se esqueça que esta visualização ainda é dentro do seu computador – serve para verificar se está tudo operacional, antes de enviar para o nosso sítio através do ws_FTP)

8. Se quiser pode também visualizar as suas páginas na Web... Para isso digite o endereço do seu sítio na internet no Explorer

2222



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSVISUALIZAR AS PÁGINAS NO INTERNET EXPLORER - 2

2323



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSTRANSFERIR AS MINHAS PÁGINAS COM O WS_FTP - 1

1. O WS-FTP pode ser descarregado a partir do servidor de http://www.uarte.mct.pt/ajuda/Software/)

2. Depois de descarregado para o seu computador, pode iniciar a sua instalação com um duplo-clique sobre o nome do ficheiro. Terminada a instalação, é criado um ícone na sua área de trabalho que lhe permite iniciar a operação com esta aplicação.

ftp://ftp.uarte.mct.pt/Software/pc/rede/ftp/ws_ftple.exe

2424



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt


O que é o FTP/File Transfer Protocol

1. É o serviço básico de transferência de ficheiros através da rede. Utilizando o FTP, um utilizador pode carregar (upload) ficheiros do seu computador para outro, ou descarregar (download) ficheiros de um dado computador para o seu. Para tanto, o utilizador deve ter permissão de acesso ao computador remoto. Um serviço especial de FTP, conhecido como FTP anónimo (anonymous FTP), permite que o utilizador remoto "puxe" ficheiros do computador em que o serviço estáinstalado, sem necessidade de obter permissão de acesso.

2. O FTP geralmente é usado para transferências de ficheiros de programas (software) e documentos. Não há, contudo, qualquer limitação quanto ao tipo de informação que pode ser transferida.

3. Vale ressaltar que esse serviço pressupõe que o utilizador conheça a localização do documento desejado, ou seja, o endereço do computador remoto e os nomes do directório/pasta e do ficheiro que contém o documento. Quando a localização não é conhecida, o utilizador pode usar o archie para determinar a localização exacta do ficheiro.

4. É aconselhável que se tenha um conhecimento básico de DOS, para tirar o máximo partido do FTP.

2525



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt


Interface do WS-FTP, ecrã de entrada…

1. Caixa de diálogo “Session Properties” que serve para indicar à aplicação o endereço do ‘site’ de FTP que se pretende contactar

2. Em “Profile Name” colocamos o nome que queremos dar ao servidor de FTP.

3. Em “HostName/Adress” colocamos o servidor onde vamos buscar os ficheiros (download) ou então, para onde enviamos os ficheiros – caso de uma página web(upload).

4. Em “User ID” colocamos o nosso “login ou username”

5. Finalmente em “Password” digitamos a senha que nos dá acesso ao servidor e ao local.

6. Clike em “OK”

2626



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt


Para o servidor da uARTE

1. Pressione o botão “New” e escreva um nome à sua escolha na janela “Profile Name”(ex: webdays)

2. Preencha depois o nome do servidor (atelier.uarte.mct.pt) no campo “Host Name/Address”deixando em 'automatic detect' o campo “Host Type”.

3. De seguida escreva a sua identificação no campo “UserID” e a sua senha no campo “Password” (se desconhecer estes elementos entre em contacto com a uARTE).

4. Para terminar, pressione o botão “Apply” para gravar os seus dados.

IMPORTANTE: Se o computador que está a utilizar permitir o acesso a outras pessoas NÃO deve ter assinalada a caixa “Save password” por forma a que esta lhe seja pedida em cada ligação, garantindo assim a sua confidencialidade.

5. No caso desta caixa estar assinalada, a senha égravada juntamente com o perfil da ligação e qualquer pessoa pode efectuar a ligação.

6. Pressione o botão de “OK” para iniciar a ligação.

7. A janela da esquerda permite a navegação na estrutura de directórios do computador local e a janela da direita vai mostrar o conteúdo da sua área no sistema remoto (servidor da uARTE)

2727



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt


1. Se não colocar uma password, aparece esta pequena janela onde deverá digitar a sua password:

2. Clike em “OK” e verá o seguinte quadro:

3. Do lado esquerdo visualiza os seus ficheiros, isto é o seu computador, do lado direito a sua área no computador de destino...

4. O software estabelece ligação com o servidor do Atelier da uARTE e posiciona-se directamente na sua directoria.

5. Clique na seta para subir um nível na hierarquia das pastas

6. Escolha na janela da esquerda a pasta onde estão os ficheiros gravados pelo FrontPageExpress e que quer publicar, procurando a pasta “WWW”

7. Seleccione os ficheiros HTML e as imagens que deseja enviar na janela da esquerda clicandosobre o seu nome na lista. No caso de querer seleccionar mais do que um ficheiro emsimultâneo, mantenha premida a tecla de CTRLenquanto os selecciona.

Para transferir ficheiros do seu computador para o computador de destino ou vice-versa, basta marcá-los (seleccioná-los) e clicar na seta respectiva:

2828



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt


7. Para os enviar os ficheiros seleccionados para o servidor da uARTE, clique na seta que aponta para a direita que se encontra entre as janelas do sistema local e do sistema remoto. Inicia-se a transferência e aparecerá uma janela (Transfer Status) que indica o andamento deste processo (a velocidade e o êxito da transferência de cada ficheiro)

8. Depois de terminar a transferência, pressione o botão ”Close” para terminar a sessão de trabalho com o WS-FTP e, utilizando um browser, ligue-se ao endereço WWW que lhe corresponde, por forma a verificar a funcionalidade das páginas que editou.

2929



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSEDITAR NOVAMENTE A PÁGINA INICIAL - 1

1. Abra a página index.html no FrontPage Express

2. Seleccione a palavra “Sugestões...”

3. Clique no ícone de hiperligação

4. Na janela escolha o separador do meio “World Wide Web”

5. Em “Tipo de Hiperligação” escolha “mailto”

6. Digite o seu e-mail ou o e-mail da escola

7. Clique no botão “OK”

8. Guarde a sua página

9. Acabou de editar a hiperligação do seu mai... Faça a transferência desta página para o seu sítio na web através do Ws_FTP

10. Visualize novamente as suas páginas na Web (não se esqueça de “actualizar” no Internet Explorer...)

3030



http://

http://www

www.uarte.

.uarte. mct

mct.. ptpt

FRONTPAGE EXPRESSEDITAR NOVAMENTE A PÁGINA INICIAL - 2

1. Abra a página index.html no FrontPage Express

2. Seleccione a imagem

3. Clique no ícone de hiperligação

4. Na janela escolha o separador do meio “World Wide Web”

5. Em “Tipo de Hiperligação” escolha “http://”

6. Digite o endereço da uARTE (http://www.uarte.mct.pt)

7. Clique no botão “OK”

8. Guarde a sua página

9. Acabou de editar a hiperligação desta imagem ao site da uARTE. Faça a transferência desta página para o seu sítio na web através do ws_FTP e visualize as suas páginas na Web