Certo, chegou o grande motivo que muita gente vem aqui! Quer aprender a codificar uma petpage?
Explicarei uma parte de CSS e HTML juntando pra fazer um layout funcionar direito em uma petpage do neopets. Não garanto que funcione em outras páginas fora do neo, mas acho que deve funcionar sem problema na maioria das situações...
Tentei explicar o melhor possível. Se não entendeu alguma coisa, me mande um neomail com a dúvida que eu ficarei feliz em te ajudar. Aqui vou explicar o mais detalhado possível, código por código.
Se você não entendeu nada, leia de novo. Se ainda não entendeu, continue lendo, ou pergunte. Mas não acredito que seja o caso de ir nos fóruns implorar para fazerem a codificação: é fácil, qualquer um consegue.
Boooom, vamos lá! ^^

MAS SE VOCÊ NÃO SABE ABSOLUTAMENTE NADA, NEM AO MENOS O BÁSICO PARA COLOCAR UM TEXTO EM NEGRITO OU O CÓDIGO DE UMA IMAGEM, LEIA ESSA JANELINHA DE CÓDIGOS BÁSICOS ALI EM CIMA PRIMEIRO!



Finge que isso é um layout que eu quero codificar.
Ele tem uma janela "contínua" e uma "normal".
Como colocá-las no lugar? Como codificar a contínua?

Ah mas pera um pouco! Existem coisas que você deve fazer antes de começar a posicionar as caixas!

Primeiro de tudo, onde você vai fazer seu código?
Você pode fazer o código no bloco de notas e salvar como documento .html que dá certo. Pode usar front page (NÃO RECOMENDADO) também. Pode usar dreamweaver se você souber usar.
Eu atualmente uso o MAX's HTML BEAUTY++ 2004. Tá certo que eu não uso nem metade das funções desse programa, mas ele pode abrir e salvar vários documentos HTML ou CSS em diversas abas no próprio programa, possui atalhos para os códigos básicos como pular linha ou fazer listas e tabelas e uma preview em internet explorer do que você acabou de escrever.
Você pode achar esse programa em qualquer site de downloads.
De uma forma ou de outra, abra o programa de sua escolha!
Mas só pra constar, você pode codificar layouts em qualquer lugar, não precisa de programa especial nenhum. Por isso, não ter programa não é desculpa para pedir codificação nos fóruns ^~.
E aqui está você, encarando uma página em branco, querendo montar seu querido layout.
Você já tem a sua imagem pronta: no meu caso, aquela desculpa para layout lá em cima.
Vai querer começar colocando a imagem no seu código, né?
Pois então, digite o código de imagem normalmente.
Feito isso, você vai ter uma imagem solitária jogada no layout, sem fundo, sem nada.
Para o layout funcionar a imagem tem que estar pregada no canto superior esquerdo da página.
ATENÇÃO QUE ESSA PARTE É MUITO IMPORTANTE! Se você não fizer isso, o layout pode ficar bagunçado, e aqueles créditos embaixo da página do neopets vão ficar em cima do layout!!!
Basta adicionar na tag img que você quer ela no estilo 0 de top, 0 de left, posição absoluta! Como fazer isso?
<img src="http://img.photobucket.com/albums/v175/freya_blackcat/montando01.jpg" style="position: absolute; top: 0; left: 0;">
Deu pra entender? Posição absoluta, 0 de top e 0 de left: grudado no canto superior esquerdo, coordenadas 0. Se não deu, entenda, você usará a tag style MUITO a partir de agora...
NÃO ESQUEÇA DE USAR ISSO NO CÓDIGO DA IMAGEM PRINCIPAL!
Essa é a imagem principal do seu layout, esperando para você adicionar todo o resto da página!

Pule uma ou duas linhas para manter seu código organizado. Pronto, acho que agora já dá pra começar a posicionar as caixas. Vou começar pela "normal" (a primeira da esquerda).
Antes, O QUE É essa caixa?
Ela é uma div. Ou melhor, eu a farei uma div. DIV é um código extremamente usado para diversas coisas, como programar essas caixas.
E é essa a tag dela:
<div></div>
Claro que assim ela não fará nada. Então vamos pegar o STYLE usado na imagem principal e aplicar nessa tag. Mas com algumas diferenças: dentro das aspas desse style, ALÉM do top e left e posição absoluta, vamos adicionar mais elementos: altura, largura e overflow automático.
A altura e a largura você já sabe pra que serve. Top e Left especifica a distância que a div (ou imagem no caso acima) estará do topo e da esquerda respectivamente. O overflow automático (overflow:auto), é quando a caixa TRANSBORDA, passa do limite dela, e, automaticamente, uma barra de rolagem é criada.
Por exemplo, se você tem uma caixa de altura 100px e coloca uma imagem de altura 200 dentro dela, ela vai ultrapassar a área da caixa, não vai? Com overflow:auto no código, automaticamente uma barra de rolagem vai surgir, impedindo que o conteúdo da caixa vá para fora dela! ^^
Então, você já pode montar o código da sua div. Ficará mais ou menos desse jeito:
<div style="position: absolute; top: 0; left: 0; width: 0px; height: 0px; overflow: auto;"> Conteúdo </div>
Ah claro, você além disso pode especificar se as coisas dentro da sua caixa estarão centralizadas, alinhadas à esquerda, direita, justificadas...ao invés de ficar usando tags soltas, resuma tudo na div! Só colocar um align=como você quer que esteja (center, justify, expliquei isso nos códigos básicos...) na tag.
Pronto? Ótimo, hora de substituir os 0 pelas medidas corretas da sua caixa!

Observação: Existem outras formas de fazer essa DIV? Sim. E de organizá-las no código também. Você pode fazê-las em CSS, que é bem mais prático de organizar numa página muito grande. Porém, eu vou ensinar aqui só pelo HTML, que é mais fácil de explicar e entender.

Para medir, existem VÁÁÁRIAS maneiras diferentes. Porque a única coisa que você precisa saber é a altura e a largura da caixa, a distância dessa caixa do topo da página e a distância dessa caixa da esquerda da página.
Eu faço da seguinte forma, é bem simples e não precisa fazer conta nenhuma, só copiar o número do jeito que ele aparece:



E completando isso, a sua caixa está PRONTA para ter conteúdo adicionado dentro!
Agora, a caixa contínua.
Quer saber o truque?
O truque é que NÃO TEM TRUQUE. Ela é uma div como todas as outras.
Agora pense, releia o que eu disse sobre essa div acima, olha bem o código. O QUE A CONTÍNUA TEM DE DIFERENTE?/?/??/shiftbarra

Exceto na div aí de cima onde expliquei como achar top e left, está vendo alguma barra de rolagem nessa caixa contínua em que está lendo?
Sem barra de rolagem! E o que comanda o aparecimento de uma barra de rolagem no código? Overflow:auto.
Tudo que você tem que fazer é APAGAR o overflow:auto do código. Pode apagar a altura também, você não vai precisar dela. E só! Ah claro, lembrando que quando a caixa transbordar, sem o overflow:auto, não aparecerá barra de rolagem alguma. É isso que você quer que aconteça em questão da altura, porém não podemos fazer nada quanto à largura. Portanto, tome absoluto cuidado para não digitar coisas imensas sem o uso de espaço ou colocar imagens mais largas que a caixa.
Enfim, o código é o mesmo, a maneira de medir top, left, width e height (que essa se você quiser, pode apagar do código já que não fará diferença) também.
Mas daí chega o truque que faz que, para alguns, esse tipo de caixa complique um pouco: a imagem principal não vai se esticar por mágica.
Óbviamente NÃO É MÁGICA, mas sim, o background da imagem. O bg é a continuação dessa imagem: é uma imagem que se repete infinitamente e que faz as caixas parecerem infinitas.
Essa imagem que se repete é a última linha da imagem do seu layout. No caso do meu layout exemplo, seria a área selecionada aqui:

É só você copiar e salvar, depois colocar no código como background simples!
Você colocou e tá repetindo de maneira estranha? Dá uma olhada no guia de photoshop que eu dei umas dicas lá.
Código de background? Se ainda não sabe a tag, tente adivinhar você mesmo: background está no corpo da página, corpo em inglês é body, body background é igual ao endereço da imagem que você quer.
Entendeu?
Quando tiver entendido, o seu background será essa imagem que repetirá infinitamente o quanto precisar na página. A imagem principal estará colada no canto da página e seguindo à ela, o que parece ser uma continuação, que na verdade é o fundo.
Daí, com as caixas posicionadas corretamente, você já tem a parte básica pronta!

Mas e agora? Onde estão as fontes legais, as barras de rolagem coloridas, os links enfeitados?
Isso, amigos, entra em CSS!

Tudo visto até agora foi HTML. CSS é mais difícil e mais fácil ao mesmo tempo. Difícil de explicar (e de entender para alguns), mas quando você sabe, mantém tudo mais limpo e organizado.
Se você já experimentou mexer com códigos, reparou que tem uma parte que fica entre tags style no topo da página. Não, não o style que você adicionou ao HTML que eu expliquei aí em cima, uma tag independente style. Isso é o CSS!
Não vou entrar em explicações detalhadas e como é usado profissionalmente, porque aqui é neopets e você quer montar uma petpage, então vou falar como o CSS vai te ajudar pra esse objetivo.

O CSS que a gente vai usar aqui, vai especificar as cores das fontes, links, barras de rolagem, quais letras vão ser usadas, como vai ser tudo praticamente.
Até mesmo as divs que falei anteriormente, podem ser transferidas pra CSS. Só não faço como agora porque isso seria complicar as coisas pra quem tá aprendendo.

Enfim, em cima de tudo que você fez até agora (das divs, imagem, background e do conteúdo que você provavelmente usou o básico que eu já falei aqui mesmo no guia aí do lado), no topo do código, abra uma tag style, deixe um espaço, pule umas linhas e feche-a.
Esse espaço, como toodas as tags usadas até agora, é para o conteúdo.
Vamos começar pela cor da barra de rolagem!

Ah, a cor da barra só funciona no IE. Então, desculpe-me, usuários de firefox!
De qualquer forma. Sabendo que HTML e CSS é inglês puro, quem aí sabe inglês já deve ter uma noção de como o código é montado.

Antes de mais nada, a barra de rolagem é formada por:
Eu usei cores berrantes pra diferenciar um pouco...tem algumas que é difícil de enxergar, mas faça um esforço que você consegue.

Enfim, agora que você já sabe o que cada coisa é, acho que eu posso te passar o código pronto. ^^
Como usar? Já falei das cores em Códigos Básicos, mas repito aqui: baixe o programa Color Cop. Ele copia a cor que você quer apenas passand o mouse e te fornece o código.
Por que código de cor é desse jeito? Eu poderia explicar aqui, mas eu só ia entediar todo mundo falando de cores RGB e blablabla, então, ta aí o código (entre as "style" que eu falei):
<style> body { } </style>
Aliás, aí tá tudo preto.
Ah sim, a tradução de cada função:
-Face color: Cor da face
-Shadow color: Cor da sombra
-Highlight color: Cor do contorno
-3Dlight color: Cor da Luz 3D
-Darkshadow color: Cor da sombra escura (? hm, não sei traduzir essa direito)
-Track color: Cor do caminho
-Arrow color: Cor da seta

Ah sim, uma coisinha!
Essa barra de rolagem, entre os styles do CSS vão especificar pra página inteira, a barra de todas as caixas que tiverem e da página serão nesse esquema de cores.
Mas digamos que você tenha uma caixa no seu layout que você queira colocar a barra de alguma cor diferente, porque não ficou bom ou porque não está combinando...é só voltar para o HTML!
Essa caixa tem uma DIV, certo? Certo.
E nessa div, tem a tag style=, onde você colocou o top, left, width, height e tudo mais. Se além disso você colocar o código de barra de rolagem, especificando outras cores e esquema, essa caixa vai ter uma barra de rolagem exclusiva!
Aqui um código exemplo:
<div style="position: absolute; top: 0; left: 0; width: 0px; height: 0px;">Conteúdo</div>
Assim se você quiser, mesmo que seu layout tenha 20 caixas, cada uma pode ter uma barra de rolagem de uma cor!

Especificou a cor da barra de rolagem da página/da caixa? Agora tá ficando mais bonitinho, né?
Mas agora, melhor arrumar a fonte. Se suas caixas são pretas, você vai querer usar fonte branca, certo? E que tal links que quando você passa o mouse, mudam de cor? O negrito pode ser de cor diferente também!

Agora que você já abriu uma style CSS, não precisa abrir outra pra cada código que especificar.
Se você fechou, tire o /style que fecha e pule algumas linhas para manter seu código cascata organizado! ^^

Primeiro, vamos começar com a cor do corpo da página.
Você quer que a página toda tenha cor preta tamanho 8, em negrito, fonte verdana?
td,p,body{color:#000000;font:9pt bold verdana}
Body especifica que é o corpo da página. Cor e fonte não preciso explicar. Bold é negrito em inglês.
Esse é o básico: você pode colocar text-decoration (text-decoration:overline; por exemplo) e muitas outras coisas aí. Dê uma pesquisada se tiver interesse.
Minha função é fazer você entender como usar o código.

E agora, para links, parágrafos, negrito, itálico...?
Você sabe como é o código básico deles. Para links, a tag é a, não é?
Pule uma linha dessa especificação de body e siga o mesmo modelo com o a no lugar de body! ^^
Quer para quando passar o mouse no link? a:hover.
Funciona nesse estilo para qualquer coisa: td, p, b, i, u, textarea, qualquer coisa.

Também seguindo o mesmo modelo...sabe cor de fundo da página?
Mesmo que você use background de imagem para lay "de blog", se a página demorar muito pra carregar (como é o caso dessa), ponha um fundo colorido para disfarçar a imensidão branca.
Ou quando você não tem fundo de imagem, coloque uma cor para ficar mais bem arrumado.

O fundo da página é parte do corpo, body. Então faça como você fez com a fonte.
Mas como fundo não precisa de fonte e tamanho, faça da seguinte forma:
body{background:#COR;}

Eeeee acho que você reparou que a área de TEXTAREA do meu guia tem fundo roxo e uma fonte diferente, né?
Só seguir o exato mesmo modelo que eu fiz para as coisas anteriores. Para a minha text área, eu especifiquei tamanho, cor e tipo de fonte e a cor do background.
Se eu quisesse, dava para especificar LARGURA também.
Olha como ta mais ou menos o código da minha text area (eu mudei a fonte, cor, tipo e cor do fundo):
TEXTAREA{background:#000000;font:6pt arial}

Ah! Sabia que do mesmo jeito que eu coloquei background:url para body, pode colocar para links, tabelas, divs e tudo que você quiser tambem?
Vá testando os códigos! ^^

Percebeu um padrão no CSS? A maioria dos códigos básicos se resume a isso: o nome da tag (a, b, body, textarea, div...) e depois as especificações entre { }.
Claro que não é só isso que você pode fazer com CSS. Pode fazer MUITA coisa...pode especificar como serão todas as divs no CSS entre muitas outras funções...

Existe mais um tipo de layout que eu vejo por aí!
Esse modelo te parece familiar?

Não sei direito como chamam esse tipo, mas já vi gente falando que é "layout em CSS", o que eu acho muito absurdo, já que você pode fazer todo tipo de layout que você quiser em CSS. ^^
Mas enfim, ele é bem simples de fazer.
O código é esse:
<style> div.nome { border: 5px solid #000000; background-color: #ffffff; text-align: center; width: 500px; padding: 10px; margin: 15px auto; } </style>
E aí você me pergunta: É só isso?
E é claro que não é só isso. Lembra de como especificar fundo, letra da página, barra de rolagem e tudo que você quiser e pesquisar que dá pra fazer?
É isso aí. E as divs? Como você pode ver, esse é o código de uma div apenas, não de uma página. Mas é essa montagem de div que faz esse estilo de página, óbvio que junto com cor/imagem de background, etc...
Olha bem para a imagem ali em cima, e depois para o código.
A caixa de texto que tem uma imagem dentro e tal, é a div. Essa caixa, tem uma cor de fundo, um vinho/vermelho...essa é a background-color.
A width como vocês já sabem é a largura.
Essa caixa, tem uma borda: border. O 5px é a medida da borda, quanto maior o número, mais grossa ela fica. O solid é o tipo da borda. Tente trocar por dashed e ver o que acontece!
Margin é a margem entre a div e o topo/final da página. Tá vendo a distância entre aquela barra amarela do neopets na imagem e o limite da div? Essa é a margin.
Padding é como a margem, só que dentro da div: olha o espaço entre o banner principal e a borda da div. É o padding. Teste mudar o número você mesmo para entender melhor!
E text-align é a alinhação do centro. Quer que o texto esteja no centro? Alinhado à esquerda? Direita? Justificado?

Mas ainda não acabou: esse código é só a especificação da div. E como eu faço essa div aparecer?
É só abrir uma div. Simples. Mais nada:
<div class="nome">Conteúdo</div>
Opa. O que é esse class=nome? Tá vendo ali em cima no código principal, o div.nome? No nome, você coloca qualquer nome que você quiser dar para a div. Aquilo é a classe dela.
Assim, você pode fazer múltiplas divs com configurações diferentes na mesma página, só usando classes diferentes!

E a imagem, o banner? Uma imagem normal também, sem mais especificações ou styles, dentro dessa div.
E acabou! Agora é só especificar a cor do fundo da página, a barra de rolagem, cor do texto e todas as outras coisas que eu falei ali em cima...

Se tiver alguma dúvida sobre esses códigos pode me perguntar que farei o possível para explicar!
E é só isso por enquanto! Espero que eu tenha ajudado. ^^


Ah sim, hora de linkar os outros!



Tutorial de Lays de Guild da Ana

Se quiser sua página aqui me manda por neomail e se eu gostar eu coloco...





















































































































*-* OMG MELLO MELLO MELLO *retardada*
Enfim, de volta ao guia, clique aqui para voltar ao exato lugar onde você estava!