Criação de Páginas Web Simples usando o FrontPage

Criação de Páginas Web Simples usando o
FrontPage
Há no mercado vários tipos de software que podem ser usados na criação de páginas Web,
eles tornam o trabalho de criar um site bastante fácil, mas nem sempre organizado o que
poderá trazer transtornos no futuro caso se deseje alterar o conteúdo ou adicionar novas
páginas.
Temos que ter em conta vários pontos para que o resultado final seja uma página de
qualidade. A página tem de ser organizada, tanto à vista de quem a faz ou actualiza como de
quem a vê; tem que ter um design simples, não muito carregado de imagens; facilidade de
navegação; conteúdos próprios e bem seleccionados para o público alvo; originalidade e
outros.
A página aqui exemplificada foi criada no Microsoft Office FrontPage 2003 e será
exemplificada uma sala de estudo para a disciplina de Matemática.
Escrito por:
João Romão
Criação de Páginas Web Simples usando o FrontPage
Nota Prévia:
•
•
•
Por motivos relacionados com os protocolos que a Internet segue, a página principal
de uma pasta na Internet (nome correcto é directório) chama-se na maioria dos casos
índex. A terminação do nome do ficheiro varia de acordo com a linguagem em que a
página está progamada (índex.htm, index.php, etc…)
Com o tempo e após muitas actualizações uma página Web tende a ficar
desorganizada, como tal é preciso planear tudo com muita antecedência e tentar
prever todos os casos possíveis, organizar devidamente a página. Aqui será dada uma
grande importância a essa organização que evita transtornos futuros ao reorganizar o
site.
É aconselhável a utilização dos seguintes tipos de imagens numa página Web .png, .gif,
.jpg. O formato .png pode ser usado sempre já que é leve e a imagem resultante tem
boa qualidade embora alguns navegadores mais antigos não possam abrir imagens
deste tipo. O formato .gif não deve ser usado em fotografias, deve ser usado quando a
imagem tem partes transparentes e poucas variações de cor. O formato .jpeg ou .jpg
deve ser usado em casos com muitas variações de cor, é o formato ideal para
fotografias.
João Romão
Criação de Páginas Web Simples usando o FrontPage
Esquematização e Planeamento da Página
Antes de começar a criar a página é necessário, como é óbvio, planeá-la para que tudo seja
feito de uma maneira organizada e clara. Primeiro há que definir o conteúdo e os temas a
tratar na página, e por fim criar o design básico da página.
Definir os temas a tratar
Antes de começar a fazer o site propriamente dito deve ter uma ideia de como é que ele
será, que características deve ter, que temas irá abordar. Delineie os seus objectivos antes de
fazer o site, anote as ideias que lhe forem surgindo. Tente fazer isto logo ao início já que se o
fizer durante a construção do tempo poderá trazer-lhe alguns precalços.
Tendo em conta o exemplo de página a criar (sala de estudo) teremos de criar a página
pensando nos temas da disciplina que necessitam de ser tratados de acordo com o programa
da mesma. Tendo em conta o exemplo a desenvolver aqui um conjunto de temas viável
poderia ser: Geometria, Funções e Trigonometria.
A escolha dos temas deve ser feita logo no início pois é dela que dependem todos os
passos seguintes.
Desenhar o esquema de pastas
Nunca é agradável ver uma pasta cheia de ficheiros não relacionados, é difícil encontrar o
que queremos e isso trás muitos transtornos. Ao desenhar uma página Web surge o mesmo
problema, a organização. Convém portanto desenhar um esquema com todas as pastas no
site. Estas pastas devem ser criadas de acordo com os temas definidos anteriormente, e terá
dentro dela todos os ficheiros relativos a estes.
Temos portanto uma pasta mãe (p.e.: sala_estudo_mat) e dentro dela
estará uma pasta para cada um dos temas a abordar. Sendo assim dentro
desta pasta mãe termos as seguintes pastas: geometria, funcoes,
trigonometria como demonstra a imagem ao lado.
Opcionalmente pode-se criar uma pasta apenas para colocar imagens. Ficheiros que serão
usados em mais de uma situação como imagens deverão ser colocados dentro da pasta mãe.
Dentro de cada pasta haverá, como já foi dito, os ficheiros relativos ao tema a tratar. Ou
seja, actividades (p.e.: Hot Potatoes), páginas de matéria e a página principal onde está a lista
das actividades.
Dentro da pasta mãe estará uma página com a lista dos temas com ligações para a página
principal de cada tema.
Nota: É aconselhável colocar apenas caracteres alfanuméricos (0-9, a-z, A-Z) e underscores
( _ ) no nome das pastas. Não se deve colocar espaços, acentos ou caracteres especiais
(|!”#$%&/()=?», etc..) já que isto pode levar a erros na apresentação das páginas ou demora
na apresentação da página quando estas são colocadas na internet. O mesmo deverá ser tido
em atenção ao dar nomes às páginas.
Estruturar as páginas
Para que a página seja de leitura rápida e intuitiva convém que todas as páginas
obedeçam a um mesmo design de fundo ou modelo, isto é, a forma como são apresentadas e
a organização dos menus devem ser semelhantes. Convém fazer esta estruturação através de
tabelas visto ser um método rápido, fiável e fácil. Uma página de boa qualidade dá aos seus
visitantes uma boa navegação entre as páginas. Devem-se criar menus de fácil compreensão,
ligações a várias páginas como a página principal. Deve-se prezar pela leveza da página, isto é
João Romão
Criação de Páginas Web Simples usando o FrontPage
deve ser rápida a carregar pelo visitante, para tal não deve ter muitas imagens e animações,
apenas as necessárias.
Tendo em conta o tema a desenvolver devem-se desenhar pelo menos três páginas,
uma para a página principal, uma para servir de base a cada tema e uma para as páginas de
matéria. Na página principal devemos incluir obrigatoriamente ligações para a página principal
de cada tema organizadas em x linhas ou x colunas, como se preferir (x representa o número
de temas) e, opcionalmente uma linha para colocar o título da página e uma linha para o nome
do(s) autor(es) sendo assim e de acordo com o exemplo da disciplina de matemática temos os
seguintes exemplos de design em tabelas:
Disciplina de Matemática
Funções
Geometria
Trigonometria
Criado por:
João Romão
Ou
Disciplina de Matemática
Funções
Geometria
Trigonometria
Criado por:
João Romão
Na página a servir de base a cada tema deve-se colocar a lista de todos os exercícios
relativos à matéria, a identificação da matéria e uma ligação à página principal se necessário.
Por uma questão de organização pode-se dividir os exercícios por tema.
Exemplo:
Funções
Matéria
Equações de Segundo Grau
Fórmula Resolvente
Complexos (…)
Exercícios
Exercício 1
Actividade 1
Exercício 2 (…)
Página Principal
As páginas de matéria devem ter uma estrutura mais simples onde bastarão três
linhas, uma com o título da matéria, uma com o texto e uma última com a ligação à página
anterior (tema).
Fórmula Resolvente
João Romão
Criação de Páginas Web Simples usando o FrontPage
√ 4
2
Funções
Independentemente do exemplo utilizado deverá lembrar-se que a planificação de um
site é algo muito rápido e que no futuro lhe poupará bastante tempo caso deseje reestruturar
o site.
A reter:
•
•
•
Definir o objectivo do site. Para que servirá? Que conteúdos irá ter? Quem será o
público alvo? Que temas deverão ser abordados?
Criar um esquema de pastas para poder organizar os ficheiros de acordo com os seus
temas. Ficheiros comuns a várias páginas devem ser colocados na pasta mãe.
Para facilitar a construção do site deve-se criar uma modelo para cada tipo de página
evitando assim que as páginas sejam todas diferente umas das outras o que causaria
dificuldade na leitura da página por parte de quem a visita.
João Romão
Criação de Páginas Web Simples usando o FrontPage
Criar a Página
Abra o Microsoft Office FrontPage.
Criar um WebSite
Depois de abrir o FrontPage este abre
automaticamente uma nova página. Ignore
e clique na seta para baixo junto da folha
branca no canto superior esquerdo e
seleccione Web Site.
Ir-lhe-á aparecer uma janela com várias
opções para o site, seleccione Web Site de
uma página. Aparecer-lhe-á uma lista como
a seguinte:
Criar e gerir pastas
Cada uma das pastas que estão presentes na imagem acima é opcional, para as eliminar
clique com o botão direito em cima delas e seleccione eliminar. A pasta _private armazena
dados obtidos através de formulários. Se não os vai usar e para evitar confusão o melhor será
eliminar esta pasta, de qualquer modo a linguagem usada para as páginas Web (HTML) não é a
melhor para armazenar resultados de formulários. Caso deseje renomear a pasta images para
imagens pode fazê-lo seleccionando-a com o botão direito e clicando em Mudar Nome.
Continuando com a construção do seu site precisa agora de colocar as pastas cujo
esquema desenhou acima. Pode optar por duas maneiras para criar uma pasta no FrontPage.
Ou criando directamente no FrontPage como demonstra a imagem
Ou indo a “Iniciar -> Os meus documentos -> Os meus Web sites -> omeusite” e criando dentro
desta pasta as pastas presentes no seu esquema. É nesta pasta que poderá encontrar o seu
site sempre que o desejar consultar. Para inserir ficheiros numa pasta é recomendável que o
faça através desta pasta.
João Romão
Criação de Páginas Web Simples usando o FrontPage
Criar e configurar páginas
Para criar uma nova página deverá primeiro abrir a pasta onde a deseja colocar e
depois com o botão direito do rato seleccionar Nova -> Página em branco
Dê um nome à página, se desejar que esta seja a página principal da pasta deverá dar-lhe o
nome de índex.htm como já foi indicado na nota prévia. Todas as páginas deverão ter a
terminação .htm caso contrário não poderão ser utilizadas. Para abrir a página que acabou de
criar faça duplo clique em cima do nome desta. Ao abrir ser-lhe-á mostrado o código fonte
base da página para alterar o tipo de vista clique em Estrutura na barra em baixo:
Verá então uma página branca. Agora é preciso alterar as configurações básicas da página.
Com o botão direito do rato em cima da página clique em “Propriedades da página…”.
Verá uma janela com vários separadores e opções.
No separador Geral, em “Título” escreva o nome que a página apresentará no navegador
de Internet. Por exemplo a página http://min-edu.pt tem o título “Portal da Educação :
Destaques”.
No separador Formatação pode alterar vários aspectos do resultado final da página como
a cor do fundo, a cor do texto e das hiperligações, etc. Se desejar utilizar uma imagem como
fundo do site seleccione a opção “Imagem do Fundo” e escolha a imagem através do botão
“Procurar…”. A imagem de fundo será repetida tantas vezes quanto forem necessárias no
fundo da página, atrás do texto para que preencha toda a janela. Caso, em vez duma imagem
preferir utilizar uma cor para o fundo, desseleccione a opção “Imagem do Fundo” caso esta
esteja seleccionada e, clicando na lista das cores, seleccione a cor a usar, caso nenhuma das
cores que aparecer lhe agrade clique em “Mais cores…”. Pode definir as cores para o fundo,
para o texto normal da página, e para as hiperligações.
Esta é a formatação base de uma página, caso deseje poderá explorar as outras opções
existentes.
Inserir e configurar tabelas
Para inserir uma tabela no FrontPage vá a “Tabela -> Inserir ->
Tabela”. Seleccione o número de linhas e colunas para a tabela, é
aconselhável colocar na largura da página 100 % de modo a que
esta ocupe a janela do navegador em toda a sua largura. Defina a
largura dos limites como zero para que a tabela não fique à mostra
a quem visita a página. Clique em “OK” para terminar a tabela.
Agora terá de enfrentar o problema da estrutura da tabela,
terá de unir várias células, eliminar células desnecessárias, fixar
larguras.
João Romão
Criação de Páginas Web Simples usando o FrontPage
Temos o exemplo de uma coluna com 2 linhas por 4 colunas para criar a página cujo
modelo foi traçado atrás para um tema. Sendo assim, temos duas colunas a mais e 1 linha a
menos do que o necessário.
Vamos começar por adicionar uma linha. Pode fazê-lo de duas maneiras. Clicando numa
célula, indo ao menu “Tabela -> Inserir -> Linhas ou Colunas” e escolher inserir uma linha ou
clicando numa célula e com o botão direito seleccionar “Inserir Linha”.
Falta portanto eliminar duas colunas. Seleccione-as e com o botão direito escolha
“Eliminar colunas” o mesmo procedimento poderá ser aplicado quando quiser eliminar uma
linha.
Temos agora uma tabela com três linhas por duas colunas, Para juntar as duas células de
cima de modo a colocar o nome do tema seleccione-as e no menu do botão direito do rato
escolha “Unir células”.
À medida que se for preenchendo a
tabela na linha do meio podemos ver que
a largura das colunas vai variando. Para
que não varie teremos de fixar a largura.
Seleccione as células a alterar e depois de
clicar no botão direito do rato clique em
“Propriedades da célula”. Seleccione a
opção “Especificar Largura” e seleccione
“em percentagem”. Como na tabela temos
duas colunas para preencher vamos
colocar 50 (100:2). Agora as colunas já têm
largura fixa e escreva o que escrever não
se irão deformar.
Pode colocar tabelas dentro de tabelas
caso seja impossível configurar as células
da maneira que deseja.
Criar listas
Há dois tipos de listas no FrontPage. Ordenadas por números e
por pontos.
Escreva os elementos da lista, seleccione-os e depois clique num
dos dois botões no menu
. O primeiro botão cria uma lista
ordenada por números o segundo uma lista ordenada por pontos.
Ao clicar a lista será automaticamente criada.
Inserir hiperligações (apontadores)
Há dois tipos de hiperligações que podem ser considerados os mais importantes.
Hiperligações para outras páginas ou hiperligações dentro da própria página.
Para criar uma hiperligação a outra página deve primeiro escrever um texto elucidativo
sobre o conteúdo da página para a qual deseja que a hiperligação direccione os visitantes.
Depois basta seleccionar esse texto e carregar em
. Aparecerá
uma janela com a lista de todos os documentos e pastas no seu site. Se desejar que a
hiperligação seja para um documento que tem no seu site procure esse mesmo documento e
seleccione-o, caso preferir ligar a uma página já existente na Internet deverá colar o endereço
da mesma na caixa de texto “Endereço”. Para colar o endereço seleccione a caixa de texto e
carregue Ctrl + V. Uma hiperligação dentro da mesma pasta pode ser útil quando se insere
João Romão
Criação de Páginas Web Simples usando o FrontPage
uma nova actividade género HotPotatoes. Neste caso bastaria enviar os ficheiros da actividade
e inserir a ligação na página.
Uma hiperligação dentro do mesmo
documento quando clicada redirecciona
o visitante para outro local previamente
definido dentro da mesma página. Por
exemplo, temos uma página com
bastante informação e que foi
organizada em temas. No início da
página desejamos criar um índice que
direccione os visitantes para cada um
dos temas. Primeiro tem que se definir
quais os lugares para onde os visitantes
deverão ser direccionados. Seleccione o
texto no local para o qual deseja que os
visitantes sejam direccionados, no
menu “Inserir” escolha “Marcador”. Dê
um nome ao marcador que, de
preferência,
apenas deverá ter
caracteres alfanuméricos e underscores ( _ ) e clique em “OK”. Está feita a primeira parte da
ligação na mesma página. Para inserir a ligação propriamente dita seleccione o texto que
deseja que redireccione para o local definido, no menu do botão direito do rato seleccione
“Hiperligação”, seleccione, na barra do lado esquerdo, a opção “Colocar neste documento”.
Ser-lhe-á mostrada uma lista de todos os locais definidos na página, seleccione aquele que
deseja e clique em “OK”. Está feita a ligação. Se experimentar ver a sua página em “Prévisualização” e clicar no link poderá ver que no topo da janela do seu navegador fica o local
definido no marcador.
Para remover uma hiperligação, seleccione o texto da mesma, depois de carregar com o
botão direito do rato seleccione “Propriedades da Hiperligação” e clique no botão “Remover
Hiperligação”.
Inserir imagens
As imagens são usadas nos sites maioritariamente para ilustrar exemplos e para decorar os
sites. Para inserir uma imagem no seu site através
do FrontPage clique primeiro no local onde deseja
colocar a imagem, de seguida no menu “Inserir”
seleccione “Imagem -> do Ficheiro”. É
recomendável que a imagem que quer colocar
esteja dentro da pasta do seu site, se criou uma
pasta só para as imagens coloque a imagem lá antes
de a inserir na página. Seleccione a imagem a
colocar no site e clique em Inserir. É conveniente
que, caso a imagem não apareça no site, ao menos
apareça um pequeno texto descritivo da imagem.
Clique com o botão direito do rato na imagem e
seleccione”Propriedades da Imagem”, abra o
separador “Geral” seleccione a opção “Texto” e
insira a descrição da imagem. Esta descrição
também aparecerá no site ao passar o rato por cima
da imagem como mostra a imagem ao lado.
João Romão
Criação de Páginas Web Simples usando o FrontPage
Pode redimensionar a imagem seleccionando-a e arrastando os quadrados nos cantos.
Nota: Não é recomendável colocar várias imagens numa página da Internet por questões
estéticas e mesmo devido ao tempo de abertura/carregamento da página. As imagens devem
ser guardados em formatos leves como o .gif, o .png ou o .jpeg/.jpg de acordo com a
quantidade de cores que apresentam.
Alterar texto
A formatação do texto no FrontPage é bastante semelhante à formatação em outras
aplicações do Office como o Word. A maneira mais completa de editar o texto é feita
seleccionando o texto, e no menu do botão direito do rato clicar em “Tipo de Letra”, na janela
que irá aparecer tem todas as opções de formatação de texto.
Nota: Ao dar um parágrafo no texto, a distância entre a linha anterior e a linha nova pode
ser bastante grande. Visto que no FrontPage não há a possibilidade de gerir parágrafos se
desejar que o espaço entre esta linha seja menor carregue Shift + Enter
A reter:
•
•
•
•
•
•
A gestão de pastas e ficheiros do site pode ser feita tanto através do FrontPage como
do Windows indo a “Os meus documentos -> Os meus Web sites”.
Para identificar melhor o seu site, deverá alterar as propriedades da página.
É aconselhável, por motivos de organização, que toda a página seja criada em tabelas
cujas dimensões deverão estar fixadas para evitar deformação da tabela.
Sempre que quiser direccionar um utilizador para uma página diferente ou para um
sítio diferente dentro da mesma página deverá criar uma hiperligação.
Não deve exagerar na quantidade de imagens / animações no site.
A edição de texto no FrontPage é semelhante à do Word.
João Romão
Criação de Páginas Web Simples usando o FrontPage
Exportar a página
Depois de toda a página estar completamente criada deverá colocá-la na Internet
(exportá-la). Aqui será explicado como a colocar de modo a ficar alojada numa plataforma
Moodle.
Criar pastas no Moodle
Primeiro temos de passar o esquema de pastas que foi desenhado
no início para a plataforma. Para tal abra a página “Ficheiros“ no menu
esquerdo. Crie uma nova pasta em “Criar uma Pasta”, esta será a sua
pasta mãe (no exemplo desenvolvido: sala_estudo_mat). Dentro desta
pasta coloque todas as outras pastas que criou ao desenhar o esquema
de pastas. Tendo em conta o exemplo foi criada uma pasta funcoes,
uma trigonometria e uma geometria. Lembre-se que os nomes das
pastas devem ser iguais aos que tem no seu esquema e que apenas
devem ter caracteres alfanuméricos e underscores.
Enviar ficheiros no Moodle
Vamos começar por enviar os ficheiros que estão na pasta mãe. Abra esta pasta e clique
em “Enviar um Ficheiro”, clique em “Procurar…” e seleccione o ficheiro que lhe interessa.
Lembre-se que os ficheiros têm de ser enviados obrigatoriamente dentro das pastas em que
foram criados. Se enviasse o ficheiro que mostra a lista de exercícios de exercícios de funções
para a pasta mãe quando os visitantes abrissem a página apenas veriam esta página e não
teriam a possibilidade de ver as outras matérias.
Erros comuns:
• Cliquei num link mas não consigo ver a página e o navegador apresenta uma
•
mensagem de erro.
o O ficheiro para o qual o link redirecciona não está na plataforma ou está na
pasta errada. Nesse caso deve enviar o ficheiro em falta para a pasta correcta.
Caso o link redireccione para uma página externa ao Moodle verifique se o link
da hiperligação está correcto.
As imagens não aparecem ou aparece uma cruz vermelha em vez da imagem.
o Os ficheiros das imagens não foram enviados para a plataforma ou estão na
pasta errada. Envie-os de novo para a pasta correcta na plataforma.
Nota:
Por vezes, ao adicionar novas actividades estas podem ter pastas
e ficheiros com nomes iguais. Convém que coloque cada actividade
numa pasta diferente dentro da pasta do tema à qual elas pertencem
como mostra a imagem ao lado. Tanto a actividade 2o_grau como a
actividade formula_resolvente têm em comum a pasta imagens.
Portanto, de modo a não sobrepor os ficheiros de uma aos de outra e
não aparecerem imagens relativas à actividade 2o_grau na página da
formula_resolvente ou vice-versa as actividades devem ser colocadas
em pastas separadas.
Actualizar a Página
João Romão
Criação de Páginas Web Simples usando o FrontPage
De tempos a tempos poderá querer actualizar a sua página para inserir novos links ou
páginas. Por este motivo deve SEMPRE guardar uma cópia do seu site em local seguro (numa
pen, no computador) para que mais tarde o possa alterar e adicionar as novas características.
Para editar o site, abra o FrontPage, e no menu “Ficheiro -> Abrir” escolha a pasta onde está o
seu site. Edite o que quiser, grave e depois é só enviar os novos ficheiros e os que editou para
a plataforma onde tem o site alojado, respeitando sempre a ordem das pastas.
João Romão