Vídeo aula

Criando um layout do zero com tableless

Hoje veremos como criar um layout do zero utilizando CSS e alguns comandos em PHP para fazer o “chamado” de algumas páginas, isso para que tenhamos uma melhor organização dos nossos códigos e páginas. Será feito o Topo, Conteúdo e Rodapé. Boa aula !!!

CSS, layout, tableless php, template

Artigos Relacionados

Deixar um comentário

Comentários (41 Comentários)

Deyvide : 30.04.10 às 9:46

bem explicado o a video aula!!!
bem facil de compreeder!
Bonato : 11.01.10 às 2:07

Boa noite.
Estou com a mesma duvida do KaduViva …
Ocorre que ja verifiquei, esta tudo certo.
Deixei inclusive os arquivos no site para serem baixados, caso alguem saiba do problema.
O problema esta visivel em:
http://www.voxnoticias.com/uni/index.php?
Lá tem atalhos e “instruções”.
Não esta finalizado, claro. Antes de seguir em frente, quero solucionar esse problema. Senão, será tempo perdido.
Agradeço a compreensão do pessoal e tbem dos internautas.
Grande abraço.
Bonato.
Irison Andrade : 26.12.09 às 10:52

@KADUVIVA, baixe os arquivos utilizados nas vídeo aulas e dê uma verificada se realmente os códigos estão idênticos. Segue o link para download dos arquivos utilizados:

http://www.ficheiro.com.br/conecte/downloads/arquivos/layout_final.rar

Abraço.
KaduViva : 24.12.09 às 16:55

Olá …

estou com uma pulga atrás da orelha…

eu não preciso dar uma distância de margin-top na div #topo e
na div “geral_conteudo… pois automaticamente essas diistâncias estão sendo geradas…o problema é que está ficando um espaço muito grande entre a div topo e a div geral-conteudo e entre o topo e a barra de navegação do browser…

o estranho é que mesmo que eu coloque um margin-top 0px a div do topo não junta com a div do conteudo geral….

meu código CSS está igualzinho ao do tutorial …. sabem o que pode ser ?

já testei no explorer e no firefox …

abraços
Macay : 29.10.09 às 10:27

Muito boa a video-aula, poderia ter a continuação.
Como por ex: o alinhamento das imagem do topo qdo fatiadas e exportadas do Fireworks.
Como fazer com que as imagens fatiadas ocupem 100% do monitor.
Mas valeu! parabens pela video-aula continue assim ajudando aqueles que estão inciando.
Abraço
Irison Andrade : 15.08.09 às 20:15

Nas versões mais antigas do IE você terá que ajustar o CSS através de HACKS. Caso não saiba do que se trata pode dar uma olhada nesse vídeo:

http://www.tableless.com.br/video_tutorial_css_hacks

Que irá lhe ajudar a entender.
Ricardo Politi : 15.08.09 às 8:36

A questão é o seguinte:
8.0 e firefox ok mas 6.0 as margins lado direito não atuam poderia dar uma dica
Irison Andrade : 07.08.09 às 1:25

Todos os códigos das minhas vídeo aulas estão disponíveis no meu blog, basta acessar o seguinte endereço:

http://www.ficheiro.com.br/conecte

Acesse a categoria desejada escolha a vídeo aula e baixe o código fonte.
Fabio : 06.08.09 às 15:02

Gostaria de saber se da pra colocar o aruivo flash.swf no CSS.
andre : 06.08.09 às 13:05

opa meu amigo queria ver se vc poderia me forncer os arquivos da video aula….????
Irison Andrade : 03.08.09 às 18:05

Luzi Otavio Quintana, dê uma verificada no index.php (o include), css.php (os links de referência), topo.php (o include css.php), o erro deve estar em um desses arquivos principalmente o include que chama o css.php que vai na página topo.php, verifique os nomes se são iguais aos arquivos referênciados.

Ricardo Politi, a questão dos includes já foi bem comentada por muitas pessoas, dê uma lida nos comentários anteriores dos vídeos que existem opniões bem distintas, dai você pode entender melhor e tirar sua própria opnião.
Em alguns casos realmente acontece dos elementos “subirem” dai podemos utilizar o clear: both;
a camada que recebe esse comando não permite que um elemento flutue ao seu lado, dai por exemplo: se o rodapé “subiu” e ficou quebrando o layout, usando esse comando ele vai “descer”.
Ricardo Politi : 01.08.09 às 11:12

Erison qual a vantagem de criar site em include estou começando agora em php e quando crio site sem incrude tem a questão do float, ou seja cada fex que vc usa float na div abaixo vc tem que dar clear com o include vc tambem tem que fazer isto.
obrigado pela video aula .
Luzi Otavio Quintana : 31.07.09 às 15:52

Boa tarde a todos, gostei muito da video aula porem estou com um probleminha aqui fiz tudo conforme descrito na video aula porem o meu arquivo topo.php nao retem as informações do css ja revisei links e includes ..desculpa pela ignorancia
jeferson : 27.07.09 às 10:58

Irison parabéns pela sua iniciativa,sua video aula ajuda com certeza muita gente, principalmente principiante no assunto abordado,claro ,como vc ja disse, cabe a cada um se aperfeiçoar.
webson : 24.07.09 às 10:23

blz a video aula , vc esplica muito bem… tenho uma duvida o dreamweaver tem que esta configurado para css? tento colocar a fonte mais não acontece nada… onde poso aprnder a configurar o dreamweaver para php…obrigado
Jeferson : 22.07.09 às 23:16

Muito interessante a vídeo aula. Meus parabéns!

Eu trabalho da mesma forma. Gosto das coisas muito bem organizadas. Porém não há necessidade de incluir a chamada css.php em todos os arquivos, e sim somente no header.php ou (topo.php conforme a vide aula), pois o cabeçalho será chamado em todas as páginas do site. e com ele todos os elementos contidos.

De qualquer forma, a vídeo aula está muito boa e novamente meus parabéns. Agora vamos para a parte II Valeu! _ò/
Max : 22.07.09 às 19:27

showwwwww
Irison Andrade : 22.07.09 às 10:28

Então galera, nas regras de participação eu não li nada sobre indicar vídeos profissionais ou que antenda ao melhor padrão possível de desenvolvimento. No meu entendimento a iniciativa deste espaço no VAB é compartilhar o conhecimento seja ele qual for, terá uma equipe responsável em avaliar o vídeo e verificar se ele trás algum conteúdo que possa ser compartilhado afim de aprendizado.
Quanto a maneira de se fazer cabe a cada um, se seria melhor fazer isso ou aquilo cabe às pessoas que assistirem o vídeo correr atrás de conteúdo e aperfeiçoar seus sistemas. Aqui ocorre o famoso “pontapé inicial” o resto tem que correr atrás. Procurem entender melhor a finalidade deste espaço antes de escreverem seus comentários.
Tutorial City : 22.07.09 às 10:04

@EQUIPE VAB
Pouco depois de ter feito a aula, que está aqui no VAB, meu headset deu pau, e tow na briga com a loja que me vendeu pra poder me dar outro. Estou procurando alguém que possa me emprestar um microfone pra eu poder terminar meus vídeos, mas tah difícil. Assim que eu arrumar um eu continuo fazendo as video-aulas.
Eu vou finalizar a série, mais cdo ou mais tarde.
Abraços
Equipe VAB : 22.07.09 às 4:25

Em tempo: Parabéns pela iniciativa, Irilson. Antes de tudo, a força de vontade e disponibilidade em compartilhar conhecimento é o principal.

Tutorial City, cadê suas vídeo aulas por aqui? Mande-nos mais!

[]´s
TOMER : 21.07.09 às 23:16

Quanto mais includes mais lento… o mesmo com os links. Se a ideia era separar o html da programação, deveria ter usado Smarty ou outra template engine.
Ederlo : 21.07.09 às 20:06

opá legal vou verificar o código no forum e compara-lo com o meu.. abraço obrigado pela atenção …
Anderson Farias : 21.07.09 às 19:51

Tutorial City
O cara poder ser novato mas não será pra sempre, quem quer aprender busca conhecimento de todas as formas e de diferentes maneiras e logo também ganha seu estilo próprio de criação e programação, eu mesmo gosto de ver todas as aulas que vejo em diferentes sites pois derrepente vc vê algo interessante que possa ser usado no futuro. Acho tb que ninguém quer ser igual a ninguém, vc no começo da carreira seja do q for pode até se inspirar em alguém mas no futuro vai querer ser reconhecido pelo seu nome não por copiar fulano ou ciclado então acho nulo isso que vc diz sobre os novatos fazerem errado achando que é certo.
David CHC : 21.07.09 às 12:34

@Tutorial City, eu sei que ele fez algumas coisas q não teria “logica”, como inserir o css.php em todas as páginas, talvez faltou um pouco de organização para manipular os includes, e tbm sei q ele não tirou os doctype das paginas q serão incluidas. Como terá uma segundo parte, como Irison já falou no comentario, é interessante esperarmos a continuação dessa video aula. Talvez ele remova algumas coisas, e remodele outros. O que seria interessante, é quem tem mais experiencia ou outra visão dá toque para o autor ou sugestões nos comentários, assim poderia melhorar a outra video aula. Mesmo q eu ache a maneira de modelar não é “certa” (o tal do certo e errado sempre é muito relativo, eu gosto de falar q não seja otimizado, podendo melhorar), mas muita gente pode aproveitar a ideia. Como assim? Trabalhar com includes para criar os templates, separa como header.php (Responsavel para doctype e conteudos do head), topo.php (responsavel pela parte do topo), nav.php( responsavel pela navegação), rodape.php (responsavel pelo rodape). E assim poderia trabalhar melhor, e tbm se quiser trabalhar com query string. Talvez seja uma maneira muita produtiva sugerir, do q apenas “jogar pedras”. E como falo, video aula não é ponto final, é apenas um começo , q quem quer trabalhar tem q pesquisar, e assim tirarão as conclusões para uma melhor produtividade.
Irison Andrade : 21.07.09 às 11:57

A questão é: Este é um site de vídeo aulas diversas com um espaço democrático.

Quem procura conteúdo aqui ? Pessoas interessadas no assunto relativo ao site que possuem um conhecimento básico, intermediário, a nível profissional ou nenhum tipo de conhecimento.

Em quem pensamos quando fazemos os vídeos ?
Em todos os tipos de pessoas que citei acima.

Devo seguir exatamente o método usado pelo autor da vídeo aula ? Claro que não, o conteúdo apresentado aqui é apenas a nível de aprendizado de forma que pessoas possam aprender técnicas diferentes e empregá-las da forma que lhes forem mais conveniente e para sanar algumas dúvidas se for o caso.

Enquanto algumas pessoas não entenderem a finalidade deste espaço será difícil entrar em um acordo com a opnião de cada um.
Tutorial City : 21.07.09 às 11:54

@DAVID CHC
A intenção realmente é louvável, mas tecnicamente falando está um horror. Fazer de uma maneira diferente é aceitável, mas usar métodos 100% não recomendados já é passar de qualquer limite. O maior problema está no fato de incluir páginas inteiras dentro de outras páginas. Você tb sabe que isso é um absurdo, e o pior é que os novatos acabam tomando isso aí como certo, e acabam se acostumando com péssimas práticas como essas. O fato de funcionar não significa que está certo. Se jogar essa página no validador é capaz dele nem ler.
David CHC : 21.07.09 às 11:09

@Tutorial City, cada um tem seu método de criação de página, como o autor falou nas próximas video aulas ele vai explicar pq ele fez essa maneira. Em relação a qualidade técnica, eu liberei a video aula, como liberei a outra de fireworks, apesar de vc achar, e outros acharem q é muito simples (ou de “qualidade inferior”) , como eu respondo muito no forum e recebo muitas duvidas, vejo q essas video aulas, apesar de ser diferente q eu faço, podem ajudar a sanar alguma duvida, não digo a video aula no todo, mas pontos que os autores abordam. No meu entender, eu abstraio se a video aula tem uma qualidade de som não muito boa, como a sua video aula q o audio estava muito baixo, recebi reclamações até de baixo escalão, q não deixamos passar, mas gostei da video aula e do assunto abordado. Ou se em algumas video aulas a pessoa não tem uma pronuncia legal, ou outras ordem tecnica, eu tento pensar q a video aula vai sanar algum ponto, ou uma duvida, eu posso afirmar sem medo de errar q as video aulas até básicas sanam muitas duvidas. Sei q todos querem boas video aulas, por isso temos q pensar em todos
Cristiano : 21.07.09 às 11:01

Legal a video aula, interessante o jeito que você monta o layout, com os includes e tal…não costumo trabalhar assim, mas conheço gente que faz dessa forma…é questão de gosto ou tem outra explicação?

Abraço!
Tutorial City : 21.07.09 às 10:41

Fiquei boquiaberto aqui, mas enfim, vamos lá….

\O autor está incluindo páginas inteiras dentro de um mesmo documento, ou seja, existem vários em um mesmo documento, quando na verdade só deveria existir 1 e somente 1! Esse foi o maior absurdo que eu vi.
Depois ele salvou o arquivo css com em uma página inteira de HTML extensão PHP pra poder incluir depois, a minha pergunta é ‘por que?’. Não faz o menor sentido.

Existem muitos outros problemas, mas nem vou comentar pra poder chamar mais a atenção pra esses assassinatos aí.

Será que ninguem analiza a qualidade técnica dos vídeos? Agente tah precisando disso por aqui.

Abraços.
Irison Andrade : 21.07.09 às 10:35

Ae galera, a vídeo aula para dar continuidade ao layout sai em poucos dias e podem ficar tranquilos que iremos fazer o menu no box esquerdo e criar uma estrutura de troca para chamar nossas páginas, que iremos criar também, este tipo de estrutura não deixa o carregamento lento, se não entenderam ainda irão entender nos próximos vídeos. Continuem acompanhando. Abraço a todos do VAB !
Danilo Martins : 21.07.09 às 9:58

Bom foi uma boa aula, mas poderia ter sido mais objetivo, acho que não haveria porque ter criado tantos includes
David CHC : 21.07.09 às 8:36

@Ederlo, sobre query string, pegue o código que disponibilizei no forum do mxmasters, e depois vc compara com q vc fez, e reveja a video aula para saber melhor a lógica como funciona.
TOMER : 20.07.09 às 23:32

Não entendi a ideia de varios CSS’s e muito menos a de vários includes… Só vai deixar o carregamento mais lento o.o Recomendo a colocação de um container, já que o site não vai ser fluido mesmo… Fora que seria necessário a hospedagem PHP só para dar alguns includes. Abraços
Ederlo : 20.07.09 às 22:58

Muito boa sua video aula, obrigado por compartilhar conosco…

só tenho um pedido talvez ele já foi solicitado..

ex: com esse layout todo criado, supondo que eu crie um menu no BOX esquerdo com varios links…

como eu iria fazer todo o conteúdo do menu aparecer no BOX DIREITO ?

eu vi por ai algo chamando query string ….

do david dhc mas eu não consegui fazer funcionar :S

se não for pedir muito se puderem detalhar esse assunto fico grato !

abraço..
Sergio Luis : 20.07.09 às 22:24

Nota 10 com louvor. Organizado e didático. Já tô praticando.

Parabéns!
webson sousa : 20.07.09 às 18:08

muito boa sua video aula, parabens continue mostrando o que vc … obrigado
André Silva - MG : 20.07.09 às 14:06

Excelente vídeo aula, impecável,
super organizado, extremamente didático. Este é o padrão correto.
Hurry : 20.07.09 às 13:30

Muinto boa a aula bem comentada
objetiva parabéns fião, to aguardando a continuação t+ um abraço.
joao vitor : 20.07.09 às 13:02

oK, ja consigui visualizar!!
David CHC : 20.07.09 às 12:26

@joao vitor, o video está publicado, tente limpar o cache do navegador caso não esteja ainda sendo visualizado.
joao vitor : 20.07.09 às 12:21

cadê o video ???