Como fazer um cabeçalho colado ao corpo do blog !

Oi Penguins ! 
Daqui LarryLa e hoje vou ensinar para vocês como fazer um cabeçalho colado ao corpo do seu blog . Se não sabe como é um cabeçalho colado ao corpo do blog é como o POD tem . 

Neste tipo de tutorial você poderá usar vários programas (acho eu, só conheço dois) , mas recomendo esses dois, O Photoshop CS5 e o Fireworks, mas nesse tutorial eu vou usar o Fireworks. Abra ele . 

Clique em novo documento no Fireworks e em largura você coloca 982 pixels e em Altura coloque qualquer tamanho de pixels, depois iremos editar no seu Html. 
(Clique na imagem para aumentar)

Na parte onde diz " Cor da tela de desenho " você poderá colocar branco, transparente ou personalizado, aliás no próximo passo nós iremos tapar o fundo . Quando abrir o Documento Insira uma imagem de fundo clicando em Import (Exportar) :

 eu recomendo essa paisagem : 

(Clique na imagem para aumentar)

Quando a imagem aparecer você terá que diminui-la ao tamanho do seu fundo , por isso diminue a tela (Ctrl + - ) e coloque por exemplo assim : 

(Clique na imagem para aumentar) 

E para fazer contorno na paisagem de fundo você terá que clicar na ferramenta de rectângulo sem preenchimento e poderá contornar com a cor que você quiser , verifique: 

(Clique na imagem para aumentar)

Depois se você quiser aumente a grossura do contorno , eu aumentei para 5 . 
Para aumentar basta mudar o 1 que está ao lado da cor do contorno para outro número ,por exemplo eu aumentei para 5 .

Depois faça um rectângulo , depois de fazê-lo , edite-o . 

(Clique na imagem para aumentar)


Se você botou, 5 de contorno, irá editar com 5 pixels a menos, exemplo:
 Eu fiz  a figura com 982 X 380, logo eu irei editá-lo como 977 X 375. Com o tamanho feito, tente movê-lo com as setas para que ele fique no centro da figura, como mostrado na figura acima. Já com o fundo pronto, clique em Importar (figura 2) e selecione uma marca de água, depois da marca, importe (figura 2) da mesma forma os pinguins que você quiser ou puffles. Veja como o meu ficou:


Salve, vá a um site de hospedagem de imagem, eu recomendo o www.tinypic.com . E copie o último link que lhe será dado , na caixa " Direct Link for Layouts " . 

Depois vá no html do seu blgo, aperte Ctrl + F e digite o link do seu cabeçalho, e no lugar do link marcado pelo Navegador escreve o link que copiamos. Atenção: Se você fez o cabeçalho maior que 288 pixels de altura,  veja como mudar essa configurações clicando em Mais Informações.
Então, para fazer isso, vá no HTML e pesquise a seguinte palavra: #header-wrapper. Agora mude os números 288 para a altura que você fez o cabeçalho, veja quais os números: 
(Clique na imagem para aumentar) 

Depois que você clocar as alturas certas, hospeda a imagem como mostrei antes. Espero que tenham aprendido. Até a próxima galera ! 

Sem comentários:

Enviar um comentário