10/03/2009 - 19:54 > 13.764 Visualizações > 41 comentários

Tableless – Curso básico – Aula 3 – Desenvolvendo o corpo do site

Salve, salve rapaziada. Felipe Cardozo na área com mais uma vídeo aula.
Nesta tão esperada terceira parte, iremos aprender a criar o espaço do corpo do site. Ensinarei como trabalhar novamente com background, mas desta vez utilizando o repeat-y.

A aula é simples, mas fundamental. Antes que me perguntem, já gravei até a parte 5 e irei disponibilizá-las gradativamente.

Em tempo: Como todos podem ver, resolvemos mudar a estrutura do site. A idéia foi modificar o conteúdo da capa para mensurar o tamanho e melhorar a acessibilidade da index.Foi um fim de semana de intenso trabalho, mas creio que o resultado ficou satisfatório.

Queremos saber o que vocês acharam da mudança!

Aulas anteriores

Bom aprendizado!

Posts relacionados

Felipe Cardozo

É sócio diretor do MX Masters, portal de desenvolvimento especializado em vídeo aulas. Trabalha com ferramentas OpenSource como Wordpress, Magento entre outros, além de ministrar palestras em universidades do Rio de Janeiro.

Outros posts deste autor

Este autor atualmente possui 281 posts

Veja todos os posts de Felipe Cardozo

Comentários / Deixe seu Comentário

41 respostas para 'Tableless – Curso básico – Aula 3 – Desenvolvendo o corpo do site'

wanderson - 19 anos RIACHO FUNDO/ DF Diz:
10/03/09 às 20:27
100%, muito bom. Aprovei a mudança.
Daniel Breitschaft Diz:
10/03/09 às 20:52
Ficou bem legal o novo layout. Acharia interessante se houvesse uma área exclusiva para usuários registrados com Login e Senha.
Esta vídeo aula me clareou muito…

Abraço.
David CHC Diz:
10/03/09 às 21:22
Ótima explicação Felipe, só pra acrescentar alguns pontos, todo elemento de bloco por padrão ocupa 100 % de largura, logo se um elemento pai estiver com declarado uma largura, logo o elemento filho vai seguir, como todo bom filho , ele vai seguir o pai, rs.
E tbm, a técnica q o Felipe fez para colocar o background do conteudo se chama faux columns (falsas colunas)
Julio Coronel Diz:
10/03/09 às 21:24
Ficou ótima a mudança, bem mais intuitiva,
quando tem algo novo da para perceber melhor.
E ficou bem mais limpa.

Abraço!
Michel Araújo Diz:
10/03/09 às 21:53
Muito bom! trabalhar com CSS, além de tudo é muito prazeroso, e o resultado final está ficando ótimo!
[]’s
Ery Diz:
10/03/09 às 22:13
Gostei do novo layout, achei legal, parabens.
Felipe Ercílio Martins Diz:
10/03/09 às 23:29
show de bola
samir Diz:
10/03/09 às 23:57
caramba tava esperando essa video aula

Brigado ai Felipe…
denis nunes Diz:
11/03/09 às 0:18
show de bola felipones mto boa video aulanao vejo hora da proxima
Márcia Bardaro Diz:
11/03/09 às 7:48
Mt boa a vídeo aula sim!
mas estou aguardando mesmo é como vc fará o menu??? é com CSS tb??? ou vc usa as ferramentas do DW?? (image rollover)
bjão
Adelson Souza / 17 anos / Salvador-Ba Diz:
11/03/09 às 10:02
Felipão de volta.. muito boa a vídeo aula, estava aguardando a continuação das vídeo aulas de Tableless…. vlw felipão.

e o layout está bem legal.. está facilitando muito a acessibilidade, gostei bastante.
Marcos César Ventura Maciel - 18 anos - Brumadinho - MG Diz:
11/03/09 às 10:20
Muito massa Felipe… hsuahsa! CSS é fantastico… aiai… porque eu não aprendi isso des do começo da minha carreira!m rsrs.! Forte Abraço!
FORÇA SEMPRE!
Emerson Diz:
11/03/09 às 11:42
Ola Felipe ??? Pow a aula esta ótima, falo isso tambem pq sou amante de CSS TABLELESS, mais ainda tenho muito que aprender, e a INDEX esta perfeita até se acha estanho no começo mais depois vemos que é melhor até para visualizar tudo mais rapido, e lembro que VC falou que ainda não se sentia avontade ainda para fazer um CURSO de TABLELESS, magina sua DIDATICA é ótima e VC ja tem um GRANDE conhecimento para isso, daremos a maior força para fazer esse CURSO, PARABENS …
Eduardo Diz:
11/03/09 às 18:01
não sei se os usuários leem os comentários, mas msm assim vou deixar uma dicas aqui(em locais onde discordo da maneira que o felipe cardozo fez)

1º- Acho interessante ser consistente na hora de nomear arquivos/estilos/páginas etc. dar nome em inglês pra uns e em português pra outros não me parece muito correto.

2º – quando for usar uma imagem pra repetição e puder deixar com 1px de altura ou de largura, o faça, pq vai deixar o site mais rápido(a imagem vai ficar menor).

3º – Particularmente eu gosto de deixar um comentário no final de ada div indicando qual a div q está sendo fechada ali. Iniciantes tendem a não usar comentários, e eu já sofri bastante com isso.

4º – Não usar qualquer tipo de texto fora de tags

5º – usar ‘*’(asterisco) pra indicar todos os elementos em CSS não é uma escolha muito legal, melhor é resetar somente as tags que precisa. Eric Meyer tem um arquivo para isso em seu site, basta buscar no Google.

Abraços!
Felipe Cardozo Diz:
11/03/09 às 18:07
Eduardo, tudo certo?

Valeu pelas dicas. Apesar de serem particularidades, está valendo.

[]´s
Leonardo™ Diz:
11/03/09 às 18:23
Adorei. Felipe nem tem como te elogiar mais
Cada dia se superando!
Abraço equipe MX!
David CHC Diz:
11/03/09 às 18:32
Muito bom Eduardo, ótima questões levantadas, e são sempre válidas. Primeira coisa tem q levar em conta são os padrões que cada um segue, então falar que é certo ou errado pode ser meio polêmico. Um exemplo vc pode ver o css do feiipe, ele escreve o CSS dele linear, sem tabulação, isso é errado? Não, é uma prática, que tbm já foi levantada pelo Bruno Dulcetti no blog dele. Outro exemplo é adotar o CSS modular, tem gente q não gosta e tem gente q gosta, mais uma questão de prática, e padrão adotado

Em relação ao resetar os elementos, particularmente eu uso o asteristico, já usei o reset do Eric Meyer e de outros, mas no final, [b]pra mim[/b], não modificou muito em relação a usar o asteristico.

Aos comentários isso é muito importante, e uma ótima prática em se adotar, principalmente se trabalhar em equipe, isso ajuda muito.

Então é muito complicado dizer o q é certo o que é errado. Mas é interessante ver visões diferentes, isso ajuda bastante a evoluir.
wanderson - 19 anos RIACHO FUNDO/ DF Diz:
11/03/09 às 19:02
Eai felipe outra coisa, não estou conseguindo baixa o PNG.
Leleski Diz:
11/03/09 às 19:08
É isso espero mais aulas de tableless
to começando na area de webdesign agora e gostei muito
deste tipo de programação, valeu felipe.
Eduardo Diz:
12/03/09 às 9:54
David CHC(#17)
Tirando a parte que falei da imagem de 1px de altura/largura, o resto realmente é questão de gosto.
Quanto ao que vc falou sobre o estilo de escrever o CSS, vc está correto. A verdade é que é mais fácil de ler quando se está na vertical, mas o arquivo fica menor quanto tah na horizontal. Eu escolho escrever na horizontal tb pq cabe mais coisas na tela(odeio ficar rolando pra cima e pra baixo pra procurar alguma coisa). Mas nesse caso tb nem haveria a necessidade desse trabalho todo, já que existem sites/programas que compactam seu código, retirando todos os espaços desnecessários(vide o código fonte da página principal do google).
CSS Diz:
12/03/09 às 16:47
Uma das melhores vídeo aulas até agora muito importante isso pois eu criava layouts pelo fireworks e ficava com duvida de como montar…

Estou esperando sua próxima vídeo aula você irar tabelar o layout? para poder utilizar os campos e etc…?
Ailton Mendes Mota Diz:
12/03/09 às 17:30
Ótima espero a outra vídeo aula o mais breve possível, obrigado Felipe Cardozo
Alex Rodrigues Diz:
12/03/09 às 19:55
E ai Felipe tudo bem, ótima video aula, eu estou acompanhando esse mini curso de tableless mas eu queria saber se esse tableless vai funcionar no wordpress tambem. A só mais uma coisa queria saber se existe algum plugin de paceiros para o wordpress?

E obrigado pelas suas dicas cara!!!
Hugo Luiz Diz:
12/03/09 às 21:17
parabéns pela vídeo aula… muito bem explicada… vlww
sempre continue assim.
Eduardo Diz:
13/03/09 às 10:59
#23.
Alex Rodrigues
–> Qualquer layout pode funcionarno wordpress, basta saber monta-lo reconhecendo cada comando que o wordpress executa(como o de ‘posts’ e o de ’sidebar’ por exemplo), e tb sabendo como configurar o novo layout(no arquivo css).
Transferis layouts para Wordpress não é difícil, mas tb nao é simples a ponto de qualquer um fazer numa boa. No blog ‘css-tricks.com’ existe uma vídeo-aula mostrando como passar um layout em html/css para Wordpress. no ‘blog.themeforest.net’ existe uma série e tutoriais(Wordpress for designers) mostrando como o wordpress funciona. Recomendo ambos.
Ricardo Diz:
14/03/09 às 1:26
Felipe,
Fazia um tempo q eu nao mexia com sites e agora surgiu a necessidade de fazer um nao profissional. Mas sempre procurei faze-los com a melhor tecnica.
Com suas video aulas montei um site, mas como vc parou com elas tentei montar o menu e a parte do conteudo sozinho, mas nao esta dando mto certo. O q eu fiz foi criar uma div=menu e coloca-la como float:left e a div=content (seguindo suas nomenclaturas), float:right. Porém quando eu tento mudar a margem interna na div=content a div é jogada pra esquerda e faz com q o menu seja jogado pra fora da div=conteudo. Como eu faço pro texto aparecer um pouco para direita na div=content???
Felipe Cardozo Diz:
14/03/09 às 11:25
Olá Ricardo, tudo bem?

Sempre que você for colocar valor para margin ou padding em um box, você tem que subtrair esse mesmo valor do width desse box.

Ex: Se você tem um box com 400px e for colocar um padding-right de 10 px, você terá que mudar o width para 390px.

Faça esse teste.

[]´s
Alex Diz:
14/03/09 às 13:49
ola pessoal parece q o link do png esta corrompido pessoal ta postano sobre isso no forum se possivel dar um veriicada.

vlw
Felipe Cardozo Diz:
14/03/09 às 14:43
Olá Alex!

Retificado! O download do arquivo já está Ok!

[]´s
Tableless - Curso básico - Aula 4 - Flutuando blocos | MX masters - Sua central de vídeo aulas na web Diz:
14/03/09 às 17:35
[...] Tableless – Curso básico – Aula 3 – Desenvolvendo o corpo do site [...]
Marcus Diz:
18/03/09 às 13:22
Por que o Felipe Cardozo não costa mais dos colunistas? Você vai parar de nos ofertar suas aulas magnânimas?
wanderley Diz:
24/03/09 às 18:32
boa Felipe…
mudei pra cá depois de assistir essa aula…kkkkkkk

mto bom esse tutorial… alias..o melhor q ja vi (boa qualidade ate de som)

parabens…sucessos !!!
Marcelo Diz:
2/05/09 às 11:33
Primeiramente, queria deixar aqui os parabéns pelo curso e pelo excelente conteúdo do site MX Masters.

Estou acompanhando este curso pois o assunto me interessa a bastante tempo, como estou iniciando, tem sido de grande valia.

Bom, estou na etapa 3, e estou enfrentando uma dificuldade, na etapa do slice, após efetuar os passos, e inserir no CSS, está ficando desalinhado, coisa pouca mas está.

Como posso resolver isso?

Grande abraço!
MoisesTeix Diz:
2/06/09 às 23:49
Felipe o site está muito bom, bastante intuitivo.

estou com o mesmo problema do nosso irmão Marcelo,

“Bom, estou na etapa 3, e estou enfrentando uma dificuldade, na etapa do slice, após efetuar os passos, e inserir no CSS, está ficando desalinhado, coisa pouca mas está.

Como posso resolver isso”
Rasecdimellus Diz:
15/07/09 às 14:59
Cara, show de bola essas video aulas do Felipe.. muito bom mesmo parabens ao mxmasters, tem ajudado a galera da webdesigners.
Fillipi Warley Diz:
23/10/09 às 15:53
Felipe, organizei as divs do meu site ok, só estou tendo problema com uma que eu quero que tenha rolagem horizontal e a altura seja até o final do browser e que ela se ajuste pra qualquer resolução.

Coloquei o height dessa div 100%, só que ela considera 100% como sendo toda a área praticável do browser, ou seja como tem uma div com topo sempre passa a medida exata dessa div do topo para baixo, como poderia resolver?

Taí o código css, funcionando:

@charset “utf-8″;
/* CSS Document */

*{margin: 0px; padding:0px;}
html,body {height: 100%; width: 100%}
body{background:#8C8C8D url(../images/Layout_01.gif) repeat-x;}
#conteudo{width:100%; max-height: 100% auto; margin: 0 auto;}
#topo{background:url(../images/topo.gif) no-repeat center; height: 147px;}
#centro{background:url(../images/Layout_02.gif) repeat-x; height: 100%; overflow:auto; overflow-y: hidden;}
David CHC Diz:
29/10/09 às 9:22
@Fillipi Warley, como vc mesmo já diagnosticou o problema, realmente ele vai contabilizar o topo, só se vc em vez de colocar 100% colocar outro valor q assim diminua. Outra possivel solução é usar javascript, se possivel, o jquery pra facilitar, e atribuir um valor a div centro, algo mais ou menos assim:

$(function(){
//pega a altura do documento
var alturaBody = $(window).height();
//algo pega a altura do body e diminui com 147px q é o topo
var alturaCentro = alturaBody – 147;
//atribui via css a nova altura
$(“#centro”).css({‘height’ : alturaCentro+’px’})
})

Caso não tenha familiaridade com jquery, aconselho ver as vídeo aulas do VAB – http://www.videoaulasbrasil.com.br/categoria/ajax/
Dowal Diz:
5/11/09 às 23:49
Muito boa essa video aula Felipe to apredendo bastante,mas na <div id=”content” não esta dando certo aqui minha imagem aparece mas não desce ja vi e revi varias vezes o video refiz me css mas não tem jeito, sera que é porque to com o CS4?
Obrigado
Allan Rodrigues Diz:
8/12/09 às 20:58
ótima VideoAula!
Ismael Diz:
22/12/09 às 0:33
Muito legal Felipe Cardozo, video aula bem útil!
Wagner Diz:
3/04/10 às 17:24
FELIPE CARDOZO muito obrigado pelas video-aulas cara!!
São d+ !
Realmente estou aprendendo mesmo!!!
Abraço e sucesso!