Como Fazer um Cabeçalho Solto ao Corpo

Bom, no blog já tem um tutorial de cabeçalho. Mas é preso ao corpo, ou seja, não tinha junção com a sidebar e também ocupava todo o tamanho possível de sua imagem. Assim:

Agora, terá duas diferenças. 1ª - Terá uma continuação da sidebar, fazendo como uma junção entre as duas partes do template. 2ª - O cabeçalho será arredondado e não ocupará as extremidades da imagem, com fundo transparente. Bom, vamos começar:

O Height (altura) você irá escolher, tendo que editá-la no HTML para que não sobre ou corte seu cabeçalho. Clique aqui para ver como fazer isso. 

Agora você deve clicar no quadrado que mostra a cor do fundo da sua imagem. Selecione o quadrado da cor transparente. Confira:

Agora o fundo não ficará mais branco. Para quem não sabe, todos os blogs tem algum tipo de junção ou continuação da sidebar que é feita no cabeçalho. Pode ser arredondada, reta e muitos outros tipos. Irei fazer uma simples. O ideal é que você insira a imagem da sidebar do seu template para não haver erros.

Agora que sua sidebar foi inserida, posicione-a no centro da imagem (no FW há um guia que dá uma pausa no cursor ao atingir o meio da imagem). É normal que nada fique alinhado se você o tiver feito no FireWorks. Vá clicando item por item para alinhar todos.

Não deixe-os alto como na primeira imagem, quanto menos o espaço, melhor. Faça mais ou menos como na última figura. Agora para completar a junção da sidebar, clique no retângulo branco (faça um caso não tenha no seu) e aplique um contorno exatamente igual aos que os retângulos azuis (no caso) possuem. 

Ponha a grossura para o contorno igual a dos retângulos. 

Agora para o cabeçalho em si, faça um retângulo que não encostará nas extremidades, direita, esquerda e cima. Aplique um contorno nele com Pixel Soft em sua textura. Aconselho botar a grossura igual ou maior que os retângulos de baixo. Veja as imagens:

Ferramenta de Retângulo

Fazendo o Retângulo

Escolhendo a cor parar o interior do Retângulo

Configurações para o contorno do Retângulo

Arredondando o Retângulo

Agora adicione os elementos que você deseja. Podem ser: Um menu, marca d'água, subtítulo, pinguins, puffles, paisagens, textura no retângulo e etc. Fiz um como amostra, veja:

Agora basta inseri-lo, no html. Abaixo deixo 3 links que irão ajudá-los:

• Mapeando o Menu do Cabeçalho
• Como Ajustar o Altura do Cabeçalho no HTML (final da postagem)
• HTML Base para seu Template

~Conrado