Webpage Layout feito no Photoshop

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
 
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!!!
 
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...
 
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!
 
Nazgulled disse:
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...
Clicar para expandir...

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!
 
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 :)
 
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.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo