Criação de um site para internet com Weebly em 40 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
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
CASTELO
Barcelos
CASTELO
Í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
CASTELO
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
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 - Ligações entre ecrãs ................................................................................................
..................................... 6
Imagem 9 - Escolha do tema ................................................................................................
................................ ......................................... 14
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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

Pá
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
Em seguida, selecione as imagens que pretende.
Dependendo do número de imagens selecionadas, pode levar alguns minutos para
carregar.
46
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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
CASTELO
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

Criação de um site para internet com Weebly em 40 horas

Enviado por

Dados do documento

Descrição original:

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

Criação de um site para internet com Weebly em 40 horas

Enviado por

Direitos autorais:

Formatos disponíveis

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP

DELEGAÇÃO REGIONAL DO NORTE

UFCD 0152 – Estrutura de um Sítio para Internet

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

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

Formador: Paulo Garrido

Data Início 24/04/2013

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

Imagem 1 - Organograma ................................................................................................

Sítio Para Internet

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

Uma vez conhecidos os objetivos

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

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

Imagem 4 - Estrutura Linear

Imagem 5 - Estrutura em Árvore

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

Estas estruturas caracterizam-se

Imagem 6 - Estrutura em estrela

Imagem 7 - Estrutura Mista

Ligações entre ecrãs

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

Imagem 8 - Ligações entre ecrãs

Coerência e funcionalidade das ligações

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

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

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

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

Separadores entre as imagens;

Setas personalizadas do mesmo padrão;

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

Separador numa página entre os diferentes temas ou assuntos

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

Nas imagens deverá proceder-se

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

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

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

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

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

Os dez maiores erros em Web Design

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

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

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

Páginas com longos textos corridos-

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

Editor de Páginas Web – Weebly

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

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

Escolher um título para o Website e o tipo de Website.

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

Imagem 9 - Escolha do tema

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

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

Parágrafo com título

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

Parágrafo com Imagem

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

Colunas / Múltiplas Colunas

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

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