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

Nesta terceira, e última, parte mostro como corrigir os bugs do internet explorer, para que o site possa ser visto “igualmente” em todos os navegadores. Felizmente dentro de alguns anos esse processo não será mais necessário, mas enquanto isso não acontece nós ainda devemos compensar para os navegadores mais antigos e fora dos padrões.

Downlaod dos arquivos criados

  • del.icio.us
  • Twitter

Tags: , , , ,

Este post foi criado em 22 de agosto de 2009, sábado às 11:58 na categoria web.

Você pode acompanhar as respostas a este post clicando aqui.

16 Comentários para “Como passar um layout do Photoshop para xHTML/CSS (parte 3)”

  1.  
    #1 - Diogo Lopes

    Parábens pelo belo trabalho que tem feito com as videos aulas, assisto cada uma e aprendo com elas! já estou a a espera da próxima
    Abraços e até mais!

     
  2.  
    #2 - Anderson Paixão

    Ainda nem assisti o segundo mais tenho uma sugestão de aula, menu drop down, tanto vertical, como horizontal…
    .
    Mas de qualquer forma parabens, são otimas aulas… E muito sucesso, consegui um estagio graça a esta video aula… Muito obrigado.

     
  3.  
    #3 - SombeR

    Otimas aulas…

     
  4.  
    #4 - Diogo Lopes

    Mas eae, quando é que sai a próxima video aula, ou tutorial?

    estou ansioso já! :D

     
  5.  
    #5 - Clodoaldo Rodrigues

    Eduardo,

    Parabéns pela aula, excelente, acompanhei a série toda e consegui aproveitá-los em meus projetos. Eu já desenvolvia nessa linha e agora aperfeiçoei a técnica.
    Você deixou um exercício para descobrir como fazer para desaparecer o fundo cinza das imagens PNG no ie6, pois é, já tentei utilizar as técnicas passadas no site Definitive Guide to Taming the IE6 Beast mas não deu certo, devo estar fazendo algo errado, mas se tiver algum material que explique ao certo como funciona e corrija esse problema vai me ajudar bastante e aos companheiros que tiveram o mesmo problema.

     
  6.  
    #6 - Tutorial City

    @Clodoaldo Rodrigues
    Existem várias maneiras de resolver este problema, porém é importante frisar que nenhuma é 100% legal ,cada um tem seus pontos fracos.
    Existe um tutorial no blog Nettuts que mostra 5 maneiras de resolver esse problema, além do mostrar os pontos fracos de cada uma.
    Se restar alguma dúvida, por favor retorne e compartilhe conosco.

    Abraços

     
  7.  
    #7 - Kaique Abner

    Me ajudou muito mesmo,
    mas estou tendo um problema com o Aptana Studio….
    Eu faço todo o codigo certinho, mas quando vou visualizar os caracters ficam baguçados, os acentos em lugares errados , inves de ” ‘ ” fica ” ^ ” …
    Sabe com arrumar?

     
  8.  
    #8 - Tutorial City

    @Kaique Abner
    Você tem que ver se os caracteres que está digitando são caracteres válidos para (x)html. O Firefox, por exemplo, quando não compreende um caractere ele exibe um losango preto com uma interrogação no meio, talvez o mesmo esteja acontecendo com o Aptana(talvez). Pra uma lista dos caracteres suportados por (x)HTML visite o site da W3Schools. Se não for isso, pode retornar aqui e detalhar seu problema.

    Abraços

     
  9.  
    #9 - Kaique Abner

    Olá,
    obrigado pela resposta…

    Acredito que nao seja esse problema, pois crio o mesmo codigo , com os mesmo caracteres pelo dreamweaver , notpad++ e até pelo bloco de notas e sai certinho,
    mas quando vou fazer exatamente IGUAL no Aptana sai os caracteres todos estranhos…

    Se puder me ajudar fico agradecido, se não puder fico da mesma maneira =D
    Aguardo sua resposta se possivel.

    Até mais,
    Abraços!

     
  10.  
     
  11.  
    #11 - Kaique Abner

    Ahhh se der me fale o problema, e tambem se nao for abusar me mande o link de onde vc baixou o seu?

    Por favor!!!

    Flw abraços!

     
  12.  
    #12 - Tutorial City

    @Kaique Abner
    Exatamente o que eu imaginava. Caracteres acentuados, símbolos(marca registrada, copyrights…) entre outros elementos podem não ser renderizados de maneira correta pelo navegador. Para resolver esse problema você deve digitar o código que representa esses caracteres, por exemplo, á é equivalente a á, õ é equivalente a õ e por aí vai… pra uma lista completa dos caracteres e suas representações você pode acessar o site que passei alguns comentários acima(7 de outubro), da W3Schools.

    Se vc quiser digitar um texto muito grande e ficar com preguiça de digitar os códigos, você pode usar a função htmlentities do PHP, que converte esses caracteres inválidos em seu equivalente em HTML.

    Abraços

     
  13.  
    #13 - Kaique Abner

    Ok,
    Infelizmente vou abandonar o Aptana (achei ele mto interessante)…
    Fazer oque assim nao da p trabalhar!

    Obrigado pelas dicas…

    Até mais!!!
    (vou voltar com o dreamweaver)

     
  14.  
    #14 - Tutorial City

    @Kaique Abner
    Isso não é uma opção, é uma norma em documentos HTML. Estou para fazer um tutorial mostrando como dá pra criar o código 10x mais rápido no Aptana do que no Dreamweaver. acho que depois disso você vai mudar de idéia.

     
  15.  
    #15 - Tutorial City

    @Kaique Abner
    Experimenta usar o charset UTF-8 ao invés de iso-8859-1

     
  16.  
    #16 - Kaique Abner

    Ok cara,
    se der faz sim…

    Vai ser muito util!

    Abraço.

     

Deixe seu comentário!