Progamas que iremos utilizar : Photoshop e Bloco de Notas
* Para quem usa Mac e não tem o bloco de notas pode utilizar qualquer outro aplicativo de edição, o bloco de notas é utilizado para fazer teste que podem ser feitos também no seu servidor.
Fazendo o template.
Primeiro abra a imagem que você deseja usar. Esta é a minha :
Agora abra um novo arquivo (CTRL + N) de preferencia 800x600 ou 1024x768. Mude as preferencias e a deixe assim :
Agora você irá criar a imagem para seu layout. Escolha um cor para o fundo e clicando aqui :
Para pintar use esta ferramenta.
Depois de pintar você agora irá colar a imagem que você deseja usar nesse no arquivo. Voltando a imagem com a ferramenta de seleção
Clique com o botão direito do mouse na sua imagem e clique em Selecionar tudo. Agora com a imagem selecionada a copie (CTRL + C).
Volte para o novo arquivo e cole a imagem (CTRL + V). Com ela colada você a edita da maneira que você gosta, com efeitos, brushes (Pínceis), patterns (Padrões) etc.
A minha ficou assim :
Agora com a imagem pronta você prescisa colocar colunas, que são as divisões para Perfil e Posts. Escolha novamente a cor que você deseja e com a Ferramenta Retângulo (U) você vai na imagem clica e puxa o retângulo. Faço isso duas vezes para fazer as colunas.
Agora é presciso botar o titulo das colunas, os seus créditos e o título do blog. Use a Ferramente de Texto Horizontal (U) para escrever.
Para as colunas e os créditos dê preferencias a fontes em bitmap/pixel (http://www.dafont.com/en/bitmap.php)(Ernest, Bm mini)
* Para baixar fontes entre no site DaFont (http://www.dafont.com) e baixe a fonte que você quer. Para instalar é só você dezipá-la e ir em Painel de Controle >> Fontes >> Arquivo >> Instalar Nova Fonte.
Com a fonte já instalada escreva o seus créditos, tente botar em um local discreto tipo o canto do layout. A fonte que eu utilizei nos créditos foi a 04b_03 (http://www.dafont.com/download/?os=win&file=04b_03).
Agora escreva com uma fonte bem maior o título ou nome do blog. A fonte que eu utilizei no título foi a Times New Romam.
Para aplicar efeitos em fontes é só você ir na Janela de Camadas (F7) e clicar com o botão direito na camada do texto :
Clicando com o botão direito você seleciona a opção Opções de Mesclagem. Irá abrir esta janela :
Para mexer nos valores de cada opção basta clicar com o botão direito por cima delas.
Pronto, ai está a imagem de seu template. Vá em Arquivo >> Salvar Como ..., e salve a como template.jpg.
Agora você irá fazer a linha de seu template. Com a Ferramenta Letreiro de Seleção (M) você irá selecionar uma linha de 1 pixel no final da imagem de seu template.
Depois você Copia (CTRL + C). Abra um novo arquivo (CTRL + N) e cole a linha no novo arquivo (CTRL + V).
Agora salve a linha como linha.jpg.
Pronto, só falta hospedar as duas imagens, para hospedar utilize um desses sites : PhotoBucket (http://www.photobucket.com) ImageShack (http://www.imageshack.us) (Considero o melhor)
Com as imagens hospedadas vamos começar a fazer o código HTML do layout.
Fazendo o Código HTML
O código HTML é a base de todo o site, ele que faz tudo funcionar da maneira que você quer. Os códigos devem se botados em um servirdor gratuito de postagem. Os mais conhecidos são : Weblogger (http://www.webloggger.com.br), Blogger (http://www.blogger.com.br), Uol (http://www.uol.com.br).
Vamos começar pelos os esqueletos dos códigos. Vou usar como exemplo um para o Weblogger. Para pegar o esqueleto entre aqui, copie o código desejado e cole no Bloco de Notas ou progama de edição HTML.
http://geocities.yahoo.com.br/ingriidcorreia/codes.html
-
Agora irei explicar o que é cada código desse.
Code: Select all
<!--COMEÇO DO CÓDIGO DA BARRA DE ROLAGEM-->
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color:EF21F4;
scrollbar-highlight-color:ffffff;
scrollbar-3dlight-color: 000000;
scrollbar-darkshadow-color:ffffff;
scrollbar-shadow-color: 000000;
scrollbar-arrow-color: ffffff;
scrollbar-track-color:00000;
}
-->
</STYLE>
<!--FIM DO CODIGO DA BARRA DE ROLAGEM-->
Depois do código gerado você substitui tudo que se encontra entre as tags : <!-- COMEÇO DO CÓDIGO DA BARRA DE ROLAGEM--> e <!--FIM DO CÓDIGO DA BARRA DE ROLAGEM-->
-
Code: Select all
<!--INICIO DO STYLE-->
<STYLE type="text/css">
P, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 10px;
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 12px;
}
A, A:link{color:#ffffff;text-decoration:none}
A:visited{color:#ffffff}
A:active{color:#ffffff}
a:hover {text-decoration: none; filter: shadow(Color=#666666, strength=1); height:0px; cursor: hand; font-family: Verdana, Arial, Helvetica, sans-serif; color: #ff0000}
hr{width:100%;color:#4FC7FB;height:5;border:1px solid #1A348B; text-align:center}
</STYLE>
</head>
<!--FIM DO STYLE-->
Fonte :
Code: Select all
font-style: normal;
font-weight: normal;
font-size: 10px;
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 12px;)
Font-weight = Altura da fonte.
Font-size = Tamanho da fonte (em pixels)
Color = Cor da fonte (Para mudá-lo utilize a tabela de cores
Font-family = Estilo da fonte
Line-height = Altura da linha (em pixels)
Link :
Code: Select all
A, A:link{color:#ffffff;text-decoration:none}
A:visited{color:#ffffff}
A:active{color:#ffffff}
a:hover {text-decoration: none; filter: shadow(Color=#666666, strength=1); height:0px; cursor: hand; font-family: Verdana, Arial, Helvetica, sans-serif; color: #ff0000}
hr{width:100%;color:#4FC7FB;height:5;border:1px solid #1A348B; text-align:center}
Visited = Que já foi visitado
Active = Ativado
Hover = Com o mouse pausado sobre ele
-
Code: Select all
<!--Aqui vc vai colocar o endereço da imagem do Fundo-->
<body bgcolor="#ffffff" background="ENDEREÇO DA LINHA.JPG" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--Aqui vc vai colocar o endereço da imagem do Fundo-->
-
Code: Select all
<!--INICIO DIV DO PERFIL-->
<div id="Layer1" style="position: absolute; left: 370; top: 670; width: 210;z-index: 1">
<table width="199" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="199">
<!--INICIO - PERSONALIZAÇÃO -->
<!--INICIO DO PERFIL-->
<b><font color="#FFFFFF" size="2">Perfil</font></b><p>
<font color="#ffffff" size="1">
<b>Nome</b>: Eu<br>
<b>Idade</b>: 18<br>
<b>Icq</B>:123456789 <br>
<b>Msn</b>:fulano@fulano.com<br>
<b>Signo</b>: Cancer<br>
<b>Cor</b>: Verde<br>
<b>Coisas que adoro</b>: Rock, amigos...bla bla bla <br>
<b>Coisas que odeio</b>: Matemática,estudar bla...<br>
<!--FIM DO PERFIL-->
<!--INICIO DOS BLOGS DE AMIGOS-->
<p>
<b><font color="FFFFFF" size="2">Blogs de Amigos</font></b><p>
<font color="#000000" size="1">
<a href="http://www.blogdokilouko.blogger.com.br" target="_blank">Blog do Billy</a><br>
<a href="http://www.Link2" target="_blank">Blog 2!</a><br>
</p>
<!--FIM DOS BLOGS DE AMIGOS-->
<!--INICIO DOS LINKS-->
<p>
<b><font color="FFFFFF" size="2">Links</font></b><p>
<a href="http://www.blogdokilouko.blogger.com.br" target="_blank">Blog do Billy</a><br>
<a href="http://Link 2" target="_blank">Link 2</a><br>
</p>
<!--FIM DOS LINKS-->
<!--FIM - PERSONALIZAÇÃO -->
<b><font color="FFFFFF" size="2">Creditos</font></b><p>
CÓDIGO DO TEMPLATE BY INGRID MORAIS.
</td>
</tr>
</table>
</div>
<!--FIM DA DIV DO PERFIL-->
Este código se chama DIV :
Code: Select all
<div id="Layer1" style="position: absolute; left: 370; top: 670; width: 210;z-index: 1">
<table width="199" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="199">
CONTEUDO
</td>
</tr>
</table>
</div>
Code: Select all
<div id="Layer1" style="position: absolute; left: 370; top: 670; width: 210;z-index: 1">
CONTEUDO
</div>
Div id = Nome da Div
Style = Atributos dela como : left,top,width,heigth. O style é responsavel pela a localização da div, para configura-la você prescisa tirar as exatas coordenadas de seu layout para o texto começar exatamente de onde você marcou na coluna.
- Left = Medida da esquerda para a direita
- Top = Medida de cima para baixo
- Width = Largura (Para o texto não sair do local desejado)
- Height = Altura (Utilizado em layout não-continuos, que no caso não é o nosso)
----- Vou ensinar como se tirar as coordenadas das divs utilizando o Photoshop.
Abra a imagem de seu template (template.jpg). Arquivo >> Abrir.
Vá em Edit >> Preferences >> United & Rules. Configure a Unit e o Type para Pixels.
Agora vá em View >> Rules (CTRL + R) e em View >> Extras (CTRL + H)
Agora com a ferramente Mover (V) puxe desde as reguas lá de cima até onde você quer que comece seu posts. Isso será o Top.
Agora faça a mesma coisa só que puxando a linha da esquerda para direita até onde você quer que vá os posts.
Agora é só ver os valores. Para ver os valores é só ir na réguas lá em cima e ver onde está indicando a linha que você puxou.
Por exemplo, aqui está indicando 530 pixels de top :
Faça o mesmo para ver o left, só que olhando a linha que veio da esquerda para a direita na régua lá de cima.
Pronto, agora já sabemos o nosso Top e o nosso Left. Só falta agora saber a Width (Largura) e a Heigth (Altura). Para medi-las nos prescisaremos usar a Ferramenta Letreiro Retangula (M) . Com ela você seleciona a largura e a altura (que no caso não iremos usar) de onde você quer colocar os seus texto. Selecione e depois copie (CTRL + C) e abra um novo arquivo (CTRL + N).
Nesse novo arquivo irá mostrar os exatos tamanhos da sua width e heigth. Pegue os valores que aparecerão na janela
* Lembrando que no nosso caso o template é continuo, então não iremos prescisar da heigth.
Agora com os valores é presciso apenas configurar eles nas divs. ----
Pronto, agora que você já sabe como medir suas coordenadas é só altera-las no Style de sua div.
Table :
As tabelas são responsaveis para que o conteudo permaneça dentro da div. O seu código é :
Table
Code: Select all
<table border="0" width="100" heigth="100">
<tr>
<td>
CONTÉUDO
</td>
</tr>
</table>
* Lembrando que nós não iremos utilizar a heigth, pois nosso template é continuo.
Agora que terminamos de explicar as divs, seu código final é esse :
Code: Select all
<div id="Layer1" style="position: absolute; left: 370; top: 670; width: 210;z-index: 1">
<table width="199" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="100">
CONTEUDO
</td>
</tr>
</table>
</div>
* Para templates com mais colunas é só acrescentar mais divs. :)
-
Code: Select all
<!--INICIO DA DIV DOS POSTS-->
<div id="Layer2" style="position: absolute; left: 100; top: 720; width: 197;z-index: 2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--INICIO - tags do Blogger -->
<weblogger>
<font size="1">
<weblogcabecalhodata>
</font>
<tr align="left">
<td width="520">
<p align="center">
<#weblogDataCabecalho#>
<br>
<br>
</p>
</td>
</tr>
</weblogcabecalhodata>
<tr>
<td width="520">
<p align="justify"><#weblogMensagem#></p>
<p align="left">
Rabiscado by
<a href="mailto:<#weblogEmail#>">
<#weblogApelido#>
</a>
às <#weblogHora#> <br>
<a href="javascript:wb_comentario(<#weblogcodigo#>)">
<#weblogTotalComentarios#>
Comentários.</a>
<br>
</p>
</td>
</tr>
</table>
<p align="left">
</weblogger>
<br>
<br>
<p> </p>
<p><div align="center"></div>
</div>
<!--FIM DA DIV DOS POST-->
Este código de baseia em divs e o contéudo de tags que não pode ser alterado pois pode causar danos ao serviço de postagem do servirdor.
-
Code: Select all
<!--COMEÇO DA IMAGEM DO TOPO-->
<img src="ENDERÇO DA IMAGEM DO TOPO">
<!--FIM DA IMAGEM DO TOPO-->
-
Bem chegamos ao final de todo o código, agora só é presciso altera-lo com cuidado e ir o testando no servirdor. A seguir irei postar códigos de outros servirdores, que serão necessárias as mesmas alteraçãos.
* Lembrando para não se mecher nas tags do servirdor, pois pode alterar o sistema de postagem.
Aqui estão todos os códigos, copie e cole no seu Blocode Notar ou progama de edição HTML. - http://geocities.yahoo.com.br/ingriidcorreia/codes.html
Estão ai os códigos de todos os servidores. Agora só é presciso altera-los e cola-los em seu servirdor.
-
O Tutorial acabou, ficou um pouco grande mas está todo completo. Qualquer dúvida pode ser tirada neste tópico mesmo.
Aqui está o resultado final. :) - http://geocities.yahoo.com.br/ingriidco ... eiout.html
Créditos á :
ImageShack.us - Pela hospedagem
Vickys.cbj.net - Gerador de Barra de Rolagem
Geocities Yahoo - Hospedagem de arquivos
TUTORIAL COMPLETAMENTE FEITO POR MIM - INGRID CAVALCANTE MORAIS CORREIA
[/b]Concorrendo