You are on page 1of 63

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP

DELEGAÇÃO REGIONAL DO NORTE


CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

MÓDULOS

UFCD 0152 – Estrutura de um Sítio para Internet

UFCD 0153 – Finalização de um sítio para


Internet

REFERENCIAL

Referencial 213006 - Técnico/a de Multimédia,, Nível 4

Formador: Paulo Garrido

Data Início 24/04/2013


Data Fim 20/05/2013
Duração 50 Horas
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Barcelos
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Índice

Sítio Para Internet ................................................................................................


................................ ........................................................ 1
Definição ................................................................................................................................
................................ ..................................... 1
Organograma ................................................................................................
................................ ............................................................... 1
Pastas e Ficheiros ................................................................................................
................................ ........................................................ 2
Esquemas de navegação ................................................................................................
................................ .............................................. 3
Linear ................................................................
................................................................................................
.......................................... 3
Árvore................................................................
................................................................................................
.......................................... 3
Estrela ................................................................
................................................................................................
.......................................... 4
Mista ................................................................
................................................................................................
............................................ 5
Não Linear ................................................................................................................................
................................ ................................... 5
Ligações entre ecrãs ................................................................................................
................................ .................................................... 6
Coerência e funcionalidade das ligações ................................................................
..................................................... 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 Páginas................................................................................................
................................ ........................................................ 12
Editor de Páginas Web – Weebly ................................................................
.............................................................. 13
Escolha um Tema ................................................................................................
................................ ...................................................... 14
Adicionar Elementos ................................................................................................
................................ ................................................. 16
Título ................................................................
................................................................................................
........................................ 16
Parágrafo ................................................................................................................................
................................ ................................ 16
Parágrafo com título ................................................................................................
................................ ............................................ 16
Imagem ................................................................................................................................
................................ .................................... 17
Parágrafo com Imagem ................................................................................................
....................................... 17
Colunas / Múltiplas Colunas................................................................
.............................................................. 17
Divisor ................................................................................................................................
................................ ..................................... 17
Adicionar Página ................................................................................................
................................ .................................................. 17
Adicionando Editores................................
................................................................................................
.......................................... 17
Formulário de Contato ................................................................................................
................................ ........................................ 18
Galeria de Imagens ................................................................................................
................................ .............................................. 18
Slides ................................................................................................................................
................................ ....................................... 18
Modificar o Desenho da Página................................................................
........................................................ 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 páginas para o seu site ................................................................
............................................................. 27
Criar um link de navegação para outro site ................................................................
............................................... 30
Mudar Temas e editar Fontes ................................................................................................
.................................... 31
Editar o cabeçalho ................................................................................................
................................ ..................................................... 34
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL
Links de Texto ................................................................................................
................................ ........................................................... 37
Links em Imagens ................................................................................................
................................ ..................................................... 40
O elemento de botão ................................................................................................
................................ .................................................. 43
Criar um Slideshow Imagem ................................................................................................
..................................... 45
Utilizar o Leitor de Vídeo ................................................................................................
................................ ......................................... 48
Utilizar o Audio Player ................................................................................................
................................ ............................................. 50
Elemento de vídeo YouTube ................................................................................................
..................................... 51
Iniciar um novo blog ................................................................................................
................................ ................................................. 52
Criar um Formulário de contacto básico ................................................................
................................................... 56
Publicar o seu Site ................................................................................................
................................ ..................................................... 58
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Í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 - Ligações entre ecrãs ................................................................................................
..................................... 6
Imagem 9 - Escolha do tema ................................................................................................
................................ ......................................... 14
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Sítio Para Internet

Uma página web, também conhecida pelo no inglês webpage, é uma "página" na world wide
web, geralmente em formato HTML e com ligações de hipertexto que permitem a navegação
de uma página, ou secção, para outra. As páginas web usam com frequência ficheiros
gráficos associados para fins de ilustração, e também estes ficheiros podem
ser ligações clicáveis. Uma página web é apresentada com recurso a um navegador,
ou browser, e pode ser construída por forma a recorrer a applets (subprogramas que correm
dentro da página), que muitas vezes fornecem gráficos em movimento, interação com o
utilizador e som.
É difícil conseguir uma receita mágica capaz de assegurar que um Web Site vá agradar a todos
os utilizadores. Existem contudo, algumas orientações e princípios, que podem contribuir para
a conceção de Web Sites
ites eficazes.

Definição

Tema:: identificação do assunto e da ideia principal do site.


Objetivos:: identificação da função que o site vai desempenhar. Pretende-se
Pretende dar resposta a
questão: para quê? Como em qualquer projeto temos de ter em mente determinados objetivos
a atingir.
Destinatários:: Identificação e caracterização da "audiência" (utilizadores), que idade, que
experiência possuem, porque razões podem visitar o site. Pretende-se
Pretende se dar resposta à questão:
para quem? Deve fazer-se
se com que os visitantes da nossa página não se sintam defraudados,
def
para tal a página deve conter conteúdo significativo. Temos de ter consciência que quem visita
a nossa página, procura alguma informação. É fundamental que o visitante localize essa
informação. Se a página não a possuir, deve orientar no sentido de ser localizada.

Organograma

Uma vez conhecidos os objetivos


objetivos e a audiência da página, é altura de ver como vamos
apresentar a informação. Criamos então um diagrama com a estrutura das páginas,
agrupadas por tópicos.

1
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Imagem 1 - Organograma

Pastas e Ficheiros

Depois de termos as páginas construídas, devemos guardá-las


guardá las em pastas, por tópicos.
Uma pasta é um “sítio” onde pode armazenar ficheiros.
Por exemplo criamos uma pasta para todas as imagens, outra para documentos, etc. Podem
conter ficheiros, mas também podem conter outras pastas (subpastas).

Imagem 3 - Ficheiros
Imagem 2 - Pastas

2
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Esquemas de navegação

A estrutura deve permitir visualizar de forma fácil e clara, os conteúdos de um conjunto de


páginas Web. Uma estrutura deficiente, pode produzir no espectador a sensação de estar
perdido e incapacidade de encontrar a informação procurada, o que conduzirá ao abandono da
página.
A estrutura deve dar uma ideia geral
geral da organização da informação e consequentemente situar
melhor os utilizadores.
es. Uma boa estrutura, facilita a navegação, porque requer menos esforço
cognitivo e ajuda a uma melhor assimilação da informação.
A estruturação da informação pode depender muito do conteúdo do site, das finalidades e do
tipo de utilizadores (deficiências, experiência, etc.)
São várias as estruturas para organização da apresentação.

A seguir apresentam-se
se algumas:

Linear

Este tipo de organização é a forma que tradicionalmente tem sido usada, desde as inscrições
em pedra, até ao vídeo dos nossos dias.
O hipertexto/hipermedia é intrinsecamente não linear, o que não é sinónimo de incapacidade
para suportar a sequencialidade. A informação
informação linear está organizada de forma a que, para ser
recuperada, não necessita referências a si mesma ou outras informações externas. Só existem
duas possibilidades de navegação: para a frente ou para trás. É perfeitamente fiável, mas
monotonamente previsível,l, seguindo a lógica tradicional da transmissão da informação.

Imagem 4 - Estrutura Linear

Árvore

Este tipo de estrutura é também bastante familiar. Esta estrutura simples é a base da
classificação, da organização administrativa
administrativa ou das árvores genealógicas. A organização do
conteúdo, na base hipertexto faz-se
faz se de forma hierárquica, com a informação mais geral no

3
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL
topo, e a mais detalhada, em níveis mais baixos, submetida à mais geral. Todos os nós
descendem de uma raiz comum. De cada nó podem sair múltiplas ligações para outros nós de
nível inferior na hierarquia.

Imagem 5 - Estrutura em Árvore

A organização hierárquica resultante, ajuda o utilizador a criar um modelo mental coerente da


base da informação.

Estrela

Estas estruturas caracterizam-se


caracterizam se por possuírem um nó central e principal, e um conjunto de
nós ligados a este. A passagem de um nó a outro requer sempre o regresso ao "local central".
Adapta-se
se a conteúdos, onde, por exemplo, existe um tópico principal, do qual fazem parte
vários sub-tópicos.
tópicos. Ícones nesse nó principal, podem estabelecer ligações a conteúdos mais
específicos desse assunto,
o, regressando de novo ao local central para o estabelecimento de
uma nova ligação.

Imagem 6 - Estrutura em estrela

4
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Mista

O diagrama mostra um túnel colocado numa estrutura de roda. Isto é,, o utilizador chega a
uma página (de uma roda) que é o início de uma sequência que você gostaria que ele
visitasse (o túnel).

Poderá até combinar sites distintos num esquema de navegação mista. Considere um site
sobre desporto que tem estrutura de roda ou cadeias
eias de rodas. Na seção sobre ténis,
té há um
link para o site de uma escolinha de ténis
t nis que tem estrutura de túnel, apresentando a escola
e no final, um formulário de inscrição. Assim combina os sites estrategicamente.

Imagem 7 - Estrutura Mista

Não Linear

5
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Ligações entre ecrãs

Uma etapa importante na conceção do Web site é a conceção do sistema de navegação. É um


componente da interface, muito dependente da estruturação da informação e é constituído por
todas as ligações e hiperligações. É o sistema de navegação que permite mover-nos
move através
das diferentes páginas, criando as condições e estilos de interatividade.

Imagem 8 - Ligações entre ecrãs

Coerência e funcionalidade das ligações

Os sistemas de navegação podem ser constituídos por:


 Sequências utilizadas
lizadas para ir para a página seguinte e anterior, também
também utilizadas pelos
browsers.
 Barras de navegação (botões ou menus), podendo ser constituídas por itens de texto,
itens gráficos, ou as duas coisas. Contém apenas as ligações principais. As barras de
navegação
avegação podem estar sempre presentes em todas as páginas, estar apenas na
principal, ou nos níveis fundamentais.
 As barras ou menus não devem ser muito extensas, isto é, não devem possuir
demasiadas opções.
 Ligações de deslocação para o início e fim de página,
página, no caso desta necessitar de barra
de deslocação vertical.
 Ligação de deslocação, em todas as páginas, para a página principal.
 Existem outras estruturas de navegação que se podem usar, como os índices,

6
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL
formulários de pesquisa, mapas ou esquemas do site, que podem ser utilizadas para
que o utilizador recupere rapidamente a informação e não se desoriente no site.

Depois de concebido o sistema de navegação, devem ser testados todas as ligações e


verificar se funcionam como se esperava. Verificar
Veri que todas as ligações fazem sentido, isto
é, existem por uma razão lógica. Não colocar
colo ligações que conduzam a mensagens de erro
(404 File Not Found). Evitar estabelecer ligações que conduzam a páginas em construção.

Não colocar a página na Internet sem tudo


t estar funcional.

Deve convidar alguém, outra pessoa (ou pessoas) para fazer o teste da funcionalidade,
verificar as dificuldades encontradas, a correção ortográfica, 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 hipermédia,, consiste nos elementos gráficos,
como a organização do ecrã, a apresentação da informação e os comandos do ecrã.

A sua conceção
ão deve obedecer a alguns princípios da comunicação visual, tendo em conta
fatores de perceção,
ção, legibilidade, unidade organizacional, códigos de cor e estruturas de
acesso à informação.

Conseguir assim, boas ideias para o desenho de interfaces é algo que se


s reveste de certa
complexidade, pois são vários os aspetos a ter em conta.

O que se pretende com uma boa interface é tornar a interação do homem com o documento
hipermédia,, fácil, agradável, intuitiva, numa palavra – amigável -.

Design

 Frame lateral esquerda sempre presente de modo que o utilizador não se sinta
perdido e possa em qualquer momento alterar a sua navegação;

 Separadores entre as imagens;

 Setas personalizadas do mesmo padrão;

 Cores com ténues diferentes entre o menu esquerdo e as páginas do lado direito da
frame;

7
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL
 Música apenas com duas repetições para não maçar o utilizador e colocada na
página 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 utilização de fundos de páginas com muitos gráficos, imagens animadas ou cores


muito berrantes podem funcionar como dispersantes, podendo confundir o utilizador e
tornar difícil 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 página. Atenção que o uso de cores
claras (branco, por exemplo) em backgrounds escuros
escuros impossibilita ao utilizador a
impressão do texto, pois o branco das letras não vai aparecer na impressão de uma
folha branca.

 Logotipo em cada página com uma cor que realce em relação à cor do fundo;

 Separador numa página entre os diferentes temas ou assuntos


assuntos (em tom concordante
com o fundo);

 Título de cada página em tom contrastante com o fundo e a cor do restante texto.

Textos

 Em fonte Verdana (com a alternativa Arial) porque não têm serifa, o que facilita a
leitura;

 Os títulos podem ser em Times ou outro tipo de letra mais desenhada (com ou sem
serifa);

 Os textos nunca são sublinhados para que o utilizador não confunda com uma
hiperligação.

 Evitar a utilização de texto cintilante, animação só por si, desviam a atenção do


utilizador daquilo que é essencial
esse para o acessório.

8
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL
Imagens

 Nas imagens deverá proceder-se


proceder se à introdução de uma descrição textual que
identifique a imagem.

 Numa página WWW apenas se podem utilizar imagens com formato .gif ou .jpg, sendo
o primeiro geralmente utilizado para ilustrações
ilustrações e o segundo para fotos.

 Manter os ficheiros das imagens com dimensões reduzidas por forma a manter o
mínimo tempo possível para o carregamento da página.

 Uma imagem que apoia um texto (método aconselhável para ajudar a compreensão
do texto) deve aparecer do lado direito, para que o utilizador comece por ler o texto.

 A consistência, a nível de imagens, do grafismo e de ícones de navegação utilizados,


ao longo de todo o site é importante para a sua identificação.

 Os ícones de navegação deverão ser óbvios, se suscitarem dúvidas é preferível


substituí-los
los por texto, ou acompanhá-los
acompanhá por texto.

Outros

 O site pode ter um formulário para que os utilizadores possam: enviar uma mensagem
ao autor do site; escrever algumas opiniões sobre um tema pré-definido;
pré definido; responder a
um questionário sobre um tema;

 O site pode ter um fórum com um tema pertinente;

 O site deve ter um pesquisador interno para facilitar a pesquisa;

 A página do lado esquerdo da frame, ou shared border (o menu) deve estar totalmente
observável, deste
ste modo, evita-se
evita se de ter a barra de deslocamento vertical;

 A página do lado direito da frame (a primeira a aparecer) deve estar 90% observável.
Ao deslocar para baixo a barra de navegação vê-se
vê se informações complementares, tais
como o contador ou a data;

 O site deverá ter um contador na página principal para informar o webmaster e os


utilizadores da frequência e quantidade de utilizadores que a consultam;

 Inserir uma data de produção em cada página de modo a servir de indicador sobre a
atualidade da informação
ção nela contida;

9
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL
 No final da página inicial deverá estar visível o contacto com ligação direta ao correio
eletrónico do responsável pela produção do site.

 Evitar finais de páginas das quais não seja possível sair. As barras de navegação
devem surgir no final
nal de todas as páginas permitindo redirecionar o utilizador para
outras páginas, nomeadamente para a página inicial.

Os dez maiores erros em Web Design

Utilização de quadros- Uma página dividida em quadros é muito confusa para os utilizadores,
uma vez que os quadros vão contra o modelo fundamental de uma página web. Não se pode
ao mesmo tempo marcar a página corrente e voltar a esta, os URL’s param de trabalhar e as
impressões tornam-se
se difíceis. A previsibilidade da reação dos utilizadores deixa de fazer
sentido quando estes não sabem que informação será disponibilizada quando clicam num link.

Utilização gratuita da tecnologia mais avançada-


avançada Não se deve atrair os utilizadores
utilizador para um
site, fazendo menção de que utiliza a última tecnologia web. Pode atrair alguns fanáticos pela
informática, mas a maioria dos utilizadores prestam mais atenção aos conteúdos e à
possibilidade do site oferecer um bom serviço.
Utilizar a melhor e última tecnologia mesmo antes de ser lançada no mercado irá certamente
desencorajar os utilizadores: se os seus sistemas forem abaixo enquanto visitam o site, pode-
pode
se apostar que muitos deles não voltarão a consultar o site. A não ser que se comercialize
produtos
rodutos ou serviços na net, torna-se
torna se mais favorável aguardar até que se obtenha experiência
relativamente à forma mais apropriada de utilizar essas técnicas. Quando apareceu o desktop
as pessoas colocaram vinte fontes nos seus documentos, logo há que evitar
evita que aconteça uma
situação similar relativamente à web.

Texto, marcas e constantes animações em movimento-


movimento Nunca se deve incluir numa página
elementos que se movam incessantemente. As imagens em movimento têm um efeito nefasto
na visão dos humanos. A página web deve dar ao utilizador alguma paz e serenidade para que
este possa efetivamente ler o texto.

URL’s complexas- As URL’s nunca devem estar expostas no interface do utilizador, é


previsível que os utilizadores tentem descodificar as URL’s das páginas para perceber a
estrutura do site. Os utilizadores tomam esta atitude devido à grande falta de apoio na
navegação e sentido de orientação no browser corrente. Então, a URL deve conter diretorias
de leitura acessível aos utilizadores e nomes que reflitam a natureza da informação contida no
site.

10
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Páginas solitárias- Assegurar que todas as páginas incluem uma clara indicação
indica de qual o
website a que pertencem, uma vez que os utilizadores podem aceder a páginas diretamente,
sem ter de passar pela página inicial. Pela mesma razão, todas as páginas deverão ter um link
para a página inicial, bem como alguma indicação sobre a sua
sua localização dentro da estrutura
do site.

Páginas com longos textos corridos-


corridos Apenas 10% dos utilizadores, acedem à informação
que está disponível para além da que está visível no ecrã quando surge a página. Todos os
conteúdos importantes e opções de navegação
navegação devem estar no topo da página.

Falta de suporte à navegação - Nunca se deve assumir que os utilizadores sabem tanto
acerca do site como o designer. Eles têm sempre dificuldade em encontrar informação, logo
necessitam de suporte no que diz respeito à sua estrutura e localização.
Começar o design com uma boa compreensão da estrutura espacial da informação e
comunicar explicitamente essa estrutura ao utilizador. Disponibilizar o mapa do site para que os
utilizadores saibam onde estão e para onde se podem
podem encaminhar. É necessário, também, um
bom motor de busca, uma vez que o melhor de navegação nunca é suficiente.

Cores não Standard nos Links - Os links que não tenham sido utilizados devem ser azuis; os
links para páginas que tenham sido anteriormente visitadas devem ser púrpura ou vermelhos.
Não 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 navegação e é standard na maioria dos
browsers.. A consistência é a chave para ensinar aos utilizadores o significado das cores dos
links.

Informação desatualizada- É necessário contratar um “jardineiro” web para fazer parte da


equipa, torna-se
se necessário que alguém retire as “ervas daninhas” e plante novamente “flores”
enquanto o website se altera, mas a maioria das pessoas preferem criar novos conteúdos em
detrimento da manutenção do site. Na prática, a manutenção do site é uma forma barata de
realçar o conteúdo do website uma vez que muitas das páginas antigas mantém a sua
relevância e devem ter um link para novas páginas. Claro que algumas páginas deverão ser
totalmente removidas do server uma vez que se tornam obsoletas.

Downloads demorados- Este erro é referido em último lugar porque muitas pessoas já têm
conhecimento sobre o mesmo; e não por ser menos importante. As premissas tradicionais

11
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL
indicam um máximo de resposta de10 segundos até que os utilizadores percam interesse. Na
web, os utilizadores têm sido treinados para suportar
suportar tanto sofrimento que se torna aceitável
aumentar esse limite para 15 segundos nalgumas páginas.

Tipos de Páginas

 Páginas Pessoais
 Objetivos: partilhar informação pessoal
 Audiência: alunos, colegas, amigos, etc.

 Páginas Comerciais
 Objetivos: Proporcionar novos negócios, vender produtos, fornecer informações,
etc.
 Audiência: clientes, etc.

 Páginas Informativas
 Objetivos: transmitir informações
 Audiência: público em geral

12
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Editor de Páginas Web – Weebly

O Weebly é um serviço de criação de sites em que qualquer pessoa pode fazer um


site de forma gratuita, sem ter necessidade de aprender HTML.. Tudo é feito online,
em português, sem ser necessário a instalação de nenhum software. O processo de
criar um site no Weebly está bastante facilitado, tudo é feito com operações simples de
arrastar elementos (disponíveis numa barra de ferramentas) e soltá-
soltá-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 título para o Website e o tipo de Website.

13
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL
Escolher o endereço do seu Website online.
Deve utilizar um sub-domínio
sub domínio do Weebly uma vez que é gratuito.

Escolha um Tema

O primeiro passo na criação de um site é escolher um tema. Tem mais de uma


centena de temas para escolher através da página Escolher um tema.

Imagem 9 - Escolha do tema

14
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL
Clique com o botão 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 título ao seu site. Se não tem um título em
mente, basta pensar num
um título temporário, bem como o tema, o título pode ser
facilmente alterado mais tarde.

De seguida, pode escolher o endereço do seu site (também chamado de domínio). Isto
não é particularmente
icularmente importante até que
q tenha terminado o seu site.
site Se ainda não
sabe qual o domínio que deseja usar,
usar a forma mais simples é selecionar um
subdomínio gratuito de Weebly.com como primeira opção. Tal como o tema e o título,
esta é mais uma parte do site que poderá alterar.

15
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Após terminar a configuração inicial, está pronto para começar a criar o seu site!

Adicionar Elementos
lementos

O Weebly disponibiliza muitos recursos para a criação de sites, nele existe uma barra
(semelhante ao Office) onde estão posicionados os elementos que podem ser
incluídos no corpo do site. Alguns dos elementos que podem ser incluídos são:
Título

Como o nome próprio diz é apenas um ícone para escrever um


título sem parágrafo,
pará podendo usar diversas ferramentas de edição.
Elemento > Básico > Ícone Titulo

Parágrafo

É um ícone cujo o objetivo é somente escrever um complemento ou


algo que não necessite de um Titulo, podendo utilizar ferramentas
de edição.
Elementos >Básico > Ícone Paragrafo

Parágrafo com título

Serve para escrever textos com Titulo, dos mais variados assuntos,
possui ferramentas que possibilitam colocar
coloca o seu texto em
Negrito, Itálico, além
al de poder alterar o tipo de escrita (Fonte) e o
tamanho!
Elementos > Básico > Ícone Parágrafo com Título.

16
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Imagem

Serve apenas para adicionar uma única imagem solitária ao site,


muitas vezes a mesma é centrada,, possuindo a capacidade de
aumentar ou diminuir o tamanho da imagem, caso a imagem não
seja um Gif, pois se for o efeito de animação é cancelado, tem a
possibilidade de adicionar alguns efeitos como Antique (imagem
velha/Amarelada), preto
pret e branco, queimadada entre outros.
outros
Elementos > Básico > Ícone Imagem

Parágrafo com Imagem

Não passa de uma junção do Parágrafo


Par com Titulo e Imagem, onde
poderá escrever como no Parágrafo com Titulo,, incluindo uma
imagem ao lado da escrita, e podendo utilizar o efeito de ambos
os ícones .
Elementos > Básico > Ícone Paragrafo com Imagem

Colunas / Múltiplas Colunas

Permite separar
separa a página verticalmente, onde pode
colocar vários ícones nessas separações, pode colocar elementos
diferentes como imagem, texto e vídeo.
Elementos >Básico > Ícone Múltiplas Colunas

Divisor

Como o nome diz, é um divisor, porém m diferente das


da Colunas,
só divide a página
pá horizontalmente com 1 traço.
Elementos > Mais > Divisor
Diviso

Adicionar Página

É o Local/Forma onde pode acrescentar páginas ao seu site, definindo Nome, a ordem
que ficará no menu de páginas,
ginas, entre outras características.
É possível também excluir a página,
p porém ao excluir uma páginagina perde todo
o conteúdo localizado na mesma!

Adicionando Editores

É a forma de convidar colaboradores para o seu site, porém vai ter total acesso
podendo, apagarr qualquer coisa é inclusive páginas. É necessário 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ã, próximo de Elementos e Paginas e
convidar utilizando o e-mail,
mail, o futuro editor irá receber um email que ao aceitar e

17
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL
efetuar o login será direcionado para o site no qual tem privilégios para fazer
alterações. Somente o criador do site poderá enviar convite para ser editor do site!

Formulário de Contato

É um Ícone que permite que os leitores do seu site weebly


enviem diretamente para o Email do Administrador do site
dúvidas, sugestões ou resposta a perguntas feitas por si
através do Formulário. O formulário é totalmente editável, ou
seja através da programação que é simples, é possível decidir o
nomes dos tópicos preenchidos, se são obrigatórios ou não, entre
outras configurações.
Elementos
ementos > Básico > Ícone Formulário
Formulá de Contacto

Galeria de Imagens

É o ícone
one que possibilita adicionar várias
várias 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 página
gina e clicar no quadro azul e selecionar
as imagens
ns no seu computador.
Elementos > Multimédia > Fotografia Galeria

Slides

É semelhante à Galeria, porém as suas imagens aparecem


aparece uma a
uma. Possibilita que o criador do site ou editores possam
possa selecionar
que formaa desejam
deseja para visualizar as imagens,, por menu de números,
ou pelas imagens em miniatura!
Elementos > Multimédia > Apresentação de Slides

Modificar o Desenho da a Página



No caso de não ter gostado de nenhum dos temas ou se pretende um exclusivo, isso
é possível. Primeiro deve encontrar um desenho de página
pá que possa ser modificado,
pois não são todos. O segundo passo é encontrar uma imagem
magem grande, que encaixe
nas proporções para cobrir o fundo, procure na internet pois precisará do URL da
mesma.

Como Modificar:

1. Procure uma imagem na internet e uma página


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 não ter um Link à frente de background é por que a página
gina não 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 página
pá vai
carregar a imagem e o fundo será alterado.

18
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Utilizar HTML

É um ícone que permite colocar


coloca no site elementos externos, como
animações, imagens, etc, que se encontram conectados ao "site
dono", assim pode adicionar músicas, chat, ao seu site weebly.
weebly
Elementos > Básico > 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 > Multimédia > Ícone Ficheiro

Primeiros elementos: Adicionar


Adiciona texto ao site
Elementos são objetos que pode utilizar na construção de um site. Todo o texto, fotos,

vídeos e outros são adicionados através de elementos. Em seguida são 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 página. O elemento mais básico - o elemento parágrafo / texto:


texto

19
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

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

Para começar a escreve clique no elemento:

Pode escrever uma palavra, uma frase, ou vários parágrafos 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 alterações básicas ao
o seu texto. Funciona

como qualquer outro tipo de barra de ferramentas: selecione o texto que deseja alterar

e clique no botão apropriado para fazer essa alteração.

Da esquerda para a direita, poderá encontrar os botões de formatação para: negrito,


negrito
itálico, 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 formatação. Como já percebeu uma coisa que

não pode fazer é mudar o tipo de letra para outro diferente. Para adicionar mais texto a
uma página poderá continuar a escrever neste mesmo elemento, ou arrastar outro

elemento de parágrafo, ou usar um dos outros elementos do texto:

20
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

 Título: Usado para adicionar títulos / cabeçalhos de uma página.

 Parágrafo w / Título: Um elemento de parágrafo com um lugar para um título

já construído dentro.
dentro
 Parágrafo w / Imagem: Um elemento de parágrafo com um lugar tanto para

um título como para uma imagem construída dentro.

Primeiros elementos: adicionar imagens a um site


Para adicionar imagens ao
o site o processo é idêntico ao do texto, arrasta o elemento

de imagem para a página.

Clique na caixa Imagem de upload para adicionar uma imagem.

21
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Vai abrir uma caixa de diálogo que apresenta várias formas de adicionar uma

imagem. As duas principais opções são: ou upload


upload (ou arrastar) uma imagem do seu
próprio computador ou pesquisar na base de dados do Weebly.

Vamo-nos concentrar na opção de fazer upload de uma imagem do seu próprio

computador. A maneira mais fácil de abordar esta questão é arrastar a imagem que
deseja para a caixa "arraste a imagem para aqui."
aqui Pode também clicar no botão verde

"Enviar foto" e dar o caminho


inho da imagem.
imagem

O tamanho de uma imagem vai variar após o upload, mas normalmente assume o
tamanho do elemento.

22
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

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 diálogo de configurações que pode usar para

fazer mais alterações.

Opções de formatação:

 Lightbox : Se ativar, significa que qualquer utilizador que clique na imagem do


seu site terá acesso a uma versão maior da mesma.

23
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL
 Ligação : Esta opção transforma a imagem num
n link.
 Espaçamento : Faz pequenos ajustes para a quantidade de espaço em branco
à volta da imagem.
 Caption : Permite adicionar
adicio uma legenda de texto básico.
 Avançado : Permite ajustar (ou ligar / desligar) o limite da imagem.

Editar Imagem:
Editar imagem - abre um editor de imagens simples.

Este editor oferece algumas opções básicas para a adição de efeitos, permite girar a

imagem em qualquer sentido e tem uma característica que pode cortar partes
indesejadas da imagem.

Exemplo:

24
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

A opção 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 dimensões.

Uma vez feitas as alterações clique em OK. No caso de não gostarr das mudanças

clique em Cortar novamente para reajustar ou clique no botão cinza em Cancelar para
sair do editor. Cortada
ortada a imagem para guardar as alterações clique no botão Salvar no

canto superior direito.

25
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL
Colocar elemento colunas
Quando começar a adicionar elementos a uma página, provavelmente vai notar que

eles vai ficando automaticamente na área de trabalho. À primeira vista, isso pode fazer
com que pareça que não há maneira de colocar elementos lado a lado. Mas a boa

notícia é que o Columns elemento pode ser usado para adicionar até cinco colunas

para uma página. Isto permite-lhe


permite que os elementos tenham lugar certo ao lado do
outro. O Columns elemento é arrastado para uma página, assim como qualquer outro
elemento.

O elemento começa com duas colunas, mas pode adicionar até cinco através da barra

de ferramentas
mentas que aparece quando está posicionada sobre o elemento. Basta clicar

no número apropriado.

Pode arrastar os elementos necessários em cada coluna, e usar a barra azul entre as

colunas para ajustar a largura de cada uma.


um

26
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Criar mais páginas para o seu site


Se é um utilizador livre ou um assinante de nosso serviço Pro, o site pode ter o

número de páginas e sub-páginas


páginas necessário.
Para criar uma nova página é tão simples como ir ao separador Páginas e clicar no

botão Adicionar Página.

Há uma opção para adicionar uma página padrão


padrão ou adicionar um blog. Clicando no

botão Adicionar página adiciona uma nova página à sua lista.

27
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Opções de configuração das páginas:

 Editar a página (vaii para a área de elementos)


 Copie a página para usar como base para uma nova página
 Excluir a Página
 Mude o nome da Página
 Ocultar a página a partir do Menu de navegação. Se esta for desmarcada a
página é acessível via de navegação do site. Se a caixa estiver marcada, então
a página vai ser escondida na navegação (embora possa criar os seus próprios
links para páginas escondidas)
 Proteger com senha nesta página, o que requer uma assinatura para o nosso
serviço Pro
 Link da página para um site externo (criando um link de navegação
navegação que leva a
outro site).
 Ajuste as configurações avançadas.

As configurações
gurações avançadas de cada página são úteis para melhorar Search Engine
Optimization do seu site. Podemos adicionar várias páginas ao site (clicando em
Adicionar página, irá adicionar outra
outr página e salve as alterações à página na qual
estava a trabalhar):

28
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Poderá reorganizar a ordem das páginas clicando e arrastando-as


arrastando s para cima e para

baixo na lista. Ao arrastar uma página para o topo da lista fará com que essa página

seja a principal,, que é indicado pelo ícone de casa. A página principal pode ter o nome

que pretende. Vamos criar uma sub-página,


sub arrastando-a para a direita da nossa

página. Sub-páginas
páginas aparecem no menu de navegação do site como parte de um
menu drop-down
down para qualquer página que estiver conectado.
conectado

Como já foi referido, para


ara criar uma sub-página,
sub basta arrastar a página sob outra
outr

página e, em seguida, arraste para a direita até verificar que está ligada à página
principal através de uma linha pontilhada. Poderá ter muitas sub-páginas
páginas de uma

página.

Agora, o menu de navegação


gação do site inclui linkss para todas as páginas 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-páginas criadas.

29
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Para editar o conteúdo de uma página basta clicar no link no


o menu de navegação ou

no separador Pages, selecione a página a partir da lista e clique no botão Editar

Página.

Criar
riar um link de navegação para outro site
Existem
stem algumas situações em que pretende a navegação de uma ligação em outra
outr

página – por exemplo: página do Twitter, um blog, um site conhecido,


conhecido entre outros.

Para criar um link de navegação externo, ou seja, para fora do seu site,
site clique no

separador Pages, Adicionar página, e escolha a opção External Link.

Dê o nome ao link,, este nome é o que vai aparecer na navegação. Em seguida, insira
o link completo da
a página ou site que pretende e posteriormente, Salvar

configurações.

30
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Qualquer página 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 início, no meio ou no final do processo de criação do site).
site) Escolher
scolher um novo

tema não implica apagar ou alterar o conteúdo do seu site. Para alterar o tema, clique
no separador Design:

A primeira opção é a seção "Favoritos", onde são apresentados


os alguns dos temas
favoritos.

Para selecionar o tema pretendido,


pretendido clique sobre ele.

31
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Se optar pela seção Todos os Temas no separador Design, terá acesso a todos os
temas. Estes podem ser vistos como um grande grupo ou através de diferentes

categorias, como negócios ou casamento.

Quando encontrar um tema que gosta, clique


cl no botão Preview para previsualizar a

aplicação no seu site.

32
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

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
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Depois de selecionar o tema, use a seção Design Options para definir as fontes

padrão para esse tema.

Você pode alterar as fontes para o título do site, parágrafo Títulos, parágrafo de texto e

para os links. Existe cerca de uma centena de fontes para escolher.

Editar o cabeçalho
Grande parte dos temas incluem uma área para uma imagem de cabeçalho,
cabeçalho no

entanto poderá alterar essa imagem padrão. Para começar, clique no botão Editar
imagem:

Para apagar a imagem padrão,


pa clique sobre a imagem e depois no X vermelho no

canto superior direito.

34
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Para adicionar uma imagem ao cabeçalho, clique no botão Adicionar imagem no canto

superior esquerdo.

Agora tem a opção de escolher a imagem pretendida.

Pode ainda utilizar o campo procurar para selecionar uma


ma imagem apropriada para o

seu site.

35
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Uma vez selecionada a imagem, pode editá-la.


editá

As imagens podem ser redimensionadas através dos círculos orientadores em cada

canto e laterais da imagem.

36
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

A imagem pode ser arrastada clicando em qualquer lugar e arrastando-


arrastando-a.

Utilize as ferramentas fornecidas no topo da página, para editar e adicionar


adiciona texto /

efeitos para a imagem.

Quando terminar a personalização da


da imagem, selecione o botão Salvar. Poderá

escolher a opção salvar a imagem em cada página do site, apenas na


a página editada,

ou selecionar apenas algumas das páginas. Assim, poderá ter diferentes cabeçalhos
nas páginas.

Links de Texto
Para criar um link de texto, primeiro selecione o texto
text no qual pretende efetuar a

ligação.

37
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Em seguida, clique no ícone "Hiperligação"


" " na barra de ferramentas de texto.

Na caixa de diálogo link, tem de selecionar o tipo de link que pretende criar: Link para

outra página, link no seu site.

Link para uma página de outro site. Pode optar por abrir o link numa nova janela.

38
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

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

deste.

Link para um endereço 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
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Links em Imagens
Para criar um link numa imagem, primeiro clique na imagem na qual pretende efetuar

a hiperligação.

Em seguida, clique na opção hiperligação no canto superior direito da imagem.

40
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Na caixa de diálogo de hiperligação,


hiperligação, pode selecionar o tipo de link que pretende criar,
Link para outra página no próprio site.

Link para uma página em outro site. Pode ainda optar por abrir o link numa nova

janela.

41
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Link para um arquivo para que o utilizador possa fazer o download.

Link para um endereço 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
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

O elemento de botão
O elemento botão permite criar
cri botões que o possam ligar a outras páginas no seu

site, a páginas de outros sites ou arquivos como PDFs e documentos.

Tal como acontece com outro elemento, tem de arrastar o elemento botão para a

página.

43
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

O botão é, essencialmente, uma ligação que se destaca por causa do


do seu tamanho e

da sua aparência. Pode editar o texto do botão.

Pode hiperligar o botão a outro site.

O estilo do botão pode ser alterado


alterad através de quatro opções pré-definidas. Cada

botão tem duas cores e dois tamanhos projetados especificamente para o tema
específico que está a usar.
usar

44
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Criar um Slideshow Imagem


O elemento slideshow (disponível na categoria "Multimédia")
"Multim dia") permite criar uma

apresentação para as imagens.


imagens Para adicionar um slideshow,
how, basta arrastar o
elemento para a página.

Tem de escolher qual o estilo de slideshow que deseja. Pode sempre ser alterado

posteriormente.

Posteriormente tem de fazer o upload das imagens.

45
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Em seguida, selecione as imagens que pretende.

Dependendo do número de imagens selecionadas, pode levar alguns minutos para

carregar.

46
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

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 "balão".

Guarde as alterações e vai ver o novo slideshow na página.

Agora pode usar a barra de ferramentas slideshow para fazer alterações.

47
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Utilizar o Leitor de Vídeo


O elemento vídeo permite fazer o upload de vídeos com qualidade (até 1 GB por

vídeo) diretamente para o seu site. O elemento vídeo está disponível na


n categoria
"Multimédia". Para usá-lo,
lo, clique e arraste-o
arraste o para o local desejado na página.

Em seguida, basta
ta clicar no player e uma caixa de diálogo será aberta a partir de onde
pode selecionar um vídeo do seu computador. O Weebly suporta M4V, MPG, MOV,

WMV e outros formatos de vídeo padrão.

48
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Dependendo do tamanho do vídeo e da velocidade da sua conexão com a internet,

pode demorar até 20 minutos para fazer o upload.

Pode utilizar um número ilimitado de vídeos no


o seu site, o único limite é que nenhum

vídeo pode ser maior do que 1 GB.

49
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Utilizar o Audio Player


O leitor de áudio permite adicionar música, podcasts, ou outros arquivos de

áudio. Este elemento faz parte de nossa Pro Upgrade. O elemento Audio Player está
disponível na
a categoria "Multimédia",
"Multim basta arrastá-lo
lo para uma página.

Depois de adicioná-lo à página,


á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
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Elemento de vídeo YouTube


O elemento vídeo do YouTube permite utilizar vídeos publicados no youtube. Esse

elemento pode ser encontrado em Multimédia.

Em seguida, clique em qualquer lugar do elemento para abrir a barra de


ferramentas. Tem de digitar o link direto para
pa o vídeo do YouTube no campo URL.
URL

51
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Iniciar um novo blog


Para criar um blog, vá para ao separador Pages, clique em Adicionar Página e

selecione a opção Page Blog.

Vai adicionar o blog à sua lista de páginas.

Dê um nome ao blog e, em seguida, clique em Editar Página para começar a adicionar

conteúdo.

Um novo blog começa com um post da amostra (que você pode editar ou apagar) e
uma barra lateral com algum conteúdo padrão que você pode facilmente mudar.

52
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Para criar um novo post para o seu blog, use o botão Novo Post no topo do blog.

O seu blog tem um título e uma área de conteúdo. O título deve geralmente ser curto -

não mais do que uma frase. A área de conteúdo inclui um elemento de parágrafo

básico que você pode editar ou apagar.

Para adicionar conteúdo ao blog funciona da mesma forma que a adição de conteúdo
para uma página - basta arrastar os elementos para a área de trabalho e editá-los.
editá

53
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Depois de adicionar o conteúdo, pode categorizar o post - essas


ssas categorias vão

aparecer na barra lateral, tornando mais fácil para os visitantes encontrar mensagens.
mensagens

Agora pode publicar o post no seu site (tornando-o instantaneamente disponível) ou

Salvar em Rascunhos para editar / publicar mais tarde.

54
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-
CASTELO
SERVIÇO DE FORMAÇÃO PROFISSIONAL

Se salvar o post como rascunho, vai estar acessível através de uma área de

rascunhos no topo da página 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 página. Depois de ter adicionado sete

ou oito mensagens à página, os posts mais antigos serão movidos para fora da página

principal.

55
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Criar um Formulário de contacto


conta básico
Um formulário de contacto
to proporciona aos seus utilizadores uma maneira fácil
f de chegar até
você. Pode perguntar a um utilizador algo tão simples como o nome e endereço de e-mail.
e As

versões gratuitas podem incluir até cinco campos de formulário e Pro os utilizadores podem ter

um número ilimitado de campos de formulário. Comece por arrastar o elemento do formulário

para a página.

O formulário começa com quatro campos padrão.

Estes campos são definidos conforme necessário (ou seja, o destinatário deve digitar algo no

campo para enviar o formulário). Para fazer alterações basta clicar num
um campo e usando a
barra de ferramentas fazer
56
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

ajustes. Uma série de configurações


urações podem ser alteradas para cada campo.

Pode facilmente adicionar novos campos ao formulário, arrastando-os


arrastando os como qualquer outro

elemento. Existem
em campos pré-definidos
pré definidos para nome, endereço postal, endereço e telefone.

Antes de completar o formulário e publicar o site, pode dar nome e determinar para qual

endereço de e-mail
mail (ou endereços) vão ser enviados os formulários. Pode
ode inserir mais de um

endereço, separando-os
os por vírgulas.

Note que você pode encontrar essas configurações usando o botão Opções de Formulário, na
parte superior do formulário.

As respostas ao seu formulário vão para os endereços de e-mail que introduziu em Opções de

Formulário.

57
INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP
DELEGAÇÃO REGIONAL DO NORTE
CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO
CASTELO
DE FORMAÇÃO PROFISSIONAL

Publicar o seu Site


Agora que adicionou conteúdo básico no site, é o momento de publicá-lo. Para isso, basta usar

o botão Publicar no canto superior direito do editor.

Isso fará com que uma caixa de verificação seja mostrada para que saiba se o seu site foi
publicado.

58