ot arte 3ª série ensino médio - tutoriais 1 e 2

67
TUTORIAL Como fazer sites utilizando o Webnode

Upload: claudia-elisabete-silva

Post on 19-Jun-2015

263 views

Category:

Documents


2 download

DESCRIPTION

Material apresentado pela PCNP Doralice na orientação técnica para professores de Arte da 3ª série do Ensino Médio, das escolas da DE Leste 4. 19/06/2013.

TRANSCRIPT

Page 1: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

TUTORIAL Como fazer sites utilizando o Webnode

Page 2: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

PARTE 1

Cadastrar dados;

Confirmar dados;

Criar esboço do site.

Page 3: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Na página inicial do Webnode(http://www.webnode.com.br/) crie o nome da sua

página,insira o seu email e crie uma senha:

Page 4: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

O Webnode te enviará um email confirmando a criação do site e os dados

fornecidos no cadastro: email e senha.Além disso,é necessário que você

clique no link indicado para confirmar seu email. Guarde essas informações.

ATENÇÃO: Este email poderá cair na lixeira ou na caixa de Spam.Caso isso

ocorra,recupere para a caixa de entrada.Cuidado para não deletar!

Page 5: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Escolha o tipo do site:

Page 6: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Selecione o modelo do seu site e em seguida clique em continuar:

Page 7: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Escolha as páginas que você deseja inserir no seu site.Ou então se

preferir,faça-o mais tarde e clique em concluir

Page 8: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

PARTE 2

Editar :

-Modelos;

-Imagens;

-Cabeçalho;

Page 9: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Após isso,o seu site será gerado e irá aparecer uma tela de login.Utilize

o email e a senha que você cadastrou no passo 1. Em seguida irá

aparecer a tela de edição do seu site:

Page 10: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Na tela de edição do site,você encontra as seguintes opções:

Novo,Ir para a página,Publicar,Pré-visualizar,Layout da

página,Excluir,Propriedades,Segurança,Texto e

Imagens,Enquete,Galeria de

fotos,Formulário,Artigos,Catálogos,Mais,Arquivos,

Imagens,Modelos de site e Idioma.

Page 11: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Na página de edição podemos alterar o conteúdo de diversos itens como por

exemplo Alterar a imagem do cabeçalho. Clique em Editar Imagem:

Page 12: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Selecione a imagem e aperte a tecla DEL para removê-la.Clique em

Adicionar Imagem para importar uma imagem salva no seu computador

ou escolher diretamente da galeria do Webnode.E após isso,se preferir,edite

a nova imagem com as opções do editor:

DICA: Crie um logotipo personalizado para inserir em seu site

Page 13: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Aqui,você poderá escolher imagens da galeria do Webnode. Para escolher

imagens do seu computador clique em Enviar uma Imagem:

Page 14: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Clique na imagem para ajustar o tamanho e a posição usando os pontos

indicados. Use o botão Enviar para trás,para que seja possível inserir/editar

o título do slogan.

Após a edição concluída,clique em Salvar e fechar

DICA: Ao clicar na área de fundo da imagem do cabeçalho,o botão Cor de

fundo ficará disponível para edição.

Page 15: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Para alterar o modelo do site,clique em Modelos de site e escolha o seu

modelo.Você também pode navegar pelas opções categorias de negócios e

escolher aquela que você preferir.

Page 16: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Após escolher o seu tema,verifique se está da maneira que você gostaria.

Clique em Usar este modelo. Conforme imagem abaixo:

Page 17: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Dê duplo clique no cabeçalho para alterar texto e imagem.Aqui você pode

colocar a foto e a frase do seu slogan.

Page 18: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Quando estiver pronto,clique em Publicar. Abrirá uma janela informando

que a página foi publicada.Feche-a clicando no X:

Page 19: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Como efetuar Logout do site?

Clique em Fechar e depois em Sair:

Page 20: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Como retomar a edição do site?

Acesse o webnode e clique em Entrar.

Insira o e-mail e a senha de acesso e clique em Entrar.

Page 21: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Abrirá a tela com os sites que você criou. É possível ter vários sites.Eles são

chamados de projetos. No projeto que você deseja alterar,clique em

Administrar site:

Page 22: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Para começar a editar o seu site clique em Comece a editar.

ATENÇÃO: A opção Adquira seu próprio domínio é uma função

paga.Explore esses recursos mais tarde,se preferir.

Page 23: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

PARTE 3

Adicionar/Excluir páginas;

Editar conteúdo das páginas;

Page 24: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Acrescentar ou excluir as páginas do Menu.Você pode alterar a

ordem,excluí-las ou acrescentar novas páginas:

Clique em Editar Menu;

Clique em Nova Página:

Page 25: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Após todas as edições feitas,clique em Salvar

Page 26: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Observe que a página criada ainda não foi publicada.

Como publicá-la?

Page 27: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Clique na seta ao lado do nome da página que você acabou de criar:

Um pequeno Menu irá abrir.Clique na opção Publicar:

Page 28: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Ou então,Clique na caixa ao lado do nome do site para selecioná-la e depois

clique em Publicar:

Page 29: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Editar conteúdo das páginas:

Selecione a página que você quer editar e clique em Editar

(conteúdo,galeria ou adicionar artigo). Neste exemplo,estaremos editando a

página inicial:

Page 30: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Na página de edição, há algumas ferramentas de formatação de texto,por

exemplo.

Após as edições concluídas,clique em Salvar:

Page 31: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Você pode acrescentar um conteúdo a uma página criada,ou seja Texto e

Imagem,Enquete,Galeria de Fotos,Formulários,Catálogos,Artigos e

Wiggets.

Basta selecionar o conteúdo,arrastar e soltar no local desejado.Este local é

indicado pela faixa laranja que aparecerá ao se aproximar o conteúdo a ser

inserido:

Page 32: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Agora,basta editar o conteúdo da página.

Ao terminar a edição,clique em Publicar:

Page 33: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

DICA: Visualize seu site para verificar se ele está da forma que você

deseja.Clique em Pré-visualizar

Page 34: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

CANAL DE DICAS WEBNODE

NO YOUTUBE:

http://www.youtube.com/user/58709131

Page 35: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

TUDO PARA WEBNODE

NO YOUTUBE:

http://www.youtube.com/playlist?list=PLBA

8296E4FE32CC19

Page 36: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

TUTORIAL Utilizando recursos especiais do Webnode

Page 37: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

PARTE 1

Identificando os recursos

Como inseri-los

Page 38: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Na tela de edição do site podemos identificar algumas ferramentas adicionais que

podemos inserir em nosso site. Sendo elas: Enquete, Galeria de Fotos,

Formulário, Artigos, Catálogos e Mais

Page 39: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Para fazer a inserção da ferramenta selecionada, existem duas opções:

arrastá-la até a área desejada, ou então você pode simplesmente clicar e

aguardar até que ela seja posicionada automaticamente na página. Note a

barra laranja, citada no tutorial anterior.

Page 40: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

PARTE 2

Explorando e editando as informações das

seguintes ferramentas:

- Enquetes;

- Galeria de fotos;

- Formulário (Contate-nos);

- Artigo;

- Mais (Código Embutido).

Page 41: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Neste caso, iremos realizar a criação de uma enquete. Enquetes são úteis

para saber a opinião dos alunos e interessados em algum tema, para

colher dados, identificar preferências, entre outras finalidades. Após

inseri-la, a seguinte tela será aberta em seu navegador:

Page 42: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Nesta tela, devemos escolher a pergunta e suas respectivas alternativas. Para fins de

exemplo, utilizemos a seguinte:

Page 43: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Você também pode inserir novas alternativas, clicando no link “Adicionar uma

alternativa”.

Page 44: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Feitas as alterações, basta clicar em “OK” para que as alterações sejam realizadas

e sua enquete seja criada.

Page 45: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Abaixo você pode conferir como a nossa enquete de exemplo ficou, após

termos clicado em “OK”:

Page 46: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Você ainda pode clicar em “Editar enquete” e, dessa forma, adicionar ou

remover perguntas à enquete em questão:

Page 47: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Agora iremos realizar a criação de uma Galeria de Fotos. As galerias são

úteis para que você possa disponibilizar fotos de algum evento na escola, de

obras e outros materiais que possam interessar à comunidade escolar. Para

isso, basta clicar em Galeria de Fotos para abrir uma janela como esta:

Page 48: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Na janela que se abriu, você só precisará escolher um nome para a galeria

e clicar em “OK”. Como exemplo, utilizaremos o seguinte tema:

Page 49: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Após escolhido o nome, uma nova janela será aberta. Nela, você deve

indicar quais fotos você deseja inserir na galeria. Para isto, basta clicar em:

“Fazer upload de imagens”, como mostra a imagem abaixo. DICA: Você

pode selecionar mais de uma foto para enviar, segurando a tecla CTRL do

teclado.

Page 50: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Exemplo de tela de envio de imagens:

Page 51: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Após carregadas para o Webnode, as imagens estarão dispostas como

mostra a figura abaixo. Você poderá excluir uma ou mais fotos

selecionando-a(as) e clicando em “Excluir”, bem como poderá acessar esta

mesma tela, posteriormente, clicando em “Editar galeria”. Após as

alterações, basta clicar em “Fechar”.

Page 52: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Exemplo de galeria criada:

Page 53: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Neste passo criaremos um formulário para contato. Formulários são úteis

para que os alunos e/ou pessoas interessadas possam entrar em contato

com a escola ou responsáveis pelo site, por exemplo. Veja a função de

formulário abaixo:

Page 54: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Você pode selecionar um formulário “Contate-nos” padrão, como abaixo:

Page 55: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Um espaço como este será apresentado:

Page 56: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Abaixo você pode verificar um formulário para contato padrão.

Page 57: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Ou então, personalizar o seu. Conforme exemplo abaixo:

Page 58: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Para tal, basta selecionar o campo desejado e alterar as informações que

serão exibidas para os usuários. Veja um exemplo de aplicação e atente-se

aos números e seu campo correspondente.

Page 59: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Veja a página pronta para a publicação após as alterações:

Page 60: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Aprenderemos agora a criar uma página de artigo. Estas páginas são úteis

para se publicar algum comunicado para os visitantes do site. Por exemplo,

um informe da direção ou do grêmio. Para tal, basta selecionar a opção

“Artigo”:

Page 61: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Dê um nome à sua seção de artigos:

Page 62: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Clique em “Adicionar artigo”.

Page 63: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Dê um título ao seu artigo, escreva-o e, caso deseje, edite-o conforme suas

necessidades. Por fim, basta clicar em “Publicar”.

Page 64: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Por fim, aprenderemos a inserir um código embutido em uma página.

Códigos embutidos são úteis para que possamos colocar algum conteúdo

multimídia, como por exemplo, jogos didáticos em flash, apresentações de

slides, streaming de vídeos, entre outros.

Page 65: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Visualize abaixo um exemplo de inserção de código embed de um vídeo do

Youtube.

Page 66: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

Após a inserção, o conteúdo será interpretado e exibido desta forma:

Page 67: OT Arte 3ª série Ensino Médio - Tutoriais 1 e 2

FIM

Obrigado por ter acompanhado o tutorial