Jump to content


Photo

Tutorial De Como Fazer Um Template


1931 replies to this topic

#1 KrEmEr

KrEmEr

    www.radiointeract.org

  • Usuários
  • 145 posts
  • Sexo:Não informado
  • Localidade:Cruzeiro - SP
  • Interesses:"Queria ser um baseado<br> Pra nascer em seus dedos,<br> Pra morrer em tua boca<br> E pra fazer tua cabeça."<br><br> (Bob Marley)

Posted 12/04/2004, 21:00

Olá pessoal, vou postar esse topico pois eu vi que tem muita gente com dúvida de como fazer um template... vai então galera...

Um template é composto por 2 partes... a parte do DESIGN e a parte do CODIGO...

vou começa ensinado a parte do design que é mais facil...

PARTE 1 - PARTE DO DESIGN

A parte do design surgi a parti da sua criatividade e talento... para vc poder fazer um template com imagens legais é necessario q saiba mecher em alguns programas de design... como o Corel Draw, PhotoShop, Fireworks( o mais facil de mecher e o mais usado)

mais pra vc poder aprender a fazer o template mais rapido e sem nenhuma necessidade de fikar se preocupando com imagens eu coloquei duas imagens na internet

Imagem 01
Essa Imagem ela é a figura principal, aquela imagem que fika bem em cima

Imagem 02
Essa Imagem será o fundo, todo template precisa de um fundo...

Certo agora que a parte do design está feita, vamos para a parte mais "CHATA" de um template, o CODIGO FONTE


PARTE 2 - CODIGO FONTE

O Codigo fonte é a parte principal de um site, blog, etc... é não é dificil aprender o CODIGO FONTE, ele é chamado de HTML... todos devem ter ouvidos já... certo... vou tentar explicar rapido e facil de aprender... vamos lá

O codigo fonte é compostos por tags, são elas: HTML, HEAD, TITLE e BODY, todas as tags é necessario fechar, ex: <HTML> xxxxxxxxx </HTML>

HTML é a tag principal
HEAD é a tags que poucas vezes é usado... é mais usado em alguns SCRIPT
TITLE como o nome mesmo diz, é a parte que fikara o titulo do seu site
BODY é o corpo do site... nele que colocaremos todo o codigo...

ai galera eu vou colocar o codigo inteiro aqui e depois vou explicando parte por parte certo...

CODIGO INTEIRO
<html>
<head>

                                           <!-- NÃO MUDE NADA ATÈ ALI EM BAIXO-->
             
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color: FFFFFF;
scrollbar-highlight-color: 000000;
scrollbar-3dlight-color: 000000;
scrollbar-darkshadow-color: FFFFFF;
scrollbar-shadow-color: FFFFFF;
scrollbar-arrow-color: 000000;
scrollbar-track-color: 000000;
}
-->
</STYLE>

<meta http-equiv="Content-Language" content="pt-br">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript1.2" src="http://blig.ig.com.br/js/funcoes_templates.js"></script>

<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: #FFFFFF}
hr{width:100%;color:#4FC7FB;height:5;border:1px solid #1A348B; text-align:center}
</STYLE>

                                                          <!-- FIM DA ONDE NÂO È PRA MUDAR -->
                
                                                      <title>"COLOQUE O SEU TITULO AQUI"</title>
</head>

                                              <!-- AQUI QUE FICA O ENDEREÇO DA FIGURA (ESSE É O FUNDO O SITE) -->
<body background="http://sr.kremer.vila.bol.com.br/gorillaz_02.gif">
<table width="669" border="0" cellspacing="0" cellpadding="0" height="0">
   
           <!--  AQUI FICA O ENDEREÇO DA FIGURA PRINCIPAL -->
  <img src="http://sr.kremer.vila.bol.com.br/gorillaz_01.gif"></table>


<!--              INICIO DO SEU PERFIL                    -->
<div id="Layer1" style="position:absolute; left:20px; top:567px; width:161px; height:68px; z-index:1"> 
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td valign="top"> <p align="left"><b><font color="#FFFFFF" size="2"> Perfil</font></b><br>
          <br>
          <b>Nome</b>: Seu Nome<br>
          <b>Idade</b>: Sua Idade<br>
          <b> Icq</b>: Seu Icq<b> <br>
          Email</b>: Seu Email<br>
          <strong>Signo</strong>: Seu Signo<br>
          <b>Coisas que adoro</b>: "Coisas que você adora fazer"<br>
          <b> Coisas que odeio</b>: "Coisas que você odeia"<br>
        <p></p>
        <p> <font color="#FFFFFF"><b><font size="2">Blogs Amigos</font></b></font><br>
          <br>
          <a href="http://www.so_templates.blig.com.br" target="_blank">Blog do 
          So_Templates </a><br>
        </p>
        <p> <b><font color="#FFFFFF" size="2">Links</font></b><br>
          <br>
          <a href="http://www.so_templates.blig.com.br" target="_blank"> So_Templates</a><br>
          <a href="http://www.blig.com.br">Blig</a></p>
        <p> <b><font color="#FFFFFF" size="2">Arquivo</font></b><br>
          <br>
                                   <!--FIM  DO SEU PERFIL -->
       
    
     </p>
        <br> <p align="center">Template by<br>
          So_Templates</p></td>
    </tr>
  </table>
</div>
<div id="Layer2" style="position:absolute; left:252px; top:610px; width:488px; height:46px; z-index:2"> <div align="center"> 

        </p>

        <br>
        <p align="center">


                  <!--INICIO -  CODIGO DA HOSPEDAGEM -->







                 <!-- COLOQUE O CODIGO DA HOSPEDAGEM AQUI -->
                           
        






                           <!--FIM -  CODIGO DA HOSPEDAGEM-->
         

 


            


</body>
</html>


ai ta o codigo certo... agora vou explica as partes mais importantes...

tem uma parte que não é aconselhavel mudar pra quem esta aprendendo agora...

no comeco aonde ta escrito "COLOQUE AQUI SEU TITULO" é aonde você vai colocar o titulo é claro, é dentro da tags <title> </title>

depois vem aonde fika o endereço das imagens, pra vc poder colocar o fundo e a imagem principal, ela precisa estar na internet...

depois vem o PERFIL... ai todos sabem né... coloca o nome...

ai vem a parte importante de um blog... o codigo que mandara as mensagens para o template... cada lugar q vc coloca o seu blog tem um... eles nunca são iguais... existem o blogger, blig, uol, weblogger... no codigo la em cima tem uma parte q ta escrito "COLOQUE O CODIGO DA HOSPEDAGEM AQUI" então la que vc vai colocar o codigo de qual vc vai usar...
aqui vou colocar os codigos do blogger, blig e do weblogger certo

BLOGGER
<!--INICIO -  tags do Blogger -->
        <blogger> 
                
              <p class="mensagem"><small><b><$BlogItemDateTime$></font></b></small><br><br>
                <font size="1"><$BlogItemBody$></font><br><br>
                <small>Enviado por <b><$BlogItemAuthorNickname$></b></small></font></p>
              </blogger> 
<br>
<br>
                <div align="center"><br>
    <br>
    <br>
    *Template Exclusivo do So_Templates</div>
</div>
  <tr>
    <td>

        <!--FIM -  tags do Blogger --></p>
        </a></td>
    </tr>
  </table>
</div>
<div id="Layer2" style="position:absolute; left:252px; top:610px; width:488px; height:46px; z-index:2"> 
  <div align="center">


Blig

<!--INICIO -  tags do Blogger -->
<p class="mensagem" align="justify">[#LISTAGEM#]</p>  
<br>
<br>
                <p> </p>
                <p><div align="center">*Template exclusivo do So_Template</font> </div></p>
              </div>

        <!--FIM -  tags do Blogger -->


Weblogger

<!--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">
            :: Enviado por
 <a href="mailto:<#weblogEmail#>">
            <#weblogApelido#>
            </a>
            - <#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>*Template exclusivo do So_Templates</font> </div></p>
              </div>

        <!--FIM -  tags do Blogger -->


Pessoal se alguns desses ter problema é pq eu nao testei certo... so testei o codigo do blogger... ele ta funcionando

O Template ta pronto... espero ter ensinado... aqueles que tiverem alguma dúvida é só mandar um email para mim sr.kremer@bol.com.br

eu fiz alguns outros templates... mais eu ainda tenho q arrumar os codigos dele... mais se vcs quiserem ver ta ai... se alguem quiser usar alguns dos templates q esta ai é so mandar um email q eu passo o codigo por inteiro... certo

TEMPLATE 01 - GORILLAZ

TEMPLATE 02 - IRON MAIDEN

TEMPLATE 03 - DIABLO

(y) :D

falow ai galera... abraços...
Ricardo Odorizi Olivas
mande me um email com suas dúvidas
sr.kremer@bol.com.br

Edição feita por: KrEmEr, 26/05/2005, 23:16.

Ricardo Odorizi Olivas
Nick: -=| K®ëMë® |=-
Email: ricardoolivas@osite.com.br
Icq: 178211495
Msn: "Use o forum pra tirar dúvida."

#2 Thaty TJ

Thaty TJ

    |\::..Thaty TJ..::/|

  • Usuários
  • 138 posts
  • Sexo:Não informado
  • Localidade:Sabara - MG
  • Interesses:PHP; MSQL; Case mod; CSS; HTML; DHTML; C++; C; JavaScript; Delphi entre outros...!!!

Posted 13/04/2004, 01:04

Muito legal a sua iniciativa, mas o pessoal posta aqui a dúvida de como fazer um template por preguiça de pesquisar mesmo, pq fora que já tem vários tópicos aqui sobre isso, no TPB tem um link que ensina e tal...
Vc pode pesquisar aqui que vc vai ve que o pessoal não tem muita boa vontade de aprender! Claro não estou falando de todos, mas a maioria!
[ ]'s!


Thatiana Emanuelle Da Cunha

|\::..Thaty TJ..::/|


"Se eu soubesse antes o que sei agora
erraria tudo extamente igual"


Conheça Minas Gerais!

Blog:http://thatytj.i-blog.net/
Flog:http://www.fotolog.net/thatytj/
Site:http://www.tudoparablogs.com

#3 *Mina_Loka*

*Mina_Loka*

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Não informado
  • Localidade:Jaraguá do Sul- SC
  • Interesses:Dança, festas e alegria :}

Posted 13/04/2004, 17:59

Muito legal a sua iniciativa, mas o pessoal posta aqui a dúvida de como fazer um template por preguiça de pesquisar mesmo, pq fora que já tem vários tópicos aqui sobre isso, no TPB tem um link que ensina e tal...
Vc pode pesquisar aqui que vc vai ve que o pessoal não tem muita boa vontade de aprender! Claro não estou falando de todos, mas a maioria!
[ ]'s!

Bom.. Como vc disse nem sempre é por preguiça, pq eu no começo não conseguia faze nada pq ñ sabia mexer em nd ai tb ñ adianta...

Tb gostei de vc ter feito o tutorial!!
___quem me dera apenas uma vez, acreditar por um instante em tudo o que existe, acreditar que o mundo é perfeito e que todas as pessoas são felizes*

#4 Flor_de_Jasmim

Flor_de_Jasmim

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado
  • Interesses:Quase tudo ou quase nada...vou sempre descobrindo, me surpreendendo...afinal tudo passa tão rápido e é tão volúvel...

Posted 15/04/2004, 19:04

Muito legal o seu tuto! (y)

Mas no final das contas quem faz o primeiro, logo, logo percebe que precisa ter mais recursos - pelo menos quem é auto-crítica como eu - e então esbarra na falta de informações sobre layers (aquelas camadas mágicas :P ).

Tudo o que tenho feito é na base da pesquisa e curiosidade, mexendo nos programas.

Valeu a iniciativa e uma perguntinha: tens algum site para indicar sobre layers? Eu já li o que tem aqui no forum ( mais específico para FrontPage) e confesso não ter conseguido fazer o que queria.

Abração, Flor de Jasmim

#5 vob

vob

    Projeto Em Desenvolvimento

  • Usuários
  • 132 posts
  • Sexo:Não informado
  • Localidade:PE
  • Interesses:HTML, JAVASCRIPT E PHP

Posted 19/04/2004, 15:44

Muito Bom O Tutorial E O Seus Templates , Vc Fez No Adobe PhotoShop ??
<? $nome = "Victor";
$msn = "drstupido@hotmail.com";
$linguagens = "PHP, HTML e Javascript";
$site = http://www.victoreu.cjb.net
print "Eu me chamo $nome";
print "<br>"
print "Me adiciona no msn, meu msn é $msn . Eu curto $linguagens. " ?> Internet Ruim, Nem Pude Postar meu trabalho de paz!

#6 Nathan Petrin

Nathan Petrin

    Novato no fórum

  • Usuários
  • 1 posts
  • Sexo:Não informado

Posted 21/04/2004, 17:07

BLOGGER

CODE 

<!--INICIO -  tags do Blogger -->
      <blogger>
             
            <p class="mensagem"><small><b><$BlogItemDateTime$></font></b></small><br><br>
              <font size="1"><$BlogItemBody$></font><br><br>
              <small>Enviado por <b><$BlogItemAuthorNickname$></b></small></font></p>
            </blogger>
<br>
<br>
              <div align="center"><br>
  <br>
  <br>
  *Template Exclusivo do So_Templates</div>
</div>
<tr>
  <td>

      <!--FIM -  tags do Blogger --></p>
      </a></td>
  </tr>
</table>
</div>
<div id="Layer2" style="position:absolute; left:252px; top:610px; width:488px; height:46px; z-index:2">
<div align="center">




Blig


CODE 

<!--INICIO -  tags do Blogger -->
<p class="mensagem" align="justify">[#LISTAGEM#]</p> 
<br>
<br>
              <p> </p>
              <p><div align="center">*Template exclusivo do So_Template</font> </div></p>
            </div>

      <!--FIM -  tags do Blogger -->




Weblogger


CODE 
<!--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">
          :: Enviado por
<a href="mailto:<#weblogEmail#>">
          <#weblogApelido#>
          </a>
          - <#weblogHora#> ::<br>
          <a href="java script:wb_comentario(<#weblogcodigo#>)">
          <#weblogTotalComentarios#>
            comentários.</a>
          <br>
          </p>
        </td>
      </tr>
    </table>
  <p align="left">
    </weblogger>
<br>
<br>
              <p> </p>
              <p>*Template exclusivo do So_Templates</font> </div></p>
            </div>

      <!--FIM -  tags do Blogger -->





Alguém sabe o código da UOL ???

Valeu

#7 lady_nataly

lady_nataly

    Normal

  • Usuários
  • 102 posts
  • Sexo:Não informado
  • Localidade:Belo Horizonte - MG

Posted 22/04/2004, 12:50

Aqui o codigo do uol
http://paginas.terra...ags_uolblog.htm
Natalia Resende

Webmaster: Tudo para Blogs

#8 KrEmEr

KrEmEr

    www.radiointeract.org

  • Usuários
  • 145 posts
  • Sexo:Não informado
  • Localidade:Cruzeiro - SP
  • Interesses:&quot;Queria ser um baseado&lt;br&gt; Pra nascer em seus dedos,&lt;br&gt; Pra morrer em tua boca&lt;br&gt; E pra fazer tua cabeça.&quot;&lt;br&gt;&lt;br&gt; (Bob Marley)

Posted 23/04/2004, 21:36

Vob eu faço no PhotoShop e no Firewors... depende de como q eu vou fazer o template...
falow ai... abraços... :D
Ricardo Odorizi Olivas
Nick: -=| K®ëMë® |=-
Email: ricardoolivas@osite.com.br
Icq: 178211495
Msn: "Use o forum pra tirar dúvida."

#9 Kadu_ms

Kadu_ms

    Turista

  • Usuários
  • 26 posts
  • Sexo:Não informado
  • Localidade:Patrocinio/Mg
  • Interesses:The sims, baladas, futuro, estudo, Internet, natação, resumindo tudo que traga boas coisas....

Posted 25/04/2004, 18:04

Bom a única vez que eu dei conta de fazer foi através de um construtor de templayte, mas ficou muito ruim, bom eu não sei nda de nada destes comandos html, neste mês que eu comecei a desapertar o interesse, quero ver se faço um curso de front page e de html, mas mês que vem vou estar mais de boa, e vou tentar seguir seu tutorial.
Bom acho que pra uma pessoa que não sabia nada de nada, comecei a fazer blog a pouco tempo, acho que o meu ta ate legal.
È verdade a maioria das pessoas tem preguiça de procuras, bom eu mesmo não procuro o que não sei, acho mais fácil perguntar, mas também o que eu sei tenho maior prazer em ensinar...
Parabéns o tutorial ficou muito bom..
Conheça o Site do Mundo Sims
www.mundosims.ubbi.com.br
.:.[Kadu| ICQ-284100362 [icq]284100362[/icq]].:.
.:. [centralms@aol.com] .:.
.:.BLog: http://blogdukadu.zip.net/
.:. [MSN] [garotobrmg@hotmail.com] .:. .:. MundoSims .:.

#10 Sic

Sic

    Meu Reggae é Roots!

  • Usuários
  • 311 posts
  • Sexo:Masculino
  • Localidade:SP - ZL!
  • Interesses:Web, Desenvolvimento, Design, ITIL.<br /><br />Praia, Sol, Surf, Música, Violão e um Forreggae.

Posted 25/04/2004, 21:50

Muito bem feiot o tutorial, parabens pelo ótimo trabalho...
Bruno Cesar Dutra - "Mudar é ir Além!"
UbuntuUser - 7.04

Poesias Trash - Idiotice & Conscientização | BlackVistaMod @ Tecnologia

#11 Michelle-as

Michelle-as

    Novato no fórum

  • Usuários
  • 2 posts
  • Sexo:Não informado

Posted 30/04/2004, 09:40

Adorei esse tutorial, vc com certeza me ajudou mto pq tudo que eu queria era aprender a fazer um layout.
Bjos
Obrigada pela ajuda.
Bjos de Michelle

visitem
Meu blog
Blog sobre Smallville

#12 Hyuuga Hinata

Hyuuga Hinata

    Naruto!!... =)

  • Usuários
  • 289 posts
  • Sexo:Não informado
  • Localidade:Jacarépagua - RJ
  • Interesses:Handebol, amigos, namorar, fóruns, blogs/flogs, internet, msn, conversar, praia/piscina, passear nos shoppings, comprar, brincar, ajudar, receber/dar carinho...etc...!! =Pp

Posted 30/04/2004, 10:57

Valeu pelo otimo topico hein...realmente me ajudou mto....pois jah to comecando a fazer um...heheh....t+
e ainda axo q deveria ser pendurado este teu topico....pq tem mto topico pedindo isso...e este aki explica mto bem...heheh

Edição feita por: !°>[V]Ä®¥ÄÑä<°!, 07/05/2004, 23:54.

"Não existe amor sem ações..."
..."A grande maioria das pessoas não vive, simplesmente existem"...
..."Carpe Diem"...aproveite o dia, o momento...!
"O segredo da criatividade é saber esconder suas fontes."

#13 Kakazinha_cp

Kakazinha_cp

    Novato no fórum

  • Usuários
  • 2 posts
  • Sexo:Não informado

Posted 14/09/2004, 00:53

Ah, mas onde eu baxo esse tal d "fireworks?" e como faço pra mudar a barra de rolagem pra preta com branca?

#14 x23

x23

    Quem sabe, voltando... :)

  • Usuários
  • 670 posts
  • Sexo:Masculino
  • Localidade:São Paulo

Posted 15/09/2004, 00:17

para mudar a barra, vc usa CSS.
e baixe a versão trial do fireworks:
http://superdownload...nload/i429.html

Ah, Kremer, tá muito bom teu tuto em!
parabéns véi...
Té +!
antigo -= |LF| =-, ex-moderador e ex-monitor.

#15 KrEmEr

KrEmEr

    www.radiointeract.org

  • Usuários
  • 145 posts
  • Sexo:Não informado
  • Localidade:Cruzeiro - SP
  • Interesses:&quot;Queria ser um baseado&lt;br&gt; Pra nascer em seus dedos,&lt;br&gt; Pra morrer em tua boca&lt;br&gt; E pra fazer tua cabeça.&quot;&lt;br&gt;&lt;br&gt; (Bob Marley)

Posted 15/09/2004, 17:08

Olá... Para mudar a barra de rolagem eu coloquei um codigo de barra de rolagem...

<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color: FFFFFF;
scrollbar-highlight-color: 000000;
scrollbar-3dlight-color: 000000;
scrollbar-darkshadow-color: FFFFFF;
scrollbar-shadow-color: FFFFFF;
scrollbar-arrow-color: 000000;
scrollbar-track-color: 000000;
}
-->
</STYLE>

para mudar vc tem q ir nesse codigo e modificar os numeros... se vc quiser q a barra fike ao contrario... tipow... onde ta preto fike branco... eh so vc trocar onde ta #ffffff para #000000...
ta certo... qulquer coisa manda um mp.. abraços... t+...





:D :) :( :angry:
Ricardo Odorizi Olivas
Nick: -=| K®ëMë® |=-
Email: ricardoolivas@osite.com.br
Icq: 178211495
Msn: "Use o forum pra tirar dúvida."



Responder neste tópico



  


4 user(s) are reading this topic

0 membro(s), 4 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq