Manual UFCDS 0152 e 0153 PDF

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP
DELEGAO REGIONAL DO NORTE

CENTRO DE EMPREGO E FORMAO PROFISSIONAL DE VIANA DO CASTELO-SERVIO
CASTELO
DE FORMAO PROFISSIONAL
MDULOS
UFCD 0152 Estrutura de um Stio para Internet

UFCD 0153 Finalizao de um stio para
Internet
REFERENCIAL
Referencial 213006 - Tcnico/a de Multimdia,, Nvel 4
Formador: Paulo Garrido
Data Incio
Data Fim
Durao
24/04/2013
20/05/2013
50 Horas

CASTELO
Barcelos

CASTELO
ndice
Stio Para Internet ................................................................................................
................................
........................................................ 1
Definio ................................................................................................................................
................................
..................................... 1
Organograma ................................................................................................
................................
............................................................... 1
Pastas e Ficheiros ................................................................................................
................................
........................................................ 2
Esquemas de navegao ................................................................................................
................................
.............................................. 3
Linear ................................................................
................................................................................................
.......................................... 3
rvore................................................................
................................................................................................
.......................................... 3
Estrela ................................................................
................................................................................................
.......................................... 4
Mista ................................................................
................................................................................................
............................................ 5
No Linear ................................................................................................................................
................................
................................... 5
Ligaes entre ecrs ................................................................................................
................................
.................................................... 6
Coerncia e funcionalidade das ligaes ................................................................
..................................................... 6
A Interface ................................................................................................................................
................................
................................... 7
Design................................................................
................................................................................................
.......................................... 7
Cores................................................................
................................................................................................
............................................ 8
Textos ................................................................
................................................................................................
.......................................... 8
Imagens ................................................................................................................................
................................
....................................... 9
Outros ................................................................
................................................................................................
.......................................... 9
Os dez maiores
res erros em Web Design ................................................................
...................................................... 10
Tipos de Pginas................................................................................................
................................
........................................................ 12
Editor de Pginas Web Weebly ................................................................
.............................................................. 13
Escolha um Tema ................................................................................................
................................
...................................................... 14
Adicionar Elementos ................................................................................................
................................
................................................. 16
Ttulo ................................................................
................................................................................................
........................................ 16
Pargrafo ................................................................................................................................
................................
................................ 16
Pargrafo com ttulo ................................................................................................
................................
............................................ 16
Imagem ................................................................................................................................
................................
.................................... 17
Pargrafo com Imagem ................................................................................................
....................................... 17
Colunas / Mltiplas Colunas................................................................
.............................................................. 17
Divisor ................................................................................................................................
................................
..................................... 17
Adicionar Pgina ................................................................................................
................................
.................................................. 17
Adicionando Editores................................
................................................................................................
.......................................... 17
Formulrio de Contato ................................................................................................
................................
........................................ 18
Galeria de Imagens ................................................................................................
................................
.............................................. 18
Slides ................................................................................................................................
................................
....................................... 18
Modificar o Desenho da Pgina................................................................
........................................................ 18
Como Modificar: ................................................................................................
................................
................................................... 18
Primeiros elementos: Adicionar texto ao site ................................................................
............................................ 19
Primeiros elementos: adicionar imagens a um site ................................................................
................................... 21
Colocar elemento colunas ................................................................................................
................................
......................................... 26
Criar mais pginas para o seu site ................................................................
............................................................. 27
Criar um link de navegao para outro site ................................................................
............................................... 30
Mudar Temas e editar Fontes ................................................................................................
.................................... 31
Editar o cabealho ................................................................................................
................................
..................................................... 34

CASTELO
Links de Texto ................................................................................................

................................
........................................................... 37
Links em Imagens ................................................................................................
................................
..................................................... 40
O elemento de boto ................................................................................................
................................
.................................................. 43
Criar um Slideshow Imagem ................................................................................................
..................................... 45
Utilizar o Leitor de Vdeo ................................................................................................
................................
......................................... 48
Utilizar o Audio Player ................................................................................................
................................
............................................. 50
Elemento de vdeo YouTube ................................................................................................
..................................... 51
Iniciar um novo blog ................................................................................................
................................
................................................. 52
Criar um Formulrio de contacto bsico ................................................................
................................................... 56
Publicar o seu Site ................................................................................................
................................
..................................................... 58

CASTELO
ndice Imagens
Imagem 1 - Organograma ................................................................................................
................................
............................................... 2
Imagem 2 - Pastas ................................................................................................
................................
........................................................... 2
Imagem 3 - Ficheiros................................................................................................
................................
....................................................... 2
Imagem 4 - Estrutura Linear ................................................................................................
................................
........................................... 3
Imagem 5 - Estrutura em rvore................................................................................................
..................................... 4
Imagem 6 - Estrutura em estrela ................................................................................................
..................................... 4
Imagem 7 - Estrutura Mista ................................................................................................
................................
............................................. 5
Imagem 8 - Ligaes entre ecrs ................................................................................................
..................................... 6
Imagem 9 - Escolha do tema ................................................................................................
................................
......................................... 14

CASTELO
Stio Para Internet

Uma pgina web, tambm conhecida pelo no ingls webpage, uma "pgina" na world wide
web, geralmente em formato HTML e com ligaes de hipertexto que permitem a navegao
de uma pgina, ou seco, para outra. As pginas web usam com frequncia ficheiros
grficos associados
para
fins
de
ilustrao,
tambm
estes
ficheiros
podem
ser ligaes clicveis. Uma pgina web apresentada com recurso a um navegador,
ou browser, e pode ser construda por forma a recorrer a applets (subprogramas que correm
dentro da pgina), que muitas vezes fornecem grficos em movimento, interao com o
utilizador e som.
difcil conseguir uma receita mgica capaz de assegurar que um Web Site v agradar a todos
os utilizadores. Existem contudo, algumas orientaes e princpios, que podem contribuir para
a conceo de Web Sites
ites eficazes.
Definio
Tema:: identificao do assunto e da ideia principal do site.
Objetivos:: identificao da funo que o site vai desempenhar. Pretende-se
Pretende
dar resposta a
questo: para qu? Como em qualquer projeto temos de ter em mente determinados objetivos
a atingir.
Destinatrios:: Identificao e caracterizao da "audincia" (utilizadores), que idade, que
experincia possuem, porque razes podem visitar o site. Pretende-se
Pretende se dar resposta questo:
para quem? Deve fazer-se
se com que os visitantes da nossa pgina no se sintam defraudados,
def
para tal a pgina deve conter contedo significativo. Temos de ter conscincia que quem visita
a nossa pgina, procura alguma informao. fundamental que o visitante localize essa
informao. Se a pgina no a possuir, deve orientar no sentido de ser localizada.
Organograma
Uma vez conhecidos os objetivos
objetivos e a audincia da pgina, altura de ver como vamos
apresentar a informao. Criamos ento um diagrama com a estrutura das pginas,
agrupadas por tpicos.

CASTELO
Imagem 1 - Organograma
Pastas e Ficheiros
Depois de termos as pginas construdas, devemos guard-las
guard las em pastas, por tpicos.
Uma pasta um stio onde pode armazenar ficheiros.
Por exemplo criamos uma pasta para todas as imagens, outra para documentos, etc. Podem
conter ficheiros, mas tambm podem conter outras pastas (subpastas).
Imagem 3 - Ficheiros
Imagem 2 - Pastas

CASTELO
Esquemas de navegao
A estrutura deve permitir visualizar de forma fcil e clara, os contedos de um conjunto de
pginas Web. Uma estrutura deficiente, pode produzir no espectador a sensao de estar
perdido e incapacidade de encontrar a informao procurada, o que conduzir ao abandono da
pgina.
A estrutura deve dar uma ideia geral
geral da organizao da informao e consequentemente situar
melhor os utilizadores.
es. Uma boa estrutura, facilita a navegao, porque requer menos esforo
cognitivo e ajuda a uma melhor assimilao da informao.
A estruturao da informao pode depender muito do contedo do site, das finalidades e do
tipo de utilizadores (deficincias, experincia, etc.)
So vrias as estruturas para organizao da apresentao.
A seguir apresentam-se
se algumas:
Linear
Este tipo de organizao a forma que tradicionalmente tem sido usada, desde as inscries
em pedra, at ao vdeo dos nossos dias.
O hipertexto/hipermedia intrinsecamente no linear, o que no sinnimo de incapacidade
para suportar a sequencialidade. A informao
informao linear est organizada de forma a que, para ser
recuperada, no necessita referncias a si mesma ou outras informaes externas. S existem
duas possibilidades de navegao: para a frente ou para trs. perfeitamente fivel, mas
monotonamente previsvel,l, seguindo a lgica tradicional da transmisso da informao.
Imagem 4 - Estrutura Linear
rvore
Este tipo de estrutura tambm bastante familiar. Esta estrutura simples a base da
classificao, da organizao administrativa
administrativa ou das rvores genealgicas. A organizao do
contedo, na base hipertexto faz-se
faz se de forma hierrquica, com a informao mais geral no
3

CASTELO
topo, e a mais detalhada, em nveis mais baixos, submetida mais geral. Todos os ns
descendem de uma raiz comum. De cada n podem sair mltiplas ligaes para outros ns de
nvel inferior na hierarquia.
Imagem 5 - Estrutura em rvore
A organizao hierrquica resultante, ajuda o utilizador a criar um modelo mental coerente da

base da informao.
Estrela
Estas estruturas caracterizam-se
caracterizam se por possurem um n central e principal, e um conjunto de
ns ligados a este. A passagem de um n a outro requer sempre o regresso ao "local central".
Adapta-se
se a contedos, onde, por exemplo, existe um tpico principal, do qual fazem parte
vrios sub-tpicos.
tpicos. cones nesse n principal, podem estabelecer ligaes a contedos mais
especficos desse assunto,
o, regressando de novo ao local central para o estabelecimento de
uma nova ligao.
Imagem 6 - Estrutura em estrela

CASTELO
Mista
O diagrama mostra um tnel colocado numa estrutura de roda. Isto ,, o utilizador chega a
uma pgina (de uma roda) que o incio de uma sequncia que voc gostaria que ele
visitasse (o tnel).
Poder at combinar sites distintos num esquema de navegao mista. Considere um site
sobre desporto que tem estrutura de roda ou cadeias
eias de rodas. Na seo sobre tnis,
t
h um
link para o site de uma escolinha de tnis
t nis que tem estrutura de tnel, apresentando a escola
e no final, um formulrio de inscrio. Assim combina os sites estrategicamente.
Imagem 7 - Estrutura Mista
No Linear

CASTELO
Ligaes entre ecrs

Uma etapa importante na conceo do Web site a conceo do sistema de navegao. um
componente da interface, muito dependente da estruturao da informao e constitudo por
todas as ligaes e hiperligaes. o sistema de navegao que permite mover-nos
move
atravs
das diferentes pginas, criando as condies e estilos de interatividade.
Imagem 8 - Ligaes entre ecrs
Coerncia e funcionalidade das ligaes

Os sistemas de navegao podem ser constitudos por:
Sequncias utilizadas
lizadas para ir para a pgina seguinte e anterior, tambm
tambm utilizadas pelos
browsers.
Barras de navegao (botes ou menus), podendo ser constitudas por itens de texto,
itens grficos, ou as duas coisas. Contm apenas as ligaes principais. As barras de
navegao
avegao podem estar sempre presentes em todas as pginas, estar apenas na
principal, ou nos nveis fundamentais.
As barras ou menus no devem ser muito extensas, isto , no devem possuir

demasiadas opes.
Ligaes de deslocao para o incio e fim de pgina,

pgina, no caso desta necessitar de barra
de deslocao vertical.
Ligao de deslocao, em todas as pginas, para a pgina principal.
Existem outras estruturas de navegao que se podem usar, como os ndices,

6

CASTELO
formulrios de pesquisa, mapas ou esquemas do site, que podem ser utilizadas para
que o utilizador recupere rapidamente a informao e no se desoriente no site.
Depois de concebido o sistema de navegao, devem ser testados todas as ligaes e
verificar se funcionam como se esperava. Verificar
Veri
que todas as ligaes fazem sentido, isto
, existem por uma razo lgica. No colocar
colo
ligaes que conduzam a mensagens de erro
(404 File Not Found). Evitar estabelecer ligaes que conduzam a pginas em construo.
No colocar a pgina na Internet sem tudo
t
estar funcional.
Deve convidar algum, outra pessoa (ou pessoas) para fazer o teste da funcionalidade,
verificar as dificuldades encontradas, a correo ortogrfica, e se tudo funcionar
corretamente considera-se
se o Web site validado.
A Interface
O desenho
ho visual da interface, descrevendo as ferramentas que o utilizador possui para
aceder e navegar ao longo do documento hipermdia,, consiste nos elementos grficos,
como a organizao do ecr, a apresentao da informao e os comandos do ecr.
A sua conceo
o deve obedecer a alguns princpios da comunicao visual, tendo em conta
fatores de perceo,
o, legibilidade, unidade organizacional, cdigos de cor e estruturas de
acesso informao.
Conseguir assim, boas ideias para o desenho de interfaces algo que se
s reveste de certa
complexidade, pois so vrios os aspetos a ter em conta.
O que se pretende com uma boa interface tornar a interao do homem com o documento
hipermdia,, fcil, agradvel, intuitiva, numa palavra amigvel -.
Design
Frame lateral esquerda sempre presente de modo que o utilizador no se sinta
perdido e possa em qualquer momento alterar a sua navegao;
Separadores entre as imagens;
Setas personalizadas do mesmo padro;
Cores com tnues diferentes entre o menu esquerdo e as pginas do lado direito da
frame;

CASTELO
Msica apenas com duas repeties para no maar o utilizador e colocada na

pgina esquerda da frame para que possa ser ouvida at ao fim.
Cores
Fundos em tons claros;
Letras em tons escuros e contrastantes (preto ou azul) com o fundo;
A utilizao de fundos de pginas com muitos grficos, imagens animadas ou cores
muito berrantes podem funcionar como dispersantes, podendo confundir o utilizador e
tornar difcil a leitura do texto
texto que se encontra sobre o background.
importante que se crie um ambiente harmonioso entre as cores utilizadas nas fontes
das letras e a cor utilizada no background da pgina. Ateno que o uso de cores
claras (branco, por exemplo) em backgrounds escuros
escuros impossibilita ao utilizador a
impresso do texto, pois o branco das letras no vai aparecer na impresso de uma
folha branca.
Logotipo em cada pgina com uma cor que realce em relao cor do fundo;
Separador numa pgina entre os diferentes temas ou assuntos
assuntos (em tom concordante
com o fundo);
Ttulo de cada pgina em tom contrastante com o fundo e a cor do restante texto.
Textos
Em fonte Verdana (com a alternativa Arial) porque no tm serifa, o que facilita a
leitura;
Os ttulos podem ser em Times ou outro tipo de letra mais desenhada (com ou sem
serifa);
Os textos nunca so sublinhados para que o utilizador no confunda com uma
hiperligao.
Evitar a utilizao de texto cintilante, animao s por si, desviam a ateno do
utilizador daquilo que essencial
esse
para o acessrio.

CASTELO
Imagens
Nas imagens dever proceder-se
proceder se introduo de uma descrio textual que
identifique a imagem.
Numa pgina WWW apenas se podem utilizar imagens com formato .gif ou .jpg, sendo
o primeiro geralmente utilizado para ilustraes
ilustraes e o segundo para fotos.
Manter os ficheiros das imagens com dimenses reduzidas por forma a manter o
mnimo tempo possvel para o carregamento da pgina.
Uma imagem que apoia um texto (mtodo aconselhvel para ajudar a compreenso
do texto) deve aparecer do lado direito, para que o utilizador comece por ler o texto.
A consistncia, a nvel de imagens, do grafismo e de cones de navegao utilizados,

ao longo de todo o site importante para a sua identificao.
Os cones de navegao devero ser bvios, se suscitarem dvidas prefervel

substitu-los
los por texto, ou acompanh-los
acompanh
por texto.
Outros
O site pode ter um formulrio para que os utilizadores possam: enviar uma mensagem
ao autor do site; escrever algumas opinies sobre um tema pr-definido;
pr definido; responder a
um questionrio sobre um tema;
O site pode ter um frum com um tema pertinente;
O site deve ter um pesquisador interno para facilitar a pesquisa;
A pgina do lado esquerdo da frame, ou shared border (o menu) deve estar totalmente
observvel, deste
ste modo, evita-se
evita se de ter a barra de deslocamento vertical;
A pgina do lado direito da frame (a primeira a aparecer) deve estar 90% observvel.
Ao deslocar para baixo a barra de navegao v-se
v se informaes complementares, tais
como o contador ou a data;
O site dever ter um contador na pgina principal para informar o webmaster e os
utilizadores da frequncia e quantidade de utilizadores que a consultam;
Inserir uma data de produo em cada pgina de modo a servir de indicador sobre a
atualidade da informao
o nela contida;
9

CASTELO
No final da pgina inicial dever estar visvel o contacto com ligao direta ao correio
eletrnico do responsvel pela produo do site.
Evitar finais de pginas das quais no seja possvel sair. As barras de navegao
devem surgir no final
nal de todas as pginas permitindo redirecionar o utilizador para
outras pginas, nomeadamente para a pgina inicial.
Os dez maiores erros em Web Design

Utilizao de quadros- Uma pgina dividida em quadros muito confusa para os utilizadores,
uma vez que os quadros vo contra o modelo fundamental de uma pgina web. No se pode
ao mesmo tempo marcar a pgina corrente e voltar a esta, os URLs param de trabalhar e as
impresses tornam-se
se difceis. A previsibilidade da reao dos utilizadores deixa de fazer
sentido quando estes no sabem que informao ser disponibilizada quando clicam num link.
Utilizao gratuita da tecnologia mais avanadaavanada No se deve atrair os utilizadores
utilizador para um
site, fazendo meno de que utiliza a ltima tecnologia web. Pode atrair alguns fanticos pela
informtica, mas a maioria dos utilizadores prestam mais ateno aos contedos e
possibilidade do site oferecer um bom servio.
Utilizar a melhor e ltima tecnologia mesmo antes de ser lanada no mercado ir certamente
desencorajar os utilizadores: se os seus sistemas forem abaixo enquanto visitam o site, podepode
se apostar que muitos deles no voltaro a consultar o site. A no ser que se comercialize
produtos
rodutos ou servios na net, torna-se
torna se mais favorvel aguardar at que se obtenha experincia
relativamente forma mais apropriada de utilizar essas tcnicas. Quando apareceu o desktop
as pessoas colocaram vinte fontes nos seus documentos, logo h que evitar
evita que acontea uma
situao similar relativamente web.
Texto, marcas e constantes animaes em movimentomovimento Nunca se deve incluir numa pgina
elementos que se movam incessantemente. As imagens em movimento tm um efeito nefasto
na viso dos humanos. A pgina web deve dar ao utilizador alguma paz e serenidade para que
este possa efetivamente ler o texto.
URLs complexas- As URLs nunca devem estar expostas no interface do utilizador,
previsvel que os utilizadores tentem descodificar as URLs das pginas para perceber a
estrutura do site. Os utilizadores tomam esta atitude devido grande falta de apoio na
navegao e sentido de orientao no browser corrente. Ento, a URL deve conter diretorias
de leitura acessvel aos utilizadores e nomes que reflitam a natureza da informao contida no
site.
10

CASTELO
Pginas solitrias- Assegurar que todas as pginas incluem uma clara indicao
indica
de qual o
website a que pertencem, uma vez que os utilizadores podem aceder a pginas diretamente,
sem ter de passar pela pgina inicial. Pela mesma razo, todas as pginas devero ter um link
para a pgina inicial, bem como alguma indicao sobre a sua
sua localizao dentro da estrutura
do site.
Pginas com longos textos corridoscorridos Apenas 10% dos utilizadores, acedem informao
que est disponvel para alm da que est visvel no ecr quando surge a pgina. Todos os
contedos importantes e opes de navegao
navegao devem estar no topo da pgina.
Falta de suporte navegao - Nunca se deve assumir que os utilizadores sabem tanto
acerca do site como o designer. Eles tm sempre dificuldade em encontrar informao, logo
necessitam de suporte no que diz respeito sua estrutura e localizao.
Comear o design com uma boa compreenso da estrutura espacial da informao e
comunicar explicitamente essa estrutura ao utilizador. Disponibilizar o mapa do site para que os
utilizadores saibam onde esto e para onde se podem
podem encaminhar. necessrio, tambm, um
bom motor de busca, uma vez que o melhor de navegao nunca suficiente.
Cores no Standard nos Links - Os links que no tenham sido utilizados devem ser azuis; os
links para pginas que tenham sido anteriormente visitadas devem ser prpura ou vermelhos.
No se deve misturar estas cores, uma vez que a possibilidade de perceber quais os links que
j foram utilizados uma das poucas ajudas para a navegao e standard na maioria dos
browsers.. A consistncia a chave para ensinar aos utilizadores o significado das cores dos
links.
Informao desatualizada- necessrio contratar um jardineiro web para fazer parte da
equipa, torna-se
se necessrio que algum retire as ervas daninhas e plante novamente flores
enquanto o website se altera, mas a maioria das pessoas preferem criar novos contedos em
detrimento da manuteno do site. Na prtica, a manuteno do site uma forma barata de
realar o contedo do website uma vez que muitas das pginas antigas mantm a sua
relevncia e devem ter um link para novas pginas. Claro que algumas pginas devero ser
totalmente removidas do server uma vez que se tornam obsoletas.
Downloads demorados- Este erro referido em ltimo lugar porque muitas pessoas j tm
conhecimento sobre o mesmo; e no por ser menos importante. As premissas tradicionais
11

CASTELO
indicam um mximo de resposta de10 segundos at que os utilizadores percam interesse. Na

web, os utilizadores tm sido treinados para suportar
suportar tanto sofrimento que se torna aceitvel
aumentar esse limite para 15 segundos nalgumas pginas.
Tipos de Pginas
Pginas Pessoais
Objetivos: partilhar informao pessoal
Audincia: alunos, colegas, amigos, etc.
Pginas Comerciais
Objetivos: Proporcionar novos negcios, vender produtos, fornecer informaes,
etc.
Audincia: clientes, etc.
Pginas Informativas
Objetivos: transmitir informaes
Audincia: pblico em geral
12

CENTRO DE EMPREGO E FORMAO PROFISSIONAL DE VIANA DO CASTELOCASTELO
SERVIO DE FORMAO PROFISSIONAL
Editor de Pginas Web Weebly

O Weebly um servio de criao de sites em que qualquer pessoa pode fazer um
site de forma gratuita, sem ter necessidade de aprender HTML.. Tudo feito online,
em portugus, sem ser necessrio a instalao de nenhum software. O processo de
criar um site no Weebly est bastante facilitado, tudo feito com operaes simples de
arrastar elementos (disponveis numa barra de ferramentas) e soltsolt-los em cima do
layout do site.
Criar uma conta no Weebly (http://www.weebly.com/?lang=pt):
1. Introduza o
seu nome
2. Introduza o
seu email
3. Introduza uma
password
Escolher um ttulo para o Website e o tipo de Website.
13

Escolher o endereo do seu Website online.

Deve utilizar um sub-domnio
sub domnio do Weebly uma vez que gratuito.
Escolha um Tema
O primeiro passo na criao de um site escolher um tema. Tem mais de uma
centena de temas para escolher atravs da pgina Escolher um tema.
Imagem 9 - Escolha do tema
14

Clique com o boto direito sobre o tema que pretende para selecion-lo.
selecion
A qualquer
altura poder facilmente mudar o tema.
tema
Depois de escolher um tema poder dar um ttulo ao seu site. Se no tem um ttulo em
mente, basta pensar num
um ttulo temporrio, bem como o tema, o ttulo pode ser
facilmente alterado mais tarde.
De seguida, pode escolher o endereo do seu site (tambm chamado de domnio). Isto
no particularmente
icularmente importante at que
q
tenha terminado o seu site.
site Se ainda no
sabe qual o domnio que deseja usar,
usar a forma mais simples selecionar um
subdomnio gratuito de Weebly.com como primeira opo. Tal como o tema e o ttulo,
esta mais uma parte do site que poder alterar.
15

Aps terminar a configurao inicial, est pronto para comear a criar o seu site!
Adicionar Elementos
lementos
O Weebly disponibiliza muitos recursos para a criao de sites, nele existe uma barra
(semelhante ao Office) onde esto posicionados os elementos que podem ser
includos no corpo do site. Alguns dos elementos que podem ser includos so:
Ttulo
Como o nome prprio diz apenas um cone para escrever um
ttulo sem pargrafo,
par
podendo usar diversas ferramentas de edio.
Elemento > Bsico > cone Titulo
Pargrafo
um cone cujo o objetivo somente escrever um complemento ou
algo que no necessite de um Titulo, podendo utilizar ferramentas
de edio.
Elementos >Bsico > cone Paragrafo
Pargrafo com ttulo

Serve para escrever textos com Titulo, dos mais variados assuntos,
possui ferramentas que possibilitam colocar
coloca o seu texto em
Negrito, Itlico, alm
al
de poder alterar o tipo de escrita (Fonte) e o
tamanho!
Elementos > Bsico > cone Pargrafo com Ttulo.
16

Imagem
Serve apenas para adicionar uma nica imagem solitria ao site,
muitas vezes a mesma centrada,, possuindo a capacidade de
aumentar ou diminuir o tamanho da imagem, caso a imagem no
seja um Gif, pois se for o efeito de animao cancelado, tem a
possibilidade de adicionar alguns efeitos como Antique (imagem
velha/Amarelada), preto
pret e branco, queimada
da entre outros.
outros
Elementos > Bsico > cone Imagem
Pargrafo com Imagem
No passa de uma juno do Pargrafo
Par
com Titulo e Imagem, onde
poder escrever como no Pargrafo com Titulo,, incluindo uma
imagem ao lado da escrita, e podendo utilizar o efeito de ambos
os cones .
Elementos > Bsico > cone Paragrafo com Imagem
Colunas / Mltiplas Colunas
Permite separar
separa a pgina verticalmente, onde pode
colocar vrios cones nessas separaes, pode colocar elementos
diferentes como imagem, texto e vdeo.
Elementos >Bsico > cone Mltiplas Colunas
Divisor
Como o nome diz, um divisor, porm
m diferente das
da Colunas,
s divide a pgina
p
horizontalmente com 1 trao.
Elementos > Mais > Divisor
Diviso
Adicionar Pgina
o Local/Forma onde pode acrescentar pginas ao seu site, definindo Nome, a ordem
que ficar no menu de pginas,
ginas, entre outras caractersticas.
possvel tambm excluir a pgina,
p
porm ao excluir uma pgina
gina perde todo
o contedo localizado na mesma!
Adicionando Editores
a forma de convidar colaboradores para o seu site, porm vai ter total acesso
podendo, apagarr qualquer coisa inclusive pginas. necessrio para convidar um
Editor que o mesmo possua um registo e o e-mail que utiliza para acesso
acess ao Weebly,
assim basta ir a Editores no canto superior do ecr, prximo de Elementos e Paginas e
convidar utilizando o e-mail,
mail, o futuro editor ir receber um email que ao aceitar e
17

efetuar o login ser direcionado para o site no qual tem privilgios para fazer
alteraes. Somente o criador do site poder enviar convite para ser editor do site!
Formulrio de Contato
um cone que permite que os leitores do seu site weebly
enviem diretamente para
o Email do Administrador do
site
dvidas, sugestes ou resposta a perguntas feitas por si
atravs do Formulrio.
O formulrio
totalmente editvel,
ou
seja atravs da programao que simples, possvel decidir o
nomes dos tpicos preenchidos, se so obrigatrios ou no, entre
outras configuraes.
Elementos
ementos > Bsico > cone Formulrio
Formul de Contacto
Galeria de Imagens
o cone
one que possibilita adicionar vrias
vrias imagens, mostrando todas
toda
ao mesmo tempo, como se fosse um quadro, podendo escolher a
forma (quadricular, retangular) entre outras coisas, para adicionar
adici
basta colocar o cone na pgina
gina e clicar no quadro azul e selecionar
as imagens
ns no seu computador.
Elementos > Multimdia > Fotografia Galeria
Slides
semelhante Galeria, porm as suas imagens aparecem
aparece uma a
uma. Possibilita que o criador do site ou editores possam
possa selecionar
que forma
a desejam
deseja para visualizar as imagens,, por menu de nmeros,
ou pelas imagens em miniatura!
Elementos > Multimdia > Apresentao de Slides
Modificar o Desenho da
a Pgina
P
No caso de no ter gostado de nenhum dos temas ou se pretende um exclusivo, isso
possvel. Primeiro deve encontrar um desenho de pgina
p
que possa ser modificado,
pois no so todos. O segundo passo encontrar uma imagem
magem grande, que encaixe
nas propores para cobrir o fundo, procure na internet pois precisar do URL da
mesma.
Como Modificar:
1. Procure uma imagem na internet e uma pgina
p
que possa ser modificada.
2. Escolha Desenho, clique em Editar HTML/ CSS use ctrl+f para abrir o
localizado, assim que abrir procure por background que fica em body, no caso
de no ter um Link frente de background por que a pgina
gina no pode ser
modificada.
3. Ao encontrar o link deve apagar o mesmo que se encontra dentro de (),
( e
coloca o URL da imagem que encontrou na internet dentro dos ( ), a pgina
p
vai
carregar a imagem e o fundo ser alterado.
18

Utilizar HTML
um cone que permite colocar
coloca no site elementos externos, como
animaes, imagens, etc, que se encontram conectados ao "site
dono", assim pode adicionar msicas, chat, ao seu site weebly.
weebly
Elementos > Bsico > Personalizador HTML
Ficheiro
Possibilita que o criador ou editor do site disponibilize imagens,
documentos
e
programas
para
serem
descarregados
pelos utilizadores
tilizadores do site.
Elementos > Multimdia > cone Ficheiro
Primeiros elementos: Adicionar

Adiciona texto ao site
Elementos so objetos que pode utilizar na construo de um site. Todo o texto, fotos,
vdeos e outros so adicionados atravs de elementos. Em seguida so apresentados
alguns desses elementos e a forma que estes funcionam.
Para adicionarr um elemento a um site basta clicar no elemento pretendido e arrast-lo

para a rea da pgina. O elemento mais bsico - o elemento pargrafo / texto:
texto
19

O elemento de texto exatamente o que parece: um elemento para escrever texto.

Para comear a escreve clique no elemento:
Pode escrever uma palavra, uma frase, ou vrios pargrafos em um nico elemento.
Quando escreve, repare na barra cinza na parte superior do elemento. Esta a barra
de ferramentas de texto que permite fazer alteraes bsicas ao
o seu texto. Funciona
como qualquer outro tipo de barra de ferramentas: selecione o texto que deseja alterar
e clique no boto apropriado para fazer essa alterao.
Da esquerda para a direita, poder encontrar os botes de formatao para: negrito,

negrito
itlico, sublinhado , colocar o texto maior ou menor,
meno , mudar a cor, criar um link ,
escolher o alinhamento de todo o texto dentro do elemento, criar listas com
marcadores e numeradas, e remover a formatao. Como j percebeu uma coisa que
no pode fazer mudar o tipo de letra para outro diferente. Para adicionar mais texto a
uma pgina poder continuar a escrever neste mesmo elemento, ou arrastar outro
elemento de pargrafo, ou usar um dos outros elementos do texto:
20

Ttulo: Usado para adicionar ttulos / cabealhos de uma pgina.
Pargrafo w / Ttulo: Um elemento de pargrafo com um lugar para um ttulo

j construdo dentro.
dentro
Pargrafo w / Imagem: Um elemento de pargrafo com um lugar tanto para

um ttulo como para uma imagem construda dentro.
Primeiros elementos: adicionar imagens a um site

Para adicionar imagens ao
o site o processo idntico ao do texto, arrasta o elemento
de imagem para a pgina.
Clique na caixa Imagem de upload para adicionar uma imagem.
21

Vai abrir uma caixa de dilogo que apresenta vrias formas de adicionar uma
imagem. As duas principais opes so: ou upload
upload (ou arrastar) uma imagem do seu
prprio computador ou pesquisar na base de dados do Weebly.
Vamo-nos concentrar na opo de fazer upload de uma imagem do seu prprio

computador. A maneira mais fcil de abordar esta questo arrastar a imagem que
deseja para a caixa "arraste a imagem para aqui."
aqui Pode tambm clicar no boto verde
"Enviar foto" e dar o caminho
inho da imagem.
imagem
O tamanho de uma imagem vai variar aps o upload, mas normalmente assume o
tamanho do elemento.
22

Pode
ode ajustar o tamanho da imagem, clicando e arrastando a caixa que aparece no
canto inferior direito da imagem (precisa clicar sobre a imagem para poder v-la).
Clicando na imagem abre uma caixa de dilogo de configuraes que pode usar para
fazer mais alteraes.
Opes de formatao:
Lightbox : Se ativar, significa que qualquer utilizador que clique na imagem do

seu site ter acesso a uma verso maior da mesma.
23

Ligao : Esta opo transforma a imagem num

n
link.
Espaamento : Faz pequenos ajustes para a quantidade de espao em branco

volta da imagem.
Caption : Permite adicionar

adicio
uma legenda de texto bsico.
Avanado : Permite ajustar (ou ligar / desligar) o limite da imagem.
Editar Imagem:
Editar imagem - abre um editor de imagens simples.
Este editor oferece algumas opes bsicas para a adio de efeitos, permite girar a
imagem em qualquer sentido e tem uma caracterstica que pode cortar partes
indesejadas da imagem.
Exemplo:
24

A opo Cortar coloca uma caixa sobre a parte superior da imagem. Pode
P
clicar sobre
a caixa para arrast-la
la e ajustar os cantos e lados alterando as dimenses.
Uma vez feitas as alteraes clique em OK. No caso de no gostarr das mudanas
clique em Cortar novamente para reajustar ou clique no boto cinza em Cancelar para
sair do editor. Cortada
ortada a imagem para guardar as alteraes clique no boto Salvar no
canto superior direito.
25

Colocar elemento colunas

Quando comear a adicionar elementos a uma pgina, provavelmente vai notar que
eles vai ficando automaticamente na rea de trabalho. primeira vista, isso pode fazer
com que parea que no h maneira de colocar elementos lado a lado. Mas a boa
notcia que o Columns elemento pode ser usado para adicionar at cinco colunas
para uma pgina. Isto permite-lhe
permite
que os elementos tenham lugar certo ao lado do
outro. O Columns elemento arrastado para uma pgina, assim como qualquer outro
elemento.
O elemento comea com duas colunas, mas pode adicionar at cinco atravs da barra
de ferramentas
mentas que aparece quando est posicionada sobre o elemento. Basta clicar
no nmero apropriado.
Pode arrastar os elementos necessrios em cada coluna, e usar a barra azul entre as
colunas para ajustar a largura de cada uma.
um
26

Criar mais pginas para o seu site

Se um utilizador livre ou um assinante de nosso servio Pro, o site pode ter o
nmero de pginas e sub-pginas
pginas necessrio.
Para criar uma nova pgina to simples como ir ao separador Pginas e clicar no
boto Adicionar Pgina.
H uma opo para adicionar uma pgina padro

padro ou adicionar um blog. Clicando no
boto Adicionar pgina adiciona uma nova pgina sua lista.
27

Opes de configurao das pginas:

Editar a pgina (vaii para a rea de elementos)

Copie a pgina para usar como base para uma nova pgina
Excluir a Pgina
Mude o nome da Pgina
Ocultar a pgina a partir do Menu de navegao. Se esta for desmarcada a
pgina acessvel via de navegao do site. Se a caixa estiver marcada, ento
a pgina vai ser escondida na navegao (embora possa criar os seus prprios
links para pginas escondidas)
Proteger com senha nesta pgina, o que requer uma assinatura para o nosso
servio Pro
Link da pgina para um site externo (criando um link de navegao
navegao que leva a
outro site).
Ajuste as configuraes avanadas.
As configuraes
guraes avanadas de cada pgina so teis para melhorar Search Engine
Optimization do seu site. Podemos adicionar vrias pginas ao site (clicando em
Adicionar pgina, ir adicionar outra
outr pgina e salve as alteraes pgina na qual
estava a trabalhar):
28

Poder reorganizar a ordem das pginas clicando e arrastando-as

arrastando s para cima e para
baixo na lista. Ao arrastar uma pgina para o topo da lista far com que essa pgina
seja a principal,, que indicado pelo cone de casa. A pgina principal pode ter o nome
que pretende. Vamos criar uma sub-pgina,
sub
arrastando-a para a direita da nossa
pgina. Sub-pginas
pginas aparecem no menu de navegao do site como parte de um
menu drop-down
down para qualquer pgina que estiver conectado.
conectado
Como j foi referido, para

ara criar uma sub-pgina,
sub
basta arrastar a pgina sob outra
outr
pgina e, em seguida, arraste para a direita at verificar que est ligada pgina
principal atravs de uma linha pontilhada. Poder ter muitas sub-pginas
pginas de uma
pgina.
Agora, o menu de navegao
gao do site inclui linkss para todas as pginas que criou.
criou
Se clicar sobre o link Portfolio com o ponteiro do rato,, um menu drop-down

drop
aparece
com um link para cada uma
a das sub-pginas criadas.
29

Para editar o contedo de uma pgina basta clicar no link no

o menu de navegao ou
no separador Pages, selecione a pgina a partir da lista e clique no boto Editar
Pgina.
Criar
riar um link de navegao para outro site
Existem
stem algumas situaes em que pretende a navegao de uma ligao em outra
outr
pgina por exemplo: pgina do Twitter, um blog, um site conhecido,
conhecido entre outros.
Para criar um link de navegao externo, ou seja, para fora do seu site,
site clique no
separador Pages, Adicionar pgina, e escolha a opo External Link.
D o nome ao link,, este nome o que vai aparecer na navegao. Em seguida, insira
o link completo da
a pgina ou site que pretende e posteriormente, Salvar
configuraes.
30

Qualquer pgina que est diretamente ligada a um site externo ter um cone link
externo adicionado:
Mudar Temas e editar Fontes

Agora que o site j est praticamente definido, um bom momento para decidir qual o
tema a utilizar para o design. Um tema pode ser selecionado a qualquer momento
(seja no incio, no meio ou no final do processo de criao do site).
site) Escolher
scolher um novo
tema no implica apagar ou alterar o contedo do seu site. Para alterar o tema, clique
no separador Design:
A primeira opo a seo "Favoritos", onde so apresentados

os alguns dos temas
favoritos.
Para selecionar o tema pretendido,

pretendido clique sobre ele.
31

Se optar pela seo Todos os Temas no separador Design, ter acesso a todos os
temas. Estes podem ser vistos como um grande grupo ou atravs de diferentes
categorias, como negcios ou casamento.
Quando encontrar um tema que gosta, clique

cl
no boto Preview para previsualizar a
aplicao no seu site.
32

Clique em Usar Tema para aplicar o tema escolhido ao

o seu site, clique em Favoritos
se pretender adicion-lo
lo sua lista de favoritos ou clique em Cancelar continuar a
escolher temas.
33

Depois de selecionar o tema, use a seo Design Options para definir as fontes
padro para esse tema.
Voc pode alterar as fontes para o ttulo do site, pargrafo Ttulos, pargrafo de texto e
para os links. Existe cerca de uma centena de fontes para escolher.
Editar o cabealho
Grande parte dos temas incluem uma rea para uma imagem de cabealho,
cabealho no
entanto poder alterar essa imagem padro. Para comear, clique no boto Editar
imagem:
Para apagar a imagem padro,

pa
clique sobre a imagem e depois no X vermelho no
canto superior direito.
34

Para adicionar uma imagem ao cabealho, clique no boto Adicionar imagem no canto
superior esquerdo.
Agora tem a opo de escolher a imagem pretendida.
Pode ainda utilizar o campo procurar para selecionar uma

ma imagem apropriada para o
seu site.
35

Uma vez selecionada a imagem, pode edit-la.

edit
As imagens podem ser redimensionadas atravs dos crculos orientadores em cada

canto e laterais da imagem.
36

A imagem pode ser arrastada clicando em qualquer lugar e arrastandoarrastando-a.
Utilize as ferramentas fornecidas no topo da pgina, para editar e adicionar

adiciona texto /
efeitos para a imagem.
da imagem, selecione o boto Salvar. Poder

Quando terminar a personalizao da
escolher a opo salvar a imagem em cada pgina do site, apenas na
a pgina editada,
ou selecionar apenas algumas das pginas. Assim, poder ter diferentes cabealhos
nas pginas.
Links de Texto
Para criar um link de texto, primeiro selecione o texto
text no qual pretende efetuar a
ligao.
37

Em seguida, clique no cone "Hiperligao"

"
" na barra de ferramentas de texto.
Na caixa de dilogo link, tem de selecionar o tipo de link que pretende criar: Link para
outra pgina, link no seu site.
Link para uma pgina de outro site. Pode optar por abrir o link numa nova janela.
38

Link para um arquivo oferecendo ao utilizador a possibilidade de fazer download

deste.
Link para um endereo de e-mail.

e
Isso faz com que o programa de email do utilizador
(como o Outlook) seja aberto para que este possa enviar-lhe
lhe uma mensagem.
mensagem
39

Links em Imagens
Para criar um link numa imagem, primeiro clique na imagem na qual pretende efetuar
a hiperligao.
Em seguida, clique na opo hiperligao no canto superior direito da imagem.
40

Na caixa de dilogo de hiperligao,

hiperligao, pode selecionar o tipo de link que pretende criar,
Link para outra pgina no prprio site.
Link para uma pgina em outro site. Pode ainda optar por abrir o link numa nova
janela.
41

Link para um arquivo para que o utilizador possa fazer o download.
Link para um endereo de e-mail.

e
Isso faz com que o programa de email do utilizador
(como o Outlook) seja aberto para que este possa enviar-lhe
enviar lhe uma mensagem.
42

O elemento de boto
O elemento boto permite criar
cri botes que o possam ligar a outras pginas no seu
site, a pginas de outros sites ou arquivos como PDFs e documentos.
Tal como acontece com outro elemento, tem de arrastar o elemento boto para a
pgina.
43

O boto , essencialmente, uma ligao que se destaca por causa do

do seu tamanho e
da sua aparncia. Pode editar o texto do boto.
Pode hiperligar o boto a outro site.
O estilo do boto pode ser alterado

alterad atravs de quatro opes pr-definidas. Cada
boto tem duas cores e dois tamanhos projetados especificamente para o tema
especfico que est a usar.
usar
44

Criar um Slideshow Imagem

O elemento slideshow (disponvel na categoria "Multimdia")
"Multim dia") permite criar uma
apresentao para as imagens.
imagens Para adicionar um slideshow,
how, basta arrastar o
elemento para a pgina.
Tem de escolher qual o estilo de slideshow que deseja. Pode sempre ser alterado
posteriormente.
Posteriormente tem de fazer o upload das imagens.

45

Em seguida, selecione as imagens que pretende.
Dependendo do nmero de imagens selecionadas, pode levar alguns minutos para

carregar.
46

Pode arrastar as imagens para reorden-los,

los, clique no "x" ao lado de cada uma
um para
elimin-las. Para adicionar legenda imagem clique no cone "balo".
Guarde as alteraes e vai ver o novo slideshow na pgina.
Agora pode usar a barra de ferramentas slideshow para fazer alteraes.
47

Utilizar o Leitor de Vdeo

O elemento vdeo permite fazer o upload de vdeos com qualidade (at 1 GB por
vdeo) diretamente para o seu site. O elemento vdeo est disponvel na
n categoria
"Multimdia". Para us-lo,
lo, clique e arraste-o
arraste o para o local desejado na pgina.
Em seguida, basta
ta clicar no player e uma caixa de dilogo ser aberta a partir de onde
pode selecionar um vdeo do seu computador. O Weebly suporta M4V, MPG, MOV,
WMV e outros formatos de vdeo padro.
48

Dependendo do tamanho do vdeo e da velocidade da sua conexo com a internet,

pode demorar at 20 minutos para fazer o upload.
Pode utilizar um nmero ilimitado de vdeos no

o seu site, o nico limite que nenhum
vdeo pode ser maior do que 1 GB.
49

Utilizar o Audio Player

O leitor de udio permite adicionar msica, podcasts, ou outros arquivos de
udio. Este elemento faz parte de nossa Pro Upgrade. O elemento Audio Player est
disponvel na
a categoria "Multimdia",
"Multim
basta arrast-lo
lo para uma pgina.
Depois de adicion-lo pgina,

gina, clique em qualquer lugar do elemento para abrir a
barra de ferramentas de udio. Em seguida, clique em Upload para selecionar um
arquivo de udio.
O arquivo de udio pode demorar alguns minutos para carregar.
50

Elemento de vdeo YouTube

O elemento vdeo do YouTube permite utilizar vdeos publicados no youtube. Esse
elemento pode ser encontrado em Multimdia.
Em seguida, clique em qualquer lugar do elemento para abrir a barra de

ferramentas. Tem de digitar o link direto para
pa o vdeo do YouTube no campo URL.
URL
51

Iniciar um novo blog

Para criar um blog, v para ao separador Pages, clique em Adicionar Pgina e
selecione a opo Page Blog.
Vai adicionar o blog sua lista de pginas.
D um nome ao blog e, em seguida, clique em Editar Pgina para comear a adicionar

contedo.
Um novo blog comea com um post da amostra (que voc pode editar ou apagar) e
uma barra lateral com algum contedo padro que voc pode facilmente mudar.
52

Para criar um novo post para o seu blog, use o boto Novo Post no topo do blog.
O seu blog tem um ttulo e uma rea de contedo. O ttulo deve geralmente ser curto no mais do que uma frase. A rea de contedo inclui um elemento de pargrafo
bsico que voc pode editar ou apagar.
Para adicionar contedo ao blog funciona da mesma forma que a adio de contedo
para uma pgina - basta arrastar os elementos para a rea de trabalho e edit-los.
edit
53

Depois de adicionar o contedo, pode categorizar o post - essas

ssas categorias vo
aparecer na barra lateral, tornando mais fcil para os visitantes encontrar mensagens.
mensagens
Agora pode publicar o post no seu site (tornando-o instantaneamente disponvel) ou

Salvar em Rascunhos para editar / publicar mais tarde.
54

Se salvar o post como rascunho, vai estar acessvel atravs de uma rea de
rascunhos no topo da pgina do blog. Basta clicar no link para o post desta rea
rascunhos para edit-lo
lo e Salvar / Publicar.
Cada novo post publicado aparecer no topo da pgina. Depois de ter adicionado sete
ou oito mensagens pgina, os posts mais antigos sero movidos para fora da pgina
principal.
55

CASTELO
Criar um Formulrio de contacto

conta
bsico
Um formulrio de contacto
to proporciona aos seus utilizadores uma maneira fcil
f
de chegar at
voc. Pode perguntar a um utilizador algo to simples como o nome e endereo de e-mail.
e
As
verses gratuitas podem incluir at cinco campos de formulrio e Pro os utilizadores podem ter
um nmero ilimitado de campos de formulrio. Comece por arrastar o elemento do formulrio
para a pgina.
O formulrio comea com quatro campos padro.
Estes campos so definidos conforme necessrio (ou seja, o destinatrio deve digitar algo no
campo para enviar o formulrio). Para fazer alteraes basta clicar num
um campo e usando a
barra de
ferramentas fazer
56

CASTELO
ajustes. Uma srie de configuraes

uraes podem ser alteradas para cada campo.
Pode facilmente adicionar novos campos ao formulrio, arrastando-os
arrastando os como qualquer outro
elemento. Existem
em campos pr-definidos
pr definidos para nome, endereo postal, endereo e telefone.
Antes de completar o formulrio e publicar o site, pode dar nome e determinar para qual
endereo de e-mail
mail (ou endereos) vo ser enviados os formulrios. Pode
ode inserir mais de um
endereo, separando-os
os por vrgulas.
Note que voc pode encontrar essas configuraes usando o boto Opes de Formulrio, na
parte superior do formulrio.
As respostas ao seu formulrio vo para os endereos de e-mail que introduziu em Opes de

Formulrio.
57

CASTELO
Publicar o seu Site

Agora que adicionou contedo bsico no site, o momento de public-lo. Para isso, basta usar
o boto Publicar no canto superior direito do editor.
Isso far com que uma caixa de verificao seja mostrada para que saiba se o seu site foi
publicado.
58

Manual UFCDS 0152 e 0153 PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual UFCDS 0152 e 0153 PDF

Título original:

Enviado por

Direitos autorais:

Formatos disponíveis

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

DELEGAO REGIONAL DO NORTE

UFCD 0152 Estrutura de um Stio para Internet

Referencial 213006 - Tcnico/a de Multimdia,, Nvel 4

Formador: Paulo Garrido

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Links de Texto ................................................................................................

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Stio Para Internet

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Imagem 4 - Estrutura Linear

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Imagem 5 - Estrutura em rvore

A organizao hierrquica resultante, ajuda o utilizador a criar um modelo mental coerente da

Imagem 6 - Estrutura em estrela

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Imagem 7 - Estrutura Mista

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Ligaes entre ecrs

Imagem 8 - Ligaes entre ecrs

Coerncia e funcionalidade das ligaes

As barras ou menus no devem ser muito extensas, isto , no devem possuir

Ligaes de deslocao para o incio e fim de pgina,

Ligao de deslocao, em todas as pginas, para a pgina principal.

Existem outras estruturas de navegao que se podem usar, como os ndices,

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Msica apenas com duas repeties para no maar o utilizador e colocada na

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

A consistncia, a nvel de imagens, do grafismo e de cones de navegao utilizados,

Os cones de navegao devero ser bvios, se suscitarem dvidas prefervel

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Os dez maiores erros em Web Design

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

indicam um mximo de resposta de10 segundos at que os utilizadores percam interesse. Na

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Editor de Pginas Web Weebly

Criar uma conta no Weebly (http://www.weebly.com/?lang=pt):

Escolher um ttulo para o Website e o tipo de Website.

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Escolher o endereo do seu Website online.

Imagem 9 - Escolha do tema

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Pargrafo com ttulo

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Primeiros elementos: Adicionar

Para adicionarr um elemento a um site basta clicar no elemento pretendido e arrast-lo

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

O elemento de texto exatamente o que parece: um elemento para escrever texto.

Da esquerda para a direita, poder encontrar os botes de formatao para: negrito,

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, IP

Ttulo: Usado para adicionar ttulos / cabealhos de uma pgina.

Pargrafo w / Ttulo: Um elemento de pargrafo com um lugar para um ttulo

Pargrafo w / Imagem: Um elemento de pargrafo com um lugar tanto para