Dreamweaver - Desenvolvendo layout para qualquer resolução de tela

Arquivo de (Dreamweaver) por Felipe Cardozo em 13-06-2008 - 8,405 visualizações

Tags: , ,

a a a

Salve, salve rapaziada!
Seguindo as sugestões da galera que não param de chegar, hoje irei mostrar a simplicidade de se fazer um layout dimensionável para qualquer resolução de tela. 800×600, 1024×768, 1440×900, etc…

Você também aprenderá a determinar um valor máximo e mínimo da dimensão através de CSS. O layout que desenvolvi é bem simples, contendo topo, meio e rodapé, mas sem nenhum conteúdo. Qualquer conteúdo que você venha colocar no meio, tem que estar com as dimensões em porcentagem, para que possa acompanhar o “deslizar” do layout de acordo com a resolução do visitante.

Assista à vídeo aula

Permalink

Comentários:

#1.
Franklin CostaNo Gravatar comentou:
Muito bom Felipe… pequenos detalhes são essenciais para dar a diferença!
Comentado em: 13 Jun, 11:30 am
#2.
MarkinNo Gravatar comentou:
sempre quis saber como fazer isso…
Valeu Felipe, excelente aula!
Comentado em: 13 Jun, 12:25 pm
#3.
FONTENELENo Gravatar comentou:
Felipe muito bom, parabéns otima aula, ate a proxima.
Comentado em: 13 Jun, 12:26 pm
#4.
Rafael VelosoNo Gravatar comentou:
E ai Felipe, tranquilo cara? essa video aula é bem simples mais muitoo útil até mesmo pra quem já sabe faze isso de outra forma pq ai podemos preender uma nova maneira certo. Parabéns cara ficou muito interessante e objetiva… agora queria te faze uma pergunta: seria interessante o site vender o DVD anual com todas as video aulas? pq ai estariamos seguro que poderiamos ter em nossas mãos todos os exemplos, pq no DVD pacotão não contem todas e isso seria muito bom, nos os usuários termos todas as aulas??? aguardo sua resposta….um abraço!
Comentado em: 13 Jun, 12:53 pm
#5.
Thiago Nascimento Alves RetondarNo Gravatar comentou:
Nossa eu ia mandar um e-mail para você fdalando para fazer uma video-aula sobre isso.

Muito boa a aula. Estou sem tempo e depois eu faço.

Falou.

Comentado em: 13 Jun, 12:56 pm
#6.
MonteiroNo Gravatar comentou:
nousa essa e muito boua mesmo em
arebentando !!
Comentado em: 13 Jun, 12:57 pm
#7.
Felipe CardozoNo Gravatar comentou:
E aí Rafael, tudo bem?

Iremos estudar esta possibilidade sim. Possivelmente, será um DVD duplo, porém com um conteúdo significativo.

[]´s

Comentado em: 13 Jun, 2:02 pm
#8.
Tereza CristinaNo Gravatar comentou:
O máximo isso!
Obrigada.
No dvd de sites completos tem esse lance igual o do MxMasters, que abre 800px e esconde o restinho que só se vê em 1024?
Gostaria de adquirir…
abraço
Comentado em: 13 Jun, 5:46 pm
#9.
RicardoNo Gravatar comentou:
Ai Felipe manda umas aulas de metas tag e otimização de site, como funciona o google robot.txt sair nos primeiros lugares do google, afinal de que adiante um pelo site se o mundo não me ve
Comentado em: 13 Jun, 6:16 pm
#10.
André OrionNo Gravatar comentou:
Olá Felipe, você pode nos dizer porque não estamos mais podendo baixar as vídeo-aulas?
obrigado
Comentado em: 13 Jun, 9:25 pm
#11.
KduarteNo Gravatar comentou:
Muito bom!
Obrigada!
Comentado em: 13 Jun, 9:40 pm
#12.
AndersonNo Gravatar comentou:
Felipe entra aew no site da minha igreja :www.adsaomarcos.v10.com.br e me responda o que devo tirar,o que devo colocar entende se vc puder me de uma luz,ah tbm se vc puder me indica um site de hospedagens gratuitas aew pra mim hospedar esse site pq o v10 é muito ruim valeu abraço.

Oh na próxima video aula manda um salve pra galera aqui de campinas diz que foi o anderson q pediu ok.

Forte Abraço Valeuuuuuuuuuuuuuuuuuuu.

Comentado em: 13 Jun, 10:29 pm
#13.
EDER SIOLINo Gravatar comentou:
Valeu Felipe, você resolveu alguns de meus problemas…
parabéns pela aula!!!!
Comentado em: 13 Jun, 10:29 pm
#14.
Felipe CardozoNo Gravatar comentou:
Tereza, obrigado pela visita!

Bom, nos DVDS não abordo sobre esta vídeo aula. Somente as que informo na lista: http://www.mxmasters.com.br/dvd-mxmasters/

[]´s

Comentado em: 13 Jun, 10:42 pm
#15.
Felipe CardozoNo Gravatar comentou:
Ricardo, tranquilo?

Pode deixar que irei fazer assim que possível.

[]´s

Comentado em: 13 Jun, 10:43 pm
#16.
Felipe CardozoNo Gravatar comentou:
Anderson, coloque o conteúdo para que possamos fazer uma avaliação completa.

Pode deixar que mando o abraço sim :)

Sobre o hostfree, veja este aqui: http://www.freewebhostingarea.com

[]´s

Comentado em: 13 Jun, 10:49 pm
#17.
AndersonNo Gravatar comentou:
Como assim mandar o conteudo?

Esse hostfree suporta php?

Valeu

Comentado em: 13 Jun, 11:25 pm
#18.
Robson LuizNo Gravatar comentou:
Parabéns Felipe!!! Que Deus te abenções grandemente por todo esse trabalho magnifico… “Aquele que se doa sem reserva tem o mundo aos seus pés”
Comentado em: 13 Jun, 11:59 pm
#19.
Felipe CardozoNo Gravatar comentou:
Anderson, nenhum link do seu site contém conteúdo. Só está com a capa.

Depois que as páginas internas estiverem prontas, me manda para eu avaliar.

O host suporta PHP e lhe oferece Banco de dados.

[]´s

Comentado em: 14 Jun, 12:21 am
#20.
AndersonNo Gravatar comentou:
Felipe vc sabe como inserir aquele player q vc ensinou a fazer no v10,Tipoe eu mando o player com as musicas mas elas naum tocam só aparece o player e mais nada me ajuda.

E o site está apenas e faze de testes eu ainda estou preparando o material ok.

Valeuuuuuuuuuuuuuuuu

Comentado em: 14 Jun, 1:22 am
#21.
NilNo Gravatar comentou:
Bela Materia no caso de DIV ele Funciona no FF outro dia usei não funcionava então tem que ser tabela? e com div % não funciona?

Obrigado e parabens

Comentado em: 14 Jun, 1:44 am
#22.
RennanNo Gravatar comentou:
Cada dia eu me surpreendo… Pq num dia entro no site vejo uma aula e falo esta eh a melhor… Ai vejo outra não esta eh melhor… Conclusão: Não da para compara todas são otimas…
Excelente aula Felipe!!!
“Até a proxima”
Comentado em: 14 Jun, 3:15 am
#23.
Israel C. CastielNo Gravatar comentou:
Felipe legal mesmo
por mais essa dica e tem
mais uma manhazinha ai na tabela
o rodapé rsrsrrs
flw té mais é isso ai
Comentado em: 14 Jun, 3:56 pm
#24.
delisNo Gravatar comentou:
valeu felipe pois e tudo oque eu precisava pois vc mandou bem
muito obrigado
e sucesso em suas jornadas

nota 10

Comentado em: 14 Jun, 7:36 pm
#25.
Ednardo MaxNo Gravatar comentou:
Uai

Não recebi os e-mail´s não!
Mas mandei tudo agora certinho pra vc!
Só hj assiti à vídeo aula.
Valew o toque!

Comentado em: 14 Jun, 10:35 pm
#26.
LeandroNo Gravatar comentou:
E aí Felipe beleza? Excelente vídeo aula. Se for posível gostaria que você desse uma olhada no site - http://www.irontemple.com.br - é que estou tentando desenvolver algo com os efeitos paredidos, mas está meio difícil.

abraço

Comentado em: 14 Jun, 11:08 pm
#27.
RicardoNo Gravatar comentou:
Felipe agradeço por estas video aula, que deus ilumine toda a equipe do mx masters, para continuarem este trabalho maravilhoso, assim que possivel passo ai para tomarmos um chop sou de SP .
Comentado em: 15 Jun, 4:22 am
#28.
ruchenskoNo Gravatar comentou:
show de bola, comando bem simples mas util :)
Comentado em: 15 Jun, 6:29 pm
#29.
Felipe CardozoNo Gravatar comentou:
Nil, Bom, isso é um tema que terei que abordar aqui. Ensinar a criar hacks que são maneiras de burlar essa falha entre navegadores..

Rennam, valeu!

[]´s

Comentado em: 16 Jun, 5:15 pm
#30.
DhymasNo Gravatar comentou:
Bom Felipe,parabens pela video aula,é notavel que vem nos ajudando bastante…mas ainda ficou me restando uma duvida…como trabalhamos com imagens(fotos,banners em flash,etc…) nesse caso???mesmo estando em pixels elas tambem podem ser redimensionadas???caso não seja possivel,oque devemos fazer???
Obrigado,fica com Deus…
Comentado em: 17 Jun, 3:18 am
#31.
mcenroe clarkNo Gravatar comentou:
Felipe meu camarada como sempre vc da um show de bola…boa aula essa cara parabens…aproveitando o tema da aula gostaria de sugerir a vc q nos desse uma ajuda a mais….vc poderia informar a agente qual a melhor resolução para cada monitor expecificamente…por ex: monitor de 17″ resolução melhor “x” e por ai vai…se for possivel da mais essa ajuda a nois plz!!!forte abraço cara
Comentado em: 17 Jun, 3:48 am
#32.
BrunoNo Gravatar comentou:
Mas a surgiu uma dúvida.Qdo vou desenvolver o layout no fireworks,que tamanho do projeto q irei criar (W=? H=?) coloco para desenvolver o projeto?
Comentado em: 17 Jun, 11:06 am
#33.
EdisonNo Gravatar comentou:
Felipe recebi ontem o dvd muito bacana mesmo tô degustando aos poucos. Obrigado por tudo. Deixo aqui minha recomendação para quem quiser adquirir que vale realmente a pena pois o dvd é super organizado dividido em tópicos, muito bacana mesmo assim que for posível vou adquirir aquele anual que vcs vão lançar.
Abraços!!!!
Comentado em: 17 Jun, 7:31 pm
#34.
Jonas B. FrancoNo Gravatar comentou:
Felipe, fiz a aula e no IE7 este efeito nao funciona(pelo menos aqui neu pc (Win Vista)) mas no firefox ele funciona nomrlamente, o que sera que esta acontecendo com o IE7 sei que o firefox é bem melhor mas a maioria das pessoas e empresas usam IE7 por favor você poderia me dizer o que esta acontecendo, pq o site de vocês funciona normalmente tanto no IE7 e no firefox..aguardo resposta, muito obrigado pela atenção.
Comentado em: 17 Jun, 11:10 pm
#35.
Jeova OliveiraNo Gravatar comentou:
Olá Felipe e galera, preciso saber sobre o Player que tem na video aula em flash. Fiz tudo direitinho, ao abrir no Adobe Flash Player 9 as musicas tocam mais ao inserir no DW não toca o que houve? Será que fiz algo errado?
Comentado em: 18 Jun, 1:11 am
#36.
LeandroNo Gravatar comentou:
Felipe, tenho uma dúvida em relação ao menu spry Collapsible Panel, estou tentando colocá-lo no site que estou desenvolvendo, mas ele está empurrando o conteúdo do site para baixo quando o abro, como faço para que isso não aconteça.

Abraço!

Comentado em: 18 Jun, 12:34 pm
#37.
Lucas CorrêaNo Gravatar comentou:
Minha duvida é se isto também se aplica em imagens????

ex: meu topo é uma imagem

Comentado em: 18 Jun, 3:04 pm
#38.
Felipe AzevedoNo Gravatar comentou:
Muito boa a aula, fiquei em duvida pois usei isso no meu site, quando eu mudo de resolução que não seja 1024×768 ele fica alinhado ao centro horizontalmente, porem ele na vertical fica colado no topo, queria saber como fazer ele ficar centralizado na altura e largura? Obrigado
Comentado em: 18 Jun, 4:51 pm
#39.
NathalieNo Gravatar comentou:
Tá tudo bem, isso eu entendi perfeitamente…
mas tipo…se eu fizer o site como vc mostra na vídeo aula de ‘criando um site completo’.. como ele vai fazer com as figuras (vamos pegar o exemplo do topo) dentro da tabela? elas vão esticar? Pq uma coisa é o preenchimento da tabela.. e outro são as figuras que compõem o layout ne?
Se puder me dar uma dica de como fazer isso conforme eu comentei (se existe um jeito)
Muito obrigada!
Comentado em: 18 Jun, 5:06 pm
#40.
Felipe CardozoNo Gravatar comentou:
Jonas, tudo certo?
Por tabelas ou CSS que não funcionou legal?
Comentado em: 19 Jun, 2:04 am
#41.
Felipe CardozoNo Gravatar comentou:
Jeová, tudo certo?

Você tem que verificar se está colocando as músicas dentro da pasta correta.

[]´s

Comentado em: 19 Jun, 2:04 am
#42.
Felipe CardozoNo Gravatar comentou:
Vídeo aula em preparo para tirar estas dúvidas de vocês.

[]´s

Comentado em: 19 Jun, 2:07 am
#43.
Thiago EullerNo Gravatar comentou:
Opa!
cara esse site mxmasters caiu do céu…rs
Meu cliente e quis que eu colocasse o site dele para abrir tanto com 800X600 qnto com 1024X768, nem acreditei qndo axei a solução aqui. segue o site > http://www.fisioslim.com.br <
Vlw Felipe e toda a equipe do MXmasters… Que Deus continue a dar essa sabedoria a v6, estão ajudando mta gnte.!!!
Comentado em: 23 Jun, 11:33 am
#44.
Felipe CardozoNo Gravatar comentou:
Olá Thiago!
Show de bola!

É isso aí!

[]´s

Comentado em: 23 Jun, 1:32 pm
#45.
Jeferson ScorsattNo Gravatar comentou:
cara muito bom, sou visitante fanático do site cara, na minha opinião vcs são os melhores e de boa mesmo muito bom as vídeo aulas, cara o que eu te peço é o seguinte…

cara se tu pudér entrar no meu site tu vai notar, eu fiz o layout no fireworks, e exportei pro dream, ai beleza, só que dependendo da resolução da tela o texto descentraliza de onde deveria ficar, tipo desculpa se por um acaso já tem algum tópico a respeito deste assunto mas por favor me responda, o texo foi colocado no dream, e o resto é feito em fireworks….
no meu pc na resolução que eu desenvolvi ficou 10 mas quando eu troco a resolução o texto corre para os lados….

ajuda aew por favor cara!

valeu eihm e parabéns vcs são os melhores!

Comentado em: 26 Jun, 11:38 pm
#46.
David MorenoNo Gravatar comentou:
Olá Felipe, primeiro de te parabenizo, e a equipe MXMASTERS, por esse excelente trabalho, dando oportunidade as pessoas se profissionalizar em materia que é, ,e vai ser os trilhos para um novo rumo.
Gostaria de Saber como baixa essa Video aula, pois só iniciante, e não estou conseguindo saber qual o tamanho correto para uma pagina, e nessa viveo aula, você está tirando minha duvida, mas preciso está online para assistir, e não tenho como está toda vez.
Valeu e, mais uma vez PARABENS A EQUEP. MXMASTER
Comentado em: 30 Jun, 3:42 am
#47.
Felipe CardozoNo Gravatar comentou:
Olá David, tudo certo?

Infelizmente não há a possibilidade de fazer o download das vídeo aulas.

[]´s

Comentado em: 30 Jun, 10:09 pm
#48.
Felipe CardozoNo Gravatar comentou:
Olá Jefferson, tudo certo?

Bom, eu tenho quase 100% de certeza de que você usou layer no conteúdo do seu site.

Se você fez com layer, não é o recomendado, pois dependendo da resolução de tela de quem visita, ela desalinha.

Procure usar tabelas e evite iframes.

[]´s

Comentado em: 30 Jun, 10:21 pm
#49.
RogerioNo Gravatar comentou:
So uma pergunta fiz um site em camadas quando abro em 1024 ele esta certo quando abro e 800 fica aquela barra de rolagem zuada e os link, botão fora do lugar “obs: foi criado um layout de 800 por 600 (ou se vc poder me dar uma dica ) criar em tabela e jogar as camada dentro da tabela mais como prendenlas na tabela … tah fmz as videos aula to aprendendo bastante
Comentado em: 01 Jul, 2:28 am
#50.
Felipe CardozoNo Gravatar comentou:
Olá Rogério, tudo certo?

Bom, criar sites com camadas não é indicado. O correto é criar com as tabelas.

As camadas, visualizadas em resoluções dierentes, pode sair do lugar.

[]´s

Comentado em: 01 Jul, 1:08 pm
#51.
RogerioNo Gravatar comentou:
VaLeW felipe pela so mais um esclarecimento caracas chto em em aquele efeito (show-hide elemets) pode ser usado em tabelas ou so em camadas mesmo … abraço
Comentado em: 07 Jul, 1:55 am
#52.
BrunoNo Gravatar comentou:
Felipe Aproveitando a Pergunda Do camarada ai
aquele efeito (show - hide elements) pode ser usado em tabelas ou so em camadas mesmo
obs: o postei um site no servidor so que perdi a pasta do site tem como fazer donwload do site do servidor poderia me orientar grato bruno.
Comentado em: 07 Jul, 2:12 am
#53.
Felipe CardozoNo Gravatar comentou:
Olá Rogério.

Sim, pode usar tanto em Tabelas como Divs. Mas o indicado é no caso da DIV, fazer integrada com JavaScript.

[]´s

Comentado em: 12 Jul, 12:54 am
#54.
Konrrado MansorNo Gravatar comentou:
Muito legal essa vídeo aula Felipe !
Valw mesmo show de bola, arrumei vários probleminhas que haviam em um site que estou desenvolvendo :D
grande abraço
Comentado em: 16 Jul, 6:01 pm
#55.
Amilson M. SousaNo Gravatar comentou:
Estou conhecendo o seu trabalho agora e já foi possível notar o seu grande conhecimento. Eu e minha irmã viramos fã deste site, pois todas as nossas dúvidas recorremos ao MXMASTERS.

Abraços.

Comentado em: 07 Ago, 9:45 pm
#56.
MonsterNo Gravatar comentou:
Olá Felipe muito boa a video aula, só que eu estou com um problema parece que para mim não está funcionando o max-width e o min-width não sei pq, estou colocando o class certinho na tabela como você mostra na video aula só que não está dando resoltando, por favor me ajude.
A colocando que eu uso uma resolução de 1280X768
Comentado em: 08 Ago, 11:35 am
#57.
Felipe CardozoNo Gravatar comentou:
Monster, mande-me os arquivos para eu analisar: contato[arroba]mxmasters.com.br

[]´s

Comentado em: 11 Ago, 11:35 pm
#58.
DelmarNo Gravatar comentou:
Cara, o vídeo não tá abrindo!
Comentado em: 18 Ago, 10:49 pm
#59.
Felipe CardozoNo Gravatar comentou:
Delmar, tudo certo?

Aguarde alguns segundos que abre…

[]´s

Comentado em: 19 Ago, 2:06 am
#60.
NiltonNo Gravatar comentou:
ola felipe cardozo…
eu estou començando aprender agora
a parte de web disigner e gostaria de saber onde encontro aulas completas de todos os programas que vou precisar aprender pra criar um site…..valeuu…kra…
Comentado em: 22 Ago, 12:09 pm
#61.
Carlos LeandroNo Gravatar comentou:
Ola Felipe.

Coloquei no site para ter as dimesões max e min, no IE6 e 7, Firefox v 2.0 tava td beleza. Ai fui atualizar meu firefox para a V3.0 e não funcionou este comando. vc sabe pq?

Comentado em: 25 Set, 12:48 pm
#62.
VegNo Gravatar comentou:
Parabéns, hoje estava pesquisando no google e achei essa vídeo-aula, mas já conhecia o site!

Muito bom, já estou fazendo um site de uma loja apartir dessa aula!

Comentado em: 03 Out, 8:14 pm
#63.
RICARDO GUEDES - GRAVATÁ -PENo Gravatar comentou:
muito bom cara estou gostando muito dese site valeu…
Comentado em: 06 Out, 11:58 am
#64.
elir de assis ribeiroNo Gravatar comentou:
gostei muito da video aula
quero saber qual é o jeito certo de fatia um layout usando o metodo tableless
Comentado em: 19 Out, 5:11 pm
#65.
Tiago CanaanNo Gravatar comentou:
POR FAVOR, COMNO EU FAÇO PRÁ APLICAR ISSO EM IMAGEM!

ME AJUDEM!

Obrigado galera :)

Comentado em: 27 Out, 10:53 am
#66.
FlaviaNo Gravatar comentou:
Show de bola essa video aula. Parabéns.
Estão sendo muito uteis para mim as videos aulas do Mxmasters. Obrigada pessoal do MX
Comentado em: 30 Dez, 11:19 am