Como passar um layout do Photoshop para xHTML/CSS (parte 1)

, , , , • 28/06/2009

Neste tutorial você os detalhes de como transformar um layout do photoshop (ou qualquer outro programa) para xHTML válido, seguindo os padrões mais atuais da web. Nesta primeira parte abordo somente a parte de xHTML, já na segunda pretendo abordar os detalhes de como fatirar o layout e usar CSS para deixar o visual o mais parecido possível com o proposto.

Como passar um layout do Photoshop para xHTML/CSS (parte 1)


Baixar arquivos

Comentários

  1. william28/06/2009

    Hahahaha era disso que eu precisava muito bom viu ^^

    Responder

  2. Virgilio28/06/2009

    Ainda não assisti, mas parece ótimo! Parabéns!

    Responder

  3. Hugo Luiz01/07/2009

    muito bom! parabéns

    Responder

  4. David CHC05/07/2009

    Muito boa video aula, bem detalhado. No caso do formulário , vc poderia tbm utilizar em vez do parágrafo, tag para o formulário, como fieldset, e label. E tbm você poderia usar nos elementos da #barralateral, utilizar class nos box’s, se quiser especificar em um terminado box, poderia utilizar classes múltiplas. São apenas sugestões.

    obs.: O audio da video aula tava muito baixo, já tive esse problema, pensei q era o microfone, mas era na captação do microfone, bastou regular ele q ficou melhor.

    abrs

    Responder

  5. Jacson05/07/2009

    Muito bom brother parabens pela iniciativa. Belo trabalho.
    E a 2º parte sai quando.?/

    Abraço.

    Responder

  6. Daniel Jhonatan08/07/2009

    simplismente show de bola….
    Gostei muuuuuuiito

    Parabéns!!!

    Responder

  7. Thiago Retondar09/07/2009

    Qual theme você usou para deixar o Aptana com essas cores?

    Ficou muito boa a vídeo aula, parabéns. #clap

    Abraços.

    Responder

  8. Tops da Net09/07/2009

    ppow ai gostei pra caramba…. continue assim…
    blz um abraço…

    Responder

  9. Ju17/07/2009

    Amei e já repassei bju

    Responder

  10. anderson carlos18/07/2009

    muito boa aula, quando sai a segunda parte ???/
    ta de parabens..

    Responder

  11. Tutorial City22/07/2009

    @#5, @#10
    Sai assim que eu arrumar um microfone. O meu deu problema e estou apra pegar outro. Fiquem ligados! ;)

    @#7
    Peguei nesse link(http://gueschla.com/labs/green-chaud/) e fiz algumas modificações.

    Responder

  12. mupner27/07/2009

    Parabéns! Estou na espectativa da parte 2!

    Responder

  13. Anderson Paixão29/07/2009

    A questão… quando vem a proxima parte?!..
    .
    Parabens pela aula!..

    Responder

  14. Tutorial City02/08/2009

    @#12,#13
    Muito breve! fiquem ligados porque a segunda parte vai ser muito legal e informativa ;)
    Pra conferir assim que ela sair, assine o feed.

    Abraços.

    Responder

  15. Marcelo03/08/2009

    Mto legal a video aula. Parabéns, porém estou muito ansioso pela segunda parte. Saí quando?
    Por favor nao demore, pois será muito útil!

    Responder

  16. Fraks05/08/2009

    Justamente do que eu estava precisando.
    =)
    Exepcional como sempre.

    Responder

  17. Juliana Dochvat13/08/2009

    Caramba, muitoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo louco!

    Acho que agora a coisa funfa… =D

    Thanxxxxxxxxx

    Responder

  18. Odair14/08/2009

    Cade a segunda parte amigo? Estou esperando faz um tempão!

    Responder

  19. Jhuan Luiz14/08/2009

    Tutorial simplesmente perfeito!
    Já assinei o Feed, agora estou a espera da segunda parte!
    Parabéns!

    Responder

  20. Eder Ferreira10/10/2009

    Muito Bom !!! Vou acompanhar os outros dois tutoriais e estou assinando sua lista !!!

    Responder

  21. Wilson Pellegrine19/03/2010

    Ola Eduardo!

    Tenho aprendido muito com as video aulas.

    Há várias maneiras de ser entendido: ser claro é uma delas.

    Obrigado
    Wilson

    Responder

  22. Samir di Vermonti29/04/2010

    Ótimo tutorial, campeão! Tirando o som baixo XD
    São pessoas como vocês que ajudam a net a sempre melhorar um pouco mais!
    Não vejo a hora de eu estar apto à fazer vídeo-aulas para compartilhar com o pessoal também ^^

    Responder

  23. Bruce19/05/2010

    Ótimo tutorial, campeão! Tirando o som baixo XD
    São pessoas como vocês que ajudam a net a sempre melhorar um pouco mais!
    Não vejo a hora de eu estar apto à fazer vídeo-aulas para compartilhar com o pessoal também ^^

    Responder

Envie Seu Comentário