10.

Web: criao de pginas MSFRONTPAGE

Um projecto Tecnologias multimdia

da Informao e da Comunicao

Tecnologias da Informao e da Comunicao Apresentao do programa

O programa MSFrontpage da Microsoft uma das ferramentas de mais fcil utilizao para a edio e publicao de pginas Web. Trata-se de um programa bastante intuitivo e fcil de utilizar para criar, gerir e publicar imediatamente pginas Web (*), utilizando as rotinas de edio, formatao e insero de objectos multimdia utilizadas nos programas de processamento de texto e de criao de apresentaes.
(*) Por pgina Web entende-se um documento multimdia que contm hiperligaes. O conjunto destas pginas constitui um stio Web. O conjunto dos stios Web constitui, por sua vez, a Web ou World Wide Web (WWW) que no mais do que um conjunto de documentos hipermdia unidos pelas hiperligaes que permitem a navegao com um simples clique do rato.

Tecnologias da Informao e da Comunicao O ambiente de trabalho e seus elementos

O ambiente de trabalho do MSFRONTPAGE constitudo por: uma barra de ttulo onde se identifica a aplicao e a apresentao;

uma barra de menus com as funcionalidades do aplicativo;

uma barra de ferramentas padro com botes para executar as operaes mais frequentes;

Tecnologias da Informao e da Comunicao

uma barra de ferramentas de formatao com botes que permitem aplicar vrias formataes de texto que integram a apresentao;

uma barra de visualizao que te permite seleccionar vrios modos de visualizao da pgina;

Podemos estruturar e editar as pginas

uma barra de status;

Permite escrever e editar directamente em cdigo HTML

Permite ter uma noo aproximada do aspecto da pgina, sem ter de guardar a pgina

Tecnologias da Informao e da Comunicao

um painel de tarefas, que pode ser activado ou desactivado, com vrios menus de ajuda elaborao das tuas pginas Web.

Tecnologias da Informao e da Comunicao Planeamento e criao de um stio Web

O planeamento da pgina ou do stio a primeira tarefa a executar antes de utilizares o MSFrontpage. Para construir a tua pgina deves fazer as seguintes perguntas: qual o objectivo da pgina? a quem se dirige? que informao deve conter? que recursos grficos so necessrios? que estilo de pgina o mais adequado?

Tecnologias da Informao e da Comunicao

Outro aspecto importante o arranjo grfico do stio, o qual deve facilitar a navegao entre as pginas, nomeadamente atravs de: cones claros e consistentes; identificao esquemtica dos menus; botes de navegao que permitam voltar pgina inicial ou ir at qualquer outra pgina do stio; ttulos, subttulos, cabealhos, rodaps e links bem visveis.

Tecnologias da Informao e da Comunicao Estrutura do stio hierarquia da informao

Depois de definires o contedo do teu stio, ters de organizar a informao a incluir nas pginas. Essa tarefa inclui a diviso da informao em unidades a incluir em cada pgina, o estabelecimento de uma hierarquia entre esses blocos de informao e, finalmente, a determinao das ligaes entre esses blocos de informao. Eis um exemplo:
Pgina principal

1. pgina

2. pgina

3. pgina 7. pgina

4. pgina

5. pgina

6. pgina

Tecnologias da Informao e da Comunicao

Outro exemplo de hierarquizao pode ser este:
Pgina principal

Pgina 2

Pgina 3

Pgina 4

Pgina 5

Pgina 6

Pgina 7

Pgina 8

Tecnologias da Informao e da Comunicao Consistncia das pginas e do stio

Outro dos aspectos a ter em conta na construo de stios Web o da sua consistncia, isto , o de uma identidade visual prpria que se deve manter ao longo de todas as pginas para que o leitor encontre a informao que deseja utilizando sempre os mesmos procedimentos. Esta identidade visual conseguida atravs de: utilizao de molduras (frames) que dividem a pgina em reas para colocao de informao especfica; localizao de ttulos em locais estratgicos; disposio e organizao dos menus, dos cabealhos e rodaps;

Tecnologias da Informao e da Comunicao Consistncia das pginas e do stio

ligaes e barras de ferramentas sempre nos mesmos locais; cdigo de cores idntico em todas as pginas; formatao de caracteres semelhante; modelos de botes idnticos, etc. Esta identidade grfica ajudar o leitor na navegao e no acesso rpido informao.

Tecnologias da Informao e da Comunicao

Antes da elaborao do teu stio Web, devers definir o aspecto visual das pginas para assegurares a consistncia do stio. Se no tiveres uma ideia precisa do que queres fazer, aconselhvel que abras pginas Web existentes para observares diferentes tipos de arranjo grfico que podero inspirar-te para a elaborao do teu stio e ajudar-te a definir um modelo prprio. Um exemplo de definio de arranjo grfico de pgina o da imagem seguinte:
Ttulo da pgina Separador rea de insero de texto

Cor do fundo Barra de botes de menus

Caixa para imagens

Rodap para insero de links ou outras informaes

Tecnologias da Informao e da Comunicao

Na definio do aspecto visual do stio Web, a informao e os objectos que nela forem inseridos devero estar organizados e dispostos em locais estratgicos que so importantes para a leitura das pginas e que lhe conferem uma identidade prpria. Um dos procedimentos que podes adoptar o da utilizao de molduras ou de tabelas que estruturam a pgina em reas de informao separadas, como podes ver nos exemplos da figura seguinte:

Tecnologias da Informao e da Comunicao

Aspectos relevantes a ter em conta so ainda:

Os cabealhos e rodaps Os ttulos e subttulos A legibilidade do texto As cores Os objectos multimdia

Tecnologias da Informao e da Comunicao Criao e gesto de um stio Web

A gesto ou manuteno do stio importante uma vez que h actualizaes constantes a fazer, o que pode implicar a construo ou o acrescentamento de novas pginas. Neste caso, importante manter a consistncia do stio, a sua integridade grfica e a identidade visual. Por isso, aconselhvel que a gesto ou manuteno dos stios Web seja feita por uma s pessoa que assegure a consistncia e a integridade do stio e que dever executar as seguintes tarefas: responder aos e-mails dos utilizadores; assegurar o funcionamento de eventuais grupos de discusso presentes no stio; assegurar o funcionamento de chats; interagir com os utilizadores, pois o seu contributo muito importante para a qualidade e actualidade de qualquer stio.

Tecnologias da Informao e da Comunicao Criao, abertura e guarda de pginas

Criao de novas pginas abrir o menu Ficheiro, seleccionar Novo... seleccionar Pgina em branco no painel de tarefas que se abre ou, ento, clicar no boto Nova pgina na barra de ferramentas padro. Se clicares na seta inserida neste boto, abrir-se- um menu com vrias opes

Tecnologias da Informao e da Comunicao Criao, abertura e guarda de pginas

Se clicares em Pgina... abrir-se- a janela Modelos de pgina onde poders optar por vrios modelos de pgina preexistentes, com formulrios, com molduras e folhas de estilos.

Tecnologias da Informao e da Comunicao

Abertura de pginas Para abrires uma pgina j existente deves proceder da seguinte maneira: no menu Ficheiro, clicar em Abrir, ou clicar no boto Abrir da barra de ferramentas; na janela que se abre, seleccionar a pgina pretendida e clicar no boto Abrir.

Tecnologias da Informao e da Comunicao

Guardar pginas Para guardar pginas criadas, o procedimento igualmente simples. No menu Ficheiro devers: seleccionar a opo Guardar ou clicar no boto Guardar ; na janela que se abre, seleccionar a pasta onde queres guardar a pgina, atribuir-lhe um nome na janela Nome de ficheiro e clicar no boto Guardar . Se abriste uma pgina fora do stio Web onde ests a trabalhar e a pretendes guardar, ento devers seleccionar a opo Guardar como... e repetir os passos atrs descritos.

Tecnologias da Informao e da Comunicao

Pr-visualizao e impresso de pginas Para executar estas operaes devers: abrir o Frontpage e seleccionar a pgina a imprimir; abrir o menu Ficheiro e seleccionar a opo Pr-visualizar ; pr-visualizar toda a pgina e seleccionar o que queres imprimir; clicar no boto Imprimir para iniciar a impresso.

Tecnologias da Informao e da Comunicao

Publicao de pginas Para publicares o teu stio Web deves utilizar tambm o menu Ficheiro, e seleccionar a opo Publicar site... De imediato, abre-se a janela Propriedades do Web site remoto em que te so apresentadas vrias hipteses: seleccionar o servidor remoto e a sua localizao Web; optimizar as pginas HTML; definir o que deve ser publicado.