Como criar um Layout - Parte 02

Chegou a parte 02 da seção de tutoriais, essa parte completa trata da 
area do cabeçalho e menu,  ela completa a anterior 
e a próxima completa a essa, assim em diante. 
Espero que gostem! :D

Parte 02 - Header

Crie um cabeçalho de em média 1000x400, como esse abaixo, 

que tem um espaço para menu logo embaixo do titulo. Então hospede. 

Pessoalmente acho melhor hospedar no blogspot

No Html do seu blog, aperte CTRL+F e procure por:

/* Content

e encontre um código mais ou menos assim:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: #6CCDD0;
} 

Subistitua por esse código:

body, html {

 height: 400px;

 margin: 0;

 padding: 0;  }

body {

 font: $(body.font);

color: $(body.text.color);

background: url(IMAGEMDOCABEÇALHO); }

html {

 background: #6CCDD0; }

--Entendendo:

Na área em azul coloque a altura da imagem para o cabeçalho que você editou.

E na área rosa coloque o link da imagem do cabeçalho que você editou.
e na verde coloque o código da cor do background que você quer no seu blog.
caso você queira uma imagem substitua #6CCDD0 por: url(linkdobackground)

Procure por:

<b:widget id='Header1' locked='true' title='Teste (Cabeçalho)' type='Header'/>

O apague. Salve e depois aperte Excluir Widgets.

Depois disso você pode notar, que uma parte do cabeçalho, 

ficou embaixo das postagens e da sidebar, 

para resolver isso, procure por algo mais ou menos assim:

.main-inner {
  padding: $(content.padding) 0;
}

e coloque o código a seguir logo acima de }

margin-top: 255px;

--Entendendo:

A área em rosa deve ser alterada conforme o tanto que o cabeçalho esteja abaixo das postagens 

e sidebar, ou seja edite e visualize a cada alteração até encontrar um lugar certo.

Com tudo certo e ajeitado, Faça um menu como esse abaixo, 

do tamanho que você deixou no cabeçalho. E hospede.

Entre nesse tutorial do Cherry bomb e aprenda a mapear a imagens

Procure por:

<header>

e cole o código a seguir, logo acima:
<div class="alinhamento" >Coloque as tags criadas após a mapeamento do menu.</div>

Depois procure por:

]]></b:skin>

e logo acima cole o código a seguir

.alinhamento {
margin-top: 0px;
margin-left: 0px;
margin-bottom: -0px;
}

Alinhe o menu com as áreas em Rosa.

E a area em azul é a margin de baixo você tem que diminuir conforme 

a sidebar e as postagens vão ficando longe. Ou seja visualize sempre enquanto edita.

Pronto essa foi a parte da Header, 

Aguardem por mais.

Menu de navegação:

Parte 01 - Base | Parte 02 - Header | Parte 03 - Sidebar e Postagem | Parte 04 - Footer e Adicionais