Que tamanho usar??

chantas

chantas

Power Member
Estou a iniciar-me agora no Webdesign, no entanto tou com uma pequena dúvida, ao fazer um site em Photoshop, que resolução recomendam??Existem algumas resoluções consideradas como padrões do Webdesign??

Cumps.
 
O que te ensinam "na escolinha" é que todos os sites devem ser desenhados para uma resolucao de 800x600 - mas nao sei ate que ponto é que isto ainda está actualizado.

O ideal é desenhares um site que realmente fique com boa aparencia em resulucoes pequenas como os referidos 800x600, mas que em resolucoes maiores nao fique a parecer muito vazio. Hoje em dia, com o uso de CSS é bastante mais simples desenhares qqr coisa que em vez de ter tamanhos fixos, fica com tamanhos percentuais, sendo que assim se "adapta" a resolucao que o utilizador esteja a usar.
 
Já agora outra questão.

Imaginem que faço o site em photoshop e faco os slices no Image Rdy, pelo que percebi o CSS permite manter o site com a mesma "forma" independentemente da resolução do monitor,certo? A minha questão é, dps de passar o site do image rdy para o dreamweaver o que tenho de fazer para activar o CSS??

Thanks!
 
No imageready não sei se o podes fazer.
O que pdoe sfazer depois é pegar nas células da tabela de imagem gerada pelo imageready e dar-hes classes de CSS :|
Sinceramente, eu já não vou pelos slics do imageready.
Isto proque ele usa tabelas para afzer os layouts, o que é um erro.
Para brincar com CSS creio que o mais acertado é usar sustema de divs e afins.
O que eu faço é seleccionar uma parte do layout, fazer copy merged para outro ficheiro e guardar.

Cumprimentos
 
shello disse:
No imageready não sei se o podes fazer.
O que pdoe sfazer depois é pegar nas células da tabela de imagem gerada pelo imageready e dar-hes classes de CSS :|
Sinceramente, eu já não vou pelos slics do imageready.
Isto proque ele usa tabelas para afzer os layouts, o que é um erro.
Para brincar com CSS creio que o mais acertado é usar sustema de divs e afins.
O que eu faço é seleccionar uma parte do layout, fazer copy merged para outro ficheiro e guardar.

Cumprimentos
Clicar para expandir...

Podes explicar um pouco melhor como fazes isso dos divs e etc? Assumindo q já tens o site feito em Photoshop.:)
 
Bom... Vamos pegar no exemplo deste site.
Eu faço todo o layout em photoshop. Depois, selecciono partes-chave (header, background, footer...) do layout e faço um Copy Merged (Edit > Copy Merged), para copiar tudo o que está seleccionado e guardo isto.

Para usar os divs, baseio-me muito em CSS.
Uso background-image para por as imagens, por exemplo. Depois o html vai apenas basear-se num conjunto de divs - com o conteúdo da página, claro.

Mais info: <div>, CSS.
Cumps ;)
 
Para responder à tua questão (vi a tua mensagem e mail ;) ):

Quando já tens o site em Photoshop (ou Fireworks ou etc.) tens que ver mentalmente que imagens vais usar, ou seja, que bocados vais cortar para dar origem ao layout final.
Imagina que queres um gradiente superior do cinza 30% para branco (de cima para baixo) em todo o topo da página - Em vez de cortares TODO o gradiente basta apenas uma imagem com um pixel de largura (e o que o gradiente tiver de altura) para depois fazeres um div do género:

Código: 
#topo {
background: #FFFFFF url(topo.gif) 0% 0% repeat-x;
}

Que vai criar um div onde a tua imagem 'topo.gif' vai ser repetida ao longo do eixo x (horizontal)

Não sei se me fiz entender mas é este o princípio.
 
Já vi que CSS não é muito fácil de perceber (pelo menos até agora! :) )

Shello: Só não percebi onde guardo as imagens após seleccionar o "copy merged" :(

Keoshi: Esse exemplo que estás a dar pode ser cortado através de image rdy??
 
Guardas as imagens num directório onde tenhas a página em HTML para ser mais fácil depois indicares o local das imagens em CSS. Se possível (obrigatório mesmo) paths relativos (/imagens/topo.gif) e não absolutos (http://o_meu_site.com/imagens/topo.gif)

E podes cortar em qualquer programa, Photoshop, Image Ready, Fireworks.
 
keoshi disse:
Guardas as imagens num directório onde tenhas a página em HTML para ser mais fácil depois indicares o local das imagens em CSS. Se possível (obrigatório mesmo) paths relativos (/imagens/topo.gif) e não absolutos (http://o_meu_site.com/imagens/topo.gif)

E podes cortar em qualquer programa, Photoshop, Image Ready, Fireworks.
Clicar para expandir...

A ver se percebi então :)

Corto as imagens que desejo uma a uma, e sempre corto uma imagem faco copy merged e salvo num ficheiro, certo??:)
 
chantas disse:
A ver se percebi então :)

Corto as imagens que desejo uma a uma, e sempre corto uma imagem faco copy merged e salvo num ficheiro, certo??:)
Clicar para expandir...
Sim, colas numa nova imagem (quando fazes new image, por predefinição ele mete-te o tamanho exacto do que tens na área de transferência) e guardas.

BTW, CSS não é muito dificil de perceber. Aliás, quando te habituas, acho que já não queres outra coisa :x2:
 
Neste momento estou a tentar construir um site para um amigo, dps vou pondo aki pics para voçês me darem uma opinião e ajuda já agora! :)
 
Para construir uma folha de estilos CSS uso o TopStyle Lite. É excelente.
Só precisas de ligar o teu ficheiro HTML ao ficheiro CSS e todos os estilos que definiste em CSS e que aplicaste ao HTML aparecem agora quando visualizas a página no browser.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo