1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Webpage Layout feito no Photoshop

Discussão em 'Web Development' iniciada por peter alien, 6 de Novembro de 2007. (Respostas: 11; Visualizações: 1380)

  1. peter alien

    peter alien Power Member

    Boas,

    criei um layout de uma página Web, com header, logo, menu, .. etc tudo no Photoshop.

    O meu problema é que, como vocês sabem cada user trabalha com resoluções diferentes, sendo assim estive a experimentar resoluções de 800x600, 1024x768 e 1280x1024 e o que se passa é que por exemplo na resolução de 1280x1024 a página fica pequenissima.

    Existe alguma maneira de "esticar" o layout (feito no photoshop) de acordo com a resolução que os cibernautas estejam a utilizar?


    Obrigadão
     
  2. ninja_corp

    ninja_corp Power Member

    No Layout não!!! O que podes fazer é exportar os elementos do layout para bitmap e se precisares transformares alguns deles em swf (para ter transparência e qualidade). Depois, aquando da montagem, vais usar exclusivamente CSS design, ou seja... Mete os elementos em "Float", podes tb usar um "wrapper" para conter os elementos que estão em float, assim consegues centrar a página, por exemplo!
    Atenção... usa ID´s de CSS para elementos de layout que so surgem uma vez na página... como é obvio! Usa classes para elementos que podem apareceer várias vezes no layout.

    Nada que uma boa leitura não resolva:

    http://www.cssbasics.com/

    DICA: Todos os estilos na CSS, evita ao maximo estilos "inline", vais ver que se torna mais facil mexer uma linha ca CSS e mudar 50 htm´s, do que o contrário! ;-)

    Peace!!!
     
  3. peter alien

    peter alien Power Member

    O que é em "Float" e um wrapper ?


    Obrigadão pelo link :)
     
  4. Nazgulled

    Nazgulled Power Member

    Realmente, fizeste ai um post que quem mal conhece CSS nã percebe puto do que tu disseste...

    O que tu queres fazer, não é feito no Photoshop, ai só desenhas o layout. Depois, cortas aos bocados e gravas em imagens e quando criares o código do site HTML/CSS, ai é que vais definir o tamanho da página. Tens várias formas para fazer isso, podes fazer com tamanhos fixos ou dinâmicos, mas para isso tens de perceber CSS. Se não percebes, aconselho-te a aprender...
     
  5. ninja_corp

    ninja_corp Power Member

    Companheiro,

    Um "float" é uma propriedade de CSS que podes atribuir a um elemento. Um "wrapper" é o nome que eu costumo dar ao elemento que contém todos os outros, também lhe chamo de "container" ou "main", fica ao teu critério, mas no fundo é uma DIV base que inclui todas as outras e que da muito jeito para posicionares o site onde queres no browser. Podes construir todo o site centrado e no fim achares que o site fica bem alinhado á esquerda.... desta forma mudas o alinhamento da div wrapper para a esquerda e todo o conteudo segue dentor dessa div... mantendo a posição! Dá jeito!

    Quanto ao "float".... imagina o seguinte: Tens um quadrado de 500 px por 500px (div wrapper com medidas fixas na CSS), se la dentro posicionares uma div com uma imagem de 250px e na css disseres que "float: left;" essa imagem vai encostar ao canto superior esquerdo. Agora imagina que tens outra imagem com a mesma medida e lhe aplicas o memso posicionamento (float: left;), o que vai acontecer é que a segunda imagem vai encostar á primeira, só porque ha espaço para isso, caso não houvesse (imagina que a segunda foto tinha 300px), essa imagem ia ser posicionada por baixa da primeira imagem.

    Esta é a melhor maneira de construires um layout, mais cross-browser, mais leve e mais simples de alterar.

    CSS Rules!
     
  6. ninja_corp

    ninja_corp Power Member

    Realmente... é o habito! Mas deixa la, que passate do 8 para o 80! do muito técnico para o mais basico possivel! :-) Não sabe aprende... foi por isso que lhe deixei um link para se iniciar em css!

    Peace!
     
  7. peter alien

    peter alien Power Member

    Ok obrigadão pelas explicações... estou mais habituado a fazer tudo em html, e é super chato... e estava a pensar começar a bombar mais em CSS, por isso obrigado pelo link :)
     
  8. Relamente hoje em dia, as imagens pouco são usadas, cada vez mais o poder da CSS consegue formatar toda uma página.

    Tudo o que é imagem, que já são poucas, são em formato swf para que aumente tambem consoante a resolução de cada utilizador.

    Agora tambem temos de fazer um site com dimensões minimas e máximas. Mas quem usa altas resoluções tambem consegue rapidamente aumentar o tamanho de letra para ver bem um site que esteja mais pequeno.

    Atenção que a maior parte das pessoas têm resoluções apartir de 1024x768 por isso, tens de contar com isso.
     
  9. Yokozuna

    Yokozuna Power Member

    Penso que não é preciso ser muito conhecedor de CSS. O básico serve perfeitamente. Claro que ensinamento a mais nunca é demais.
     
  10. Nazgulled

    Nazgulled Power Member

    Isso é muito relativo e depende da complexidade do layout.
     
  11. peter alien

    peter alien Power Member

    obrigadão a todos pelos posts :D vou bombar nisso!
     

Partilhar esta Página