MMORPG Brasil
Ola, visitante! Agradecemos sua visita, para ter acesso a todo nosso conteúdo recomendamos que faça um cadastro no fórum, com ele você pode participar de tópicos e ter acesso a todas áreas da comunidade!

Participe do fórum, é rápido e fácil

MMORPG Brasil
Ola, visitante! Agradecemos sua visita, para ter acesso a todo nosso conteúdo recomendamos que faça um cadastro no fórum, com ele você pode participar de tópicos e ter acesso a todas áreas da comunidade!
MMORPG Brasil
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

[DISPONDO] Menu com HTML5 e CSS3

4 participantes

Ir para baixo

[DISPONDO] Menu com HTML5 e CSS3 Empty [DISPONDO] Menu com HTML5 e CSS3

Mensagem por Eduardo Marwell Sex 22 Mar 2013, 01:11

Introdução:

Bom, o que vou ensinar aqui é simples, é como criar um menu, que quando você por o cursor em cima, ele baixe com outros menus e outros links, um efeito muito bonito visualmente, sem contar que o menu é uma das partes mais importantes de um site, pois é nele em que o usuário terá acesso a todo o seu web site. Então, there we go now! Surprised

Básico:


Bem, estaremos criando um documento HTML do zero, e o CSS também, vou começar pelo básico, então aí vamos nós!
- HTML: O HTML é uma linguagem de marcação, não é considerada uma linguagem de programação, e sim de marcação de texto, ela faz marcações com tags, que são códigos que marcam o texto para que algum efeito ou estilo de formatação seja aplicado no texto a ser exibido na tela.
- Css: O CSS já é o tipo de linguagem que formata o HTML, é como se vc escrevesse um texto numa folha de papel, e depois saísse marcando com marca texto, só que na web, o HTML deve conter apenas informações, contendo a estrutura do site, e o CSS deverá ser o responsável para estruturar um site. Vou dar um exemplo:

Site apenas com HTML sem utilizar o CSS:
Spoiler:
Agora veja como ficaria o mesmo site, com o CSS, que iria "estilizar" o site:
Spoiler:

Essa é a diferença básica entre o HTML e o CSS.

Terminamos o básico!


Estrutura:


Agora irei explicar como funciona a estrutura de um documento HTML e de um documento CSS:

HTML: O HTML é constituído de Tags e propriedades que definem essas tags, ou adicionam outras propriedades, vou dar um exemplo:
Spoiler:
Agora, crie um arquivo de texto com o bloco de notas, copie e cole todo o código acima neste arquivo e salve-o com o o nome index e a extensão .html , lembrando que você precisa habilitar, em suas opções de pastas, a função de poder editar as extensões dos arquivos.

Agora execute seu arquivo em um navegador, e verá o resultado.


Bom, então agora explicaremos o que cada código desse representa:

Spoiler:

Sabendo o básico do HTML, veremos agora o básico do CSS!


Já sabemos o básico do HTML e agora veremos como estilizar essa página que criamos.
O documento CSS que utilizaremos para estilizar o nosso documento HTML ainda não foi criado, mas já especificamos no nosso documento com a tag:

Código:
<link href="css/folha.css" rel="stylesheet" type="text/css">
Essa tag indica que o arquivo "folha.css" será a nossa folha de estilos CSS, lendo essa tag do começo ao fim, leriamos assim: link, diz o tipo de tag, href, dá a referência do local onde se encontra o arquivo, seu nome e seu formato, rel, diz o tipo de relação entre os documentos, que é de folha de estilos (stylesheet), type, diz o tipo de arquivo que estamos usando, um arquivo de texto em css. Shocked

Agora criaremos nosso arquivo CSS.


  1. No mesmo local onde criou o arquivo "index.html", crie um arquivo com o nome "folha.css".
  2. Agora entre no arquivo CSS utilizando o bloco de notas, ou o Notepad++, que é um programa igual ao notepad, só que próprio pra editar códigos.
  3. Agora que seu arquivo existe, e está ligado ao seu documento HTML, ele irá precisar de atributos para estilizar o seu site.
    • Entre no arquivo "folha.css" e digite o seguinte código:
      Código:
      body {
      background-color:#CCCCCC;
      }
    • Agora se você salvar e abrir novamente seu site, verá que o fundo do seu site mudou de cor, se deu certo, você fez corretamente! Agora o fundo de cor do seu site está mais ou menos dessa cor:||||||||||||||||||||||||||||||||.
    • Agora vamos explicar uma coisa, lá no código falamos de uma tag chamada DIV, esta é uma das tags que mais utilizaremos em sites, e que mais tem utilidade. Uma div é uma divisão dentro do site, com ela podemos criar botões, caixas, menus, ou apenas separar atributos, textos, ou áreas específicas do nosso site. Essa tag DIV pode ser amplamente explorada e estilizada no nosso CSS, vamos agora definir um tamanho para esta div, e uma coloração pra ela, pra que nós possamos vê-la!
    • Adicione o seguinte código ao seu CSS:
      Código:

      #meutexto {
          background-color:#ff0000;
          width:200px;
          height:54px;
          margin:auto;
          border-color:#000000;
          border-radius:8px;
          border-style:dotted;
          border-width:1px;
      }
    • Agora adicione na tua propriedade body o código a seguir:
      Código:

          width:100px;
          height:800px;
          margin:auto;
          display:table;
    • Se você fez tudo corretamente, seu código estará assim:
      Código:

      body {
          background-color:#CCCCCC;
          width:100px;
          height:800px;
          margin:auto;
          display:table;
      }

      #meutexto {
          background-color:#ff0000;
          width:200px;
          height:54px;
          margin:auto;
          border-color:#000000;
          border-radius:8px;
          border-style:dotted;
          border-width:1px;
          text-align:center;
      }
    • Agora teste e veja o resultado!

  • Agora explicaremos para o que cada código serviu!
    Spoiler:



    • Agora, estaremos adicionando o menu e tirando o texto de dentro da div, já que já mostramos como o código funciona, não estarei explicando todo o resto do código que adicionaremos agora pois é uma parte um pouco mais avançada, mas basicamente, estaremos adicionando gradiente compatível com a maioria dos navegadores atuais, adicionando uma lista, que será nosso menu, e estilizando tal para que vire um menu horizontal com drop down, utilizando classes ao invés de IDs que são representadas por #, as classes são representadas por "." no CSS.

      Vá no código HTML na parte:
      Código:

      <div id="meutexto">
      <p>Nosso primeiro parágrafo.</p>
      </div>
      Exclua esse código e adicione o código a seguir:
      Código:

      <nav>
        <ul class="menu">
            <li><a href="#">Início</a></li>
            <li><a href="#">Notícias</a></li>
                 <li><a href="#">Downloads</a>
                    <ul>
                           <li><a href="#">Baixar Library Files</a></li>
                           <li><a href="#">Baixar Eclipse</a></li>
                           <li><a href="#">Baixar Vídeos</a></li>                   
                     </ul>
               </li>
            <li><a href="#">Fotos</a></li>
            <li><a href="#">Contato</a></li>               
      </ul>
      </nav>
    • Agora delete todo o código no arquivo CSS e cole o código a seguir:
      Código:

      body {
          width:400px;
          height:800px;
          margin:auto;
      }

      *{margin: 0; padding: 0;}

      .menu{
         list-style:none;
         border:1px solid #c0c0c0;
         float:left;
      }

      .menu li{
         position:relative;
         float:left;
         border-right:1px solid #c0c0c0;
      }

      .menu li a{
         color:#333;
         text-decoration:none;
         padding:5px 10px;
         display:block;
      }

      .menu li a:hover{
         background:#333;
         color:#fff;
         -moz-box-shadow:0 3px 10px 0 #CCC;
         -webkit-box-shadow:0 3px 10px 0 #ccc;
         text-shadow:0px 0px 5px #fff;
         }

      .menu li ul{
         position:absolute;
         top:25px;
         left:0;
         background-color:#fff;
         display:none;
      }

      .menu li:hover ul, .menu li.over ul{
         display:block;
      }

      .menu li ul li{
         border:1px solid #c0c0c0;
         display:block;
         width:150px;
      }
    • Isso já irá bastar pra que seu menu fique muito legal! Mas existe um problema, utilizamos formas no CSS que o nosso grande vilão, o navegador (se é que pode ser chamado assim Laughing ) Internet Explorer, não irá ler, então adicionaremos alguns outros códigos pra que se alguma pessoa tentar acessar nosso site de um "navegador" como esse ou mais antigo, ela ainda consiga utilizar o nosso site!
      - Então vamos lá, no HTML, após o código a seguir:
      Código:

      <link rel="stylesheet" type="text/css"  href="estilo.css" />
      Adicione o código:
      Código:

          <!--[if lte IE 8]>
       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
       <![endif]--> 
      Esse código é uma variante, "se" acaso alguém tentar utilizar seu site de um navegador mais antigo, ou do Internet Explorer, ela ainda sim terá uma exibição agradável! Embarassed

    Fim!


    Por enquanto é só pessoal! Talvez tenha sido cansativo para alguns, mas esse tutorial alarga bem o seu passo em rumo a sites profissionais em seus projetos!

    Pra quem gosta de estudar (como eu Razz ) aí vai também o link de um dos sites mais legais pra quem quer ficar por dentro destes códigos: Site do Maujor, esse cara é uma das mentes da web do Brasil! Você encontrará muita coisa e muito conteúdo além deste que lhes passei aqui no tópico!



    Códigos Completos:


    Eu não iria adicionar os códigos completos, já que ensinei como fazê-lo, imagino que as pessoas teriam que fazer elas mesmas, pra pelo menos conseguir aprender algo do que estão utilizando, mas sinceramente, fica a cargo de cada um!

    Códigos:
    HTML:
    Spoiler:
    CSS:
    Spoiler:



    Próxima aula:
    A próxima dependerá da repercussão dessa, e das dúvidas que aqui, imagino eu, serão postadas, então se tem dúvidas ou pedidos a hora de fazer é agora! Pergunte, opine, sugira, e tudo será anotado e adicionado na pauta para a próxima aula. Wink


    Créditos:


    Eduardo Marwell - Por criar e disponibilizar aqui no MMORPGBR.


    NÃO É PERMITIDO A PUBLICAÇÃO DESTE TÓPICO EM OUTROS FÓRUNS SEM A MINHA AUTORIZAÇÃO!


    Gostou? Dê +1 crédito!


    Última edição por Eduardo Marwell em Sex 22 Mar 2013, 01:53, editado 4 vez(es) (Motivo da edição : Corrigir alguns erros de formatação e escrita.)
    Eduardo Marwell
    Eduardo Marwell
    Membro
    Membro

    Mensagens : 135

    http://www.naxtia.tk

    Ir para o topo Ir para baixo

    [DISPONDO] Menu com HTML5 e CSS3 Empty Re: [DISPONDO] Menu com HTML5 e CSS3

    Mensagem por afonsobr Sex 22 Mar 2013, 05:30

    Muito bom! +1 merecido! Espero pelos próximos.
    avatar
    afonsobr
    Membro Veterano
    Membro Veterano

    Mensagens : 1196

    http://digimongames.forumeiros.com/

    Ir para o topo Ir para baixo

    [DISPONDO] Menu com HTML5 e CSS3 Empty Re: [DISPONDO] Menu com HTML5 e CSS3

    Mensagem por Eduardo Marwell Sex 22 Mar 2013, 05:45

    Valeu! Tudo vai depender das dúvidas e dos pedidos! Smile
    Eduardo Marwell
    Eduardo Marwell
    Membro
    Membro

    Mensagens : 135

    http://www.naxtia.tk

    Ir para o topo Ir para baixo

    [DISPONDO] Menu com HTML5 e CSS3 Empty Re: [DISPONDO] Menu com HTML5 e CSS3

    Mensagem por LegendaryAngel Sex 22 Mar 2013, 06:26

    Excelente Parabéns +1 Crédito Mereçido!
    avatar
    LegendaryAngel
    Membro Veterano
    Membro Veterano

    Mensagens : 810

    Ir para o topo Ir para baixo

    [DISPONDO] Menu com HTML5 e CSS3 Empty Re: [DISPONDO] Menu com HTML5 e CSS3

    Mensagem por Fogomax Sex 22 Mar 2013, 13:13

    Uma observação, no HTML5 não é necessário isso na tag do CSS:
    Código:
    type="text/css"
    Porque não existe nenhum outro stylesheet sem ser CSS.
    Ficando assim:
    Código:
    <link rel="stylesheet" href="style.css"/>
    +1 Crédito pelo tutorial ^^
    Fogomax
    Fogomax
    Membro Veterano
    Membro Veterano

    Mensagens : 1167

    Ir para o topo Ir para baixo

    [DISPONDO] Menu com HTML5 e CSS3 Empty Re: [DISPONDO] Menu com HTML5 e CSS3

    Mensagem por Eduardo Marwell Sáb 23 Mar 2013, 05:03

    Sim, correto amigo, mas levando em consideração que alguns navegadores ainda não implantaram completamente o html5, temos que utilizar sim para evitar erros de syntax desnecessários. Smile

    O [type="text/css"] é tão necessário quanto o erro de utilizar /> no HTML5, os dois serão ignorados por navegadores mais modernos, mas serão utilizados por navegadores mais antigos e pelo querido Internet Explorer. Wink
    Eduardo Marwell
    Eduardo Marwell
    Membro
    Membro

    Mensagens : 135

    http://www.naxtia.tk

    Ir para o topo Ir para baixo

    [DISPONDO] Menu com HTML5 e CSS3 Empty Re: [DISPONDO] Menu com HTML5 e CSS3

    Mensagem por Conteúdo patrocinado


    Conteúdo patrocinado


    Ir para o topo Ir para baixo

    Ir para o topo

    - Tópicos semelhantes

     
    Permissões neste sub-fórum
    Não podes responder a tópicos