[TUTO] Criando um site Completo - Iniciante

Olá gente eu fiquei um tempo sme postar, mais to voltando. Hehe"
Esse é um TUTORIAL um pouco grande :s
Vocês vão precisar do Blue Voda e do Vertrigo.
Dowload Blue Voda: Clique aqui.
Dowload do Vertrigo: Clique aqui.

Agora vamos para o desenvolvimento.
Eu vou fazer um site simples, com poucas imagens.

Depois de ter instalado o Blue Voda abra-o e clique em new blank page (acho q é isso).
Abrirá uma nova página toda em branco com alguns itens, é lá onde vc fará o site.
No blue voda clique em insert e depois em image....




Ok, abrirá uma página e você escolhe onde está a interface do site. ( se você não souber nenhum programa editor de imagens use o photoshop ou até mesmo o paint.)
Abrirá a imagem clique em cima dela e arraste para onde quiser.
Agora vá lá no topo e clique na ferramenta de texto.


Quando clicar na ferramenta de texto abrirá um novo quadradinho na parte de desenvolvimento geralmente vai ta escrito "Double click to edit" você clica duas vezes nessa palavra e escreve oque quiser.Depois de ter escrito clique e arraste.
Agora vamos adicionar um HTML que será nosso menu.
Clique na ferramenta de HTML.


Geralmente essa ferramenta está no canto da tela.
Clicando nela abrirá um novo quadrado escrito HTML clique duas vezes nele.
Abrirá um novo quadrado para vc colocar o texto então coloque isso:

<div>
<a href="/">Inicio</a>
<a href="/p/contato.html">Contato</a></div>

Depois clique em OK.
Clique e arraste para onde quiser.
Uma boa para você acertar o lugar certo é clicando em preview no topo da página.


é o simbolo de uma Lupa.

Depois de ter acertado tudo vamos fazer a segunda página a do contato.
Cliquem em "File" e depois em "New Page" e depois em "Blank Page". (File é o primeiro item do menu superior.)
Abrirá uma segunda página mais você não precisará fazer tudo denovo.
Em cima do Quadrado do desenvolvimento do site está escrito "Untitled 1" e "Untitled 2" resumindo Untitled 1 é a primeira página e a 2 e a segunda. Clique em "Untitled 1" e vá para a primeira página, lá na primeira página aperte ctrl+a (selecionar tudo) e depois aperte ctrl+c (copiar) e vá na segunda página e aperte ctrl+v (colar).
E agora é so editar =D.
Depois de ter feito as duas páginas vá com o botão direito na 1º página e clique em "Page HTML" Abrirá um quadradinho com um código copie tudo.
Vá no bloco de notas e cole tudo lá... E clique em salvar, na hora de salvar digite index.html não esqueça do html no final. salve em um lugar fácil sugiro na área de trabalho.
Agora vá na segunda página e faça o mesmo... na hora de salvar digite contato.html não esqueça do html no final.
Pronto! Agora vamos coloca-lo no server.
Abra o vertrigo server.
Clique no Botão que irá aparecer.


Depois de clicar no botão do vertrigo ele ficará como ícone no canto da página (perto do relógio do pc)
clique nele e depois em [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]


Abrirá uma pasta, apague tudo que está lá. (Tudo mesmo)
Depois de ter apagado tudo crie duas novas pastas lá. (Botão direito>> novo>> pasta). No nome da pasta coloque uma com o nome de images e a outra de p .


Agora pegue o index.html que você salvou lá na área de trabalho e arraste para dentro da pasta www do vertrigo. (Não coloque dentro de nehuma página apenas solta dentro do [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] Agora pegue o contato.html e coloque dentro da pasta p que você fez.
Agora pegue todas as imagens que você usou e coloque dentro da pasta images.
Ta pronto seu Web site!
Veja como deve ficar a pasta do vertrigo:

Agora vá no seu navegador e digite: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] e de enter.
Depois para mostrar seus amigos procure por um Tutorial de como hospedar Cms e hospede seu site.
(Aconselho que pratique primeiro.)

Tutorial muito simples mesmo sem usar códigos difíceis.

T+!!

@Raff esse tutorial estava no meu blogger.
Desidi copiar e passar para vcs.
Esse tutorial foi feito por mim.

Habbirata escreveu:@Raff esse tutorial estava no meu blogger.
Desidi copiar e passar para vcs.
Esse tutorial foi feito por mim.

Mano, mas ele parece puro CTRL+C/CTRL+V
Tá sem nenhuma organização...