Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1500849056
Vida do cache: 1500892256
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Criando um template Dicas

Como montar a estrutura (layout) de um site/blog – Organize seu HTML

Não existe nenhum site em HTML perfeito para todos os navegadores (sem variação alguma), infelizmente não é fácil trabalhar com tanta diferença. Por isso buscamos alternativas que facilitam nosso trabalho, evitando problemas com a incompatibilidade do site com um navegador X. Além disso, devemos organizar a estrutura que vamos criar, facilitando modificações, economizando tempo e evitando gambiarras.

Trabalho nas horas vagas com HTML e digo com segurança que a grande maioria dos blogs e sites que faço funciona bem em qualquer navegador atual (Chrome, Opera, Firefox e Internet Explorer 8). Não há segredo algum! É tudo uma questão de organização! HTML é a parte estrutural de qualquer site, então seja organizado e o resultado vai ser muito bom!

Fiz uma estrutura básica de um layout para blogs, vamos ver na prática o que é organização:

Clique aqui para ver o código HTML / Clique aqui para ver o código em funcionamento.

A marca <div> define uma divisão ou uma seção em um documento HTML.
A marca <div> é frequentemente usada para agrupar blocos elementos para formatá-las com estilos.
Fonte: www.w3schools.com

 

  • Como funciona essa estruturação

Procuramos sempre dividir o layout em partes, da maior pra menor (mais detalhada) DIV.
Nesse modelo separamos o topo (header), menu, conteúdo (content) e a parte inferior (footer). Essas são as principais divisões que fazemos para esse modelo que criamos. Após isso, fazemos as divisões internas em cada parte e assim prosseguimos.
Cada layout vai exigir uma organização diferente, não existe uma regra, por isso devemos pensar no desenho do site/blog primeiro, depois em como vamos dividir suas partes e por fim fazemos a codificação.

O código HTML vai ficar muito maior, porém muito mais organizado como falei acima.
Vamos dar um exemplo como isso irá te ajudar: Caso eu queira trocar toda a parte superior do blog/site (header), vou lá, apago a header atual e seu CSS, crio outra no lugar e nada será prejudicado, pois o restante do esqueleto está independente dessa parte do código.
Quanto aos navegadores devemos pensar o seguinte: Simplicidade no código! Trabalhar com retângulos é a forma mais fácil de ser interpretada já que não existem códigos não muito comuns no meio.
Salve o código que desenvolvi, apague alguma das partes criadas e veja na prática o que estou falando.

  • Melhor visualização dos códigos

Cada pessoa encontra suas formas de melhorar a visualização dos códigos, é tudo uma questão de tempo. Se você tem dificuldades em ver onde começa e termina cada parte do layout te oriento a fazer comentários no HTML da seguinte forma:

<!—- HEADER -->
<div id="header">
</div>
<!—- fim HEADER -->

Fazer comentários no HTML ajuda e muito, pois é extremamente comum até o próprio autor do layout ficar perdido na hora de fazer alguma edição.

Espero ter ajudado.
Grande abraço.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

11 Comentários

  1. Massa Bruta disse:

    Muito boa sua dica parabens otimo conteudo.

  2. Bisk8 disse:

    Espero estar no caminho: http://www.kibudega.blogspot.com/
    Belo Post!

  3. Vinicius Crazyboy disse:

    nao entendi nada mas td bem valew bom post

  4. Blogin disse:

    boa dica
    vlw fera!!

  5. Di Oliveira disse:

    muito boa dica! 🙂 vou continuar lendo posts relacionados a este!
    Parabéns

  6. Muriel disse:

    Nossa assim fica mais fácil entender a estrutura de um blog. Eu via em outros site, ficava perdida, não sabia por onde começa. Uma ótima dica, parabéns!

  7. Matheus disse:

    Parabéns pelo post, simples e fácil de entender!

  8. Diego disse:

    Cara valeu pela dica.

    E desculpa pela pergunta,mas sou novato no css.
    Como eu faria para o wrap ocupar toda a tela no html.
    No exemplo acima o layout fica pequeno no canto da tela.

    Espero que entenda minha pergunta.

    Abs

  9. Andei por muito tempo procurando por um artigo como este, obrigado.

  10. Willys disse:

    Olá,

    Ótimo conteúdo, bem detalhado. Parabéns! Vai me ajudar bastante.

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.