Dica para site html/css/php

[duvidasdeinformatica 2]

Olá pessoal! Preciso de uma dica:

Eu tenho que refazer este site, com o mesmo layout, só modificando o conteúdo. Vocês teriam uma dica de como eu reproduzo este layout no código, com estes menus na horizontal e a imagem de fundo.

 

Obrigada!!!

 

[DiF 4.226]

@duvidasdeinformatica Não sei por qual motivo você pintou as partes de branco... mas em tese é extremamente simples.

 

Perceba como ela foi estruturada.

Pela imagem pode-se ver que há um header(cabeçalho), um banner(a imagem) e a parte do conteúdo.

Dentro do cabeçalho mais mais 3 estruturas onde tem a barra azul de idiomas, a parte branca com o logo e o título e uma barra azul com o menu.

 

Então, basicamente antes de codificar, você deve analisar e até mesmo desenhar em um papel o esboço do que quer fazer.

Então no código você faria algo PARECIDO como isto:

<section class="header">
  <div class="idiomas"></div>
  <div class="banner-header"></div>
  <div class="nav">
    <nav>Aqui vai o menu</nav>
  </div>
</section>

<section class="banner"></section>

<article class="conteudo">
    Aqui vai o conteúdo 
</article>

Veja que este é só um mero exemplo. Não estruturei mais nada além disso. Mas você pode se basear nesta estrutura.

Basicamente o que fiz foi:

Criar um elemento de sessão para o cabeçalho, dentro dela separei por elementos div.

Outra sessão para o banner, e o article para o conteúdo.

 

PS: o section é usado para separar sessões e o div é usado para agrupar ou separar elementos dentro de uma sessão.

Isso fica semanticamente correto.

Com base nisso, implemente seu código e os estilos CSS.

 

PS2: Para recriar o layout, precisas de todos os recursos que ele possui.. como imagens... fontes (se preciso)... 

[duvidasdeinformatica Autor do tópico 2]

@DiF Ok muito obrigada! Eu risquei os menus só para o site não ser identificado.

Valeu pela dica! Abraço!