nuvem_dos_ceus got their homepage at Neopets.com

1ª Parte - Decoração e hospedagem
Nessa parte você vai fazer o visual do layout. Vai colocar o fundo, as caixinhas, os enfeites, tudo que quiser. Primeiro você vai abrir seu editor de imagens (paint, photofiltre, photoshop...) e criar uma imagem 1000x600. Quando terminar, salve a imagem como JPG, BMP, GIF OU PNG. Aí você vai hospedar.
Sites de hospedagem indicados:
www.photobucket.com:é o que eu uso. Muito bom, normalmente as imagens não dão problemas, você tem um espaço muito grande e pode hospedar mais de uma imagem de cada vez. O problema é que tem que se cadastrar.

www.imageshack.us:é o mais popular, não tem que se cadastrar. Mas só pode hospedar uma imagem de cada vez e muitas vezes ela dá algum problema ou não fica bem nítida.

2ª Parte - Codificação
Agora é a parte mais chata:HTML. Bem, aí vai o código:

Você vai trocar a parte "URLDAIMAGEMHOSPEDADA" pelo endereço da imagem do seu layout, que você hospedou na 1ª parte. A página abaixo pode te ajudar:

Agora, você vai medir as caixinhas para o texto ficar no lugar certo.

Você vai excolher a ferramenta de selecionar do paint e vai abrir na extensão da caixinha, como mostrado acima. Lembre-se de NÃO SOLTAR O BOTÃO DO MOUSE. Tire print screen, anote, ou guarde os números na memória. Você vai colocar os números de acordo com o indicado na figura onde está escrito "WIDTHAQUI", "HEIGHTAQUI", "TOPAQUI" E "LEFTAQUI". Se o seu layout tiver mais de uma caixinha, pegue esse código e adicione ao código original:

Você vai medir a outra caixinha e colocar as medidas aí.

Tabela de cores

PRONTO! AGORA VOCÊ TEM O SEU PRÓPRIO LAYOUT!

Layouts Prontos

<div class="div" style="position: absolute; width: 301px; height: 239px; top: 286px; left: 122px; border-style: dotted; border-width: 0px; border-color: #00FF00; background-color: transparent; color: -blocked-; font-family: verdana; font-size: xx-small; overflow: auto;">caixa 2<br><br><img src="http://s258.photobucket.com/albums/hh269/FERNANDA_1313/th_layoutpetpagelivre3.png"><br><textarea><style type="text/css">
body {
}
</style>
<img src="http://i258.photobucket.com/albums/hh269/FERNANDA_1313/layoutpetpagelivre3.png" style="position: absolute; left: 0px; top: 0px;"><div class="div" style="position: absolute; width: 712px; height: 321px; top: 245px; left: 136px; border-style: dotted; border-width: 0px; border-color: #00FF00; background-color: transparent; color: -blocked-; font-family: verdana; font-size: xx-small; overflow: auto;">caixa 1</div>

Moldes de Lays

Aqui você vai salvar as imagens dos moldes e decorar como você quiser. E para ninguém "esquecer" de dar os créditos, o link para essa página já está embutido no código do layout. Se alguém tirar o link e não der os créditos, seja para o molde, seja para os layouts prontos,vai ser denunciado. Salve em formato png e NÃO mude as caixinhas de lugar! Bem, aí vão os moldes:
1 caixinha
http://i258.photobucket.com/albums/hh269/FERNANDA_1313/molde1caixinha.png

2 caixinhas
http://i258.photobucket.com/albums/hh269/FERNANDA_1313/molde2caixinhas.png

<div class="div" style="position: absolute; width: 352px; height: 436px; top: 125px; left: 566px; border-style: dotted; border-width: 0px; border-color: #00FF00; background-color: transparent; color: -blocked-; font-family: verdana; font-size: xx-small; overflow: auto;">caixa 2<br><br>3 caixinhas<br>
http://i258.photobucket.com/albums/hh269/FERNANDA_1313/molde3caixinhas.png<br><textarea><style type="text/css">
body {
}
</style>
<img src="http://i258.photobucket.com/albums/hh269/FERNANDA_1313/molde3caixinhas.png" style="position: absolute; left: 0px; top: 0px;"><div class="div" style="position: absolute; width: 365px; height: 175px; top: 151px; left: 91px; border-style: dotted; border-width: 0px; border-color: #00FF00; background-color: transparent; color: -blocked-; font-family: verdana; font-size: xx-small; overflow: auto;">caixa 1</div>

<div class="div" style="position: absolute; width: 430px; height: 182px; top: 91px; left: 400px; border-style: dotted; border-width: 0px; border-color: #00FF00; background-color: transparent; color: -blocked-; font-family: verdana; font-size: xx-small; overflow: auto;">caixa 2</div>

<div class="div" style="position: absolute; width: 371px; height: 372px; top: 581px; left: 196px; border-style: dotted; border-width: 0px; border-color: #00FF00; background-color: transparent; color: -blocked-; font-family: verdana; font-size: xx-small; overflow: auto;">caixa 3</div>

<div class="div" style="position: absolute; width: 312px; height: 64px; top: 51px; left: 629px; border-style: dotted; border-width: 0px; border-color: #00FF00; background-color: transparent; color: ffffff; font-family: cursive; font-size: xx-small; overflow: auto;"><font size="2"><b>Regras</b><br>
- Tutorial todo feito por mim, não copie;<br>
- Por favor, se fez seu layout com a ajuda desse tutorial, dê os devidos créditos;<br>
- Se quiserem encomendar um layout, por favor visitem a minha outra página (<a>Utilidades da Palyta</a>);<br>
- Só ensino a fazer layouts não-contínuos;
<br><br><b>Link-me</b><br><img src="http://i258.photobucket.com/albums/hh269/FERNANDA_1313/LINKME-1.png"><br><textarea><a href="/~Amy_13__aa"><img src="http://i258.photobucket.com/albums/hh269/FERNANDA_1313/LINKME-1.png"></a>