Front Page

Mdulo 3 - Criao de Pginas Web
A Internet
7 Criao de Pginas Web
A Internet
Empresas, instituies e pessoas individuais esto cada
vez mais interessadas no s em aceder ao imenso
manancial de informao disponibilizado pela Internet mas
tambm em oferecer a sua prpria informao a muitas
outras pessoas. Criar pginas Web torna-se, pois, uma
inevitabilidade.
A Internet
Criar uma pgina Web permite gerar um ambiente com
muitas potencialidades, onde possvel:
mostrar um estilo esttico prprio, personalizado e oportuno;
promover a pesquisa de informao;
promover produtos e servios;
estimular com interfaces prprias a troca de textos, imagens, sons, etc.;
fornecer informao filtrada, seleccionada e comentada;
criar contextos propcios ao ensino distncia;
estimular compras, trocas e vendas;
criar espaos virtuais onde se pode conversar, ver e ouvir outras pessoas em
tempo real;
consultar grupos de estudo;
criar ferramentas para trabalhar cooperativamente com outras pessoas;
etc.
7 - Criao de Pginas Web

Tcnicas de implantao
Programao pginas Web

Para se criar uma pgina Web, ter de se usar
uma das seguintes linguagens de programao:
Linguagem
Caractersticas
HTML
HyperText Markup Language: linguagem de marcao com hipertexto (documento com palavras ou
imagens que permitem saltar para outras pginas com o clique do rato), usada para criar
documentos para a Web.
DHTML
Dynamic HTML: linguagem de HTML dinmico, que inclui recursos interactivos para criar pginas
Web. Utilizam-se cada vez mais scripts de linguagens de programao. O JavaScript um bom
exemplo.
VRML
Virtual Reality Modeling Language: linguagem para modelao de realidade virtual, que permite,
atravs de elementos geomtricos, apresentar ambientes tridimensionais ou virtuais.
Para ver pginas em VRML necessrio um plug-in (aplicao simples a instalar no computador
cliente para manipular informao em determinado formato).
XML
EXtensible Markup Language: linguagem de marcao de dados que prev um formato para
descrever dados estruturados e facilita declaraes mais precisas do contedo e resultados mais
significativos de busca atravs de mltiplas plataformas. Enquanto o HTML permite descrever a
aparncia dos dados, o XML permite definir o significado dos dados.
5
Editores de pgina Web

H duas formas de criar documentos para a
Web:
1. Inserir o contedo (textos, imagens, sons, etc.) e format-lo
atravs dos cdigos de formatao e marcao HTML.
2. Utilizar um editor WYSIWYG (What You See Is What You Get
o que se v o que obtm), o que permite inserir o contedo
de forma grfica, ficando a escrita dos cdigos a cargo do
editor.
Editores de imagem e
efeitos especiais
A Web baseia-se na combinao de textos,
imagens e outros componentes de forma
coerente, racional e esttica.
Existem vrios editores de imagens, como por
exemplo, o Corel Draw, o JASC Paint Shop Pro e
o Adobe Photoshop, que so programas que
permitem manipular imagens ou fotografias,
usando ferramentas poderosas.
7
Editores de programas de
animao grfica
Para criar animaes existem
programas, como por exemplo:
vrios
1. O Macromedia Studio MX2004 with Flash Profissional um

programa de tratamento de animao vectorial. Permite criar
animaes interactivas para a Web;
2. O GIF Animator um programa que visa a produo de
imagens animadas. Permite manipular imagens com formato
GIF;
3. O COOL 3D um programa que gera animaes a trs
dimenses (3D) como esferas, cubos, cones, etc.
8
Ferramentas e utilitrios
Depois de criarmos uma pgina Web no
nosso computador, ela s se torna
acessvel ao Mundo se a colocarmos num
computador servidor, ao qual corresponder
um determinado endereo, ou URL (Uniform
Resource Locator).
Ferramentas e utilitrios
O Protocolo para Transferncia de Ficheiros (FTP, File
Transfer Protocol) o protocolo que define a forma de
enviar ficheiros pela Internet. Para publicar um site na Web
existem diversas ferramentas, como por exemplo o
WSFTP e o CuteFTP. Estes programas permitem verter
informao de um computador para um servidor
(computador que armazena um site e que o mantm
disponvel na Web). Para transferir um site para um
servidor, preciso a identificao de utilizador e palavrapasse. O explorador do Windows executa FTP
directamente, sem necessidade de recorrer a outro
software especfico.
10
Criao de Pginas Web

A seguir indicam-se os princpios gerais a ter em
conta quando se cria uma pgina para a Web:
1. A pgina de entrada: frequente ser de apresentao institucional.
No topo poder aparecer o logotipo, nome, endereo, nmeros de
telefone, etc.; no rodap, a data da ltima actualizao, o contacto do
responsvel pela pgina e o nmero de utilizadores que acederam
pgina.
2. Fontes: devem escolher-se fontes como o Arial e o Verdana para
visualizaes no ecr e o Times New Roman para impresses.
Relativamente ao tamanho, os mais adequados so: 2 (10 pontos)
para texto, 3 (12 pontos) para subttulos e 4 (14 pontos) para ttulos.
3. Cores: deve existir contraste entre o fundo e o texto. Alm disso,
devem usar-se cores da paleta Web de 216 cores, de modo a garantir
que a cor sempre igual em qualquer computador e resoluo. No se
deve usar um nmero excessivo de cores.
11
Criao de Pginas Web

4. Imagens: apresent-las com o mnimo tamanho (em bytes) possvel.
Optimizar a imagem, de preferncia, nos formatos JPG, GIF e PNG.
No se deve abusar de GIF animados.
5. Vdeo e udio: deve incluir-se sempre o tamanho dos ficheiros e
indicar o plug-in necessrio para ver / ouvir / manipular o ficheiro.
6. Molduras: usar no caso de haver contedos fixos e de controlo de
navegao.
7. Tabelas: no Word, a largura disponvel para o texto fixa e depende
da largura da pgina. No FrontPage a largura depende da resoluo
do ecr de quem visualiza a pgina, pelo que o texto ajustar-se- at
ocupar toda a largura, originando desformataes frequentes. As
tabelas com bordo 0 (zero) so excelentes para fixar larguras e/ou
comprimentos, pelo que devem ser usadas para misturar imagens e
texto.
12
Planeamento de um
Web Site
Antes de iniciar a criao de um site para a
Web, necessrio plane-lo.
Deve comear-se por determinar objectivos, respondendo
questo O que pretende o site?.
importante caracterizar quem visitar o site: Que
computadores utilizar?; Que velocidade de ligao Internet
ter? As respostas a perguntas como estas condicionaro a
complexidade da estrutura de navegao, a possibilidade de
utilizar recursos como vdeo e/ou som, o tamanho das pginas,
a necessidade de plug-ins e o grafismo utilizado.
13
Planeamento de um
Web Site
Determinar e organizar o site por seces de visualizao,
colocando na mesma pasta as pginas relacionadas. Sempre que for
adequado, utilizar subpastas.
Decidir previamente onde sero armazenados todos os itens,
como imagens e ficheiros de som. conveniente colocar todas as
imagens de uma seco numa nica pasta, para facilitar a localizao.
Desenhar em papel, esquematicamente, a aparncia e a
organizao das pginas, de modo a manter uma certa coerncia no
aspecto e na navegao. Uma abordagem mais avanada seria criar
um desenho digital do site, utilizando aplicaes como o Macromedia
FreeHand, por exemplo.
Criar mecanismos e sinaltica que indiquem em que parte do site
o utilizador est (utilizar, por exemplo, ndices e motores de busca
internos).
Reunir antecipadamente todos os recursos (imagens, sons, etc.)
que vo integrar as pginas antes de as comear a construir, evitando
a interrupo constante do desenvolvimento do site.
14
Criao de Pginas Web

FrontPage
Apresentao
15
Apresentao
A partir do menu INICIAR, procurar a opo
correspondente ao programa
de edio de pginas FrontPage.
Em alternativa, seleccionar o comando
INICIAR Executar, digitar frontpg e
pressionar a tecla Enter.
16
Apresentao
O FrontPage um editor de pginas Web
que permite construir as pginas no modo
WYSIWYG (o que se v o que se
obtm), ou seja, funciona como um
tradutor entre a formatao/funcionalidades
dos documentos Web e o cdigo HTML
necessrio para o conseguir.
17
Apresentao
O ambiente de trabalho do FrontPage, divide-se
em quatro reas:
1.
2.
3.
4.
Menus
e
barras
de
ferramentas e de formatao
Barra de vistas
Painel de tarefas
Lista de pastas/Painel de
navegao
18

FrontPage
Criao de um Web Site
19

Para criar um novo Web site, h dois caminhos
possveis:
1. Clicar no boto Novo, na barra de ferramentas padro, e escolher
Web site De seguida, escolher um modelo, atribuir-lhe um nome e
guard-lo numa unidade.
20

2. Seleccionar FICHEIRO Novo. Escolher Web site de uma pgina,
site da equipa SharePoint, solues de pacote web ou Mais
modelos de Web site, do painel de tarefas e, por fim, seleccionar um
dos modelos de Web site
21

FrontPage
Gesto de um Web Site
22

O FrontPage possui ferramentas de gesto que o
tornam um verdadeiro assistente de produo.
Estas ferramentas incluem:
gesto de tarefas e ficheiros;

relatrios;
gesto de hiperligaes;
segurana e controlo de origem.
A gesto de tarefas e ficheiros permite atribuir

ficheiros e tarefas a desenvolver por uma pessoa
ou por um grupo de trabalho.
23

Os relatrios permitem supervisionar o desenvolvimento
de tarefas e fazer resumos do site, detectar problemas
com pginas lentas ou ligaes quebradas, gerar
estatsticas de visitas ao site, etc.
24

Sempre que se move ou elimina um ficheiro, o
FrontPage actualiza automaticamente todas as
hiperligaes relativas a esse ficheiro (gesto de
hiperligaes).
25

O FrontPage permite que o administrador
do site defina contas de utilizadores e
respectivas funes e garante que cada
ficheiro s pode ser editado por um
utilizador de cada vez (segurana e controlo
de origem).
26

FrontPage
Gesto de Pginas
27
Criao
Para criar uma nova pgina de um site, escolher uma das
seguintes opes:
1.
2.
Clicar no boto Novo na barra de ferramentas padro e premir Pgina.

FICHEIRO Novo Pgina ou Web e escolher, do Painel de tarefas, Novo
Pgina em branco ou Novo a partir de um modelo de pgina.
28
Abertura
Para abrir uma pgina existente, clicar no
boto Abrir na barra de ferramentas padro
ou seleccionar FICHEIRO Abrir.
29
Guardar
Para guardar uma pgina, premir o boto
Guardar ou seleccionar FICHEIRO
Guardar.
Para imprimir uma pgina, ver a pgina em
modo Normal ou HTML e seleccionar
FICHEIRO Imprimir. Depois, escolher as
opes de impresso.
30
Pr-visualizao
H duas formas de pr-visualizar um Web site:
1. Usar o browser interno, a partir do separador de modos.
31
Pr-visualizao
2. Usar um browser externo, como o Internet Explorer ou oNetscape, a
partir de FICHEIRO Pr-visualizar no browser. Este comando
permite adicionar novos browsers, definir o tamanho da janela e
activar, ou no, a guarda automtica de pginas antes da prvisualizao.
32

FrontPage
Formatao e melhoramento da
apresentao das Pginas Web
33
Adio de estilos de
formatao
Tal como o Word, o FrontPage permite
personalizar estilos de texto, bem
como usar os que j vm definidos no
programa. O estilo pode ser escolhido
a partir da caixa de estilos da barra de
formatao. Para ver, modificar ou
adicionar estilos, escolher FORMATAR
Estilos. O FrontPage permite optar
entre Cdigos HTML e Estilos do
utilizador.
34
Tipo de letra
A formatao do texto pode ser feita usando as
opes da barra de formatao, nomeadamente o
estilo, o tipo de letra, o tamanho, o Negrito, Itlico
e Sublinhado, o aumentar ou diminuir o tamanho
de letra, etc.
Se se pretender optar por outras cores ou por
uma cor visvel no ecr, clicar em Mais cores,
premir o comando Seleccionar e pressionar a
rea que possui a cor pretendida. Por fim, premir
OK. Para seleccionar mais opes de formatao,
escolher FORMATAR Tipo de letra.
35
Pargrafos
O FrontPage, tal como o Word, permite inserir:
quebra de linha (premir Shift + Enter), que provoca uma mudana de
linha mas onde no h mudana de pargrafo;
mudana de pargrafo (Enter).
As diferenas so visveis, por exemplo, na altura

entre linhas e na aplicao de alinhamentos de
pargrafos. No primeiro caso, como h um s
pargrafo, s se pode ter um alinhamento. No
segundo,
podem
aplicar-se
diferentes
alinhamentos ( esquerda, direita, centrado ou
justificado).
36
Marcas e numerao
Para formatar listas, seleccionar FORMATAR Marcas e
numerao Propriedades da lista.
Este comando permite escolher marcas de imagens e
nmeros. Alm disso, permite fechar os itens dentro da
lista, atravs da opo Permitir fechar destaques.
37
Limites e sombreado
Este comando permite escolher uma
imagem de padro de fundo, definir limites,
cor, largura, rea, cor de fundo e de
primeiro plano.
38
Posio
Este comando s se encontra activo
quando se selecciona uma imagem.
Permite escolher um estilo de moldagem
para combinar imagem e texto.
39
Temas
A partir de FORMATAR Temas
possvel escolher um tema a aplicar a
todas as pginas ou apenas a pginas
seleccionadas (para seleccionar vrias
pginas abrir a lista de pastas e, enquanto
se pressiona a tecla Ctrl, clicar com o rato
no nome da pgina).
40
Limites partilhados
Este comando permite definir barras de
hiperligaes a aplicar a todas as pginas ou
apenas pgina actual.
41
Preenchimento de fundo
Esta opo s se encontra disponvel para pginas que no tenham
tema. A partir de FORMATAR Preenchimento de fundo, possvel
escolher:
uma imagem de fundo e aplicar-lhe marca de gua;

efeitos rollover em hiperligaes, isto , quando o cursor do rato passar sobre a
hiperligao, esta muda de cor e apresenta uma ligeira animao;
alterar as cores do fundo, do texto e das hiperligaes;
obter informaes do fundo a partir de outra pgina.
42
Insero de imagens
O FrontPage permite inserir imagens de
diferentes fontes: do ClipArt, a partir de
um ficheiro, do scanner, de desenhos e
formas automticas, do WordArt, a partir
de vdeo, etc.
A barra de ferramentas Imagens permite
efectuar vrios tipos de operaes sobre
imagens.
43
Adio de som de fundo

Para se adicionar um som que se ouvir
quando se abrir a pgina, activar o menu de
atalho
da
pgina
e
seleccionar
Propriedades da pgina. ento possvel
escolher:
a localizao do ficheiro;
o nmero de vezes que se repete o som;
repetir sempre o som ou no.
Por fim, premir OK.

44
Criao de formulrios
Dois dos modelos de pgina disponveis em FICHEIRO
Novo so relativos a formulrios:
1.
2.
Formulrio de confirmao permite confirmar a recepo de entradas por

parte do utilizador nas pginas de debate, de registo ou de resultado do
formulrio.
Formulrio de resposta permite ao utilizador comentar o site, a sua
organizao ou os seus contedos.
45
Criao de formulrios
Para criar um formulrio a partir de uma folha em
branco, escolher os seus componentes a partir de
INSERIR Formulrio.
46
Utilizao Tabelas
Como vimos anteriormente, o uso de tabelas no
FrontPage permite combinar texto e imagens,
evitando posteriores desformataes.
Normalmente, faz-se desaparecer a tabela
definindo o tamanho do limite com o valor zero (0).
As operaes com tabelas no FrontPage so
semelhantes s efectuadas no Word.
47
Utilizao de molduras
(frames)
As frames so teis para criar ferramentas de navegao, como por
exemplo listas de hiperligaes. Normalmente a rea fixa mantm-se
sempre visvel, enquanto a rea central varivel.
Em Mais modelos de pginas, no separador Pginas com frames,
possvel abrir uma nova pgina com frames.
48
Utilizao de molduras
(frames)
O FrontPage abre uma pgina separada por reas, s
quais se atribui um ficheiro existente ou um ficheiro em
branco.
A partir do menu de atalho da pgina podem editar-se as
propriedades da frame (pgina inicial, tamanho, margens,
definir se a frame ser redimensionvel ou no no browser,
etc.) e escolher opes para mostrar barras de
deslocamento. Ao premir o boto Pgina das frames
pode inserir-se o espaamento da frame e activar, ou no,
a opo de mostrar os seus limites.
49

FrontPage
Hiperligaes
50
Hiperligaes
Para visualizar as hiperligaes de uma pgina,
seleccion-la da lista de pginas e abrir a vista de
Hiperligaes.
51
Criar hiperligaes
Para criar uma hiperligao interna
necessrio criar marcadores no documento
e, de seguida, inserir hiperligaes para
esses marcadores.
Para criar marcadores:
clicar no ponto onde se pretende inserir o marcador;
escolher INSERIR Marcador;
atribuir um nome ao marcador.
52
Inserir hiperligaes
Para inserir uma hiperligao, colocar o cursor do rato no
ponto de insero [na(s) palavra(s) ou figura
seleccionada(s)] e escolher INSERIR Hiperligao (Ctrl
+ K) ou premir o boto Inserir hiperligao.
Criar hiperligaes para
Aco seguinte
Ficheiro ou pgina Web
Escolher a pasta, a pgina, o ficheiro ou o endereo Web.
Colocar neste documento
Seleccionar o marcador.
Um novo documento
Digitar o nome do documento e escolher se se pretende editar o

ficheiro mais tarde ou logo aps a insero da hiperligao.
Endereos de correio electrnico
Digitar o endereo electrnico e o assunto ou escolher um endereo

de correio electrnico utilizado recentemente.
53
Barras de hiperligaes
Podem
criar-se
barras
de
hiperligaes
personalizadas com ligaes Anterior e Seguinte
e baseadas na estrutura de navegao.
54
Barras de hiperligaes
A barra de hiperligaes apresenta a ordem pela qual as
pginas aparecem na vista de Navegao. Ao abrir as
propriedades da barra de hiperligaes, no menu de
atalho, podem ser escolhidas vrias opes.
55

FrontPage
Animao
56
Insero de componentes
Web
A partir de INSERIR Componentes Web podem
escolher-se os efeitos dinmicos para botes de apontar,
painis rolantes e gestor de faixas. Algumas destas
animaes (e tambm o som) s ficam disponveis para
utilizadores do browser Internet Explorer
57
Boto interactivo
Na caixa Propriedades do boto sensvel ao rato
possvel:
inserir um texto no boto em diferentes tipos de letra;

criar hiperligaes;
definir as cores do boto e do fundo;
seleccionar o efeito e a sua cor;
redimensionar o boto;
personalizar o boto com sons e imagens.
58
Painel Rolante
Um painel permite mostrar texto a deslocar-se, na
horizontal, no ecr. Em Propriedades do painel rolante
possvel digitar o texto, indicara sua direco, velocidade e
comportamento, o tamanho, as repeties e a cor do
fundo.
59
Transio de pgina
Este comando, que se pode encontrar no menu FORMATAR Transies de
pgina, permite escolher efeitos de transio para os seguintes eventos:
Ao entrar na pgina, Ao sair da pgina, Ao entrar no site e Ao sair do
site.
Para retirar estas transies, escolher a opo Sem efeitos em Efeito de
transio.
60

FrontPage
Publicao
61
Publicao das pginas num

servidor Web
Para publicar um site, necessrio encontrar uma empresa
fornecedora de acesso Internet (ISP) que guarde e disponibilize o
site. Para que fiquem operacionais algumas funcionalidades, como os
formulrios, este fornecedor dever possuir as extenses do
FrontPage activas. Para publicar pginas de um Web site, escolher
FICHEIRO Publicar destino. De seguida, inserir o destino de
publicao, que pode ser um servidor de HTTP ou de FTP, escolher as
pginas a publicar e premir Publicar.
62
Publicao das pginas num

servidor Web
Por fim, clicar em Publicar Web site
63
Gesto e actualizao do
contedo de um site
Antes e depois de publicar o site boa
prtica rever todos os relatrios para
detectar problemas a resolver.
Se se pretender verificar as hiperligaes
do site, escolher as opes de verificao.
Ao premir o boto Iniciar, o FrontPage abre
um relatrio onde se podem detectar todos
os problemas com hiperligaes.
64
Gesto e actualizao do
contedo de um site
Sempre que se efectuarem alteraes a algumas das
pginas do site, deve
proceder-se novamente sua publicao. Para actualizar
as definies do Web site, usar FERRAMENTAS
Definies do site.
Pgina. 65

Front Page

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Front Page

Caricato da

Copyright:

Formati disponibili

Mdulo 3 - Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

7 - Criao de Pginas Web

7 Criao de Pginas Web

Programao pginas Web

7 Criao de Pginas Web

Editores de pgina Web

7 Criao de Pginas Web

7 Criao de Pginas Web

1. O Macromedia Studio MX2004 with Flash Profissional um

7 Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

Criao de Pginas Web

7 Criao de Pginas Web

Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

7 - Criao de Pginas Web

7 Criao de Pginas Web

Criao de um Web Site

7 Criao de Pginas Web

Criao de um Web Site

7 - Criao de Pginas Web

7 Criao de Pginas Web

Gesto de um Web Site

gesto de tarefas e ficheiros;

A gesto de tarefas e ficheiros permite atribuir

7 Criao de Pginas Web

Gesto de um Web Site

7 Criao de Pginas Web

Gesto de um Web Site

7 Criao de Pginas Web

Gesto de um Web Site

7 - Criao de Pginas Web

7 Criao de Pginas Web

Clicar no boto Novo na barra de ferramentas padro e premir Pgina.

7 Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

7 - Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

As diferenas so visveis, por exemplo, na altura

7 Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

7 Criao de Pginas Web

uma imagem de fundo e aplicar-lhe marca de gua;

7 Criao de Pginas Web

7 Criao de Pginas Web

Adio de som de fundo

Por fim, premir OK.

7 Criao de Pginas Web