Bem-vindo guest ♥

Seja muito bem-vindo ao tutorial do webs do Pinchit!
Aqui você aprenderá a criar um site no webs assim como o básico para mexer nele.
Qualquer dúvida ou problema leia nosso F.A.Q. Se sua dúvida não foi esclarecida, não hesite em me mandar um Neomail.
Neste tutorial, contamos com imagens redimensionadas. Para melhor visualização, arraste a imagem até sua barra de endereços.
Boa leitura!

Criando sua conta

Primeiramente, acesse o site webs.com .
Depois que a página carregar e você se deparar com a primeira tela, preencha algumas informações de acordo com a imagem à seguir:

Depois de clicar em Get Started, você irá se deparar com outra página. Agora termine de preencher seus dados, tendo certeza de que clicou na opção HTML - Only Mode, como na imagem a seguir.

Logo depois aparecerá mais uma página. Apenas clique em No Thanks, Continue, como na imagem abaixo.

Pronto! Sua página já está criada. Foi fácil, não?

Editando sua página

O trabalho de verdade começa agora.
Segue uma imagem com um breve resumo das principais funções do seu Site Manager.

Esta é a página principal do webs, onde você pode criar, editar, deletar e até renomear suas páginas. Ela é de fácil entendimento, como pode se conferir pela imagem.
Primeiramente, vamos criar uma nova página. Clique em + New Page, o botão circulado em vermelho. Irá abrir uma pequena opção onde você irá digitar o nome de sua nova página, assim como uma pequena opção entre htm e html. Eu não conheço nenhuma diferença entre ambas opções, mas sempre costumo escolher htm. Depois clique em Add Page e pronto, sua página foi criada! Observe a imagem abaixo.

Como pode ver pela imagem acima, agora sua nova página está pronta para ser editada! Caso queira renomeá-la ou deletá-la é possível clicando nos seguintes símbolos ao lado da página que quer mudar:

Clique neste símbolo para renomear e

neste símbolo para deletar.
Mas nosso interesse é na edição da página, então clique

neste símbolo.
Você irá se deparar com a seguinte página:

Este grande espaço em branco é aonde seu código irá. Segue agora uma pequena legenda para os demais símbolos:

Clicando neste ícone, permite que você salve sua edição até então. É recomendado sempre ir salvando enquanto vai editando para não correr o risco de perder toda sua edição. Nota que, ao clicar aqui, sua página será salva e você será levado para o seu Site Manager novamente.

Clicando neste ícone, sua página será fechada sem salvar as modificações feitas. Você será levado para o seu Site Manager ao clicar aqui.

Esta é uma das melhores ferramentas do webs. Ao clicar aqui, metade do espaço direcionado para a edição da sua página será preenchido com uma pré-visualização de como ela está ficando. É possível então editar o código em cima e visualizar em tempo real as mudanças na sua página em baixo.

Clicando neste ícone, o webs irá criar automaticamente o tag para a escrita em negrito.

Clicando neste ícone, o webs irá criar automaticamente o tag para a escrita em itálico.

Clicando neste ícone, o webs irá criar automaticamente o tag para a escrita em sublinhado.

Clicando neste ícone, o webs irá criar automaticamente o tag para um hyperlink.

Clicando neste ícone, o webs irá inserir alguma imagem em sua página. O webs permite que você adicione uma imagem direto do seu computador, sem precisar hospedar em nenhum outro site.

Clicando neste ícone, uma barra de pesquisa do google será adicionada automaticamente na sua página.

Clicando aqui, o webs irá criar automaticamente o tag para escrita na fonte escolhida. Dentre as opções de fonte, estão Arial, Comic Sans MS, Courier New, Helvetica, Tahoma, Times New Roman, Trebuchet MS e Verdana.

Clicando aqui, o webs irá criar automaticamente o tag para aumentar a letra. Dentre as opções de tamanho, estão xx-small, x-small, small, medium, large, x-large e xx-large.

Com o conhecimento destas ferramentas, é possível editar sua página com muito mais facilidade!

Mudando sua free bar

Por ser um site gratuito, o webs adiciona uma barra na sua página para dar os devidos créditos para o site. A barra padrão é a seguinte:

Assim, alguns layouts podem sair perdendo com sua visualização por esta barra. Pensando nisso, o webs criou outras barras com inclusive outras cores, sendo possível assim usufruir do site com os devidos créditos e com uma barra que combine com seu layout!
Para visualizar as outras opções de barras, clique em Control Panel, no canto superior direito. Logo na próxima página, haverá um espaço onde estará escrito Manage Website. Clique em Custom Freebars, como mostra a imagem abaixo.

Na página que será aberta, haverá vários modelos de Freebars. Elas são divididas em:

Floating Freebars: do inglês, barras flutuantes. São aquelas barras que, como o nome já diz, ficarão flutuando pela página. Elas acompanharão a barra de rolagem. São elas:

Stationary Freebars: do inglês, barras estacionárias, barras paradas. São aquelas barras que, como o nome já diz , ficarão paradas em algum lugar da página que você escolher. São elas:

Nota: Todas essas barras apresentam opções para a escolha de diferentes cores.

Após escolher qual barra você vai querer, clique nela.
Você deve ver algo parecido com a seguinte imagem:

Depois de ter selecionado sua cor e logo depois copiado o código, volte para sua página. Basta clicar no canto superior em Manage Pages.
Clique para editar a sua página e insira o código lá. IMPORTANE! É preciso adicionar o código antes do tag que encerra seu código (em geral, é o tag div). Veja:

Como pode ver, essa é a localização correta para a barra. É preciso colocar antes do tag que encerra seu código pois, do contrário, a barra não irá aparecer no seu site.
Através da visualização pelo código não é possível ver como a barra fica na sua página. Para isso, salve sua página e quando for redirecionado para sua página de gerenciar arquivos, clique em cima do nome da sua página.
Assim abrirá o link da sua página e será possível visualizar a barra.
Veja como ficou:

Simples, não?
E com isso, eu encerro o tutorial.
Segue agora uma pequena listinha de sites com coisas legais para se adicionar na sua página do webs.

Outros Sites

grooveshark: Permite a crianção de listas de música para colocar na sua página. Requer cadastro.

mixpod: Permite a crianção de listas de vídeos para colocar na sua página. Requer cadastro.

F.A.Q.

Que tipo de código eu devo colocar no webs?

Html, Css... há uma variedade infinita, na verdade. Mas no geral, os mesmos utilizados nas petpages de neopets.
Eu parti do pressuposto de que você já tem um código pronto para utilizar na sua página. Neste tutorial ensinei apenas como editar no webs e não o que colocar lá. Sugiro que procure um tutorial de codificação ou algum tutorial de CSS primeiro.