(2010/12/21) DW - CS5 (Tabelas, fundos, PNGs etc)

[PabloAndrade 0]

Olá povo...

Boa tarde / bom dia / boa noite a todos.

 

Trabalho como DJ e artista gráfico (DJ desde 1991 e artista gráfico desde 2002) e durante um tempo atuei na área de webdesign. Há alguns anos fiz meu cadastro aqui no I-MASTERS visando buscar maiores explicações no uso de ferramentas para web como o DREAMWEAVER; mas, a tecnologia para a web recicla muito rápido e não tive como conciliar ARTE GRÁFICA / WEB / DISCOTECAGEM.

 

Antes de oferecer um trabalho meia boca a quem me procurava, resolvi parar com as criações e montagens de sites, por isso não sou um usuário participativo aqui do fórum.

 

Mesmo fora do mercado do web design, monto alguns sites simples (beeeem exporadicamente), para fins pessoais e para alguns amigos.

Um exemplo, é meu próprio website (www.djpido.com.br) totalmente desenhado, diagramado, montado, animado e digitado por mim.

É um trabalho bem feito, porém simples do ponto de vista web/tecnológico.

 

Bom...

Estou montando um pequeno site para um amigo que possui uma empresa de sonorização de festas e eventos, e estou (tentando) manobrar o DREAMWEAVER CS5. Achei ótimas as ferramentas para inserção direta de códigos CSS, mas há algumas coisas que me intrigam (já desde a época em que era minha intenção trabalhar nessa área).

 

 

Gostaria de saber se podem me ajudar com essas dúvidas:

 

1- Monto meus layouts (já é uma metodologia antiga minha, mas que dá certo) no PHOTOSHOP... Abro no FIREWORKS, fatio, "seto" botões etc e exporto as imagens. Ok! Abro o DW e monto o site em tabelas, conforme meu modelo no FIREWORKS.

Acontece que, SEMPRE que vou montar um site, no momento da construção, as peças (tabelas) se "espalham" pelo BROWSER no momento do PREVIEW. Ou seja, no DW, tenho o topo e o corpo do site todos juntos, grudados como no layout SLICEado no fireworks; mas no momento do PREVIEW (F12) o site se "despedaça"; criam-se espaços vagos entre as tabelas, o layout fica quebrado e nunca consigo me lembrar como fiz pra dar jeito e por tudo no lugar. O que lembro é que sempre passo por esse perrengue no momento da montagem de um site e, por vezes tenho de recomeçar e recomeçar. Como faço pra, na medida que monto um site, O PREVIEW se mantenha tal e qual está dentro do DW?

 

2- Quais as medidas de layout de página pra que um site se encaixe perfeitamente nas resoluções de "1024x768" sem que apareçam barras de rolagem?

Quero saber as medidas (de canvas no FIREWORKS, por exemplo) pra que, se eu decidir montar um site para uma resolução mínima de tela de e "1024x768" ele fique certinho na tela. Ok?!

 

3- Imagens de fundo no site:

A) Observem este site: http://www.cristalbroadcast.com.br

Se salvarem o plano de fundo, terão uma imagem enorme... Ok, no problems. Mas... Quais são os passos para que essa imagem de pano de fundo não "ande" pra lá e prá cá dependendo da resolução de tela do navegador? NO caso do exemplo em questão, é um site montado para visualização em "1024x768" e mesmo com a minha resolução (1280 x 960) a "moça saltitante" ali, fica sempre ao lado do menu, sem ir prá lá, ou prá cá... Qual a receita para FIXAR essa imagem de fundo?

 

B) Ainda tendo o site acima como exemplo, porque o pano de fundo é tãããão grande (1508x1739 pixels)? Há uma regra pra isso?

 

4- PNGs... Quais as limitações do uso de PNGs num site?´Li vários artigos sobre PNG e suas vantagens nso quesitos cor e transparências. Mas... Porque ainda a maioria dos sites são montados em JPG? Os BROWSERS mais atuais não suportam o PNG e suas características?

 

------------------

 

Era isso senhores.

Penso que, se essas dúvidas me forem sanadas... Dormirei tranquilo!

 

Abraço a todos e agradeço desde já!

 

------------------

 

Final de ano... Festas, viagens, férias!

Sei como é. Mas continuo no trabalho! Pesquisando, lendo e acima de tudo testando, testando, testando...

 

Mas, assim que alguém puder ajudar, agradeço muitíssimo!

Abraços!

[Apenas Eu 13]

Bom..eu ainda sou iniciante na área e tenho muito que aprender...mas posso tentar lhe ajudar com algumas duvidas:

 

duvida 1:

Ao invés de estruturar seu site em tabelas (que o deixa muito mais pesado e péssimo para o google), tenta se possivel, montá-lo em css. Caso você nunca tenha tentado fazer assim, o http://www.maujor.com/tutorial/lay2col-faux-colunm.php é de grande ajuda para aprender a usar o css.

Para testar o seu site, ao invés de usar o F12, tente, por gentileza, o Wamp Server, é muito mais eficiente;

Eu montava meu site todo em tabelas, mas por experiencia própria, percebi que o css é muuuuuitissimo melhor =D

No caso da tabela, talvez seja o problema ali no Align. Seleciona ela e tenta colocar ou tudo para esquerda ou direita, deve resolver este problema citado. Tente, por gentileza, fazer o mesmo dentro de cada célula naquela opcao Horiz e Vert.

 

duvida 2:

Para não aparecer as rolagens basta você adcionar este comando, no "body:" em seu html, exemplo:

<html>
<head>
<style>
body { 
overflow:hidden
}
</style>
</head>
</html>

 

duvida 3:

O cara montou aquilo numa folha a parte de CSS. Mas dá para fazer dentro do codigo HTML (não é recomendado, assim como a resposta da duvida 2)...mas:

<html>
<head>
<style>
body { 
background: url (de-onde-vem-a-imagem.jpg)no-repeat top center;
margin: 0; */ você pode usar também "auto" ao invés de "0"/*
}
</style>
</head>
</html>

 

no-repeat: Para que a imagem não se repita para compenssar possíveis espaços

top center: Para que ela fique fixa no topo e no centro da tela (ou da div).

 

duvida 4:

Os navegadores (browser) reconhecem normalmente o PNG. Geralmente prefirimos usar JPG porque a imagem fica mais leve. A vantagem do PNG é que a imagem basicamente não perde a qualidade ao salvá-la. Para certas funções, o jpg é mais vantagoso, outras o png e outras o gif. Por exemplo (no meu caso):

JPG: Utilizo quando a fotos;

PNG ou GIF: Para enfeite de tabelas e menus. Mas para que a imagem não fique pesado demais, no PhotoShop eu converto ela em "cores indexadas". Perde um pouquinho da qualidade, mas cumpre muito bem a função dela e fique bem levinha.

Bom...é isso espero ter ajudado em algoo =)

[PabloAndrade 0]

Então, "APENAS EU"... Eu não né? Você, que me respondeu (risos).

 

Bitcho... Muito obrigado pelas dicas!

Não sou do tipo de que espera tudo mastigado... Tento corro atráz, leio, testo, verifico....

Mas há horas em que uma ajuda poupa trabalho! Né?!

 

Valeu aí pelas muitas dicas. Quanto ao lance de estruturar um site todo em CSS, já há alguns anos venho zapeado por tutoriais (inclusive o do camarada lá que é o DINOSSAURO DAS CSS, o Maujor) mas minha cabeça ferve quando eu penso em COMO ASSENTAR NO "AR", SEM TABELAS, meu site, todo sliceado, botões e tals...

Creio que é algo que precisa sentar e fazer muitos testes porque quando penso nisso minha mente fica em branco saca? Quando penso em montar um layout no DW, já vou meio que esquematizando tudo (TABELADAMENTE FALANDO), mas se fosse montar tudo na base do CSS, nem sei como faria, até porque não domino muito códigos e nomenclaturas. Até me meteria a fazer mas seria algo do tipo "olha > copia > adapta > cola... Até que isso entrasse na inha cuca pra eu entender o funcionamento.

 

De qualquer forma, só estou montando uns projetos pequenininhos (e são os últimos da minha jornada em WEB DESIGN).

 

Por isso... Valeu pelas dicas (MUITO BOAS MESMO)

E quando pintar um projeto de tamanho razoável pra mim, vou fazer como tenho feito: PASSO A BOLA A UM PROFISSIONAL, CONHECEDOR DA ÁREA!!

 

 

AGRADEÇO, MAN!

[Apenas Eu 13]

mas é isso mesmo rapaiz... nosso tempo é muito limitado...para correr atras de cada detalhe sozinho!

Mas viu..sobre trocar as tabeladas pelo css, eu pensava + ou - como você, mas depois que consegui pegar o jeito...me arrependo de não ter feito isso antes. O modo code do DW ajuda muito. (dae você vai mexendo no cod. e depois dá para ter uma noção de como está ficando no modo editor)

Se eu tivesse aqui ainda o cod que peguei para entender o css, eu lhe enviava. É claro que requer um pouquinho de tempo para entender direitinho...mas o custo beneficio é muitissimo melhor. Eu comecei mesmo aprendendo com algo assim: http://maujor.com/tutorial/apoio_lay2faux/layout-2colunas-ex10.html

 

Para você ter uma noção...páginas que eu estruturava tudo com tabela tinha 1500...2500 linhas. Hoje. com CSS, o HTML não passa 500 linhas.

 

Valeuuu

[Felipe_Volpatto 1]

Toda a pessoa que esta iniciando ou ficou um bom tempo longe do código, acaba esquecendo de alguma coisa, isso é normal.

Quando comecei com HTML, usava muito o notepad do windows para realizar meus testes. Tinha amigos que usavam outras IDE's e davam rizada de mim por usar um negócio tão "simples". Mas te digo, o tempo que fiquei usando o notepad serviu-me para aprender todas as suas funcionalidades (isso se aplica também a CSS e PHP) enquanto eles faziam apenas o básico que é ir no design do DW e construir algo por lá, mas não sabiam nem colocar uma linha numa tabela.

 

HTML e CSS são linguagens simples mas como qualquer outra, precisam de atenção, precisam ser testadas e modificadas o tempo inteiro :)

Com certeza, a melhor forma de aprender, ser curioso! :)

 

Abraços

[Elektra 102]

Pablo, eis um exemplo que talvez possa lhe incentivar a aprender a usar divs e css no lugar de tabelas.

 

 

Acessei hoje a tarde, em busca de um papel de parede para o meu PC.

 

Os navegadores atuais podem exibir sua página completamente desformatada. Fui conferir o código fonte.

 

 

Chrome versão 8.0.552.224 (idem no IE8 e FF 3.6.13) >> Clique aqui

 

Safari versão 5.0.2 >> Clique aqui

 

Opera versão 10.63 >> Clique aqui

 

 

Para que isso não ocorra não precisa ser nenhuma fera, com um conhecimento básico sobre como estruturar uma página com divs dá pra fazer bonito em qualquer navegador.

 

 

Mesmo assim, tentando responder algumas questões que mencionou.

 

 

Tabelas são por natureza 'elásticas', para as divs usamos um tamanho fixo.

 

O tamanho para o encaixe perfeito conforme a resolução significa criar um layout líquido.

 

O PNG é o formato de imagem com melhor qualidade, mas também o mais pesado. Para web, conforme a situação, a escolha do JPEG ou mesmo GIF(quando poucas cores) agiliza o carregamento da página. Melhor ainda se usar o Save for Web and Devices do PS para compressão.

 

O Plano de fundo é gigantesco, mas não previu monitores atuais, os de 24 tem resolução 1920 x 1080, para isso certamente a imagem usa CSS para centralizar na tela e um background em cor compatível para o preenchimento lateral.

 

 

 

 

Abraços