GUILD PETS AVENTUREIROS
Este guia de HTML, pertence totalmente a Guild Pets Aventureiros. A PA é uma associação muito participativa, caso queira participar, entre em nossa associação, visite aqui
Seja bem Vindo
Olá mjonnys!!! Seja bem vindo ao meu Tutorial de Gráficos do HTML. Quero informa-lhe que o tutorial é para pessoas que já tem uma noção de HTML. Esse tutorial está relacionado, bem digamos, com a parte 'DESIGNER' da sua página HTML.
Visitas
Obrigado pelas visitas. O guia gráfico de HTML está entre um dos mais acessados do Neo. Rumo ás 10.000 visitas. :*
RECADOS AOS USUÁRIOS E ATENÇÃO AOS COPYCATS.
Para fazer este tutorial de designer do html deu muito trabalho, dias perdidos e foi totalmente feito por mim, por isso, não copie nenhuma vírgula sequer, porque cedo ou mas tarde eu vejo se você copiou alguma coisa sem autorização para fazer um novo tutorial, e por causa disso, posso lhe DENUNCIAR.
ATUALIZADO!
O tutorial está completamente atualizado, nada de acentos bugados.
GUARDE NOS FAVORITOS!!
Para guardar o guia nos favoritos, aperte Ctrl+D. Assim será mais fácil visitar meu guia novamente quando precisar.
CONTATO
Você está com dúvidas, reclamações, opiniões ou sugestões? Ou quer apenas dar um oi para mim? Entre em contato com esse neomail abaixo;
Obrigado.
Navegação
Tuto de Contadores
Tuto de Animação
Tuto de Glitter
Tuto de como fazer Blogs
Tuto de como Puxar Fontes Diferentes
Tuto de como fazer Layouts
Tutorial de Contadores
Primeiramente, precisamos fazer uma conta no BoingDragon´s Lair, é por ele que nos iremos hospedar nosso contador.
Digite esse endereço em seu navegador:
1º Vá nessa barra e clique em "Counter Signup" e faça uma conta.
2º Após ter criado uma conta, clique em "Counter Login". No topo dela, naquela barrinha, clique em "Add A New Counter". Nessa página, clique no Schorchio azul lá embaixo.
3º Nesta nova página, coloque o codigo da imagem (se já foi feita e já foi hospedada. Recomendo o photobucket.com, para utiliza-lo como hospedador, crie uma conta) em "Update URL" e para ver a imagem clique em "Preview".
4º Em "Instance Name" coloque o nome do contador desejado e "Start Count" deixe em "0" mesmo e depois clique em "Create Counter" e seu contador foi terminado e já está pronto para uso.
5º Agora, o mais fácil é instalar. Após criar o contador, a página irá automaticamente voltar para onde você começou após o login. Lá você pode procurar o contador instalado e clique em "Install". Irá aparecer uma nova página e entre os dois códigos apresentados, pegue o 2º (porque o 2º já é para a petpage). Agora é só colocar em sua petpage (etc.) e seu contador já funcionando perfeitamente.
Tutorial de Animações
Para fazer uma animaçãoo eu usei os programas Beneton Movie GIF e um editor de imagens qualquer (o Paint por exemplo).. Para baixar o Beneton utilize o site abaixo:
Exemplo de animação:
Esta imagem acima eu fiz quando estava aberta minha pp de encomendas (hoje não existe mais) para a rede de gráficos Happy Palace, e foi ela mesmo que eu coloquei aqui para economizar tempo.
1º Selecione as imagens que serão passadas uma após a outra, através desta pastinha:  que está localizada nesta barra: 
e depois que serãp jogadas automaticamente na barra inferior:
Agora vá nesta barra:
e depois em "centiseconds":
e coloque 100 ou 150.
2° Salve com um novo nome e feche o programa.
3º Visualize a animação aonde você salvo a imagem. Para hospedar pegue a imagem da animação já pronta e hospede no imageshack.us ou no photobucket.com (o photobucket precisa de cadastro, mas é mais seguro).
Tutorial de Glitter
Vamos criar um belo glitter com o PhotoFiltre Studio 9.0 e o Beneton Movie GIF.
O Beneton Movie GIF pode ser encontrado para download no endereço abaixo:
O PhotoFiltre Studio 9.0 pode ser baixado no endereço do site oficial do PhotoFiltre abaixo:
Veja um pequeno exemplo:
Pronto é simples, mas você pode deixar com muito mais glitter. Você gostou? Quer fazer? Então vamos parar de conversa e começarmos a fazer o seu belo glitter.
1º Copie essa imagem abaixo para seu editor de imagens. É com ela que você vai aprender a fazer esse glitter acima:
2º Abra o Photofitlre no tamanho da sua imagem, cole a imagem.
Agora pegue a "varinha mágica":  e clique no local da imagem que quer colocar o glitter.
PhotoFiltre em Português Para quem não sabe, meu PhotoFiltre (e de muitos neopianos) é em português. Caso queira ter o seu também, coloque esse link no navegador e instale aonde o PhotoFiltre no local que desejar.
photofiltre.free.fr/utils/TranslationBR.zip
3º Depois de decidir o local, agora vamos colocar o glitter.
 Para isso, vá em "Filtros":  , depois "Ruido", "Adicionar Ruido", e regule para 50. Para ver o resultado, aumente o "zoom". Depois abra outra figura e faça as mesmas coisas da primeira imagem, mas em vez de 50 no ruido coloque para 100. Agora salve.
4º Agora abra o Beneton Movie GIF.
Clique nesta pastinha: e abra a imagem que está com ruido 50. E depois, abra a imagem que está com ruido 100. As imagens irão aparecer na barra inferior (no final do programa).
5º No topo da página, nessa caixinha e coloque 150 ou 200. Agora salve e você verá seu glitter pronto!!!
Tutorial de como puxar Fontes diferentes
Está cansado daquelas fontes repetitivas do Windows? Procura por coisas diferentes? Pois você achou o lugar certo. Aqui você irá aprender como usar fontes diferentes para suas petpages, etc.
1º Vá em algum buscador da internet (google, cade, yahoo) e procure por "fontes ttf". Recomendo usar o WebFontes, pois é o mais fácil de utilizar. Para acessá-lo, coloque esse endereço em seu navegador:
3º Quando abrir essa página, clique na fonte que você gostaria, e para procurar mais fontes, vá em "procurar fonte" ou procure por cada letra no começo da página. Depois de clicar na fonte escolhida, vai aparecer essa janela para você fazer o download:
4º Depois de instalado, vamos descompactar para conseguir depois usar. Vá ao lugar que você instalou a fonte e extraia o arquivo clicando com o botão esquerdo do mouse. Vá em 'extrair para'
5º Vá para o "menu Iniciar" do seu computador e vá em "painel de controle". Agora procure pela pasta "fontes". Depois vá em "arquivo" e "instalar nova fonte"
Agora procure a fonte no lugar aonde você salvou e tudo pronto^^ Fácil!!!
Tutorial de como fazer blogs de lojas
Código: gabriela_13_iglesias
É sempre bom ter um blog para dar boas vindas ao seu cliente (em caso de lojas claro), e para isso, estude nosso tutorial e boa sorte!!!
1º Pegue o modelo de seu blog abaixo e abra em um editor de imagens (photofiltre, paint, photoshop), e coloque o que você quiser, mas recomendo não escrever nada, a não ser imagem.
Modelo 1
Modelo 2
2º Não mude o lugar da caixa. Agora é a hora do código HTML:
Código HTML modelo 1:
Código HTML modelo 2
Use esta tabela acima para cores de fontes, tabelas etc.
3º No código, troque COR pelas cores que ficaram no seu blog, aonde esta escrito LINK DA IMAGEM AQUI! troque pelo link da sua imagem pronta para hospedar em um hospedador de imagem (imageshack.us, photobucket.com).
Tutorial de como fazer layouts
Depois de muitos pedidos anciosos por uma criação de um tutorial de codificação e criação de layouts, resolvi criar um, para você criar sua própria petpage.
Introdução
Para criar um layout para petpage, é necessário que você já tenha em sua mente o que você irá fazer. Decida primeiro se quer seu layout com base ou não. A diferença é que com base já tem as caixas prontas.
Vamos seguir os passos:
1º Se quiser um layout com base já pronto, basta pegar esse endereço aqui e copiar a URL da imagem (para isso clique com o mouse no lado direito e copie a url da imagem):
http://i131.photobucket.com/albums/p301/rafaelinha_/moldepralaydomeututo.jpg
ATENÇÃO
Eu retirei esta base de layout de um tutorial de lays, de link aqui (hoje não existe mais)
2º Agora abra seu editor de imagens e cole essa imagem. Enfeite seu layout. Bote quantas imagens quiser, mas se lembre, quantos mais imagens mais o layout demora para carregar na petpage. Não coloque nenhuma imagem dentro das caixas, pois se não vai dar uma complicação para codificar.
3º Depois de enfeitar seu layout, agora é a hora de salver o layout. Salve o layout em um lugar de fácil acesso no computador, no "desktop" pois é mais fácil de achar, e depois é só apagar quando hospedar a imagem.
4º Tudo certo, copie e guarde a url do layout, que irá apresentar no imageshack.us ou no photobucket.com.
5º Agora o terror: o código HTML. Pegue o código abaixo e abra no bloco de notas (No Word, por exemplo)
6º Agora onde está escrito "COLOR" coloque o código HTML da cor que você deseja colocar abaixo.
7º Onde tem "Escreva aqui" você coloca o seu conteúdo, e caso a codificação apareça errada, veja a legenda: "width" é a altura, "height" é a largura, "top" é a distancia do topo e "left" é a distancia do lado esquerdo para o direito. Para mudar os números se usam o "px" que significam pixels e em sua frente é o número que você deve colocar a quantidade de pixels, e lembre-se, pixels é apenas um bloquinho bem pequeninho na tela (mas não aparece). Pronto tudo foi finalizado, é precisa hospedar agora no imageshack.us ou no photobucket.com e já pode usar em sua petpage.
TERMINOU O TUTO!
Querem ver mais tutoriais? Envie uma sugestão para o neomail de mjonnys.
Obrigado. Se deseja voltar para o inicio do tuto, clique aqui
Links/Parceiros
*Deseja ter seu link aqui? Contate-me para abrirmos uma parceria. Eu coloco seu link ou banner e você coloca meu banner em sua petpage. Espero contato.
Link-me
|
