Fórum WMO: Tutorial De Como Fazer Um Template - Fórum WMO

Ir para

  • (3 Páginas)
  • +
  • 1
  • 2
  • 3
  • Novo tópico
  • Responder
  • Ícone  Compartilhar

Tutorial De Como Fazer Um Template Ensinando detalhadamente

#1 Membro offline   KrEmEr 

  • www.radiointeract.org
  • Ícone
  • Grupo: Usuários
  • Posts: 145
  • Cadastrado: 05/04/2004
  • Sexo:Não informado
  • Localidade:Cruzeiro - SP
Pontos: 2
Neutral

Postou 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

Este post foi editado 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

#2 Membro offline   Thaty TJ 

  • |\::..Thaty TJ..::/|
  • Ícone
  • Grupo: Usuários
  • Posts: 138
  • Cadastrado: 14/10/2003
  • Sexo:Não informado
  • Localidade:Sabara - MG
  • Interesses:PHP; MSQL; Case mod; CSS; HTML; DHTML; C++; C; JavaScript; Delphi entre outros...!!!
Pontos: 0
Neutral

Ícone  Postou 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
0

#3 Membro offline   *Mina_Loka* 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 10
  • Cadastrado: 19/10/2003
  • Sexo:Não informado
Pontos: 0
Neutral

Ícone  Postou 13/04/2004, 17:59

thatytj, em 13 Apr 2004, 01:04 , disse:

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*
0

#4 Membro offline   Flor_de_Jasmim 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 8
  • Cadastrado: 29/02/2004
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 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
0

#5 Membro offline   vob 

  • Projeto Em Desenvolvimento
  • Ícone
  • Grupo: Usuários
  • Posts: 132
  • Cadastrado: 21/01/2004
  • Sexo:Não informado
  • Localidade:PE
  • Interesses:HTML, JAVASCRIPT E PHP
Pontos: 0
Neutral

Postou 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!
0

#6 Membro offline   Nathan Petrin 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 1
  • Cadastrado: 21/04/2004
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 21/04/2004, 17:07

Citar

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
0

#7 Membro offline   lady_nataly 

  • Normal
  • Ícone
  • Grupo: Usuários
  • Posts: 102
  • Cadastrado: 11/06/2003
  • Sexo:Não informado
  • Localidade:Belo Horizonte - MG
Pontos: 0
Neutral

Postou 22/04/2004, 12:50

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

Webmaster: Tudo para Blogs
0

#8 Membro offline   KrEmEr 

  • www.radiointeract.org
  • Ícone
  • Grupo: Usuários
  • Posts: 145
  • Cadastrado: 05/04/2004
  • Sexo:Não informado
  • Localidade:Cruzeiro - SP
Pontos: 2
Neutral

Postou 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."
0

#9 Membro offline   Kadu_ms 

  • Turista
  • Ícone
  • Grupo: Usuários
  • Posts: 26
  • Cadastrado: 24/04/2004
  • Sexo:Não informado
  • Localidade:Patrocinio/Mg
Pontos: 0
Neutral

Postou 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 .:.
0

#10 Membro offline   Sic 

  • Meu Reggae é Roots!
  • Ícone
  • Grupo: Usuários
  • Posts: 311
  • Cadastrado: 05/10/2003
  • Sexo:Masculino
  • Localidade:SP - ZL!
Pontos: 0
Neutral

Postou 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
0

#11 Membro offline   Michelle-as 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 2
  • Cadastrado: 29/04/2004
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 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
0

#12 Membro offline   Hyuuga Hinata 

  • Naruto!!... =)
  • Ícone
  • Grupo: Usuários
  • Posts: 289
  • Cadastrado: 06/12/2003
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 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

Este post foi editado 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."
0

#13 Membro offline   Kakazinha_cp 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 2
  • Cadastrado: 12/09/2004
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 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?
0

#14 Membro offline   x23 

  • Quem sabe, voltando... :)
  • Ícone
  • Grupo: Usuários
  • Posts: 670
  • Cadastrado: 31/12/2003
  • Sexo:Masculino
Pontos: 0
Neutral

Postou 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.
0

#15 Membro offline   KrEmEr 

  • www.radiointeract.org
  • Ícone
  • Grupo: Usuários
  • Posts: 145
  • Cadastrado: 05/04/2004
  • Sexo:Não informado
  • Localidade:Cruzeiro - SP
Pontos: 2
Neutral

Postou 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."
0

  • (3 Páginas)
  • +
  • 1
  • 2
  • 3
  • Novo tópico
  • Responder

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)