PP de Encomendas do Di
Central de PPs
Tuto de Falso Mapeamento
Tuto de Lookups
Bom dia! Meu nome completo é Anaisha_2000. Sou a Pet que a Mari tem a mais tempo. Sou uma Aisha muito inteligente e intelectual. Passo meu tempo tentando ensinar meus irmão tudo sobre as ciências extas tais como matemática. Como eles não me escutam mesmo eu acabo sempre ajudando a Mari com os HTML e daí surgiu a idéia desse Tutorial. Espero que ajude e que vocês gostem. Beijinhos, Ana!

Introdução

Bom, esse tutorial foi criado porque eu estava cansada de codificar lays de guild pros outros, então espero que agora você faça por você mesmo. Ja me perguntaram como eu aprendi. Foi fácil, abri um código do Neo-faeriewings e fui analisando até descobrir os significados de todos os códigos e fui modificando até chegar onde eu queria... Bom proveito...

Primeira parte-O lay

Bom, esse tutorial ensina a fazer qualquer modelo de lay de guild... Isso mesmo, qualquer um... Mas, eu recomendo que você ja tenha um certo conhecimento de HTML, é um pouco difícil...
Primeiro faça um lay que você queira para a sua guild, não se esquecendo de fazer uma caixinha contínua na esquerda do lay... O meu exemplo ficou assim:


Tamanho reduzido

Lembrando os "requisitos":

-Tamanho considaravelmente grande(o que eu fiz é de 1000x600);
-Uma caixinha comprida e contínua a esquerda para onde ficam os escrito do neo como a pesquisa, o conselho e entre outros *aponta no lay a bendita* (lembrando que durante o Tuto eu vou chamá-la de Navegação;
-A caixa de Navegação deve ser feita bem enconstada a margem e à esquerda dela não pode haver nenhum enfeite ou imagens que não possam ser substituídas pelo Background;
-E não muitas caixinhas de texto pois o neo tem um número de caracteres a ser usado na página e quanto mais caixinha de texto menos espaço pra texto.
Depois hora dos recortes... Para o layout dar certo vocês terão de recortar um pedaço e dividi-lo em dois... Veja como:



Recorte exatamente a parte de cima da caixa de texto mais comprida e salve em outro documento (lembre de salvar em .GIF)... E com a parte que sobrou a direita recorte e salve separado tbm... (excluindo a parte que havia em baixo da caixa de navegação)... Até agora você deve ter três imagens salvas em seu PC:

O lay inteiro (chamarei de Img1)


A parte da esquerda recortada (chamarei de Img2)


E a parte da direita (chamarei de Img3)

Agora hospede a Img2 e a Img3 e guarde as Urls em um bloquinho de notas...
Para fazer o fundo abra de novo o lay inteiro e recorte o finzinho, dependendo do lay (se não for aquele de quadradinhos) pode recortar só a ultima linha, bom, nisso você se vira... Lembrou-se de salvar em Gif né? Agora hospede também, e prepare-se para a codificação...

Segunda parte-Codificação



Bom, vou explicar todas as partes do código,vá colando elas num bloco de notas para montar o código, a primeira é a parte de Style:



Na linha do "body background", depois do "# (sempre usando uma tabela de cores facilmente encontrada no Google Imagens) é onde você coloca a cor que será o plano de fundo onde a imagem não pega. Na parte entre parentesis você coloca a Url do fundo que você hospedou e o escrito "repeat-y" quer dizer que o background só vai se repetir para baixo e não pra todos os lados causando aquela confusão...

Nas linhas de baixo é onde você determina a cor do negrito (b), do link (A:link), do link ja visitado (A:visited), do link quando se está com o mouse por cima (A:Hover) e da cor normal e tamanho da letra (td,p,body). Faça isso sempre colocando a cor desejada após o "#. No tamanha da letra mude o número seguido de "px"...

As três linhas seguintes são padrões e não mudam nada (mas não mexa nelas) e depois na linha "#main" é para posicionar onde ficará a caixinha da guild que tem o consehlo, os dados da guild e essas coisas (aquela padrão do neo)... Bom, abra o lay inteiro no paint e com a ferramenta de selecionar vc seleciona um quadrado na área que será a caixinha:



Antes de soltar o botão do mouse (rato) la embaixo vai ter quatro números. O primeiro é a Left (quantidade de pixels sa esquerda), o segundo é o Top (quantidade de pixels do topo), o terceiro é a Width (largura da caixinha de texto) e o quarto é o Heigth (altura da caixinha; só é usada em caixinha não contínuas)... Coloque esses números onde eu peço... Pronto, a primeira parte do código é só isso...

A segunda parte consiste em posicionar as duas imagens:



Coloque a url da imagem da esquerda em cima, e da imagem da direita, em baixo... Onde está escrito "XXpx" substitua pela largura da imagem da esquerda.

Agora, vamos a última parte, caixinhas de texto:


Essa para caixa não-contínua


Essa para caixas contínuas

Para axar a left, top, widht, heigth selecione a caixinha do mesmo jeito que fez com a outra e o código, selecionando no Paint e anotando as coordenadas... Boa sorte com a sua associação... ;D

































NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions