1 [TUTORIAL] Página HTML mediana por DexTer 18/10/12, 07:57 pm
HenRyqUéè
Administrador
Avaliador
Helper
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | [TUTORIAL] Página HTML mediana por DexTer |
Olá pessoal, eu tava sem internet desde domingo até ontem, então pra nao ficar só desenhando no paint, eu resolvi fazer uma página html no dreamweaver, ela contem um menu, um logo e uma caixa para boas vindas, noticias, informações, etc....
[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
[TUTORIAL] Página HTML V³ por DexTer
1º - Código HTML
Aceda a:
Título: Dê um título para a página.Módulos > HTML e Javascript > Gestão da Páginas HTML >> Nova 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:
- CLIQUE PARA ABRIR:
- 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:
- CLIQUE PARA ABRIR:
- 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>
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]
- Funciona em quai versões?
Todas, pois trata-se de um código HTML e não uma classe css específica do forum.
© RMBR
[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 mediana por DexTer |