![[Tutorial]Criando seu site de WoW #4 Empty](https://2img.net/i/empty.gif)
Crie seu site de world of wacraft. Para visualizar o passo numero quatro deste tópico você terá de adquiri-lo! 
Aula #4
créditos - Fox
Nome - melhorando o CSS.
Hoje vamos melhorar o Css do nosso WebSite.
Sim , o css é o "design" do site.
Para não ficar duvidas, logo após concluir a parte do css vamos trabalhar em nossos sistemas PHP,
TopLevel, TOP Arena, Top Honor, Top Arena Team , dentre outras coisas.
Bom , só para avisar, eu faço as modificações no site como acho interessante e posto aqui .
Abra o seu Config.php,
e substitua por
Abra o seu html.php
e substitua por
Dentro da pasta css, crie um arquivo (não é txt) chamado styles.css
e adicione o seguinte código
Baixe esses arquivos e extraia na pasta do site (são algumas imagens)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Esse é o fim da nossa 4º aula.
Resultado:
Até mais.
Última edição por Lincoln em Qua 22 maio 2013 - 21:21, editado 2 vez(es)
Aula #4 créditos - Fox Nome - melhorando o CSS.Hoje vamos melhorar o Css do nosso WebSite.
Sim , o css é o "design" do site.
Para não ficar duvidas, logo após concluir a parte do css vamos trabalhar em nossos sistemas PHP,
TopLevel, TOP Arena, Top Honor, Top Arena Team , dentre outras coisas.
Bom , só para avisar, eu faço as modificações no site como acho interessante e posto aqui .
Abra o seu Config.php,
e substitua por
Código:
<?php
error_reporting(0);
define('NOME_SITE','Ultimate Projects'); // Nome do seu servidor
$template_error_file="./include/error.php"; // caso de erro
$template_thanks_file="./include/obrigado.php"; // caso de sucesso
$template_file="./include/html.php"; // pega os dados do html.php
// SQL Variaveis
$host = "localhost"; // normalmente é localhost
$user = "root"; // Usuário normalmente é root
$pass = "ascent"; // Normalmente é Ascent
$db = "auth";// Onde é salva as contas do seu servidor normalmente é auth
$ms = mysql_pconnect($host, $user, $pass);
if ( !$ms )
{
echo "Erro ao conectar a Data Base, Verifique as configurações no config.php.\n"; // mensagem caso der erro ao carregar a db (senha ou algo errado )
}
mysql_select_db($db);
?>
Abra o seu html.php
e substitua por
Código:
<!DOCTYPE HTML>
<html lang="en-US">
<meta charset="UTF-8">
<head>
<?php
@include('config.php');
?>
<title><?php echo NOME_SITE ?></title><!-- pega o nome do seu server para titulo da pagina -->
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="../css/designer.css" />
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
</head>
<body>
<h1><?php echo NOME_SITE ?></h1>
<div id="main">
<div id="navigation">
<ul class="menuUL">
<li><a href="#" class="house">Inicio</a></li>
<li><a href="#" class="wrench">Registrar</a></li>
<li><a href="#" class="envelope">Conectar</a></li>
<li><a href="#" class="info">Top Matador</a></li>
<li><a href="#" class="info">Top Honor</a></li>
<li><a href="#" class="info">Sobre nos</a></li>
</ul></div>
</div>
<div class="clear"></div>
<form action="index.php?p=reg" method="post" class="general">
<label for="textreq">Usuario <span>(Necessario)</span></label>
<input name="username" type="text" class="form-input" id="username" required />
<label for="textreq">Senha <span>(Necessario)</span></label>
<input name="password" type="password" class="form-input" id="password" required />
<label for="textreq">E-Mail <span>(Necessario)</span></label>
<input name="email" type="text" class="form-input" id="email" required />
<input class="form-btn" type="submit" value="Registrar-se" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function(){
if( $.browser.msie && $.browser.version < 9 ) {
$('html').addClass('ie');
$('div.option-group').each(function(){
var $this = $(this);
$this.find('label').append('<span class="before"></span> <span class="after"></span>');
// radio button styling
if( $this.hasClass('radio') ) {
$this.delegate('input[type="radio"]', 'click', function(){
if( this.checked ) {
$(this).siblings('label').removeClass('checked').end().next('label').addClass('checked');
}
else {
$(this).next('label').removeClass('checked');
}
});
}
// checkbox styling
else if( $this.hasClass('check') ) {
$this.delegate('input[type="checkbox"]', 'click', function(){
if( this.checked ) {
$(this).next('label').addClass('checked');
}
else {
$(this).next('label').removeClass('checked');
}
});
}
});
}
// select box styling
if( $.browser.msie && $.browser.version <= 9 ) {
$('html').addClass('ie9');
$('form.general')
.find('select')
.css({ 'opacity': '0', 'position': 'relative', 'z-index': '10' })
.after('<span class="selectTop"/>')
.change(function(){
$(this).next().text( $('option:selected', this).text() );
})
.trigger('change');
}
// add 'invalid' class when HTML5 form valiation fails
if( !$.browser.firefox ) {
$('form.general').each(function(){
$(this).find('input.form-input').bind('invalid', function(){
$(this).addClass('invalid');
});
});
}
});
</script>
<div id="stage">
</div>
</div>
<p class="tutInfo"> Creditos - Fox - <a href="http://www.ultimateprojects.com.br">Ultimate Projects</a>, Todos os
direitos reservados.</p>
</body>
</html>Dentro da pasta css, crie um arquivo (não é txt) chamado styles.css
e adicione o seguinte código
Código:
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* simples edições nos textos */
margin:0;
padding:0;
}
body{
/* define algumas cores */
color:#cccccc;
font-size:0.825em;
background: url(img/background.jpg) no-repeat center top #252525;
font-family:Arial, Helvetica, sans-serif;
}
.menuUL li{
display:inline;
}
.menuUL li a,.menuUL li a:visited{
float:left;
font-weight:bold;
background:url(img/button_bg.jpg) repeat-x center bottom #666666;
display:block;
border:1px solid #4D4D4D;
color:#CCCCCC;
border-top-color:#565656;
padding:4px 6px;
margin:4px 5px;
height:16px;
/* configurações do css3 para botões */
-moz-box-shadow:0 0 1px black;
-webkit-box-shadow:0 0 1px black;
box-shadow:0 0 1px black;
/* CSS3 texto shadow */
text-shadow:0 1px black;
}
.menuUL li a:hover{
background-position:center top;
text-decoration:none;
}
#navigation{
/* Menu de navegação */
background:#222222;
border:1px solid #111111;
float:left;
padding:5px 10px;
}
#navigation,.menuUL li a{
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius:4px;
border-radius:4px;
}
#stage{
height:300px;
position:absolute;
right:50px;
top:20px;
width:400px;
}
.dot{
float:left;
height:25px;
width:25px;
}
.dot.active{
background:url(img/dot.png) no-repeat center center;
}
.clear{
clear:both;
}
#main{
margin:0 auto;
position:relative;
width: 600px;
}
h1{
background:#222222;
border-bottom:1px solid black;
font-size:1.5em;
font-weight:normal;
margin-bottom:15px;
padding:15px;
text-align:center;
}
h2 {
font-size:0.9em;
font-weight:normal;
padding-right:40px;
position:relative;
right:0;
text-align:right;
text-transform:uppercase;
top:-48px;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
p.tutInfo{
padding:10px 0;
text-align:center;
position:absolute;
bottom:0px;
background:#222222;
border-top:1px solid black;
width:100%;
}
h1,h2,p.tutInfo{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
Baixe esses arquivos e extraia na pasta do site (são algumas imagens)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Esse é o fim da nossa 4º aula.
Resultado:
Spoiler :
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Até mais.
Última edição por Lincoln em Qua 22 maio 2013 - 21:21, editado 2 vez(es)
![[Tutorial]Criando seu site de WoW #4 1693994873](/users/3014/60/05/24/smiles/1693994873.png)
Tamos junto fox