Duvida codificaçao

Eu tou aprendendo codificar queria fazer uma pergunta se eu pegar uma imagem tipo no imgur abaixar como codifico sem as mini imagens separadas ?

Eu acho que entendi mas ao mesmo tempo não entendi,explique um pouco mais

Tipo tou aprendendo codificar ae eu peguei umas de tuas layout desenhas que estar no imgur como codifico ela sem as partes para colocar no css ?

Usa <div class=""></div> ou <div id=""></div> para as partes que você quer fazer exemplo rápido.

Html:

Código:


<!-- Parte do layout (corpo do layout) -->
<div class="center"> <!-- Centraliza o layout -->
<div class="right"> <!-- Lado direito -->
<div class="box"> <!-- Box -->
<div class="titulo">Titulo de uma box</div> <!-- Titulo -->
conteúdo de uma box
</div><!-- Fim da box -->
</div><!-- Fim do lado direito -->
<div class="left"> <!-- Lado esquerdo -->
<div class="box"> <!-- Box -->
<div class="titulo">Titulo de uma box</div> <!-- Titulo -->
conteúdo de uma box
</div>  <!-- Fim da box -->
</div> <!-- Fim lado esquerdo -->
</div> <!-- Fim do centro -->
<!-- Parte do layout (corpo do layout) -->


Css:

Código:


/* pode ter erros no código pois foi feito na hora */
.center{margin:auto;width:1000px;} /* centraliza o meio + tamanho do layout(largura) */
.center .left{float:left;width:700px;margin-right:5px;} /* Lado esquerdo do layout(exemplo:box das Categorias da power-pixel) */
.center .right{float:right;width:295px;} /* Lado direito (Exemplo: box últimos assuntos da ppf) */
.center .box{background:#fff;width:auto;height:auto;padding:4px;margin-bottom:5px;border-radius:3px;} /* box que é ajustada automaticamente conforme o tamanho do width do LEFT ou RIGHT */
.center .box .titulo{background:#3498DB;height:40px;width:auto;border-radius:3px;line-height:40epx;color:#FFF;text-shadow: 0 1px 2px rgba(0,0,0,.3);margin-bottom:5px;} /* Titulo que ficará dentro da box (Exemplo: pokodesigns.com/rcms/) */


EDIT: esqueci de falar da parte de imagens,como meus layouts são editaveis basta você pegar uma imagem (de um header por exemplo hospedar em algum lugar e usar o background: url('link');)

Exemplo:

Vai no FW,seleciona a imagem da CTRL+N ajusta para o tamanho da imagem e salva ela


Obs: no caso do layout do print a maioria das coisas é css,box,titulo,etc;não precisando de muitas imagens para ser feito.