Início
Últimas imagens
Procurar
Registrar
Entrar
QuakelineAdministrador
- Inscrito dia: : 09/01/2013
Mensagens : 89
![[TUTORIAL] Página HTML V³ por DexTer Empty](https://2img.net/i/empty.gif)
[TUTORIAL] Página HTML V³ por DexTer
Qua Jan 09, 2013 6:28 pm
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
[TUTORIAL] Página HTML V³ por DexTer[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]ATENÇÃO!!!
Está página foi criada inteiramente por dexTer e os créditos são para: RMBR. Se fazerem cópias, por favor não retirar esta caixa!
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Página HTML V³ por DexTer
Está página foi criada inteiramente por dexTer e os créditos são para: RMBR. Se fazerem cópias, por favor não retirar esta caixa!
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Página HTML V³ por DexTer
1º - Código HTML
Aceda a:
MódulosHTML e Javascript
Título: Dê um título para a página.
Você deseja utilizar o início e o final da página do seu fórum?: Marque NÂO.
Usar esta página como página inicial?: Marque SIM.
Código HTML: Cole o seguinte código abaixo:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.menu{
box-shadow: 0px 0px 5px grey;
border-radius:10px;
-moz-border-radius:10px;
-webkit-moz-border-radius:10px;
width:65%;
padding:9px;
background:#333333;
}
.menu a{
transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-webkit-moz-trasition:all linear 0.5s;
font-weight:bold;
text-shadow:0px 0px 1px grey;
color:#999999;
margin-right:35px;
text-decoration:none;
}
.menu a:hover{
border-radius:5px;
box-shadow:0px 0px 1px black;
border-bottom:3px #000000;
transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-webkit-moz-trasition:all linear 0.5s;
padding:12px;
color:black;
text-shadow:#333333;
background:#666666;
}
.menu a:active{
background:#000000;
color:#999999;
}
#tabela1{
display:table;
background:#999999;
width:70%; height:500px;; float:center; border:1px solid black;
margin-top:25px;
border-radius:20px;
box-shadow:2px 3px 15px grey;
}
#tabela1 a{
text-decoration:none;
color:#999999;
}
body{
background:#CCCCCC;
}
</style>
<link rel="shortcut icon" type="image/x-icon" href="http://dl.dropbox.com/u/19426320/Swords.png" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página do Tutorial</title>
</head>
<body>
<center><img src="http://i36.servimg.com/u/f36/16/96/02/41/tutori10.png" style="height:200px; width:800px;"/></center>
<center><div class="menu"><a href="/forum">FORÚM</a><a href="/groups">GRUPOS</a><a href="/memberlist">MEMBROS</a><a href="/faq">FAQ</a></div>
<table id="tabela1">
<td><center><div style="box-shadow:0px 0px 3px #333333; border-radius:5px; background:#CCCCCC; margin-bottom:10px;border:1px solid black; width:90%; height:380px"><center>AQUI VOCÊ COLOCARÁ QUALQUER INFORMAÇÕES SOBRE SEU FORUM, COMO UMA MENSAGEM DE BOAS-VINDAS</center>
</div>
<div style="position:inherit; border-radius:5px; margin-bottom:-5px; margin-top:15px; box-shadow:0px 0px 5px black; background:#333333; color:#CCCCCC; border:1px solid black; padding:10px; width:350px;">PÁGINA CRIADA POR HENRIQUE<br />
<a target="_blank" href="www.rmbr.forumeiros.com">www.rmbr.forumeiros.com</a>
</div></center>
</table></center>
<h6 style="text-align:center; font-size:9px;" >HOSPEDADO POR: <a style="text-decoration:none; color:#333333;" href="www.forumeiros.com" target="_blank">FORUMEIROS</a></h6>
</body>
</html>
Alterando os textos da caixa e os links do menu:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.menu{
box-shadow: 0px 0px 5px grey;
border-radius:10px;
-moz-border-radius:10px;
-webkit-moz-border-radius:10px;
width:65%;
padding:9px;
background:#333333;
}
.menu a{
transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-webkit-moz-trasition:all linear 0.5s;
font-weight:bold;
text-shadow:0px 0px 1px grey;
color:#999999;
margin-right:35px;
text-decoration:none;
}
.menu a:hover{
border-radius:5px;
box-shadow:0px 0px 1px black;
border-bottom:3px #000000;
transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-webkit-moz-trasition:all linear 0.5s;
padding:12px;
color:black;
text-shadow:#333333;
background:#666666;
}
.menu a:active{
background:#000000;
color:#999999;
}
#tabela1{
display:table;
background:#999999;
width:70%; height:500px;; float:center; border:1px solid black;
margin-top:25px;
border-radius:20px;
box-shadow:2px 3px 15px grey;
}
#tabela1 a{
text-decoration:none;
color:#999999;
}
body{
background:#CCCCCC;
}
</style>
<link rel="shortcut icon" type="image/x-icon" href="<b>ícone da página</b>" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><b>TÍTULO DA PÁGINA</b></title>
</head>
<body>
<center><img src="<b>LOGO DA PÁGINA</b>" style="height:200px; width:800px;"/></center>
<center><div class="menu"><a href="<b>Link do menu</b>"><b>MENU</b></a><a href="<b>Link do menu</b>"><b>MENU</b></a><a href="<b>Link do menu</b>"><b>MENU</b></a><a href="<b>Link do menu</b>"><b>MENU</b></a></div>
<table id="tabela1">
<td><center><div style="box-shadow:0px 0px 3px #333333; border-radius:5px; background:#CCCCCC; margin-bottom:10px;border:1px solid black; width:90%; height:380px"><center><b>AQUI VOCÊ COLOCARÁ QUALQUER INFORMAÇÕES SOBRE SEU FORUM, COMO UMA MENSAGEM DE BOAS-VINDAS</b></center>
</div>
<div style="position:inherit; border-radius:5px; margin-bottom:-5px; margin-top:15px; box-shadow:0px 0px 5px black; background:#333333; color:#CCCCCC; border:1px solid black; padding:10px; width:350px;">PÁGINA CRIADA POR HENRIQUE<br />
<a target="_blank" href="www.rmbr.forumeiros.com">www.rmbr.forumeiros.com</a>
</div></center>
</table></center>
<h6 style="text-align:center; font-size:9px;" >HOSPEDADO POR: <a style="text-decoration:none; color:#333333;" href="www.forumeiros.com" target="_blank">FORUMEIROS</a></h6>
</body>
</html>
SALVE!
2º - Resultado final
Se você deixou o código como eu passei, ele ficará assim: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
° Funciona em quais versões?
Todas, pois trata-se de um código HTML e não uma classe css específica do forum.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[TUTORIAL] Página HTML V³ por DexTer
[TUTORIAL] Página HTML V³ por DexTer
Permissões neste sub-fórum
Não podes responder a tópicos