Você desenhou ou scaneou sua imagem com os itens que quer no seu Blog, agora chegou a hora de fazer ele ganhar vida, mas ainda falta algumas coisas. Você precisa criar um menu (caso queira um) e definir o tamanho do seu header. No meu caso eu optei por um menu com imagens e um Header abaixo deste menu. Você pode construir um Header que tenha um menu abaixo ou do lado. Neste estudo usaremos ainda as funcionalidades nativa do Blogger, mas em artigo futuro ensinarei a criar um Header totalmente personalizável.
Bom, nossa imagem está fatiada corretamente. Como já tinha dito, veja que a imagem total se dividiu em 5 partes distintas: TopodaPagina, Body, TopodasPostagem, TopodaSidebar, CorpoPostagemSidebar.
No próximo artigo iremos mexer na CSS para darmos vida ao Template, até lá.
Subscreva o CSS-Desvendado completo! Subscreva CSS - Desvendado por Email
Então, agora iremos fatiar esta imagem para podermos colocar cada parte no seu lugar.
Como disse antes, eu uso o Firework para edição de imagens e em questão de fatiar imagens pra mim tem dado conta do recado, veja figura abaixo:
Os campos em verdes são as fatias que irá compor o Layout. Vamos nomea-las de cima para baixo para todos entenderem.
- outer-wrapper - imagem com as bordas da parte principal do template. Esta imagem tem 727px por 60px.
- Body - Imagem que vai preencher todo o Layout. Tamanho 1590px por 26px.
- Postagem topo - Aqui fatiei uma imagem para colocar no topo dos post ( 417px por 30px - main-wrapper )para dar um sombreamento e fatiei também uma para a Sidebar (233px por 30px - SideBar )
- content-wrapper - Uma fatia que fará a divisão entre os post e a SideBar graficamente de 650px por 30px. Chamamos isto de coluna falsa. Mais para frente você saberá porque de se usar está técnica.
No próximo artigo iremos mexer na CSS para darmos vida ao Template, até lá.
Subscreva o CSS-Desvendado completo! Subscreva CSS - Desvendado por Email
Marcelo R. Souza
4 comentários:
Bom saber que você resolveu dar um curso intensivo de web designer gratuito. Vou aproveitar todas as aulas. E o nosso projeto em conjunto, ainda rola?
Luiz Valério publicou um post sobre.. Meio ambiente, cidadania e desenvolvimento
@Luiz Valério meu grande amigo.
Estou voltando a ativa este mês, depois de todos problemas que tive com a doença de minha mãe. Este mês estou resolvendo o código do blog porque o Google resolveu pegar no meu pé, mas o nosso projeto está ainda em pé com certeza, só preciso me organizar aqui outra vez,coisa que farei esta semana.
Sobre o curso online, foi um pedido dos meus alunos de classe que me pediram para ter uma referência online onde quer que ele estejam.
oiii :)
Esse firework é gratuito? onde eu acho.. ainda bem que nao citou photoshop..:)
Eu desenhei, a parte de fatiar ficou mais dificil, fica sem imagens..a gente usar cor.
IARA publicou um post sobre..
O maior ensinamento de meus pais: Liberdade para fazer escolhas
@Iara...
O Fireworks não é gratuito. Ele é um programa da antiga Macromedia que hoje pertence a Adobe, mas você pode usar o Gimp que é gratuito e é um ótimo programa também. Na questão de fatiar, você pode usar o comando recortar em seu programa de edição, ou selecionar a parte que quer fatiar da CTRL+C ir em Arquivo/Novo e dar CTRL+V que o resultado é o mesmo.
Postar um comentário
Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:
<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>
Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa