Criar sites HTML5 de uma página com scroll e menu fixo

Aprenda fazer um site simples e elegante com HTML5 e jQuery.

Neste tutorial vamos aprender como criar sites HTML5 em sua estrutura básica, ou seja, navegação, artigo, imagens e rodapé.

Já podemos contar com o suporte parcial na maioria dos atuais navegadores, a atualização do XHTML, o HTML5, mas ainda teremos alguns anos para que todos os navegadores e versões se adaptem a mais nova versão.

Para corrigir algumas versões antigas de navegadores vamos utilizar o plugin html5shiv, um javascript que pode corrigir esse detalhe para nosso HTML5.

Sempre gostei muito de sites de uma página com rolagens automáticas, e sempre quis colocar um tutorial em HTML5 aqui no criarsites.me. Resolvi criar este modelo simples com alguns atrativos interessantes.

Usei no layout o plugin scrollto, facilitando na navegação de nosso modelo de uma página. Para o usuário não ficar perdido entre as sessões do site coloquei o meu fixo no topo ao fazer a rolagem.

Claro que com alguns ajustes pode ficar ainda melhor, basta soltar a imaginação e colocar a mão na massa.

Criar sites HTML5 exemplo criado para nosso tutorial.

demo-site-html5-criarsites

Visualize o modelo online clicando no botão VISUALIZAR DEMO abaixo.

VISUALIZAR DEMO

Veja logo abaixo a estrutura adotada para este tutorial.

Criar sites HTML5

Como podemos ver essa é a estrutura básica para criar sites HTML5, mas podemos fazer muita mais com essa estrutura que em breve todos os sites estarão abordando.

Para quem já está acostumado a criar sites com div, o sistema é o mesmo. Para formatar a determinada seção, adicionamos classes ou id ao nossos elementos. Essa inovação serve para deixar nossa estrutura mais semântica e organizada para os sistemas de buscas, assim entenderem nossa estrutura com mais facilidade.

1 – Primeiro passo: desenvolvimento do tema no programa de imagens.

criar-sites-html5-site-completo-fireworks-exemplo

Eu usei o programa da Adobe Fireworks, sempre utilizo o Fireworks para desenvolver meus projetos. A ideia toda começa no programa de imagens. Lá é onde vamos decidir como vai ficar nosso site, as cores, espaços, tamanho e criar algumas imagens que podemos utilizar no nosso layout na formatação CSS.

 

2 – Segundo passo: desenvolvimento da estrutura do cabeçalho “head”.

Temos as informações necessárias para incorporação do CSS, informações do nosso site como o título e charset, e um importante script para criar sites HTML5, o html5shiv, que faz o HTML5 rodar em versões antigas de navegadores.

 

3 – Terceiro passo: desenvolvimento da estrutura do cabeçalho do site e navegação header e nav.

No cabeçalho do site podemos inserir nossa logomarca e toda a navegação do nosso site. É importante lembrar a diferença entre a tag heade a tag header, ambos são cabeçalho, mas o head usamos para incorporar os scripts e definições de configuração do site e informações como título e links de CSS, e header, usamos como o cabeçalho que será visto pelos nossos usuários, onde colocamos nosso logo e demais informações e navegação.

Cabeçalho e navegação e reset CSS.

4 – Quarto passo: desenvolvimento da estrutura dos nossos artigos article e figure.

É importante a utilização de uma div antes da tag HTML5 article, para fazer a rolagem corretamente no HTML5. Aproveitando a utilização da div eu usei para criar bordas e inserir background.

Formatação da seção artigos CSS.

5 – Quinto passo: desenvolvimento da estrutura do rodapé footer.

Formatação CSS do nosso rodapé.

Rolagem automática scrollto jQuery script.

Visite a página do desenvolvedor para fazer o download do Script scrollto e jQuery.

O script está configurado para executar na navegação na tag nav e no footer, fazendo o deslizamento entre as âncoras.
No menu temos o link abaixo:

Que vai direcionar para o artigo1 com o id determinado como no exemplo abaixo:
Menu fixo ao fazer a rolagem usando jQuery.

O script vai fazer a substituição da classe CSS nav-total que normalmente ficaria estática lá no topo por outra que, ao rolar a página, o script aciona outra classe CSS com posição fixa fazendo nosso menu flutuar.

Script menu fixo com jQuery.

Classes CSS.

Este script do menu foi desenvolvido por Sutana Ryan e podemos ver seu exemplo aqui.
E aqui terminamos nosso site HTML5 com rolagem automática e menu fixo, caso tenha alguma dúvida deixe seu comentário. O tutorial está com tudo pra criar sites HTML5.
Para receber os próximos exemplos de sites HTML5 se inscreva na nossa lista Premium abaixo que eu estarei enviando por e-mail os próximos exemplos.

Se você deseja receber uma série de vídeo aulas gratuitas de HTML5 CLIQUE AQUI e se inscreva. Abraço!

Leave a Reply

51 comments

  1. Daniel

    Não consegui compreender. Alias não funcionou.
    Vejo são 3 arquivos
    1-HTML(exemplo)
    1-CSS(style)
    1-JS(script)
    De maneira que os códigos HTML vão no exemplo,os códigos CSS no style e os códigos JavaScript no Script.
    No entanto notei que no a 2 chamadas para script. Onde esta o 2º script?
    O menu não se fixou, e a navegação só funcionou através das ancoras não com o JS.
    O tutorial não diz se td é em um arquivo só ou se é separado como descrevi. Estou com Problemas gostaria de um Help. Por favor

    • Olá Daniel, fiz algumas alterações para que possa desenvolver o modelo completo, você precisa juntar os códigos HTML no seu arquivo index.html os códigos CSS no seu arquivo style.css e os scripts no arquivo script.js.
      Os dois scripts usam jQuery, coloquei o link para download do jQuery e o plugin Scrollto.
      Se preferir ter o código completo do modelo que criei com imagens e tudo, basta se inscrever nosso FEED logo acima que eu estarei enviando o site completo.

      Obrigado! e qualquer dúvida estou a disposição!

      -1
      • Daniel

        Obrigado Everton, mais ontem mesmo com minha própria curiosidade. Consegui fuçar e resolvi, peguei o seu exemplo analisei o código fonte e descobri quais eram as diferenças quanto ao que vc passou. E o melhor de td isso é que alem de aprender o que vc falou descobri como funciona o JQuery e tmb o Skitter Slideshow. Mas mesmo assim Obrigado. não fosse a dificuldade eu não iria aprender nada disso.

        -1
        • Que bom que conseguiu é bem por ai mesmo! eu só não coloquei o código completo nos exemplos para não ficar muito extenso e repetitivo, mas vou colocar os arquivos para download para facilitar.

          Abraço!

      • Elisangela

        Ola Everton Bom dia
        Estou desenvolvendo aqui e não consegui implementar o exemplo
        poderia por gentileza me enviar?
        Já se inscrevi no FEED de vcs…
        Obrigado

        • Oi Elisangela, o modelo do template está disponível para download aqui no Criar Sites, neste mesmo tutorial la no topo temos o link para visualização do tema e o botão para Download.
          qualquer dúvida fique a vontade.
          Obrigado!

          -1
    • Ramon Miquéias

      Também não tinha funcionado comigo o efeito de scroll, só depois de analisar o JS percebi que trocando a posição dos meu JS para baixo do jQuery e o scrollTo (links no html) e o scroll funcionou. Mais simples impossível. Parabéns pelo tutorial

      • É Ramon, já quebrei bastante a cabeça com esse problema básico, mas que bom que deu tudo certo. Abraço!

  2. WILLIAM

    Eu procurei n código como mudar o local onde ele para quando clico no menu, pq ele esta parando um pouco antes da imagem q coloquei, como configuro isso? A velocidade eu consegui alterar mas não entendi como ele reconhece a section.

    • Olá William, a parada está nas âncoras nas tags “article”, a tag “section” está envolvendo todos os artigos.
      A “div” que vem antes das tags “article” é importante para fazer funcionar tudo certinho, ela serve para regular essa parada também.
      E difícil saber sem ver seu código, se quiser pode me mandar como você fez que eu do uma olhada.

      Abraço!

      -1
  3. Leandro

    Legal, e como fazer para mudar a cor do background de cada página? Gostaria de por cores diferentes em cada página.
    Muito bom abraço.

    • Então Leandro, o background das páginas pode ser configurado na classes artigos.
      Você deve adicionar uma classe para cada página no seu CSS e assim configurando cada uma com a cor de background que desejar.
      Depois você só tem que colocar o id das classes que você criou em cada página. Não esquecendo de colocar no CSS toda formatação que está na classe padrão “artigos”.

      Abraço! e obrigado… qualquer coisa é só perguntar…

  4. Philippe Oliveira

    como faço para deixar a palavra do menu da pagina q eu estiver ficar com outra cor quando clicar

    • Olá Philippe, para usar este recurso em html simples temos que adicionar uma classe em cada página no link do menu, como neste exemplo: Menu Ativo.
      No caso desse modelo que fiz em uma única página já não iria funcionar este sistema, neste caso você pode estar utilizando jQuery UI, Selectable.
      Obrigado por sua participação, nos próximos exemplos eu vou implementar este recurso.
      Abraço!

  5. Elisangela

    Ola Everton Consegui implementar quebrei a cabeça mas enfim consegui.
    Seu exemplo foi muito util
    Obrigado e Que Deus te abençõe sua vida!!!

    • Que bom que conseguiu Elisangela! eu disponibilizei o modelo para download para facilitar ainda mais a edição. Obrigado pela sua participação.

      -1
  6. elisangela

    Olá Everton estou tentando fazer um site com : Menu que acompanha o Scroll da página, como por exemplo este aqui
    http://eraumavezveronica.com.br/
    toda vez que rola a pagina, aparece o menu novamente.
    Eu ate descobri que para isto deve fazer a redundância do menu colocando o menu dentro das demais div, mas o problema ´que não estou conseguindo implementar a rolagem scroll na pagina e enm colocar um plano de fundo em cada div. será que vc poderia dar um help?

    Obrigado

    -1
  7. Diego

    olá posso utilizar o seu template e fazer algumas modificações , em fontes cores e estrutura? e um codigo open source ?

    • Olá Diego, eu fiz o tema grátis para os usuários do criarsites.me fique a vontade para editar e fazer suas alterações, se possível deixe o link no rodapé. Abraço!

  8. Nuno

    Everton, eu quero redirecionar uma palavra do menu, para um link externo.
    Eu faço o Href direitinho mas ele redireciona para o topo da pagina sempre que clico na palavra.
    Nao sei o que fazer

    Blog

    • Olá Nuno, geralmente leva ao topo links cegos com #, tenta ver se o endereço do link está correto, e se quiser redirecionar para outra página não esqueça de colocar target=”_blank”.
      Abraço!

  9. Nuno

    Nao consigo colocar o codigo da forma que está nos comentarios…

    • Olá Nuno, preciso ver como está seu código para tentar ajudar, o seu link do blog não está funcionando…. me mande um e-mail aqui no contato do blog com o código ou o endereço correto ok!?

  10. Nuno

    a target=”_blank” href=”MEU SITE”

  11. Olá Prezado Everton tudo bem. Estou tentando deselvolver um site exatamente nesse formato, com uma página que role para baixo e para cima com as informações necessárias sem menus e troca de pagina, a ideia é direcionar a quem tem pouca habilidade.
    Mas o ojbetivo do meu comentário é o seguinte, o legal na internet é essa ajuda vinda de pessoas desconhecidas, isso nos faz pensar que a humanidade não esta perdida rsrsrs, sei que precisamos sobreviver, mas isso é bom para todos nós.
    Tenho um site onde divulgo meus serviços e foi feito com ajuda de um Amigo Mineiro (Alexandre) que esteve em Porto Alegre-RS.
    Numa pescaria de fim de semna, perto da minha casa na beira do Rio Jacui, surgiu uma troca de ideias converesa vai conversa vem, um mineiro e um gaúcho, parece uma piada mas foi desta forma que tive ajuda dele e foi um upgrade na minha atividade.
    Para recompensa-lo, dei um fardamento do INTERNACIONAL para o filho dele que na época tinha 8 anos.
    Assim como ele, você no seu site ajuda as pessoas a se desenvolverem.
    Parabéns pela sua iniciativa. Um abraço fique com Deus.

    • Muito Obrigado francisco, tudo o que eu passo para o pessoal eu obtive gratuitamente na internet, claro que muitos cursos pagos mas a internet e boas pessoas me ajudam muito, por isso tento retribuir todo o esforço. Muito Obrigado! precisando estamos ai! Abraço!

  12. Pedro Jeferson

    Como faço pra conseguir o codigo completo?…estou com dificuldades.

    • No início da página tem um botão para download Pedro, Com todos os arquivos.
      Abraço!

  13. Crislaine

    Olá! Como faço para tornar funcional esse formulário da página de contatos? A ação do formulário deve ser qual? Obrigada!

    • Olá Crislane, este formulário é apenas um exemplo da página que deixei para mostrar como o template pode ser usado.

  14. Natan Miguel

    com esse modelo, ele funciona bem em todos os tipos de tela? tipo SmartPhone, Tablet …. Muito boa a iniciativa, parabéns.

    • Sim Natan, as configurações do modelo se adapta bem nos dispositivos, mas não é responsivo, ou seja, ele não muda as configurações para se adptar. Em tamanhos como iPad e celulares ja testei e esta tudo ok!

  15. Boa noite, baixei um tamplate free na internet, e veio com este efeito de “rolar a pagina e o menu superior descer junto”, ou seja, ele fica sempre no topo da pagina, porém eu acho que ‘suja’ um pouco o blog mas nao consigo tirar, sera se pode me ajudar :S?

  16. Wagner Maranhão

    Seria entressacante mostrar como se faz um slideshow desse que tem na sua aplicação, tipo um outro tutorial, pois por mais que eu pesquise na net ainda não encontrei um exemplo muito bom feito o seu.

    • Boa Wagner! vou fazer sim, esse slide é bem completo e tem vários efeitos, inclusive plugin para WordPress.

    • José carlito

      Existem vários utilizando o plugin de JS cicle, mas realmente esse é mt bom.

  17. Cara, parabéns pelo post, muito bom, ficou de primeira…

  18. Sidney Sornsen

    Olá amigo muito bom tutorial, so gostaria de saber o seguinte.
    È assim, eu percebi que todas div de conteudo tem o mesmo tamanho, então se eu modificar uma modifica todas. Mais e se eu quiser tem apenas uma dela maiores que as outras oque eu posso fazer, para aumentar o heigth de apenas uma? sem dar problemas na navegação ?
    Um exemplo, eu coloca uma ficha de financiamento e o conteudo sai para fora da div oque posso fazer ?

  19. José carlito

    Olá, to fazendo meu TCC, e esse artigo esta sendo extremamente útil, vou fazer uma releitura desse código pra poder utiliza – lo ta mt fera seu artigo. Esses scripts são novidade pra mim, tava querendo usar o cicle, mas depois desse artigo vou mudar o plugin. To criando um sistema de e-comerce e quero algo inovador que diferencie dos e-comerces já conhecidos, e seu artigo me abriu um enorme leque de ideias, muito obrigado pela colaboração.

  20. Larissa

    Olá, pode enviar no meu email? Não estou conseguindo fazer o download.
    Obrigada

  21. Sergio

    Boa tarde, Everton!
    Como faço para fazer o download? Não encontrei o botão… Pode postar o link?

  22. Download liberado basta fazer o cadastro na barra lateral ao lado ===>
    para receber no e-mail os arquivos completos.
    Abraço!

    -1
  23. Sergio

    Agradeço a presteza, Everton! Conteúdo muito bom! Como nos inscrevemos?

    • Olá Sergio, você pode se inscrever no formulário ao lado na sidebar, não se esqueça de confirmar o cadastro para receber as futuras atualizações. Abraço!

      -1

Pin It on Pinterest

Shares

Compartilhe!

Mostre esse post para seus amigos.