11 replies to this topic

[Komodor]

Olá pessoal (mais uma vez =P) gostaria de saber se quando recortamos o layout do Fireworks e mandamos para o Dreamwaver, as imagens demoram para abrir na Web.
Bom não sei se isso é por causa do HOST... por que quando vou abrir o site, o carregamento demora um pouco, mesmo as imagens tando em JPEG e GIF, se poderem me explicar o problema, agradeço

[AN Web Designer]

Olá !!!
Um site "todo" fatiado pode demorar sim! Claro que dependendo também da resolução exportada, esse é até um dos motivos de muitos designers não usarem mais esse método.

Mas todas as imagens criadas ou fatiadas para web, devem ser trabalhadas a sua resolução.

Vá em File > Image Prewiew

Neste painel podemos baixar a relosução em escalas de porcentagens e ver a qualidade da imagem e também o tempo em que o browser abrirá o trabalho.

Segue uma imagem para visualização:


AN  exportar.jpg   29.53KB   20 downloads

Edição feita por: AN Web Designer, 08/06/2007, 09:24.

['' sem.Ponto]

AN, essa forma é difícil de calcular. Quando o layout é fatiado, configuramos imagens GIF e JPG com qualidades diferentes.

Para configurar cada fatia, basta selecioná-la e abrir a janela Optimize (Menu Window » Optimize).

Para mim, é um erro exportar HTML com o Fireworks. O melhor seria exportar cada fatia separadamente e montar o HTML apartir do "0" com um editor visual como o Dreamweaver ou até mesmo com o bloco de notas do Windows.

Edição feita por: '' sem.Ponto, 08/06/2007, 12:26.

[Komodor]

Sim Sem.Ponto até isso eu já sabia, a minha duvida mesmo era se eu fizesse minha imagem do Fireworks e quando fosse exporta para o Dreamwaver (como imagem mesmo e lá fazer o HTML) o site ficaria "lerdo" para carregar, eu já fiz muitos layouts no Fireworks e fiz o HTML no Dream, mas quando fui visualizar o site no HOST mesmo, ele demorou um pouco para carregar, teria um jeito para quando entrasse na página o site já abrir, colocar as imagens como Background... me ajudem pls!

[AN Web Designer]

* '' sem.Ponto

Tem razão ... para fatias o melhor procedimento, é como vc mencionou.
É por que é aquela questão de sites fatiados ... cada vez mais está obsoleto.


* Komodor

Uma das soluções é trabalhar com CSS


AN

[Komodor]

Estou pegando as manhas do CSS hoje, aprendi a fazer Rollover no LINK, posicionamento...
Estava lendo também que o CSS pode diminuir o "LAG" do site, mas não sei como, você pode me dar uma dica ou algo que eu possa aprender?!
Grato, Komodor.

O recortamento de Layout com o Slice Tool eu faço, fiz até um TOPICO para tirar minhas duvidas o qual o Sem.Ponto tirou todas
Vlws pessoal!

['' sem.Ponto]

Komodor,

Realmente uma das soluções para deixar a página mais leve, é utilizando CSS. Mas é importante que você calcule o peso das imagens durante a exportação, pois é bom que uma página tenha em média 80 kb (HTML + Imagens).

Não conheço o termo "LAG". Talvez eu conheço, mas não por esse nome... o que significa?

[Komodor]

Ola Sem.Ponto, o problema eh que nao sei como usar o CSS nas imagens, teria que aplicar o que?!
Sei criar Estilos no Dreamwaver (Criar novo estilo para rolover, link, fonte, table...) mas para as imagens exportadas do Fireworks nao sei exatamente como usar, se possivel pode me explicar ou passar um tuto?
Grato, Komodor.

Eu sou um muito viciado em GAMES de computador, e como nao ficam por fora os GAMERS criaram uma linguaguem usada no dia a dia nos jogos, LAG (nao sei as siglas) quer dizer que o jogo travou ou ha algum delay (espera) de poucos minutos.
Quando usei LAG no topico quer dizer a demora que ha para o site abrir no Browser.
Ex:
Hoje o jogo esta muito lagado (Esta muito travado/lento)
Tomara que tenha entendido e desculpa por ter usada essas siglas mais com um tempo muito grande em jogos eu me abituei

['' sem.Ponto]

É interessante combinar as imagens com o CSS. Existem várias coisas que podem ser feitas... mas cada caso é um caso.

Imagine que você tenha criado uma imagem com preenchimento Linear (de cima para baixo) no Fireworks com a medida 300 x 50. Podemos perceber que existe várias linhas de cores se repetindo. Invés de exportar essa imagem inteira e insirir no HTML, existe a possibilidade de combinar com CSS e deixar a imagem pequena para carregar rápido.

Para isso, pegue essa imagem 300 x 50 e, com a Slice Tool, selecione apenas uma área: 1 px de largura e 50 px de altura. Então não seria exportada uma imagem de 300 x 50 e sim, uma de 1 x 50.

Note que se pegarmos essa imagem de 1 x 50 e duplicar ela 300 vezes colando-as lado a lado, teremos o mesmo resultado de uma imagem de 300 x 50. O CSS é capaz de fazer isso... é ótimo para aplicar como fundo, pois o carregamento da imagem é muito mais rápido (300 vezes mais rápido nesse exemplo).

Faça um estudo de como aplicar o fundo (background) com CSS e repetir o fundo. Tem como repetir verticalmente, horizontalmente, e ambos. No próprio Dreamweaver é possível fazer isso com aqueles estilos.

[Komodor]

Ahhhhh.... estava vendo isso!
Eu aplico o Background e prencho para repetir, assim ela vai pegar a mesma imagem e vai repitila...
Interessante cara, nunca pensei que isso ajudaria mais enfim, vlws!

[provest]

o sistema self-servic de gerar html do fireworks empobrece um trabalho ao seu maximo.

['' sem.Ponto]

É verdade provest. O html fica muito grande e "sujo"... às vezes, não recomendo nem mesmo usar um editor visual de html para fazer a página, pois na minha opinião, a maioria das coisas que são feitas automaticamente não prestam.

Prefiro meu velho e bom bloco de notas para fazer html, e o Fireworks fica só para a criação do design.