SlideShare a Scribd company logo
1 of 36
Download to read offline
Tutorial Webnode
Criando site
1
Registrando
• Acesse o endereço: http://www.webnode.com.br/ e preencha os
dados solicitados e clique em Registre-se e crie seu site.
2
3
Aguarde enquanto o sistema carrega as informações ...
Enquanto isso, abra seu email e leia a mensagem que o Webnode te enviou.
ATENÇÃO: Mas não feche essa página.
Cópia da mensagem
que O Webnode
envia, confirmando da
criação do site e os
dados fornecidos no
cadastrado: E-mail e
Senha.
Guarde essas
informações.
ATENÇÃO: Este e-
mail
poderá cair na lixeira
ou na caixa de Spam.
Caso isso
ocorra, recupere para
a caixa de entrada.
Cuidado para não
deletar !
4
Retorne a página do Webnode para
continuar a criação do site ...
Provavelmente o carregamento já tenha
concluído. Na próxima tela você indicará o
tipo de site de deseja criar.
5
Selecione a opção Site pessoal (gratuito). As opções Site de negócios e Loja
virtual tem licença de uso por 30 dias, caso opte por ele deve-se pagar pelo domínio.
Depois escolha um slogan para seu site.
E o idioma: Português brasileiro
Clique em Continuar
Um slogan ou frase de efeito é uma frase de fácil
memorização que resume as características de um
produto, serviço ou até mesmo pessoa
6
Selecione um Modelo para seu site. Você pode alterar esse modelo
mais tarde. Clique em Continuar.
7
Selecione as páginas que você deseja criar automaticamente.
Você pode criar outras páginas no modo de edição. Mais tarde, veremos
como fazer isso. Clique em Concluir
8
Aguarde enquanto o sistema carrega as informações ...
9
Ao completar o carregamento irá abrir a página de edição do seu site.
Parabéns! Seu site está criado!
Clique em Pré-visualizar para ver como está sua página.
10
O endereço de sua página está indicado na URL após a palavra preview.
Esse exemplo: http://preview.tecnologia-educacional00.webnode.com/
Portanto, o endereço do site é:
http://tecnologia-educacional00.webnode.com
11
Feche a Pré-Visualização
Editando sua página
Na página de edição, pode-se alterar o conteúdo de diversos itens.
Inserir imagens e outros recursos; Vamos ver alguns:
Alterando a imagem do cabeçalho.
Passe o cursor do mouse na imagem e clique em Editar imagem
12
Ao abrir o editor de imagem, clique em Adicionar imagem para selecionar uma
imagem de seu computador ou da galeria do Webnode.
Observação: Outra dica interessante é criar um logotipo e inserir no seu site.
Veja a dica em: http://www.youtube.com/watch?v=Egx4f7tmKE4&noredirect=1
13
É nessa tela que é possível selecionar a imagem de sua
preferência, selecionando uma da galeria de imagens do webnode ou de
seu computador.
Para selecionar de seu computador clique em Enviar uma imagem e indique
o local onde a imagem está salva.
14
A Imagem será carregada. Clique na da imagem e ajuste o tamanho e a
posição. Use os pontos indicados na imagem para fazer esse ajustes. Use o
botões Enviar para traz, assim é possível editar o texto do título e o slogan.
Se clicar na área da imagem do cabeçalho (nesse modelo - campos verde) o
botão Cor de fundo ficará disponível para edição. Explore.
15
Botão Enviar para trás
Quando terminar o ajuste clique em Salvar e fechar.
16
17
Alterando o modelo do site
Clique em Modelos de site para alterar o modelo de seu site, o logo ou
o slogan. Também é possível usar as configurações avançadas . Explore
essas ferramentas mais tarde.
Os modelos indicados como PREMIUM são destinados as contas pagas.
Escolha um sem esse marca. Ao clicar no modelo será mostrada a aparência
(“a cara”) do site. Se tiver de acordo clique em Usar esse modelo.
18
Refaça o cabeçalho do site...
19
Quando estiver pronto , clique em Publicar .
Abrirá uma janela informando que a página foi Publicada. Feche essa
janela, clicando no X.
20
Clique em Fechar e depois em Sair.
Vamos ver como retomar a
edição do site.
21
Para retornar ao site de edição:
Acesse o webnode: http://webnode.com.br e clique em Entrar.
Abrirá os campos para insira o e-mail e a senha de acesso cadastro no webnode.
Clique em Entrar.
22
Abrirá a tela com os sites que você criou. Você pode ter vários sites.
Eles são chamados de Projetos. No projeto que deseja alterar clique em
Administrar site .
23
24
Nesse espaço, você pode alterar o domínio do seu site. Lembre-se que
esses serviços são pagos. Não é necessário adquirir um serviço.
Clique em Comece a editar.
25
Pronto, retornamos ao endereço de edição do site.
Vamos mostrar, acrescentar e editar páginas em seu site.
Vejamos ....
Acrescentando página no Menu do site.
Clique em Editar menu e na Janela que abrir clique em Nova página.
Insira o nome da nova página e clique em salvar
26
27
Observe que a página criada ainda não está Publicada.
Para Publicar faça assim:
28
Clique no combo da página criada. Vai aparecer as opções...
Clique em Publicar
29
Outra maneira é selecionar a Página criada e
clicar em Publicar Pronto! Clique em Fechar
Pronto, nova página criada e relacionada no Menu. Veja:
30
Editando uma página.
Selecione a página que você quer editar e clique Editar (conteúdo, ou galeria, ou
adicionar artigo). O nome depende do item que deseja editar.
Nesse exemplo vou editar o conteúdo da página inicial.
Irá abrir a página de edição do
conteúdo a ser alterado.
Explore as ferramentas de
edição. Faça as alterações e
clique em salvar e depois em
Publicar (na página de
gerenciamento do site).
31
Acrescentando um conteúdo
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. Esse local é indicado pela
faixa laranja que aparecerá ao se próxima o conteúdo a ser inserido.
32
Pronto! Agora basta editar o conteúdo (slide 31).
Ao terminar a edição do conteúdo, clique em Publicar.
33
Lembrando: Visualize seu site. Clique em Pré-Visualizar
34
Há muitas outras ferramentas que podem ajudar a incrementar seu site.
Aproveite para explorar essas ferramentas.
Segue algumas dicas ...
35
Dicas para Webnode
Canal de Dicas Webnode:
http://www.youtube.com/user/58709131
Tudo para Webnode:
http://www.youtube.com/playlist?list=PLBA8296E4FE32CC19
36
Tutorial elaborado por Adilson Villas Boas
PCNP de Tecnologia de São José dos Campos

More Related Content

What's hot (18)

Como criar um blog
Como criar um blogComo criar um blog
Como criar um blog
 
Como criar um Blog
Como criar um BlogComo criar um Blog
Como criar um Blog
 
Passo a passo_blog educacional
Passo a passo_blog educacionalPasso a passo_blog educacional
Passo a passo_blog educacional
 
Criando Blog Ste
Criando Blog SteCriando Blog Ste
Criando Blog Ste
 
Criando um Blog
Criando um BlogCriando um Blog
Criando um Blog
 
Tutorialdeblogs 110505222146-phpapp02
Tutorialdeblogs 110505222146-phpapp02Tutorialdeblogs 110505222146-phpapp02
Tutorialdeblogs 110505222146-phpapp02
 
Criar um blog
Criar um blogCriar um blog
Criar um blog
 
Tutorial blogger elyene_fabricia
Tutorial blogger elyene_fabriciaTutorial blogger elyene_fabricia
Tutorial blogger elyene_fabricia
 
Blog: Criação e Configuração
Blog: Criação e ConfiguraçãoBlog: Criação e Configuração
Blog: Criação e Configuração
 
Tutorial do blog
Tutorial do blogTutorial do blog
Tutorial do blog
 
aula 04 - WordPress
aula 04 - WordPressaula 04 - WordPress
aula 04 - WordPress
 
Modulo iii
Modulo iiiModulo iii
Modulo iii
 
Blogger Tutorial
Blogger TutorialBlogger Tutorial
Blogger Tutorial
 
Como criar páginas no blogger
Como criar páginas no bloggerComo criar páginas no blogger
Como criar páginas no blogger
 
Unidade III - Curso Introdução à Educação Digital
Unidade III - Curso Introdução à Educação DigitalUnidade III - Curso Introdução à Educação Digital
Unidade III - Curso Introdução à Educação Digital
 
InformáTica Blog 2
InformáTica   Blog 2InformáTica   Blog 2
InformáTica Blog 2
 
Blog
BlogBlog
Blog
 
Criar um blog
Criar um blog Criar um blog
Criar um blog
 

Similar to Tutorial webnode

Blog educacional
Blog educacionalBlog educacional
Blog educacionalYvana Costa
 
Projeto dreamweaver aula 3 a 5
Projeto dreamweaver aula 3 a 5Projeto dreamweaver aula 3 a 5
Projeto dreamweaver aula 3 a 5Élida Tavares
 
(Transformar 16) capacitação desenvolvimento de website 1.1 (mão na massa)
(Transformar 16) capacitação desenvolvimento de website 1.1 (mão na massa)(Transformar 16) capacitação desenvolvimento de website 1.1 (mão na massa)
(Transformar 16) capacitação desenvolvimento de website 1.1 (mão na massa)Ink_conteudos
 
Oficina Criando Um Blog
Oficina Criando Um BlogOficina Criando Um Blog
Oficina Criando Um Blogmarcelasb
 
Tutorial webnod setembro 2013
Tutorial webnod setembro 2013Tutorial webnod setembro 2013
Tutorial webnod setembro 2013tecampinasoeste
 
Cartilha de Participação do Sistema Nacional de Cultura
Cartilha de Participação do Sistema Nacional de CulturaCartilha de Participação do Sistema Nacional de Cultura
Cartilha de Participação do Sistema Nacional de CulturaJoão Paulo Mehl
 
Guia Blog Layout Parte2
Guia Blog Layout Parte2Guia Blog Layout Parte2
Guia Blog Layout Parte2Vanessa Crecci
 
Criando uma webquest com o site webnode
Criando uma webquest com o site webnodeCriando uma webquest com o site webnode
Criando uma webquest com o site webnodeVanessa Rodrigues
 

Similar to Tutorial webnode (20)

Tutorial webnode
Tutorial webnodeTutorial webnode
Tutorial webnode
 
Tutorial do blog do PIBID UNEAL Geografia Campus I
Tutorial do blog do PIBID UNEAL Geografia Campus ITutorial do blog do PIBID UNEAL Geografia Campus I
Tutorial do blog do PIBID UNEAL Geografia Campus I
 
Tutorial google sites mobile templates
Tutorial google sites mobile templatesTutorial google sites mobile templates
Tutorial google sites mobile templates
 
Blog educacional
Blog educacionalBlog educacional
Blog educacional
 
Projeto dreamweaver aula 3 a 5
Projeto dreamweaver aula 3 a 5Projeto dreamweaver aula 3 a 5
Projeto dreamweaver aula 3 a 5
 
Criar um blog
Criar um blogCriar um blog
Criar um blog
 
(Transformar 16) capacitação desenvolvimento de website 1.1 (mão na massa)
(Transformar 16) capacitação desenvolvimento de website 1.1 (mão na massa)(Transformar 16) capacitação desenvolvimento de website 1.1 (mão na massa)
(Transformar 16) capacitação desenvolvimento de website 1.1 (mão na massa)
 
Dreamweaver aula 1
Dreamweaver aula 1Dreamweaver aula 1
Dreamweaver aula 1
 
Guia BáSico 3
Guia BáSico 3Guia BáSico 3
Guia BáSico 3
 
Tutorial de site de Ramalhovieira
Tutorial de site de RamalhovieiraTutorial de site de Ramalhovieira
Tutorial de site de Ramalhovieira
 
Tutorial wiki
Tutorial wikiTutorial wiki
Tutorial wiki
 
Oficina Criando Um Blog
Oficina Criando Um BlogOficina Criando Um Blog
Oficina Criando Um Blog
 
aula 02 - WordPress
aula 02 - WordPressaula 02 - WordPress
aula 02 - WordPress
 
aula 01 - WordPress
aula 01 - WordPressaula 01 - WordPress
aula 01 - WordPress
 
Tutorial webnod setembro 2013
Tutorial webnod setembro 2013Tutorial webnod setembro 2013
Tutorial webnod setembro 2013
 
Cartilha de Participação do Sistema Nacional de Cultura
Cartilha de Participação do Sistema Nacional de CulturaCartilha de Participação do Sistema Nacional de Cultura
Cartilha de Participação do Sistema Nacional de Cultura
 
Guia Blog Layout Parte2
Guia Blog Layout Parte2Guia Blog Layout Parte2
Guia Blog Layout Parte2
 
Guia Layout
Guia LayoutGuia Layout
Guia Layout
 
Criando uma webquest com o site webnode
Criando uma webquest com o site webnodeCriando uma webquest com o site webnode
Criando uma webquest com o site webnode
 
Tutorial Wiki
Tutorial WikiTutorial Wiki
Tutorial Wiki
 

Tutorial webnode

  • 2. Registrando • Acesse o endereço: http://www.webnode.com.br/ e preencha os dados solicitados e clique em Registre-se e crie seu site. 2
  • 3. 3 Aguarde enquanto o sistema carrega as informações ... Enquanto isso, abra seu email e leia a mensagem que o Webnode te enviou. ATENÇÃO: Mas não feche essa página.
  • 4. Cópia da mensagem que O Webnode envia, confirmando da criação do site e os dados fornecidos no cadastrado: E-mail e Senha. Guarde essas informações. ATENÇÃO: Este e- mail poderá cair na lixeira ou na caixa de Spam. Caso isso ocorra, recupere para a caixa de entrada. Cuidado para não deletar ! 4
  • 5. Retorne a página do Webnode para continuar a criação do site ... Provavelmente o carregamento já tenha concluído. Na próxima tela você indicará o tipo de site de deseja criar. 5
  • 6. Selecione a opção Site pessoal (gratuito). As opções Site de negócios e Loja virtual tem licença de uso por 30 dias, caso opte por ele deve-se pagar pelo domínio. Depois escolha um slogan para seu site. E o idioma: Português brasileiro Clique em Continuar Um slogan ou frase de efeito é uma frase de fácil memorização que resume as características de um produto, serviço ou até mesmo pessoa 6
  • 7. Selecione um Modelo para seu site. Você pode alterar esse modelo mais tarde. Clique em Continuar. 7
  • 8. Selecione as páginas que você deseja criar automaticamente. Você pode criar outras páginas no modo de edição. Mais tarde, veremos como fazer isso. Clique em Concluir 8
  • 9. Aguarde enquanto o sistema carrega as informações ... 9
  • 10. Ao completar o carregamento irá abrir a página de edição do seu site. Parabéns! Seu site está criado! Clique em Pré-visualizar para ver como está sua página. 10
  • 11. O endereço de sua página está indicado na URL após a palavra preview. Esse exemplo: http://preview.tecnologia-educacional00.webnode.com/ Portanto, o endereço do site é: http://tecnologia-educacional00.webnode.com 11 Feche a Pré-Visualização
  • 12. Editando sua página Na página de edição, pode-se alterar o conteúdo de diversos itens. Inserir imagens e outros recursos; Vamos ver alguns: Alterando a imagem do cabeçalho. Passe o cursor do mouse na imagem e clique em Editar imagem 12
  • 13. Ao abrir o editor de imagem, clique em Adicionar imagem para selecionar uma imagem de seu computador ou da galeria do Webnode. Observação: Outra dica interessante é criar um logotipo e inserir no seu site. Veja a dica em: http://www.youtube.com/watch?v=Egx4f7tmKE4&noredirect=1 13
  • 14. É nessa tela que é possível selecionar a imagem de sua preferência, selecionando uma da galeria de imagens do webnode ou de seu computador. Para selecionar de seu computador clique em Enviar uma imagem e indique o local onde a imagem está salva. 14
  • 15. A Imagem será carregada. Clique na da imagem e ajuste o tamanho e a posição. Use os pontos indicados na imagem para fazer esse ajustes. Use o botões Enviar para traz, assim é possível editar o texto do título e o slogan. Se clicar na área da imagem do cabeçalho (nesse modelo - campos verde) o botão Cor de fundo ficará disponível para edição. Explore. 15 Botão Enviar para trás
  • 16. Quando terminar o ajuste clique em Salvar e fechar. 16
  • 17. 17 Alterando o modelo do site Clique em Modelos de site para alterar o modelo de seu site, o logo ou o slogan. Também é possível usar as configurações avançadas . Explore essas ferramentas mais tarde.
  • 18. Os modelos indicados como PREMIUM são destinados as contas pagas. Escolha um sem esse marca. Ao clicar no modelo será mostrada a aparência (“a cara”) do site. Se tiver de acordo clique em Usar esse modelo. 18
  • 19. Refaça o cabeçalho do site... 19
  • 20. Quando estiver pronto , clique em Publicar . Abrirá uma janela informando que a página foi Publicada. Feche essa janela, clicando no X. 20
  • 21. Clique em Fechar e depois em Sair. Vamos ver como retomar a edição do site. 21
  • 22. Para retornar ao site de edição: Acesse o webnode: http://webnode.com.br e clique em Entrar. Abrirá os campos para insira o e-mail e a senha de acesso cadastro no webnode. Clique em Entrar. 22
  • 23. Abrirá a tela com os sites que você criou. Você pode ter vários sites. Eles são chamados de Projetos. No projeto que deseja alterar clique em Administrar site . 23
  • 24. 24 Nesse espaço, você pode alterar o domínio do seu site. Lembre-se que esses serviços são pagos. Não é necessário adquirir um serviço. Clique em Comece a editar.
  • 25. 25 Pronto, retornamos ao endereço de edição do site. Vamos mostrar, acrescentar e editar páginas em seu site. Vejamos ....
  • 26. Acrescentando página no Menu do site. Clique em Editar menu e na Janela que abrir clique em Nova página. Insira o nome da nova página e clique em salvar 26
  • 27. 27 Observe que a página criada ainda não está Publicada. Para Publicar faça assim:
  • 28. 28 Clique no combo da página criada. Vai aparecer as opções... Clique em Publicar
  • 29. 29 Outra maneira é selecionar a Página criada e clicar em Publicar Pronto! Clique em Fechar
  • 30. Pronto, nova página criada e relacionada no Menu. Veja: 30
  • 31. Editando uma página. Selecione a página que você quer editar e clique Editar (conteúdo, ou galeria, ou adicionar artigo). O nome depende do item que deseja editar. Nesse exemplo vou editar o conteúdo da página inicial. Irá abrir a página de edição do conteúdo a ser alterado. Explore as ferramentas de edição. Faça as alterações e clique em salvar e depois em Publicar (na página de gerenciamento do site). 31
  • 32. Acrescentando um conteúdo 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. Esse local é indicado pela faixa laranja que aparecerá ao se próxima o conteúdo a ser inserido. 32
  • 33. Pronto! Agora basta editar o conteúdo (slide 31). Ao terminar a edição do conteúdo, clique em Publicar. 33
  • 34. Lembrando: Visualize seu site. Clique em Pré-Visualizar 34
  • 35. Há muitas outras ferramentas que podem ajudar a incrementar seu site. Aproveite para explorar essas ferramentas. Segue algumas dicas ... 35
  • 36. Dicas para Webnode Canal de Dicas Webnode: http://www.youtube.com/user/58709131 Tudo para Webnode: http://www.youtube.com/playlist?list=PLBA8296E4FE32CC19 36 Tutorial elaborado por Adilson Villas Boas PCNP de Tecnologia de São José dos Campos