Bgames
Olá visitante! Seja bem vindo ao nosso fórum!

Para você ter total acesso ao nosso fórum é preciso que você se cadastre.

Cadastre-se Aqui!


PARA VER LINKS E IMAGENS É PRECISO SE REGISTRAR!

[Tutorial]Criando seu site de WoW #4

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[Tutorial]Criando seu site de WoW #4

Mensagem por Fox em Sex 19 Out 2012 - 23:00

Crie seu site de world of wacraft. Para visualizar o passo numero quatro deste tópico você terá de adquiri-lo!
Seta Aula #4
Seta créditos - Fox
Seta 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)
[Você precisa estar registrado e conectado para ver esta imagem.]

Esse é o fim da nossa 4º aula.

Resultado:
Spoiler:
[Você precisa estar registrado e conectado para ver esta imagem.]

Até mais.


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

Fox


Mensagens : 1912
Pontos : 11718
Evolução : 50


Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial]Criando seu site de WoW #4

Mensagem por matheuscgd em Sex 19 Out 2012 - 23:15

4ª aula no caso é a ultima ou ira ensinar algo mais? gostei muito da iniciativa... parabens!

matheuscgd


Mensagens : 184
Pontos : 707

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial]Criando seu site de WoW #4

Mensagem por Fox em Sab 20 Out 2012 - 7:30

Bom , agora que criamos os menus e alguns botões, vamos criar as respectivas funções para eles.

Fox


Mensagens : 1912
Pontos : 11718
Evolução : 50


Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial]Criando seu site de WoW #4

Mensagem por edenico em Sab 20 Out 2012 - 19:52

Obrigado fox, merece muito mais do que 1 simples +REP!

edenico


Mensagens : 567
Pontos : 2728

Ver perfil do usuário http://www.northeastgames.tk

Voltar ao Topo Ir em baixo

Re: [Tutorial]Criando seu site de WoW #4

Mensagem por Psychosocial em Sab 27 Out 2012 - 14:14

o link nao funciona Fox esta dizendo que o google nao conseguiu localizar o link

Psychosocial


Mensagens : 1049
Pontos : 3067
Evolução : 4


Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial]Criando seu site de WoW #4

Mensagem por edenico em Sab 27 Out 2012 - 15:11

Manin, não se desespere!,

Clique aqui pra baixar

edenico


Mensagens : 567
Pontos : 2728

Ver perfil do usuário http://www.northeastgames.tk

Voltar ao Topo Ir em baixo

O autor desta mensagem foi removido do fórum - Ver a mensagem

Re: [Tutorial]Criando seu site de WoW #4

Mensagem por SenhorRevolta em Qua 26 Dez 2012 - 18:31

Tamos junto fox

SenhorRevolta


Mensagens : 331
Pontos : 640

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: [Tutorial]Criando seu site de WoW #4

Mensagem por Conteúdo patrocinado Hoje à(s) 7:24


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum