FrontPage Tic - 10 Ano

Escola Secundária João de Deus
Curso Profissional Técnico de Óptica Ocular
TIC – 10º
Ano Lectivo – 2011/2012
Módulo 3 - Edição Web
Criação de
Páginas Web
Prof. : Amadeu Afonso
Criação de Páginas Web – Microsoft FrontPage
TIC - 10º Ano Lectivo 2011/2012
Páginas e Sítios Web

 Uma página Web é…
…um documento multimédia que contém hiperligações.
Um conjunto de páginas Web é…

…um sítio (site) Web.
O conjunto dos sítios (sites) Web constitui…

…a Web ou World Wide Web (WWW) que não é mais do que
um conjunto de documentos hipermédia unidos pelas
hiperligações que permitem a navegação com um simples
clique do rato.
Prof. Amadeu Afonso

Páginas Web
O que há dentro do documento criado como página Web?
Linguagem de programação:
 HTML (Hypertext Markup Language) – 1993
 outras.
Como é criada uma Página Web?
Editores de Páginas:
 Editores de texto normal (Ex: Bloco de notas, word, etc.)
 WYSIWYG (what you see is what you get)
 Ex: Microsoft Frontpage 2003

FrontPage - História
Versão 1.0 - 1995:
 Criada e comercializada pela Vermeer Technologies.
Versão 1.1 - 1996:

 a Microsoft compra a Vermmer Technologies para poder comercializar o
FrontPage juntamente com os seus produtos.
Versão 6 ou FrontPage 2003 - 2003:

 após várias versões lançadas esta é a que é utilizada na actualidade sendo
a que vai ser leccionada nas aulas de Técnicas de Multimédia.
Futuro do FrontPage:
 No Office 2007 o Microsoft FrontPage será dividido em 2 novas aplicações:
 Microsoft Office Share Point Designer 2007
 Microsoft Expression Web Designer

FrontPage – Vantagens e Desvantagens

Principal vantagem:
 Fácil e intuitivo:
 Qualquer pessoa conseguirá de forma fácil criar uma página
web com um aspecto profissional e sem necessidade de
aprender a linguagem HTML.
Principal desvantagem:
 Código com “lixo”:
 Cria código desnecessário aumentando o tempo da página
carregar e é possível que a informação surja com a
formatação incorrecta em alguns browsers.

FrontPage - Concorrência
Outros editores do tipo WYSIWYG:
 Macromedia Dreamweaver
 Adobe GoLive
 Etc. (http://en.wikipedia.org/wiki/list_of_html_editors)

Planeamento de um sítio Web

O planeamento da página ou do sítio é a primeira tarefa a
executar antes de utilizar o FrontPage.
Para construir uma página devem ser feitas as seguintes

perguntas:
qual o objectivo da página?

a quem se dirige?
que informação deve conter?
que recursos gráficos são necessários?
que estilo de página é o mais adequado?

Planeamento de um sítio Web

Outro aspecto importante é o arranjo gráfico do sítio, o
qual deve facilitar a navegação entre as páginas,
nomeadamente através de:
ícones claros e consistentes;
identificação esquemática dos menus;
botões de navegação que permitam voltar à página inicial ou ir até

qualquer outra página do sítio;
títulos, subtítulos, cabeçalhos, rodapés e links bem visíveis.

Estrutura do sítio - Hierarquia

Depois de definir o conteúdo do sítio, é necessário organizar a
informação a incluir nas páginas. Essa tarefa inclui a divisão da
informação em unidades a incluir em cada página, o estabelecimento
de uma hierarquia entre esses blocos de informação e, finalmente, a
determinação das ligações entre esses blocos de informação.
Eis um exemplo:
Página
principal
1.ª 2.ª 3.ª 4.ª 5.ª 6.ª

página página página página página página
7.ª
página

Consistência das páginas e do sítio

Outro dos aspectos a ter em conta na construção de sítios Web
é o da sua consistência, isto é, o de uma identidade visual
própria que se deve manter ao longo de todas as páginas para
que o leitor encontre a informação que deseja utilizando sempre
os mesmos procedimentos. Esta identidade visual é conseguida
através de:
Utilizaçãode molduras (frames) ou tabelas que dividem a página em

áreas para colocação de informação específica;
 Localização de títulos em locais estratégicos;
 Disposição e organização dos menus, dos cabeçalhos e rodapés;


 Ligações e barras de ferramentas sempre nos mesmos locais;
 Código de cores idêntico em todas as páginas;
 Formatação de caracteres semelhante;
 Modelos de botões idênticos, etc.
Esta identidade gráfica ajudará o leitor na navegação e no

acesso rápido à informação.


Na definição do aspecto visual do sítio Web, a informação e os
objectos que nela forem inseridos deverão estar organizados e
dispostos em locais estratégicos que são importantes para a leitura
das páginas e que lhe conferem uma identidade própria. Um dos
procedimentos que se deve adoptar é a utilização de molduras ou
tabelas que estruturam a página em áreas de informação separadas,
como pode ser visto nos exemplos seguintes:

Site Web – Fases de construção

Definição do Tema
Procurar e organizar a informação e colocar “no papel”
Criar a estrutura do site “no papel”
Construção do site
Divulgação do site / Publicação
Manutenção

Site Web – Estrutura

Vamos supor que estamos a desenvolver um site de uma empresa
que comercializa determinados produtos e serviços:
Secções do Site
- Informação geral - Contactos
- Produtos - Serviços
- Links - Etc
Diagrama do Site

Site Web – Estrutura

Esquema de uma página
Deve fazer-se um esboço no papel sobre o esquema que irá ser
utilizado em todas as páginas do site a desenvolver.
Ex:
Título da página
Cor do fundo
Barra de botões de menus

Separador
Caixa para imagens

Área de inserção de texto
Rodapé para inserção de

links ou outras informações

Páginas Web – Conteúdos

Uma página Web pode ser composta por:
etc
etc
os
T ext Vídeos
etc links
etc
etc
Sons
Imagens
etc

Páginas Web – “Truques e Dicas”

Começar por desenhar a estrutura de uma página e quando
concluída criar várias cópias do ficheiro com nomes diferentes.
Não utilizar espaços no nome das páginas e/ou das imagens e

outros ficheiros.
Evitar a utilização de acentos, caracteres especiais e do “c”

cedilhado.
Teratenção à utilização de letras maiúsculas e minúsculas para

os nomes dos ficheiros. Escolher de preferência letras
minúsculas


A extensão dos ficheiros que representam páginas web são
sempre *.html ou *.htm. Ter em atenção e gravar sempre com uma
destas extensões, de preferência utilizar sempre a mesma no
mesmo site!
A primeira página de cada site tem sempre o nome index.html
Atenção ao tamanho de imagens, vídeos, sons, etc.

Imagens: GIF, JPG, PNG.
Vídeos: MPEG, AVI(Compressão), MOV.
Sons: MIDI, MP3.
Colocar todos os ficheiros do site na mesma pasta, podendo

esta ter sub-pastas.


Utilizartabelas ou molduras (frames) de forma a estruturar
melhor a página.
Utilizar de preferência as fontes:

Arial;
Verdana;
Times New Roman.
Tamanhos normalmente utilizados para fontes:

 2 (10pontos) – Texto;
 3 (12pontos) – Subtítulos;
 4 (14pontos) – Títulos.

Páginas Web – Alojamento

Existem vários servidores na Internet, uns gratuitos outros
pagos, onde se pode alojar um site.
Servidores Portugueses gratuitos:

http://homepages.sapo.pt/
http://planeta.clix.pt/
http://pagpessoais.iol.pt
Para encontrar outros servidores basta fazer uma pesquisa num

motor de busca por “alojamento web” ou caso queiramos obter
mais resultados fazer uma procura através dos termos em inglês
“web hosting”.


FrontPage Tic - 10 Ano

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

FrontPage Tic - 10 Ano

Hochgeladen von

Copyright:

Verfügbare Formate

Escola Secundária João de Deus

Curso Profissional Técnico de Óptica Ocular

Módulo 3 - Edição Web

Páginas e Sítios Web

Um conjunto de páginas Web é…

O conjunto dos sítios (sites) Web constitui…

Prof. Amadeu Afonso

Como é criada uma Página Web?

Prof. : Amadeu Afonso

Versão 1.1 - 1996:

Versão 6 ou FrontPage 2003 - 2003:

Prof. : Amadeu Afonso

FrontPage – Vantagens e Desvantagens

Prof. : Amadeu Afonso

Prof. : Amadeu Afonso

Planeamento de um sítio Web

Para construir uma página devem ser feitas as seguintes

qual o objectivo da página?

Prof. : Amadeu Afonso

Planeamento de um sítio Web

identificação esquemática dos menus;

botões de navegação que permitam voltar à página inicial ou ir até

títulos, subtítulos, cabeçalhos, rodapés e links bem visíveis.

Prof. : Amadeu Afonso

Estrutura do sítio - Hierarquia

1.ª 2.ª 3.ª 4.ª 5.ª 6.ª

Prof. : Amadeu Afonso

Consistência das páginas e do sítio

Utilizaçãode molduras (frames) ou tabelas que dividem a página em

 Localização de títulos em locais estratégicos;

 Disposição e organização dos menus, dos cabeçalhos e rodapés;

Prof. : Amadeu Afonso

Consistência das páginas e do sítio

 Código de cores idêntico em todas as páginas;

 Formatação de caracteres semelhante;

 Modelos de botões idênticos, etc.

Esta identidade gráfica ajudará o leitor na navegação e no

Prof. : Amadeu Afonso

Consistência das páginas e do sítio

Prof. : Amadeu Afonso

Site Web – Fases de construção

Procurar e organizar a informação e colocar “no papel”

Criar a estrutura do site “no papel”

Divulgação do site / Publicação

Prof. : Amadeu Afonso

Site Web – Estrutura

Prof. : Amadeu Afonso

Site Web – Estrutura

Barra de botões de menus

Caixa para imagens

Rodapé para inserção de

Prof. : Amadeu Afonso

Páginas Web – Conteúdos

Prof. : Amadeu Afonso

Páginas Web – “Truques e Dicas”

Não utilizar espaços no nome das páginas e/ou das imagens e

Evitar a utilização de acentos, caracteres especiais e do “c”

Teratenção à utilização de letras maiúsculas e minúsculas para

Prof. : Amadeu Afonso

Páginas Web – “Truques e Dicas”

A primeira página de cada site tem sempre o nome index.html

Atenção ao tamanho de imagens, vídeos, sons, etc.