P, body, td, tr, div { font-style: normal; font-weight: normal; font-size: 12px; color: #50283F; font-family: verdana; line-height: 17px; } body scrollbar-3dlight-color:006699; {scrollbar-face-color: black; scrollbar-highlight-color: #50283F; scrollbar-3dlight-color: black; scrollbar-darkshadow-color: #50283F; scrollbar-shadow-color: #50283F; scrollbar-arrow-color: #50283F; scrollbar-track-color: black;overflow:auto;} a{ color: #ffa8c7; text-decoration: none;} a:link{ color: #ffa8c7; text-decoration: none;} a:visited{ color: #ffa8c7; text-decoration: none;} a:active{ color: #ffa8c7; text-decoration: none;} a:hover{ color: #bbccae; border: 1px dotted #bbccae; background-color: #eef3e9;} B{ color: #bbccae; border-bottom: 1px dotted #ffc1d7;} I{ color: #ffc1d7; font-size: 11px;} U{ color: #ffa8c7; border-bottom: 1px solid #bbccae; font-family: arial ;} STRONG{ color: #bbccae;} textarea {font-family: tahoma; font-size: 10px; color: #6D0101; background: #FCF4EF; border-right: 1px solid #549EE9; border-bottom: 1px solid #549EE9; border-left: 1px solid #FFF; border-top: 1px solid #FFF; margin-top: 2px; margin-right: 2px; padding: 1px; height:140px; width:415px; overflow-x:hidden;} #textarea2 {font-family: tahoma; font-size: 10px; color:#6D0101; background: #FCF4EF; border-right: 1px solid #549EE9; border-bottom: 1px solid #549EE9; border-left: 1px solid #FFF; border-top: 1px solid #FFF; margin-top: 2px; margin-right: 2px; padding: 1px; width:253px; height:31px; overflow-x:hidden;} #textarea3 {font-family: tahoma; font-size: 10px; color:#6D0101; background: #FCF4EF; border-right: 1px solid #549EE9; border-bottom: 1px solid #549EE9; border-left: 1px solid #FFF; border-top: 1px solid #FFF; margin-top: 2px; margin-right: 2px; padding: 1px; width:88px; height:31px; overflow-x:hidden;} .table2 { color: #bbccae; border-bottom: 1px solid #bbccae; text-align: right; background-image: url('http://www.drikoti.net/Goodies/CSS/Lays/Tables/verde.png');} #nav a {color: #483058; ;font-size: 12px;text-decoration: none;text-align: center;background-color: #BA789B; border-bottom: #301825 4pt solid; } #nav a:hover {color: #7B0028; ;background-color: #EFE2E9;font-size: 12px; border-bottom: white 4pt solid; }

Link-me

Gostou do tuto e quer linkar? Claro, fique a vontade.

<center><a href="http://www.neopets.com/~nijul"> <img src="http://img196.imageshack.us/img196/3443/codifac.gif" border="0" alt="Aprenda a Codificar"></a></center>

Tutorial de Codificação

Introdução

Bem vindo(a) guest ao meu tuto de codificação. Gostaria de deixar claro que codificar é a coisa mais fácil do mundo :) Só é preciso achar as coordenadas e colocar no molde de código. Assim, você cria seu próprio layout, do jeito que quer. Espero que goste, qualquer dúvida, por favor me envie um Neomail para a minha adicional.

Usando o paint

Codificar no paint é fácil, é uma boa opção para quem não tem nenhum programa além dele.

Codificando um layout contínuo:

1- Abra seu layout no paint e selecione a ferramenta retângulo (imagem ao lado). É com ela que você irá achar as coordenadas.
Com a ferramenta selecionada, selecione todo o espaço de onde ficará seu texto no layout (a coluna que você fez), e logo em seguida, sem soltar o mouse, tire print screen ( - essa tecla fica no topo do teclado, logo após o F12. No seu teclado ela pode estar escrita de outra forma como PrtScn SysRq, é a mesma coisa). Observe a imagem para ver como fica a parte selecionada:

(Logo após selecionar toda a parte onde ficará seu texto no layout , tire print screen.)

2- Abra um novo arquivo do paint e cole lá o print screen que você tirou. Ache, embaixo e no canto, as coordenadas:


(As coordenadas da sua coluna)

Essas serão as coordenadas que você substituirá no código. Abaixo segue a legenda para você entender:


(Erro na imagem: não é WIDHT e sim WIDTH)

3: Agora, é hora de você colocar esses números no código e assim, codificar o seu lay. Pegue o código abaixo e substitue onde é necessário.

<div style="position: absolute; top: 0; left: 0;"> <div style="position: absolute; top: 0; left: 0;"> <p><span style="position: absolute; left: 0; top: 0;"><img border="0" src="-blocked-"></span></p> </div> <br> </div> <div style="position: absolute; left: -blocked- -blocked- -blocked-; top: -blocked- -blocked- -blocked-; width: -blocked- -blocked- -blocked-; height: -blocked- -blocked- -blocked-;"> Aqui ficará seu texto!! <br><br> Se o seu layout tem duas colunas, pegue o código a seguir: (Porém atenção: <b>cada coluna tem suas coordenadas, então, primeiro você deve achar as coordenadas de cada coluna. Repita duas vezes o que eu expliquei acima, só que uma vez com a coluna 1 e a segunda com a coluna 2. Logo após fazer isso, substitua no código com as coordenadas de cada coluna</b>) <br><br><center><textarea><div style="position: absolute; top: 0; left: 0;"> <div style="position: absolute; top: 0; left: 0;"> <p><span style="position: absolute; left: 0; top: 0;"><img border="0" src="-blocked-"></span></p> </div> <br> </div> <div style="position: absolute; left: -blocked- -blocked- -blocked-; top: -blocked- -blocked- -blocked-; width: -blocked- -blocked- -blocked-; height: -blocked- -blocked- -blocked-;"> Aqui ficará seu texto da PRIMEIRA COLUNA!! </div> <div style="position: absolute; left: -blocked- -blocked- -blocked-; top: -blocked- -blocked- -blocked-; width: -blocked- -blocked- -blocked-; height: -blocked- -blocked- -blocked-;"> Aqui ficará seu texto da SEGUNDA COLUNA!! <br><br> Se seu layout tiver três ou mais colunas, basta acrescentar o código abaixo no seu lay, logo no final e substituir. Não se esqueça que você deve achar as coordenadas dessa coluna também. <br><br><center> <textarea>

Aqui ficará seu texto !!

Onde têm ENDEREÇODOBACKAQUI.jpg é onde você deve colocar o endereço do Background do seu layout (o fundo). Para fazer o background, siga o tuto abaixo:

1- Abra seu layout no paint.
2- Vá em Imagem no topo e clique em Inverter/girar..


3- Selecione Inverter verticalmente:



4- Seu lay irá ficar de cabeça para baixo, isso é normal. Clique em Imagem - Atributos:



5- Irá abrir uma caixinha. Em altura coloque um número menor de 10 que faça aparecer somente a coluna. Eu coloquei dois.



No final, você terá o background pronto. Veja como ficou o meu:



Hospede a imagem e substitua no código.

E pronto, você acaba de codificar um layout, em menos de 30 minutos :) Espero que tenha conseguido!

Codificando um layout de caixinha

Codificar esse tipo de layout é a mesma coisa que o de coluna, porém no código, você acrescenta o overflow:auto; que faz ter barra de rolagem.
Então você só precisa achar as coordenadas, como explicado acima e substituir no código normalmente:

<div style="position: absolute; top: 0; left: 0;"> <p><span style="position: absolute; left: 0; top: 0;"><img border="0" src="-blocked-"></span></p> </div>

Seu texto ficará aqui!!

Usando o Fireworks

O fireworks é um programa de edição que eu uso para fazer gráficos, inclusive codificar. Se você têm o programa, pode codificar com ele, é fácil e mais rápido que no paint.

1- Abra seu layout em File - Open.
2- Selecione a ferramenta Rectangle Hotspot Tool:

3- Com ela, Selecione toda a parte onde terá seu texto, a coluna ou a caixinha.



4- Vá em Properties, em baixo, e onde tá escrito Hotspot tem as coordenadas:



No código abaixo, substitua com as coordenadas.

Coluna

<div style="position: absolute; top: 0; left: 0;"> <div style="position: absolute; top: 0; left: 0;"> <p><span style="position: absolute; left: 0; top: 0;"><img border="0" src="-blocked-"></span></p> </div> <br> </div> <div style="position: absolute; left: -blocked- -blocked- -blocked-; top: -blocked- -blocked- -blocked-; width: -blocked- -blocked- -blocked-; height: -blocked- -blocked- -blocked-;"> Aqui ficará seu texto!! <br><br><b>Adicionar Coluna (colar no final do código)</b><br><br><textarea>

Seu texto ficará aqui!!

E pronto, seu lay está codificado :D