[Tutorial]Criando seu site de WoW #4

[Tutorial]Criando seu site de WoW #4Sáb 20 Out 2012 - 0:00

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
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> <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 :

Até mais.

Última edição por Lincoln em Qua 22 maio 2013 - 21:21, editado 2 vez(es)