Como Fazer Cabeçalho Junto ao Corpo

Bom, como fazer um cabeçalho foi o tutorial vencedor na nossa enquete, então vim trazer ele aqui. Não se esqueça, ainda terá o tutorial de cabeçalho solto, não grudado no corpo. Vamos começar, primeiro abra seu Fireworks.
Atenção: Todos os tutoriais que faremos de sidebar, rodapé e etc será para colocar no HTML Base disponibilizado nesse link, por isso, as dimensões serão sempre de 982 pixels de largura.



Depois de clicar em novo documento no Fireworks, você digita 982 pixels de largura. digite qualquer tamanho para altura, depois vou mostrar como muda no seu HTML.


Com o arquivo aberto, clique na ferramenta de inserir uma imagem e escolha uma paisagem no nosso Design Pack, uma boa dica é também tirar prints de paisagens nas missões da ASP do CP.


Ao inserir a imagem você deve deixá-la do tamanho completo do fundo, então diminua o zoom, e aumente-a. Confira:  


Depois para fazer um contorno, clique na ferramenta de retângulo e deixe sem preenchimento e com um contorno da cor que você quiser, o meu vai ser preto, veja onde se encontra:



Para, aumentar a espessura do contorno, mude o 1 que tem ao lado da cor do pincel.


Depois de ajustar as configurações de aparência, você irá fazer um retângulo com qualquer tamanho, depois de fazê-lo, você irá editá-lo no lugar mostrado abaixo:


Se você botou, 5 de contorno, irá editar com 5 pixels a menos, exemplo: Fizemos a figura com 982 X 400, logo você irá editá-lo como 977 X 395. Com o tamanho feito, tente movê-lo com as setas para que ele fique no centro da figura, faça com o olho mesmo, como mostrado na figura acima. 
Já com o fundo pronto, clique em Importar (figura 2) e seleciona a marca d'água que fizemos para seu blog. Depois, importe (figura 2) da mesma forma os pinguins que você quiser ou puffles do nosso Design Pack. Veja como o meu ficou:


Salve, e vá até o Tinypic.com, hospede a imagem e copie o último link que será dado. 


Depois vá no HTML Base, aperte Ctrl + F e digite LINK DO CABEÇALHO, e no lugar da palavra marcada pelo Navegador, escreva o link que copiamos. Agora só falta, inserir a altura do cabeçalho no HTML.
Então, para fazer isso, vá no HTML e pesquise a seguinte palavra: ALTURA DO CABEÇALHO e troque as duas palavras encontradas pela altura desejada:


Depois que você colocar as alturas certas, salve o modelo. Até a próxima galera!

~Conrado

Nenhum comentário:

Postar um comentário