manual ufcd 0152-estrutura de um sítio para internet...

INSTITUTO DO EMPREGO E

DELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃODE FORMAÇÃO PROFISSIONAL

UFCD 0152 – Estrutura de um Sítio para

UFCD 0153

Referencial 213006

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP

DELEGAÇÃO REGIONAL DO NORTE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO

DE FORMAÇÃO PROFISSIONAL

MÓDULOS

Estrutura de um Sítio para

– Finalização de um sítio para

Internet

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

PROFISSIONAL DE VIANA DO CASTELO -SERVIÇO

Estrutura de um Sítio para Internet

de um sítio para

, Nível 4






BBaarrcceellooss




Índice

Sítio Para Internet ................................Definição ................................Organograma ................................Pastas e Ficheiros ................................Esquemas de navegação ................................Linear ................................................................Árvore ................................................................Estrela ................................................................Mista ................................................................Não Linear ................................Ligações entre ecrãs ................................Coerência e funcionalidade das ligaçõesA Interface ................................Design ................................................................Cores ................................................................Textos ................................................................Imagens ................................Outros ................................................................Os dez maiores erros em Web DesignTipos de Páginas ................................Editor de Páginas Web – WeeblyEscolha um Tema ................................Adicionar Elementos ................................Título ................................................................Parágrafo ................................Parágrafo com título ................................Imagem ................................Parágrafo com ImagemColunas / Múltiplas ColunasDivisor ................................Adicionar Página ................................Adicionando Editores ................................Formulário de Contato ................................Galeria de Imagens ................................Slides ................................Modificar o Desenho da PáginaComo Modificar: ................................Primeiros elementos: Adicionar texto ao sitePrimeiros elementos: adicionar imagens a um siteColocar elemento colunas ................................Criar mais páginas para o seu siteCriar um link de navegação para outro siteMudar Temas e editar FontesEditar o cabeçalho ................................




................................................................................................................................................................................................................................

................................................................................................................................................................................................

................................................................................................................................................................................................................................................................................................................................................................................................

................................................................................................................................................................................................................................

................................................................................................Coerência e funcionalidade das ligações ................................................................

................................................................................................................................................................................................................................

................................................................................................................................................................................................

................................................................................................................................................................................................................................

res erros em Web Design ................................................................................................................................................................

Weebly ................................................................................................................................................................

................................................................................................................................................................................................

................................................................................................................................................................................................................................

................................................................................................................................Parágrafo com Imagem ................................................................................................

Colunas ................................................................................................................................................................................................

................................................................................................................................................................................................................................................................................................

................................................................................................................................................................................................................................

Modificar o Desenho da Página ................................................................................................................................................................

Primeiros elementos: Adicionar texto ao site ................................................................Primeiros elementos: adicionar imagens a um site ................................................................

................................................................................................Criar mais páginas para o seu site ................................................................Criar um link de navegação para outro site ................................................................Mudar Temas e editar Fontes ................................................................................................

................................................................................................


........................................................ 1 ..................................... 1

............................................................... 1

........................................................ 2 .............................................. 3

.......................................... 3

.......................................... 3

.......................................... 4 ............................................ 5

................................... 5

.................................................... 6 ..................................................... 6

................................... 7

.......................................... 7 ............................................ 8 .......................................... 8

....................................... 9 .......................................... 9

...................................................... 10 ........................................................ 12

.............................................................. 13

...................................................... 14 ................................................. 16

........................................ 16 ................................ 16

............................................ 16 .................................... 17

....................................... 17 .............................................................. 17

..................................... 17 .................................................. 17

.......................................... 17 ........................................ 18

.............................................. 18 ....................................... 18

........................................................ 18 ................................................... 18

............................................ 19 ................................... 21

......................................... 26 ............................................................. 27

............................................... 30 .................................... 31

..................................................... 34



Links de Texto ................................Links em Imagens ................................O elemento de botão ................................Criar um Slideshow ImagemUtilizar o Leitor de Vídeo ................................Utilizar o Audio Player ................................Elemento de vídeo YouTubeIniciar um novo blog ................................Criar um Formulário de contacto básicoPublicar o seu Site ................................




................................................................................................................................................................................................

................................................................................................Criar um Slideshow Imagem ................................................................................................

................................................................................................................................................................................................

Elemento de vídeo YouTube ................................................................................................................................................................................................

Criar um Formulário de contacto básico ................................................................................................................................................................


........................................................... 37

..................................................... 40 .................................................. 43

..................................... 45 ......................................... 48

............................................. 50 ..................................... 51

................................................. 52 ................................................... 56

..................................................... 58



Índice Imagens Imagem 1 - Organograma ................................Imagem 2 - Pastas ................................Imagem 3 - Ficheiros ................................Imagem 4 - Estrutura Linear ................................Imagem 5 - Estrutura em ÁrvoreImagem 6 - Estrutura em estrelaImagem 7 - Estrutura Mista ................................Imagem 8 - Ligações entre ecrãsImagem 9 - Escolha do tema ................................




................................................................................................................................................................................................

................................................................................................................................................................................................

Estrutura em Árvore ................................................................................................Estrutura em estrela ................................................................................................

................................................................................................Ligações entre ecrãs ................................................................................................

................................................................................................


............................................... 2 ........................................................... 2

....................................................... 2 ........................................... 3

..................................... 4

..................................... 4

............................................. 5 ..................................... 6

......................................... 14



Sítio Para Internet

Uma página web, também conhecida pelo no inglês

web, geralmente em formato

de uma página, ou secção, para outra. As páginas web usam com frequência

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

ou browser, e pode ser construída por forma a recorrer a

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 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

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

para quem? Deve fazer-se com que os visitantes da nossa página não se sintam 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

Organograma

Uma vez conhecidos os obje

apresentar a informação. Criamos então um diagrama com a estrutura das

agrupadas por tópicos.




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

associados para fins de ilustração, e também estes ficheiros podem

clicáveis. Uma página web é apresentada com recurso a um

browser, e pode ser construída por forma a recorrer a applets (subprogramas que correm




ites eficazes.

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

: identificação da função que o site vai desempenhar. Pretende


: Identificação e caracterização da "audiência" (utilizadores), que idade, que

experiência possuem, porque razões podem visitar o site. Pretende-se dar resposta à questão:

se com que os visitantes da nossa página não se sintam def



informação. Se a página não a possuir, deve orientar no sentido de ser localizada.

Uma vez conhecidos os objetivos e a audiência da página, é altura de ver como

apresentar a informação. Criamos então um diagrama com a estrutura das


1

webpage, é uma "página" na world wide

que permitem a navegação

de uma página, ou secção, para outra. As páginas web usam com frequência ficheiros

associados para fins de ilustração, e também estes ficheiros podem

clicáveis. Uma página web é apresentada com recurso a um navegador,

(subprogramas que correm




: identificação da função que o site vai desempenhar. Pretende-se dar resposta a


: Identificação e caracterização da "audiência" (utilizadores), que idade, que

se dar resposta à questão:

se com que os visitantes da nossa página não se sintam defraudados,



de ser localizada.

tivos 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,



Pastas e Ficheiros

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

Uma pasta é um “sítio” onde pode armazenar ficheiros.

Por exemplo criamos uma pasta para todas as imagens, outra para documentos, etc.

conter ficheiros, mas também podem conter outras pastas

Imagem 2 - Pastas




Imagem 1 - Organograma

Depois de termos as páginas construídas, devemos guardá-las em pastas, por tópicos.

é um “sítio” onde pode armazenar ficheiros.

Por exemplo criamos uma pasta para todas as imagens, outra para documentos, etc.

conter ficheiros, mas também podem conter outras pastas (subpastas).

Pastas

Imagem 3 - Ficheiros


2

las em pastas, por tópicos.

Por exemplo criamos uma pasta para todas as imagens, outra para documentos, etc. Podem

Ficheiros



Esquemas de navegação

A estrutura deve permitir visualizar de forma fácil e

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 g

melhor os utilizadores. Uma boa estrutura, facilita

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 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ç

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, seguindo a lógica tradicional da transmissão da informação.

Árvore

Este tipo de estrutura é também bastante familiar. Esta estrutura simples é a base da

classificação, da organização adminis

conteúdo, na base hipertexto faz




Esquemas de navegação

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



A estrutura deve dar uma ideia geral da organização da informação e consequentemente situar

es. Uma boa estrutura, facilita a navegação, porque requer menos esforço

cognitivo e ajuda a uma melhor assimilação da informação.


tipo de utilizadores (deficiências, experiência, etc.)

São várias as estruturas para organização da apresentação.

se algumas:

de organização é a forma que tradicionalmente tem sido usada, desde as inscrições

em pedra, até ao vídeo dos nossos dias.


para suportar a sequencialidade. A informação linear está organizada de forma a que, para ser



l, seguindo a lógica tradicional da transmissão da informação.


classificação, da organização administrativa ou das árvores genealógicas. A organização do

conteúdo, na base hipertexto faz-se de forma hierárquica, com a informação mais geral no

Imagem 4 - Estrutura Linear


3

clara, os conteúdos de um conjunto de



eral da organização da informação e consequentemente situar

a navegação, porque requer menos esforço


de organização é a forma que tradicionalmente tem sido usada, desde as inscrições


ão linear está organizada de forma a que, para ser



l, seguindo a lógica tradicional da transmissão da informação.


trativa ou das árvores genealógicas. A organização do

se de forma hierárquica, com a informação mais geral no



topo, e a mais detalhada, em níveis mais

descendem de uma raiz comum. De cada nó podem sair múltiplas ligações para outros nós de

nível inferior na hierarquia.

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

base da informação.

Estrela

Estas estruturas caracterizam

nós ligados a este. A passagem de um nó a

Adapta-se a conteúdos, onde, por exemplo, existe um tópico principal, do qual fazem parte

vários sub-tópicos. Ícones nesse nó principal, podem estabelecer ligações a conteúdos mais

específicos desse assunto, regressando de novo ao local central para o estabelecimento de

uma nova ligação.




topo, e a mais detalhada, em níveis mais baixos, submetida à mais geral.

de uma raiz comum. De cada nó podem sair múltiplas ligações para outros nós de

Imagem 5 - Estrutura em Árvore


Estas estruturas 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".

se a conteúdos, onde, por exemplo, existe um tópico principal, do qual fazem parte

tópicos. Ícones nesse nó principal, podem estabelecer ligações a conteúdos mais

o, regressando de novo ao local central para o estabelecimento de

Imagem 6 - Estrutura em estrela


4

baixos, submetida à mais geral. Todos os nós

de uma raiz comum. De cada nó podem sair múltiplas ligações para outros nós de


se por possuírem um nó central e principal, e um conjunto de

outro requer sempre o regresso ao "local central".

se a conteúdos, onde, por exemplo, existe um tópico principal, do qual fazem parte

tópicos. Ícones nesse nó principal, podem estabelecer ligações a conteúdos mais

o, regressando de novo ao local central para o estabelecimento de



Mista

O diagrama mostra um túnel colocado

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

link para o site de uma escolinha de t

e no final, um formulário de inscrição.

Não Linear




O diagrama mostra um túnel colocado numa estrutura de roda. Isto é, o


até combinar sites distintos num esquema de navegação mista. Considere um site

que tem estrutura de roda ou cadeias de rodas. Na seção sobre té

link para o site de uma escolinha de 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


5

, o utilizador chega a


até combinar sites distintos num esquema de navegação mista. Considere um site

eias de rodas. Na seção sobre ténis, há um

nis que tem estrutura de túnel, apresentando a escola

Assim combina os sites estrategicamente.



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 move

das diferentes páginas, criando as condições e estilos de interatividade.

Coerência e funcionalidade das ligações

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

� Sequências utilizadas para ir para a página seguinte e anterior, t

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 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á

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,






todas as ligações e hiperligações. É o sistema de navegação que permite move

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:

lizadas para ir para a página seguinte e anterior, também utilizadas pelos

Barras de navegação (botões ou menus), podendo ser constituídas por itens de texto,


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

Ligações de deslocação para o início e fim de página, no caso desta necessitar de barra

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



todas as ligações e hiperligações. É o sistema de navegação que permite mover-nos através

ambém utilizadas pelos

Barras de navegação (botões ou menus), podendo ser constituídas por itens de texto,


avegação podem estar sempre presentes em todas as páginas, estar apenas na

As barras ou menus não devem ser muito extensas, isto é, não devem possuir

gina, no caso desta necessitar de barra

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,



formulários de pesquisa, mapas ou esquemas do

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. Veri

é, existem por uma razão lógica. Não colo

(404 File Not Found). Evitar

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

Deve convidar alguém, outra pessoa (ou pessoas) para fazer o teste da funcionalidade,

verificar as dificuldades encontradas, a

corretamente considera-se o Web site validado.

A Interface

O desenho visual da interface, descrevendo as ferramentas que o utilizador possui para

aceder e navegar ao longo do documento

como a organização do ecrã, a apresentação da informação e os comandos do ecrã.

A sua conceção deve obedecer a alguns princípios da comunicação visual, tendo em conta

fatores de perceçã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 s

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

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

frame;




formulários de pesquisa, mapas ou esquemas do site, que podem ser utilizadas para



verificar se funcionam como se esperava. Verificar que todas as ligações fazem sentido, isto

existem por uma razão lógica. Não colocar ligações que conduzam a mensagens de erro

estabelecer ligações que conduzam a páginas em construção.

a página na Internet sem tudo estar funcional.


verificar as dificuldades encontradas, a correção ortográfica, e se tudo funcionar

se o Web site validado.

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,


ão deve obedecer a alguns princípios da comunicação visual, tendo em conta

ção, legibilidade, unidade organizacional, códigos de cor e estruturas de

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

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


, fácil, agradável, intuitiva, numa palavra – amigável -.

lateral esquerda sempre presente de modo que o utilizador não se sinta

perdido e possa em qualquer momento alterar a sua navegação;

entre as imagens;

personalizadas do mesmo padrão;

diferentes entre o menu esquerdo e as páginas do lado direito


7

site, que podem ser utilizadas para



que todas as ligações fazem sentido, isto

ligações que conduzam a mensagens de erro

estabelecer ligações que conduzam a páginas em construção.


ortográfica, e se tudo funcionar

ho visual da interface, descrevendo as ferramentas que o utilizador possui para

, consiste nos elementos gráficos,


ão deve obedecer a alguns princípios da comunicação visual, tendo em conta

ção, legibilidade, unidade organizacional, códigos de cor e estruturas de

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


lateral esquerda sempre presente de modo que o utilizador não se sinta

páginas do lado direito da



� 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 t

� É 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 escur

impressão do texto, pois o branco das letras não vai aparecer na impressão

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 as

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

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 é esse




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.

em tons claros;

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


tornar difícil a leitura do texto que se encontra sobre o background.

É importante que se crie um ambiente harmonioso entre as cores utilizadas nas fontes


claras (branco, por exemplo) em backgrounds escuros impossibilita ao utilizador a

impressão do texto, pois o branco das letras não vai aparecer na impressão

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

numa página entre os diferentes temas ou assuntos (em tom concordante

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

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

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

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

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

utilizador daquilo que é essencial para o acessório.


8

apenas com duas repetições para não maçar o utilizador e colocada na

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


exto que se encontra sobre o background.

É importante que se crie um ambiente harmonioso entre as cores utilizadas nas fontes


os impossibilita ao utilizador a

impressão do texto, pois o branco das letras não vai aparecer na impressão de uma

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

suntos (em tom concordante

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

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

outro tipo de letra mais desenhada (com ou sem

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

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



Imagens

� Nas imagens deverá proceder

identifique a imagem.

� Numa página WWW apenas se podem utilizar imagens com formato .gif ou .jpg, sendo

o primeiro geralmente utilizado para ilustraçõe

� 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

� 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,

substituí-los por texto, ou acompanhá

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é

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 modo, evita

� A página do lado direito da frame (a primeira a aparecer) deve estar 90%

Ao deslocar para baixo a barra de navegação vê

como o contador ou a data;

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

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

atualidade da informação nela contida;




Nas imagens deverá proceder-se à introdução de uma descrição textual que

Numa página WWW apenas se podem utilizar imagens com formato .gif ou .jpg, sendo

o primeiro geralmente utilizado para 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

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

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;

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

ste modo, evita-se de ter a barra de deslocamento vertical;

A página do lado direito da frame (a primeira a aparecer) deve estar 90%

Ao deslocar para baixo a barra de navegação vê-se informações complementares,

como o contador ou a data;

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


Inserir uma data de produção em cada página de modo a servir de indicador

ção nela contida;


9

se à introdução de uma descrição textual que

Numa página WWW apenas se podem utilizar imagens com formato .gif ou .jpg, sendo

s e o segundo para fotos.

Manter os ficheiros das imagens com dimensões reduzidas por forma a manter o

Uma imagem que apoia um texto (método aconselhável para ajudar a compreensão

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,

se suscitarem dúvidas é preferível

O site pode ter um formulário para que os utilizadores possam: enviar uma mensagem

definido; responder a

A página do lado esquerdo da frame, ou shared border (o menu) deve estar totalmente

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.

se informações complementares, tais

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


Inserir uma data de produção em cada página de modo a servir de indicador sobre a



� No final da página inicial deverá estar visível o contacto com ligação direta ao

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 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

ao mesmo tempo marcar a página corrente e voltar a esta, os URL’s param de trabalhar e as

impressões tornam-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

Utilização gratuita da tecnologia mais avançada

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

se apostar que muitos deles não voltarão a consultar o site. A não ser que se comercialize

produtos ou serviços na net, torna

relativamente à forma mais apropriada de utilizar essas técnicas. Quando apareceu o desktop

as pessoas colocaram vinte fontes nos seus documentos, logo há que evita

situação similar relativamente à web.

Texto, marcas e constantes animações em movimento

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

de leitura acessível aos utilizadores e nomes que reflitam a natureza da informação contida no

site.




No final da página inicial deverá estar visível o contacto com ligação direta ao

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

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

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


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

Utilização gratuita da tecnologia mais avançada - Não se deve atrair os utilizador



possibilidade do site oferecer um bom serviço.

ú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


rodutos ou serviços na net, torna-se mais favorável aguardar até que se obtenha experiência


as pessoas colocaram vinte fontes nos seus documentos, logo há que evita

situação similar relativamente à web.

Texto, marcas e constantes animações em movimento - Nunca se deve incluir numa página


página web deve dar ao utilizador alguma paz e serenidade para que

este possa efetivamente ler o texto.

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


Os utilizadores tomam esta atitude devido à grande falta de apoio na

sentido de orientação no browser corrente. Então, a URL deve conter diretorias



10

No final da página inicial deverá estar visível o contacto com ligação direta ao correio

Evitar finais de páginas das quais não seja possível sair. As barras de navegação

nal de todas as páginas permitindo redirecionar o utilizador para

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


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.

Não se deve atrair os utilizadores para um



ú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-


se mais favorável aguardar até que se obtenha experiência


as pessoas colocaram vinte fontes nos seus documentos, logo há que evitar que aconteça uma

Nunca se deve incluir numa página


página web deve dar ao utilizador alguma paz e serenidade para que

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


Os utilizadores tomam esta atitude devido à grande falta de apoio na

corrente. Então, a URL deve conter diretorias




Páginas solitárias - Assegurar que todas as páginas incluem uma clara indica

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

para a página inicial, bem como alguma indicação sobre a su

do site.

Páginas com longos textos corridos

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 nav

Falta de suporte à navegação

acerca do site como o designer. Eles têm sempre dificuldade em encontrar informação, logo

necessitam de suporte no que diz respeito

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 po

bom motor de busca, uma vez que o melhor de navegação nunca é suficiente.

Cores não Standard nos Links

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

já foram utilizados é uma das poucas ajudas para a navegação e é

browsers. A consistência é a chave para ensinar aos utilizadores o significado das cores dos

links.

Informação desatualizada -

equipa, torna-se necessário que alguém retire as “ervas

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

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

conhecimento sobre o mesmo; e não por ser menos importante. As premissas tradicionais




Assegurar que todas as páginas incluem uma clara indica

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

para a página inicial, bem como alguma indicação sobre a sua localização dentro da estrutura

Páginas com longos textos corridos - Apenas 10% dos utilizadores, acedem à informação


conteúdos importantes e opções de navegação devem estar no topo da página.

Falta de suporte à navegação - Nunca se deve assumir que os utilizadores sabem tanto


necessitam de suporte no que diz respeito à sua estrutura e localização.



utilizadores saibam onde estão e para onde se podem encaminhar. É necessário, também, um


Links - Os links que não tenham sido utilizados devem ser azuis; os

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

já foram utilizados é uma das poucas ajudas para a navegação e é standard

. A consistência é a chave para ensinar aos utilizadores o significado das cores dos

É necessário contratar um “jardineiro” web para fazer parte da

se necessário que alguém retire as “ervas daninhas” e plante novamente “flores”



realçar o conteúdo do website uma vez que muitas das páginas antigas mantém a sua


totalmente removidas do server uma vez que se tornam obsoletas.

Este erro é referido em último lugar porque muitas pessoas já têm



11

Assegurar que todas as páginas incluem uma clara indicação de qual o

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

a localização dentro da estrutura

Apenas 10% dos utilizadores, acedem à informação


egação devem estar no topo da página.

Nunca se deve assumir que os utilizadores sabem tanto




dem encaminhar. É necessário, também, um


que não tenham sido utilizados devem ser azuis; os

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

standard na maioria dos

. A consistência é a chave para ensinar aos utilizadores o significado das cores dos

É necessário contratar um “jardineiro” web para fazer parte da

daninhas” e plante novamente “flores”



que muitas das páginas antigas mantém a sua


porque muitas pessoas já têm




indicam um máximo de resposta de10 segundos até que os utilizadores percam interesse. Na

web, os utilizadores têm sido treinados para suporta

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





web, os utilizadores têm sido treinados para suportar tanto sofrimento que se torna aceitável

aumentar esse limite para 15 segundos nalgumas páginas.

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

Proporcionar novos negócios, vender produtos, fornecer informações,

Audiência: clientes, etc.

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


12


r tanto sofrimento que se torna aceitável

Proporcionar novos negócios, vender produtos, fornecer informações,


DELEGAÇÃO REGIONAL DO NORTECENTRO DE EMPREGO E FORMAÇÃOSERVIÇO DE FORMAÇÃO PROFISSIONAL

Editor de Páginas Web

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

site de forma gratuita, sem ter necessidade de

em português, sem ser necessário a instalação de nenhum

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á

layout do site.

Criar uma conta no Weebly (

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



SERVIÇO DE FORMAÇÃO PROFISSIONAL

Páginas Web – Weebly

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

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.


arrastar elementos (disponíveis numa barra de ferramentas) e soltá-

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

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

PROFISSIONAL DE VIANA DO CASTELO -

13

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

. Tudo é feito online,

software. O processo de


-los em cima do

1. Introduza o seu nome

2. Introduza o seu email

3. Introduza uma password



Escolher o endereço do seu Website

Deve utilizar um sub

Escolha um Tema

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

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




Escolher o endereço do seu Website online.

Deve utilizar um sub-domínio do Weebly uma vez que é gratuito.

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

domínio do Weebly uma vez que é gratuito.

Tem mais de uma



Clique com o botão direito sobre

altura poderá facilmente mudar o tema

Depois de escolher um tema

mente, basta pensar num 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).

não é particularmente importante até q

sabe qual o domínio que deseja usar

subdomínio gratuito de Weebly.com

esta é mais uma parte do site que




direito sobre o tema que pretende para selecioná

facilmente mudar o tema.

Depois de escolher um tema poderá dar um título ao seu site. Se não tem um título em

um título temporário, bem como o tema, o título pode ser

facilmente alterado mais tarde.

escolher o endereço do seu site (também chamado de domínio).

icularmente importante até que tenha terminado o seu site

sabe qual o domínio que deseja usar, a forma mais simples é selecionar um

subdomínio gratuito de Weebly.com como primeira opção. Tal como o tema e

esta é mais uma parte do site que poderá alterar.


15

para selecioná-lo. A qualquer

não tem um título em

um título temporário, bem como o tema, o título pode ser

escolher o endereço do seu site (também chamado de domínio). Isto

seu site. Se ainda não

mais simples é selecionar um

o tema e o título,



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

Adicionar E 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. Título

Como o nometítulo sem paráElemento >

Parágrafo

É um ícone cujo o objetivo é somente escrever um complemento ou algo que não de edição.Elementos >Básico > Ícone Paragrafo

Parágrafo com título Serve parapossui ferramentas que possibilitam colocaNegrito, Itálico, altamanho!Elementos >




configuração inicial, está pronto para começar a criar o

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:

Como o nome próprio diz é apenas um ícone para escrever um sem parágrafo, podendo usar diversas ferramentas de edição.

Elemento > Básico > Ícone Titulo

É 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

Serve para escrever textos com Titulo, dos mais variados assuntos, possui ferramentas que possibilitam colocar o

Itálico, além de poder alterar o tipo de escrita (Fonte) tamanho! Elementos > Básico > Ícone Parágrafo com Título.


16

o seu site!

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

elementos que podem ser incluídos são:

para escrever um diversas ferramentas de edição.

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

escrever textos com Titulo, dos mais variados assuntos, seu texto em

poder alterar o tipo de escrita (Fonte) e o



Imagem

Serve apenas paramuitas vezes a mesma aumentar ou diminuir o tamanho da imagem, caso a imagem não seja um Gif, pois se for o efeito de animação é cancelado, possibilidade de adicionar alguns efeitos como Antique (imagem velha/Amarelada), pretElementos > Básico > Ícone Imagem

Parágrafo com Imagem

Não passa de uma junção do Parpoderá escrever imagem ao lado da escrita, os íconesElementos > Básico > Ícone Paragrafo com Imagem

Colunas / Múltiplas Colunas Permite separacolocar váriosdiferentes como imagem, texto Elementos >Básico > Ícone Múltiplas Colunas

Divisor

Como o nome só divide a páElementos > Mais > Diviso

Adicionar Página É o Local/Forma onde podeque ficará no menu de páginas, entre outrasÉ possível também excluir a po conteúdo localizado na mesma! Adicionando Editores É a forma de convidar colaboradores para o seupodendo, apagar qualquer coisa é inclusive Editor que o mesmo possua um assim basta ir a Editores no canto superior convidar utilizando o e-mail,




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, possibilidade de adicionar alguns efeitos como Antique (imagem velha/Amarelada), preto e branco, queimada entre outrosElementos > Básico > Ícone Imagem

Não passa de uma junção do Parágrafo com Titulo eescrever como no Parágrafo com Titulo, incluindo

imagem ao lado da escrita, e podendo utilizar o efeito de ambos ícones .

Elementos > Básico > Ícone Paragrafo com Imagem

Colunas

Permite separar a página verticalmente, onde pode vários ícones nessas separações, pode colocar

diferentes como imagem, texto e vídeo. Elementos >Básico > Ícone Múltiplas Colunas

Como o nome diz, é um divisor, porém diferente dadivide a página horizontalmente com 1 traço.

Elementos > Mais > Divisor

pode acrescentar páginas ao seu site, definindo Nome, a ordem ginas, entre outras características.

excluir a página, porém ao excluir uma página perde todo na mesma!

convidar colaboradores para o seu site, porém vai r qualquer coisa é inclusive páginas. É necessário para convidar um

Editor que o mesmo possua um registo e o e-mail que utiliza para acessEditores no canto superior do ecrã, próximo de Elementos

mail, o futuro editor irá receber um email que ao aceitar


17

solitária ao site, , 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

da entre outros.

e Imagem, onde , incluindo uma

podendo utilizar o efeito de ambos

pode colocar elementos

m diferente das Colunas,

seu site, definindo Nome, a ordem

gina perde todo

ter total acesso para convidar um

utiliza para acesso ao Weebly, de Elementos e Paginas e

que ao aceitar e



efetuar o login será direcionado para o site alterações. Somente o criador do site

Formulário de Contato

É um Ícone que permite enviem diretamentedúvidas, sugestõesatravés doseja atravésnomes dos

outras configurações. Elementos > Básico > Ícone Formulá Galeria de Imagens

É o ícone que possibilita adicionar váao mesmo tempo, como se fosse um quadro, podendo escolher a forma (quadricular, basta colocar oas imagensElementos > Multimédia > Fotografia Galeria

Slides

É semelhante àuma. Possibilita que o criador do site ou editores possaque forma desejaou pelas imagens em miniatura!Elementos > Multimédia > Apresentação de Slides

Modificar o Desenho d a PáNo caso de não ter gostadoé possível. Primeiro deve encontrar um desenho de pápois não são todos. O segundo passo nas proporções para cobrir o fundo, procure na internet pois precisarámesma.

Como Modificar:

1. Procure uma imagem na internet e uma p2. Escolha Desenho, clique em Editar HTML/ CSS use ctrl+f para abrir o

localizado, assim que abrir procure por background de não ter um Link modificada.

3. Ao encontrar o link deve coloca o URL da imagem que encontroucarregar a imagem e




direcionado para o site no qual tem privilégios para Somente o criador do site poderá enviar convite para ser editor do site!

É um Ícone que permite que os leitores do seu site weebly diretamente para o Email do Administradorsugestões ou resposta a perguntas feitas por

do Formulário. O formulário é totalmenteatravés da programação que é simples, é possível

nomes dos tópicos preenchidos, se são obrigatórios

ementos > Básico > Ícone Formulário de Contacto

one que possibilita adicionar várias imagens, mostrando todaao mesmo tempo, como se fosse um quadro, podendo escolher a forma (quadricular, retangular) entre outras coisas, para adicibasta colocar o ícone na página e clicar no quadro azul e selecionar

ns no seu computador. Elementos > Multimédia > Fotografia Galeria

É semelhante à Galeria, porém as suas imagens aparecePossibilita que o criador do site ou editores possa

a desejam para visualizar as imagens, por menu deou pelas imagens em miniatura! Elementos > Multimédia > Apresentação de Slides

a Página não ter gostado de nenhum dos temas ou se pretende um

encontrar um desenho de página que possaO segundo passo é encontrar uma imagem grande, que cobrir o fundo, procure na internet pois precisará

uma imagem na internet e uma página que possa ser modificada.Escolha Desenho, clique em Editar HTML/ CSS use ctrl+f para abrir o localizado, assim que abrir procure por background que fica em body,

um Link à frente de background é por que a página não pode ser

link deve apagar o mesmo que se encontra dentro de (coloca o URL da imagem que encontrou na internet dentro dos ( ), a pá

a imagem e o fundo será alterado.


18

tem privilégios para fazer para ser editor do site!

seu site weebly Administrador do site perguntas feitas por si

é totalmente editável, ou possível decidir o

obrigatórios ou não, entre

rias imagens, mostrando todas ao mesmo tempo, como se fosse um quadro, podendo escolher a

coisas, para adicionar gina e clicar no quadro azul e selecionar

suas imagens aparecem uma a Possibilita que o criador do site ou editores possam selecionar

, por menu de números,

se pretende um exclusivo, isso possa ser modificado,

magem grande, que encaixe cobrir o fundo, procure na internet pois precisará do URL da

ser modificada. Escolha Desenho, clique em Editar HTML/ CSS use ctrl+f para abrir o

fica em body, no caso gina não pode ser

se encontra dentro de (), e dos ( ), a página vai



Utilizar HTML É um ícone que permite colocaanimações, imagens,dono", assimElementos > Básico > Personalizador HTML

Ficheiro Possibilita que o criador ou editor do site disponibilize imagens, documentos e programas para serem pelos utilizadoresElementos >

Primeiros elementos: Adiciona

Elementos são objetos que

vídeos e outros são adicionados através de elementos.

alguns desses elementos e a forma que estes funcionam.

Para adicionar um elemento a

para a área da página. O elemento mais básico




É um ícone que permite colocar no site elementos animações, imagens, etc, que se encontram conectados dono", assim pode adicionar músicas, chat, ao seu site weeblyElementos > Básico > Personalizador HTML

Possibilita que o criador ou editor do site disponibilize imagens, documentos e programas para serem

tilizadores do site. Elementos > Multimédia > Ícone Ficheiro

Primeiros elementos: Adiciona r texto ao site

objetos que pode utilizar na construção de um site. Todo o

vídeos e outros são adicionados através de elementos. Em seguida são apresentados

e a forma que estes funcionam.

r um elemento a um site basta clicar no elemento pretendido

elemento mais básico - o elemento parágrafo / texto


19

externos, como conectados ao "site

ao seu site weebly.

Possibilita que o criador ou editor do site disponibilize imagens, descarregados

Todo o texto, fotos,

Em seguida são apresentados

pretendido e arrastá-lo

o elemento parágrafo / texto:



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

de ferramentas de texto que

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

e clique no botão apropriado para fazer essa

Da esquerda para a direita,

itálico, sublinhado , colocar o texto maior ou meno

escolher o alinhamento de todo o texto dentro do elemento, criar listas com

marcadores e numeradas, e remover a formatação.

não pode fazer é mudar o tipo de letra para

uma página poderá continuar a escrever neste mesmo elemento,

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





Para começar a escreve clique no elemento:

uma palavra, uma frase, ou vários parágrafos em um único elemento.

repare na barra cinza na parte superior do elemento.

que permite fazer alterações básicas ao seu texto.


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

colocar o texto maior ou menor, mudar a cor,

o alinhamento de todo o texto dentro do elemento, criar listas com

marcadores e numeradas, e remover a formatação. Como já percebeu

não pode fazer é mudar o tipo de letra para outro diferente. Para adicionar mais texto a

continuar a escrever neste mesmo elemento, ou arrastar

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


20


uma palavra, uma frase, ou vários parágrafos em um único elemento.

barra cinza na parte superior do elemento. Esta é a barra

o seu texto. Funciona


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

, mudar a cor, criar um link ,

o alinhamento de todo o texto dentro do elemento, criar listas com

Como já percebeu uma coisa que

Para adicionar mais texto a

ou arrastar outro



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

� Parágrafo w / Título:

já construído dentro

� Parágrafo w / Imagem:

um título como para uma

Primeiros elementos: adicionar imagens a um site

Para adicionar imagens ao site

de imagem para a página.

Clique na caixa Imagem de upload para adicionar uma




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.

Parágrafo w / Imagem: Um elemento de parágrafo com um lugar tanto para

como para uma imagem construída dentro.

Primeiros elementos: adicionar imagens a um site

o site o processo é idêntico ao do texto, arrasta

Clique na caixa Imagem de upload para adicionar uma imagem.


21

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

Um elemento de parágrafo com um lugar para um título

Um elemento de parágrafo com um lugar tanto para

arrasta o elemento



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

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

próprio computador ou pesquisar

Vamo-nos concentrar na opção de fazer upload de uma

computador. A maneira mais fácil de abordar esta questão é arrastar a imagem que

deseja para a caixa "arraste a imagem para aqui

"Enviar foto" e dar o caminho da imagem

O tamanho de uma imagem

tamanho do elemento.




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

As duas principais opções são: ou upload (ou arrastar) uma imagem do

próprio computador ou pesquisar na base de dados do Weebly.

concentrar na opção de fazer upload de uma imagem

A maneira mais fácil de abordar esta questão é arrastar a imagem que

"arraste a imagem para aqui." Pode também clicar no botão verde

inho da imagem.

O tamanho de uma imagem vai variar após o upload, mas normalmente


22

de adicionar uma

load (ou arrastar) uma imagem do seu

do seu próprio

A maneira mais fácil de abordar esta questão é arrastar a imagem que

clicar no botão verde

upload, mas normalmente assume o



Pode ajustar o tamanho da imagem, clicando e arrastando a caixa que aparece no

canto inferior direito da imagem (precisa clicar sobre a

Clicando na imagem abre uma caixa de diálogo de configurações que

fazer mais alterações.

Opções de formatação:

� Lightbox : Se ativar,

seu site terá acesso a




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

abre uma caixa de diálogo de configurações que pode

: Se ativar, significa que qualquer utilizador que clique

acesso a uma versão maior da mesma.


23

ode ajustar o tamanho da imagem, clicando e arrastando a caixa que aparece no

poder vê-la).

pode usar para

utilizador que clique na imagem do



� Ligação : Esta opção transforma a imagem n

� Espaçamento : Faz pequenos ajustes para a quantidade de espaço em branco

à volta da imagem.

� Caption : Permite adicio

� Avançado : Permite ajustar (ou ligar / desligar)

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

imagem em qualquer sentido

indesejadas da imagem.

Exemplo:




Esta opção transforma a imagem num link.

: Faz pequenos ajustes para a quantidade de espaço em branco

: Permite adicionar uma legenda de texto básico.

: Permite ajustar (ou ligar / desligar) o limite da imagem.

abre um editor de imagens simples.

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

sentido e tem uma característica que pode cortar partes


24

: Faz pequenos ajustes para a quantidade de espaço em branco

da imagem.

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

que pode cortar partes



A opção Cortar coloca uma caixa sobre a parte superior da imagem.

a caixa para arrastá-la e ajustar os cantos e lados

Uma vez feitas as alterações clique em OK.

clique em Cortar novamente para reajustar ou clique no botão cinza em Cancelar para

sair do editor. Cortada a imagem

canto superior direito.




A opção Cortar coloca uma caixa sobre a parte superior da imagem. P

la e ajustar os cantos e lados alterando as dimensões.

alterações clique em OK. No caso de não gostar das mudanças


ortada a imagem para guardar as alterações clique no botão Salvar no


25

Pode clicar sobre

dimensões.

r das mudanças


clique no botão Salvar no



Colocar elemento colunas

Quando começar a adicionar elementos a uma página, provavelmente vai notar que

eles vai ficando automaticamente

com que pareça que não há maneira de colocar elementos lado a lado.

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

para uma página. Isto permite

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 que aparece quando está posicionada

no número apropriado.

Pode arrastar os elementos

colunas para ajustar a largura de cada um




Colocar elemento colunas


automaticamente na área de trabalho. À primeira vista, isso

com que pareça que não há maneira de colocar elementos lado a lado.


Isto permite-lhe que os elementos tenham lugar certo ao lado do

O Columns elemento é arrastado para uma página, assim como qualquer outro


mentas que aparece quando está posicionada sobre o elemento.

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

colunas para ajustar a largura de cada uma.


26


À primeira vista, isso pode fazer

com que pareça que não há maneira de colocar elementos lado a lado. Mas a boa


lugar certo ao lado do

O Columns elemento é arrastado para uma página, assim como qualquer outro


sobre o elemento. Basta clicar

em cada coluna, e usar a barra azul entre as



Criar mais páginas para o seu site

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

número de páginas e sub-páginas necessário.

Para criar uma nova página é tão simples como ir

botão Adicionar Página.

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

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




Criar mais páginas para o seu site

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

páginas necessário.

uma nova página é tão simples como ir ao separador Páginas

Há uma opção para adicionar uma página padrão ou adicionar um blog.

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


27

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

ao separador Páginas e clicar no

adrão ou adicionar um blog. Clicando no



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

� Editar a página (vai para a� 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.

página é acessível via de navegação do site.a página vai ser escondidalinks 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 naveoutro site).

� Ajuste as configurações avançadas.

As configurações avançadas de cada página são úteis para melhorar Search Engine Optimization do seu site. Adicionar página, irá adicionar outrestava a trabalhar):




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

i para a área de elementos) Copie a página para usar como base para uma nova página

Mude o nome da Página Ocultar a página a partir do Menu de navegação. Se esta forpágina é acessível via de navegação do site. Se a caixa estiver marcada, então

vai ser escondida na navegação (embora possa criar os links para páginas escondidas) Proteger com senha nesta página, o que requer uma assinatura para o nosso

Link da página para um site externo (criando um link de navegação que leva a

Ajuste as configurações avançadas.

gurações avançadas de cada página são úteis para melhorar Search Engine Podemos adicionar várias páginas ao site (clicando em

irá adicionar outra página e salve as alterações à


28

for desmarcada a Se a caixa estiver marcada, então

os seus próprios

Proteger com senha nesta página, o que requer uma assinatura para o nosso

gação que leva a

gurações avançadas de cada página são úteis para melhorar Search Engine adicionar várias páginas ao site (clicando em

página na qual



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

baixo na lista. Ao arrastar

seja a principal, que é indicado pelo ícone de

que pretende. Vamos criar uma sub

página. Sub-páginas aparecem no menu de navegação do site como parte de um

menu drop-down para qualquer página que estiver conectado

Como já foi referido, para criar uma sub

página e, em seguida, arraste

principal através de uma linha pontilhada.

página.

Agora, o menu de navegação

Se clicar sobre o link Portfolio com o ponteiro do

com um link para cada uma




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

uma página para o topo da lista fará com que essa página

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

Vamos criar uma sub-página, arrastando-a para a direita da nossa

páginas aparecem no menu de navegação do site como parte de um

down para qualquer página que estiver conectado.

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

página e, em seguida, arraste para a direita até verificar que está ligada

principal através de uma linha pontilhada. Poderá ter muitas sub-páginas de uma

gação do site inclui links para todas as páginas que criou

o link Portfolio com o ponteiro do rato, um menu drop

a das sub-páginas criadas.


29

s para cima e para

uma página para o topo da lista fará com que essa página

pode ter o nome

direita da nossa

páginas aparecem no menu de navegação do site como parte de um

página sob outra

verificar que está ligada à página

páginas de uma

s para todas as páginas que criou.

, um menu drop-down aparece



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

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

Página.

Criar um link de navegação para outro site

Existem algumas situações em que

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

Para criar um link de navegação

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

Dê o nome ao link, este nome

o link completo da página ou site

configurações.




Para editar o conteúdo de uma página basta clicar no link no menu de navegação ou

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

riar um link de navegação para outro site

stem algumas situações em que pretende a navegação de uma ligação em outr

página do Twitter, um blog, um site conhecido

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

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

, este nome é o que vai aparecer na navegação. Em seguida, insira

a página ou site que pretende e posteriormente,


30

o menu de navegação ou

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

ligação em outra

um site conhecido, entre outros.

externo, ou seja, para fora do seu site, clique no

Em seguida, insira

que pretende e posteriormente, Salvar



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, é

tema a utilizar para o design.

(seja no início, no meio ou no final do processo de criação do site)

tema não implica apagar ou alterar o conteúdo do seu site.

no separador Design:

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

favoritos.

Para selecionar o tema pretendido





Temas e editar Fontes

já está praticamente definido, é um bom momento para decidir qual

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). Escolher um novo

apagar ou alterar o conteúdo do seu site. Para alterar o tema,

é a seção "Favoritos", onde são apresentados alguns dos temas

pretendido, clique sobre ele.


31


um bom momento para decidir qual o

Um tema pode ser selecionado a qualquer momento

scolher um novo

Para alterar o tema, clique

os alguns dos temas



Se optar pela seção Todos os Temas

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, cl

aplicação no seu site.




seção Todos os Temas no separador Design, terá acesso a

Estes podem ser vistos como um grande grupo ou através de diferentes

categorias, como negócios ou casamento.

um tema que gosta, clique no botão Preview para previsualizar a


32

acesso a todos os

Estes podem ser vistos como um grande grupo ou através de diferentes

previsualizar a



Clique em Usar Tema para

se pretender adicioná-lo à sua lista de favoritos ou clique em Cancelar

escolher temas.




Clique em Usar Tema para aplicar o tema escolhido ao seu site, clique em Favoritos

lo à sua lista de favoritos ou clique em Cancelar


33

o seu site, clique em Favoritos

lo à sua lista de favoritos ou clique em Cancelar continuar a



Depois de selecionar o tema, use a

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

Editar o cabeçalho

Grande parte dos temas incluem uma área para uma imagem de cabeçalho

entanto poderá alterar essa imagem padrão.

imagem:

Para apagar a imagem pa

canto superior direito.




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


de uma centena de fontes para escolher.

temas incluem uma área para uma imagem de cabeçalho

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

apagar a imagem padrão, clique sobre a imagem e depois no X vermelho no


34

para definir as fontes


temas incluem uma área para uma imagem de cabeçalho, no

Para começar, clique no botão Editar

no X vermelho no



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

superior esquerdo.

Agora tem a opção de escolher

Pode ainda utilizar o campo

seu site.





a opção de escolher a imagem pretendida.

ainda utilizar o campo procurar para selecionar uma imagem apropriada para o


35


ma imagem apropriada para o



Uma vez selecionada a imagem, pode editá

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

canto e laterais da imagem.




imagem, pode editá-la.

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

canto e laterais da imagem.


36

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



A imagem pode ser arrastada clicando em qualquer lugar e arrastando

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

efeitos para a imagem.

Quando terminar a personalização d

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

ou selecionar apenas algumas

nas páginas.

Links de Texto

Para criar um link de texto, primeiro selecione o text

ligação.




imagem pode ser arrastada clicando em qualquer lugar e arrastando-

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

terminar a personalização da imagem, selecione o botão Salvar.

salvar a imagem em cada página do site, apenas na página

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

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


37

-a.

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

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

a página editada,

ter diferentes cabeçalhos

no qual pretende efetuar a



Em seguida, clique no ícone "

Na caixa de diálogo link, tem de

outra página, link no seu site.

Link para uma página de outro site.




Em seguida, clique no ícone "Hiperligação" na barra de ferramentas de texto.

tem de selecionar o tipo de link que pretende criar:

no seu site.

outro site. Pode optar por abrir o link numa nova janela.


38

" na barra de ferramentas de texto.

que pretende criar: Link para

abrir o link numa nova janela.



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

deste.

Link para um endereço de e

(como o Outlook) seja aberto para que este




oferecendo ao utilizador a possibilidade de fazer download

Link para um endereço de e-mail. Isso faz com que o programa de email do

seja aberto para que este possa enviar-lhe uma mensagem


39

oferecendo ao utilizador a possibilidade de fazer download

programa de email do utilizador

lhe uma mensagem.



Links em Imagens

Para criar um link numa imagem, primeiro clique na imagem

a hiperligação.

Em seguida, clique na opção




imagem, primeiro clique na imagem na qual pretende efetuar

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


40

na qual pretende efetuar

no canto superior direito da imagem.



Na caixa de diálogo de hiperligação

Link para outra página no próprio site.

Link para uma página em outro site.

janela.




de hiperligação, pode selecionar o tipo de link que

Link para outra página no próprio site.

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


41

, pode selecionar o tipo de link que pretende criar,

o link numa nova



Link para um arquivo para que o utilizador

Link para um endereço de e

(como o Outlook) seja aberto para que este possa enviar




para que o utilizador possa fazer o download.

Link para um endereço de e-mail. Isso faz com que o programa de email do utilizador

(como o Outlook) seja aberto para que este possa enviar-lhe uma mensagem.


42

Isso faz com que o programa de email do utilizador

lhe uma mensagem.



O elemento de botão

O elemento botão permite cri

site, a páginas de outros sites

Tal como acontece com outro elemento,

página.




botão

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

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


43

outras páginas no seu

tem de arrastar o elemento botão para a



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

da sua aparência. Pode editar o texto

Pode hiperligar o botão a outro site.

O estilo do botão pode ser alterad

botão tem duas cores e dois tamanhos projetados especificamente para o tema

específico que está a usar




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

editar o texto do botão.

Pode hiperligar o botão a outro site.

O estilo do botão pode ser alterado através de quatro opções pré


a usar.


44

o seu tamanho e

-definidas. Cada




Criar um Slideshow Imagem

O elemento slideshow (disponível na categoria "Multim

apresentação para as imagens

elemento para a página.

Tem de escolher qual o estilo de slideshow que deseja.

posteriormente.

Posteriormente tem de fazer o




Criar um Slideshow Imagem

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

apresentação para as imagens. Para adicionar um slideshow, basta arrastar o

estilo de slideshow que deseja. Pode sempre ser alterado

Posteriormente tem de fazer o upload das imagens.


45

dia") permite criar uma

how, basta arrastar o

sempre ser alterado



Em seguida, selecione as imagens que pretende.

Dependendo do número de

carregar.




imagens que pretende.

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


46

alguns minutos para



Pode arrastar as imagens

eliminá-las. Para adicionar legenda à imagem

Guarde as alterações e vai ver o novo slideshow

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




para reordená-los, clique no "x" ao lado de cada um

Para adicionar legenda à imagem clique no ícone "balão".

vai ver o novo slideshow na página.



47

los, clique no "x" ao lado de cada uma para




Utilizar o Leitor de Vídeo

O elemento vídeo permite

vídeo) diretamente para o seu site.

"Multimédia". Para usá-lo, clique e arraste

Em seguida, basta clicar no player e uma caixa de diálogo será aberta a partir de onde

pode selecionar um vídeo do seu computador.

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




Utilizar o Leitor de Vídeo

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 n

lo, clique e arraste-o para o local desejado na página.

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

o upload de vídeos com qualidade (até 1 GB por

O elemento vídeo está disponível na categoria

o para o local desejado na página.

ta clicar no player e uma caixa de diálogo será aberta a partir de onde

Weebly suporta M4V, MPG, MOV,



Dependendo do tamanho do

pode demorar até 20 minutos para fazer o upload.

Pode utilizar um número ilimitado de vídeos

vídeo pode ser maior do que 1 GB.




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

pode demorar até 20 minutos para fazer o upload.

um número ilimitado de vídeos no seu site, o único limite é que nenhum

vídeo pode ser maior do que 1 GB.


49

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

o seu site, o único limite é que nenhum



Utilizar o Audio Player

O leitor de áudio permite

áudio. Este elemento faz parte de nossa Pro Upgrade.

disponível na categoria "Multim

Depois de adicioná-lo à página, clique em qualquer lugar do elemento para abrir a

barra de ferramentas de áudio.

arquivo de áudio.

O arquivo de áudio pode demorar alguns minutos para carregar.




o Audio Player

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

Este elemento faz parte de nossa Pro Upgrade. O elemento Audio Player está

a categoria "Multimédia", basta arrastá-lo para uma 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



50

música, podcasts, ou outros arquivos de

O elemento Audio Player está

lo para uma página.

ágina, clique em qualquer lugar do elemento para abrir a

Em seguida, clique em Upload para selecionar um




Elemento de vídeo YouTube

O elemento vídeo do YouTube permite

elemento pode ser encontrado

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

ferramentas. Tem de digitar o link direto pa




vídeo YouTube

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

elemento pode ser encontrado em Multimédia.


digitar o link direto para o vídeo do YouTube no campo URL


51

utilizar vídeos publicados no youtube. Esse


no campo URL.



Iniciar um novo blog

Para criar um blog, vá para

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.




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.

adicionar o blog à sua lista de páginas.

e, em seguida, clique em Editar Página para começar a adicionar




52

Pages, clique em Adicionar Página e

e, em seguida, clique em Editar Página para começar a adicionar





Para criar um novo post para o seu blog, use o

O seu blog tem um título e uma área de conteúdo.

não mais do que uma frase.

básico que você pode editar ou apagar.

Para adicionar conteúdo ao

para uma página - basta arrastar os elementos para




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

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

você pode editar ou apagar.

Para adicionar conteúdo ao blog funciona da mesma forma que a adição de conteúdo

basta arrastar os elementos para a área de trabalho e editá


53

botão Novo Post no topo do blog.

O título deve geralmente ser curto -

A área de conteúdo inclui um elemento de parágrafo

blog funciona da mesma forma que a adição de conteúdo

a área de trabalho e editá-los.



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

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

Agora pode publicar o post

Salvar em Rascunhos para editar / publicar mais tarde.




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

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

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

Salvar em Rascunhos para editar / publicar mais tarde.


54

ssas categorias vão

encontrar mensagens.

instantaneamente disponível) ou



Se salvar o post como rascunho, vai

rascunhos no topo da página do blog.

rascunhos para editá-lo e Salvar / Publicar.

Cada novo post publicado aparecerá no topo da página.

ou oito mensagens à página,

principal.




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

lo e Salvar / Publicar.

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


55

acessível através de uma área de

Basta clicar no link para o post desta área

Depois de ter adicionado sete

posts mais antigos serão movidos para fora da página



Criar um Formulário de conta

Um formulário de contacto proporciona aos seus

você. Pode perguntar a um utilizador

versões gratuitas podem incluir até cinco campos

um número ilimitado de campos

para a página.

O formulário começa com quatro campos

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

campo para enviar o formulário).

barra de




Criar um Formulário de conta cto básico

to proporciona aos seus utilizadores uma maneira f

utilizador algo tão simples como o nome e endereço de e

podem incluir até cinco campos de formulário e Pro os utilizadores

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

com quatro campos padrão.


campo para enviar o formulário). Para fazer alterações basta clicar num campo e usando a


56

uma maneira fácil de chegar até

nome e endereço de e-mail. As

utilizadores podem ter

o elemento do formulário


um campo e usando a

ferramentas fazer



ajustes. Uma série de configurações podem

Pode facilmente adicionar novos campos ao formulário, arrastando

elemento. Existem campos pré

Antes de completar o formulário e publicar

endereço de e-mail (ou endereços)

endereço, separando-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

Formulário.




urações podem ser alteradas para cada campo.

facilmente adicionar novos campos ao formulário, arrastando-os como qualquer outro

em campos 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

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

os por vírgulas.


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


57

ser alteradas para cada campo.

os como qualquer outro

definidos para nome, endereço postal, endereço e telefone.

e determinar para qual

ode inserir mais de um


introduziu em Opções de



Publicar o seu Site

Agora que adicionou conteúdo básico

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

Isso fará com que uma caixa de verificação

publicado.




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

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


58

Para isso, basta usar

seja mostrada para que saiba se o seu site foi

manual ufcd 0152-estrutura de um sítio para internet...

Documents